<template>
  <div class="content">
    <van-nav-bar title="班级点名情况" left-arrow @click-left="onClickLeft" />
    <van-cell
      title="选择单个日期"
      is-link
      :value="currentTime"
      @click="showCalendar"
    />
    <van-calendar
      :show="show"
      @confirm="onConfirm"
      :min-date="new Date('2021/01/01')"
      @close="show = false"
    />
    <van-list>
      <van-cell
        v-for="item in list"
        :key="item"
        @click="detailData(item.cm_id), (toDetail = true)"
      >
        <template #title>
          <div
            style="display: flex; justify-content: space-between; color: black"
          >
            <span>{{ item.cm_name }}</span>
            <span>{{ item.ydmqk_desc }}</span>
          </div>
        </template>

        <template #label>
          <div style="color: black">
            <span>{{ item.ydmqk_alyz_desc }}</span>
          </div>
        </template>
      </van-cell>
    </van-list>
    <div v-show="toDetail" class="cover"></div>
    <div class="detail-list" v-if="toDetail">
      <van-icon @click="toDetail = false" name="cross" size="0.4*13.3vw" />
      <div class="listStyle">
        <table
          v-if="member.length > 0"
          cellpadding="0"
          cellspacing="0"
          align="center"
          valign="middle"
        >
          <tr v-for="(item, index) in member" :key="index">
            <td colspan="2">{{ item.realname }}</td>
            <td colspan="3">{{ item.ydmzt_desc }}</td>
          </tr>
        </table>
        <div v-else>暂无数据</div>
      </div>
    </div>
  </div>
</template>

<script>
import { team_list } from "./api";

export default {
  data() {
    return {
      currentTime: "",
      show: false,
      loading: false,
      kxq_code: "",
      teamData: [],
      list: [],
      toDetail: false,
      member: [],
    };
  },
  methods: {
    showCalendar() {
      this.show = true;
    },
    formatDate(date) {
      return `${date.getFullYear()}-${
        date.getMonth() + 1 >= 1 && date.getMonth() + 1 <= 9
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1
      }-${
        date.getDate() >= 0 && date.getDate() <= 9
          ? "0" + date.getDate()
          : date.getDate()
      }`;
    },
    onConfirm(date) {
      this.currentTime = this.formatDate(date);
      this.onLoad();
      this.show = false;
    },

    getTeamData() {
      team_list().then((res) => {
        this.teamData = res.data.page_data;
        this.teamData.map((item) => {
          if (item.kxq_sfdqxq_option_k == "1") {
            this.kxq_code = item.kxq_code;
            this.onLoad();
          }
        });
      });
    },
    getTimeFormat() {
      var date = new Date();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      this.currentTime = date.getFullYear() + "-" + month + "-" + strDate;
    },

    onLoad() {
      this.loading = true;
      request({
        url: "/khfw/kccq/class_ydmqk",
        data: {
          kxq_code: this.kxq_code,
          date: this.currentTime,
        },
      }).then((res) => {
        this.list = res.data;
        this.loading = false;
      });
    },
    detailData(id) {
      this.list.map((item) => {
        if (item.cm_id == id) {
          this.member = item.member;
        }
      });
    },
    onClickLeft() {
      this.$router.push({ name: "user" });
    },
  },
  mounted() {
    this.getTeamData();
    this.getTimeFormat();
  },
};
</script>

<style  lang="scss" scoped>
.van-tabs__nav {
  background: #fff;
  .van-tab {
    margin-right: 0.5 * 13.3vw;
  }
  .van-tab {
    border-bottom: 0.1 * 13.3vw solid rgba(0, 0, 0, 0);
  }
  .van-tab--active {
    font-weight: 400;
    box-sizing: border-box;
    border-bottom: 0.05 * 13.3vw solid #003eee;
  }
}
.van-tabs__line {
  background: unset;
}
.van-tabs__content {
  //   margin-top: 0.1 * 13.3vw;
  line-height: 0;
  padding: 0;
}

::v-deep .van-nav-bar {
  width: 100%;
  height: 1 * 13.3vw;
  line-height: 1 * 13.3vw;
  background-color: #003eee;
  .van-nav-bar__title {
    color: #fff !important;
    font-size: 0.36 * 13.3vw;
    font-weight: 350;
  }
  .van-nav-bar__text {
    color: #fff !important;
    font-size: 0.32 * 13.3vw;
    font-weight: 350;
  }
}
.cover {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000000;
  opacity: 0.3;
}
.detail-list {
  width: 6.8 * 13.3vw;
  // height: 8.24 * 13.3vw;
  color: #333333;
  background-color: #fff;
  position: fixed;
  top: 1.5 * 13.3vw;
  left: 0.32 * 13.3vw;
  border-radius: 0.1 * 13.3vw;
  z-index: 5;
  padding: 0.2 * 13.3vw 0.1 * 13.3vw;
  box-sizing: border-box;
  i {
    position: absolute;
    right: 0.2 * 13.3vw;
    top: 0.23 * 13.3vw;
  }
  .listStyle {
    height: 8 * 13.3vw;
    margin: 0.5 * 13.3vw 0.3 * 13.3vw;
    overflow: scroll;
  }
}

table {
  table-layout: fixed;
  width: 100%;
  padding: auto;
  border-top: 1px solid #000;
  border-left: 1px solid #000;
}

tr {
  height: 30px;
  line-height: 30px;
  text-align: left;
}

td {
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
  box-sizing: border-box;
  padding-left: 1%;
}
</style>