<template>
  <div class="page">
    <div class="tab-list">
      <div
          class="tab-item"
          v-for="(item, index) in tabList"
          :key="index"
          :class="tabIndex == index ? 'tab-active' : ''"
          @click="tabClick(index)"
      >
        {{ item.label }}({{ item.value }})
        <span class="line"></span>
      </div>
    </div>
    <div
        class="user-list"
        v-for="(item, index) in list"
        :key="index"
        v-if="tabIndex != 0"
    >
      <div class="user-item">
        <div class="user-bg">{{ formatName(item.meetingUserName) }}</div>
        <div class="user-info">
          <div class="user-name">{{ item.meetingUserName }}</div>
        </div>
      </div>
    </div>
    <div
        class="user-list"
        v-for="(item, index) in list"
        :key="index"
        v-if="tabIndex == 0"
    >
      <div
          class="user-item"
          v-if="item.meetingUserRole == 0 || item.meetingUserRole == 3"
      >
        <div class="user-bg">{{ formatName(item.meetingUserName) }}</div>
        <div class="user-info">
          <div class="user-name">{{ item.meetingUserName }}</div>
        </div>
      </div>
    </div>
    <AiEmpty v-if="list.length == 0 || list == null"/>
  </div>
</template>
<script>
export default {
  appName: "参会人员",
  data() {
    return {
      tabList: [
        {label: "参与", value: "0"},
        {label: "已到", value: "0"},
        {label: "未到", value: "0"},
        // { label: "请假", value: "0" },
      ],
      tabIndex: 0,
      id: "",
      data: {},
      list: [],
    };
  },
  onLoad(options) {
    uni.setNavigationBarColor({
      frontColor: "#ffffff",
      backgroundColor: "#D7261E",
    })
    this.id = options.id;
    this.getDetailInfo();
  },
  methods: {
    tabClick(index) {
      this.tabIndex = index;
      if (index == 0) {
        this.list = this.data.appThreeMeetingUserList;
      }
      if (index == 1) {
        this.list = this.data.isArriveLIst;
      }
      if (index == 2) {
        this.list = this.data.notArriveLIst;
      }
      if (index == 3) {
        this.list = this.data.leaveLIst;
      }
    },
    getDetailInfo() {
      this.$instance
      .post(
          `/app/appthreemeetinginfo/queryDetailById?id=${this.id}`,
          null,
          {}
      )
      .then((res) => {
        if (res.data) {
          var data = res.data;
          if (data.appThreeMeetingUserList) {
            this.tabList[0].value = data.participantList.length;
          }
          if (data.isArriveLIst) {
            this.tabList[1].value = data.isArriveLIst.length;
          }
          if (data.isArriveLIst) {
            this.tabList[2].value = data.notArriveLIst.length;
          }
          // if (data.isArriveLIst) {
          //   this.tabList[3].value = data.leaveLIst.length;
          // }
          this.data = data;
          this.list = this.data.appThreeMeetingUserList;
        }
      });
    },
    formatName(name) {
      if (name == undefined) {
        return;
      }
      return name.substr(
          name.length - 2,
          name.length > 2 ? name.length - 1 : name.length
      );
    },
  },
};
</script>
<style lang="scss" scope>
@import "~dvcp-wui/common";

.page {
  background-color: #f4f6f8;

  .tab-list {
    display: flex;
    background-color: #D7261E;
    line-height: 96px;

    .tab-item {
      flex: 1;
      text-align: center;
      color: #fff;
      font-size: 28px;
      position: relative;
    }

    .tab-active {
      .line {
        position: absolute;
        bottom: 14px;
        left: 50%;
        margin-left: -20px;
        display: inline-block;
        width: 40px;
        height: 4px;
        border-radius: 4px;
        background: #fff;
      }
    }
  }

  .user-list {
    background-color: #fff;

    .user-item {
      height: 112px;
      padding-top: 16px;
      box-sizing: border-box;

      .user-bg {
        display: inline-block;
        width: 80px;
        height: 80px;
        background-color: #4e8eee;
        color: #fff;
        text-align: center;
        line-height: 80px;
        margin: 0 16px 032px;
        font-size: 28px;
        border-radius: 50%;
        vertical-align: top;
      }

      .user-info {
        display: inline-block;
        width: 622px;
        height: 96px;
        border-bottom: 2px solid #d8dde6;
        box-sizing: border-box;

        .user-name {
          line-height: 44px;
          color: #333;
          font-size: 32px;
          margin-top: 16px;
        }
      }
    }

    .user-item:nth-last-of-type(1) {
      .user-info {
        border-bottom: 0;
      }
    }
  }
}
</style>
