<template>
  <div class="page">
    <div class="detail-info">
      <div class="info-title">{{ data.meetingAgenda }}</div>
      <div class="item-info">
        <span class="info-label">会议状态：</span>
        <span class="info-value">{{ $dict.getLabel('postStatus', data.postStatus) }}</span>
      </div>
      <div class="item-info">
        <span class="info-label">举办方式：</span>
        <span class="info-value">{{ data.isOnline == 1 ? '线上会议' : '线下会议' }}</span>
      </div>
      <div class="item-info">
        <span class="info-label">会议分类：</span>
        <span class="info-value" v-if="data.meetingClassification && data.meetingClassification.length">
          <span v-for="(item, index) in data.meetingClassification" :key="index">
            {{ $dict.getLabel('meetingClassification', item) }}
            <span v-if="index < data.meetingClassification.length - 1">,</span>
          </span>
        </span>
        <span class="info-value" v-else>-</span>
      </div>
      <div class="item-info" v-if="showAll">
        <span class="info-label">会议时间：</span>
        <span class="info-value">{{ data.startTime || '-' }}</span>
      </div>
      <div class="item-info" v-if="showAll">
        <span class="info-label">签到时间：</span>
        <div class="info-value flex">
          <i v-if="data.signMethod == 1 && signStart">{{ signStart }}</i>
          <i class="sign-end" v-if="data.signMethod == 1 && signEnd">至 {{ signEnd }}</i>
          <i v-if="data.signMethod != 1">-</i>
        </div>
      </div>
      <div class="item-info" v-if="showAll">
        <span class="info-label">会议地点：</span>
        <span class="info-value">{{ data.meetingAddress || '-' }}</span>
      </div>
      <!-- <div class="item-info" v-if="showAll">
        <span class="info-label">会议主题：</span>
        <span class="info-value" v-if="data.topicClassification &&  data.topicClassification.length">
          <span v-for="(item, index) in data.topicClassification" :key="index">
            {{ $dict.getLabel('topicClassification', item) }}
            <span v-if="index < data.topicClassification.length - 1">,</span>
          </span>
        </span>
        <span class="info-value" v-else>-</span>
      </div> -->
      <div class="item-info" v-if="showAll">
        <span class="info-label">主持人员：</span>
        <span class="info-value">{{ data.hostName || '-' }}</span>
      </div>
      <div class="item-info" v-if="showAll">
        <span class="info-label">发布人员：</span>
        <span class="info-value">{{ data.createUserName || '-' }}</span>
      </div>
      <div class="item-info" v-if="showAll">
        <span class="info-label">签到人员：</span>
        <span class="info-value" v-if="data.chargeOfSignInList && data.chargeOfSignInList.length">
          <span v-for="(item, index) in data.chargeOfSignInList" :key="index">
            {{ item.userName }}
            <span v-if="index < data.chargeOfSignInList.length - 1">,</span>
          </span>
        </span>
        <span class="info-value" v-else>-</span>
      </div>
      <div class="item-info" v-if="showAll">
        <span class="info-label">记录人员：</span>
        <span class="info-value">{{ data.recorderName || '-' }}</span>
      </div>
      <div class="retract-btn" @click="divAll()">
        <span>{{ btnspan }}</span>
        <image src="https://cdn.cunwuyun.cn/img/down-icon-fff.png"
               :class="btnspan == '收起' ? 'down-icon icon-active' : 'down-icon'"></image>
      </div>
    </div>
    <div class="page-title">会议内容</div>
    <div class="info-content mar-b8" v-html="data.meetingDescription"></div>
    <div class="page-title mar-b8" @click="toSessionUser">参会情况
      <span class="pad-l7" v-for="(item, index) in titleList" :key="index">
        <span class="color-999999">{{ item.label }}</span>
        <span class="color-1365DD">({{ item.value }})</span>
      </span>
      <img src="https://cdn.cunwuyun.cn/img/down.svg" class="right-icon">
    </div>
    <div class="user-list">
      <div class="user-item" v-for="(item, index) in data.appThreeMeetingUserList" :key="index"
           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>
    <div class="btn-bottom" v-if="signStatus < 1 || data.isOnline == 1">
      <div class="btn" @click="signMeeting" v-if="data.isOnline != 1 && isSignEnd">签到</div>
      <div class="btn" @click="isWeiXin" v-if="data.isOnline == 1">进入直播间</div>
    </div>
    <div class="mask" v-if="showMask" @click="showMask=false">
      <img src="https://cdn.cunwuyun.cn/guangdong/h5/mask-text.png" alt="" class="text-img">
    </div>
    <img src="https://cdn.cunwuyun.cn/guangdong/h5/vote-img.png" alt="" class="vote-img" v-if="data.isVote == 1"
         @click="toVote">
  </div>
</template>
<script>
import {mapState} from 'vuex'

export default {
  appName: "会议详情",
  data() {
    return {
      titleList: [
        {label: '参与', value: '0'},
        {label: '已到', value: '0'},
        {label: '未到', value: '0'},
        // {label: '请假', value: '0'}
      ],
      id: '',
      data: {},
      btnspan: '展开',
      showAll: false,
      partyId: '',
      signStart: '',
      signEnd: '',
      signStatus: '', //0表示显示签到
      showMask: false,
      isSignEnd: false
    };
  },
  computed: {
    ...mapState(['user']),
  },
  onLoad(options) {
    uni.setNavigationBarColor({
      frontColor: "#ffffff",
      backgroundColor: "#D7261E",
    })
    if (!uni.getStorageSync("token")) {
      uni.setStorageSync("token", options.token)
    }
    this.$dict.load('postStatus', 'meetingClassification', 'topicClassification').then(() => {
      this.id = options.id
      this.signStatus = options.signStatus
      this.getDetailInfo()
    })
  },
  methods: {
    isWeiXin() {
      uni.navigateTo({url: `./ylinkMeetingRoom?meetingNum=${this.data.onlineNum}&pwd=${this.data.onlinePwd}`})
    },
    copy() {
      var token = uni.getStorageSync('token')
      uni.setClipboardData({data: `https://gdpartyh5.cunwuyun.cn/pages/party/threeSessions/threeSessionsDetail?id=${this.id}&signStatus=${this.signStatus}&token=${token}`});
    },
    signMeeting() {
      this.$instance.post(`/app/appthreemeetinguser/signByMeetingIdAndUserIdForWX?meetingId=${this.data.id}&userId=${this.user.partyId}`, null, {}).then(res => {
        if (res.code == 0) {
          this.$u.toast('签到成功')
          this.getDetailInfo()
          this.signStatus = 1
          uni.$emit('updateList')
        }
      }).catch(err => {
        uni.showToast({
          icon: 'none',
          title: err,
          duration: 2000
        });
      })
    },
    toContent() {
      uni.navigateTo({
        url: './threeSessionsContent?id=' + this.id
      })
    },
    toSessionUser() {
      uni.navigateTo({
        url: './threeSessionsUser?id=' + this.id
      })
    },
    getDetailInfo() {
      this.$loading()
      this.$instance.post(`/app/appthreemeetinginfo/queryDetailById?id=${this.id}`).then(res => {
        if (res?.data) {
          var data = res.data
          if (data.startTime && data.meetingBefore) {
            var dStart = new Date(data.startTime.replaceAll('-', '/'));
            var timeStart = dStart.getTime();
            var minStart = (Number(data.meetingBefore)) * 60000
            var totalStart = timeStart - minStart;
            this.signStart = this.countTime(totalStart);
          }
          if (data.startTime && data.meetingAfter) {
            var dEnd = new Date(data.startTime.replaceAll('-', '/'));
            var timeEnd = dEnd.getTime();
            var minEnd = (Number(data.meetingAfter)) * 60000
            var totalEnd = timeEnd + minEnd;
            this.signEnd = this.countTime(totalEnd);
            this.isSignEnd = new Date(dEnd.getTime() + minEnd).getTime() > new Date().getTime()
          }
          data.meetingClassification = data.meetingClassification.split(',')
          this.titleList[0].value = data.participantList.length || '0'
          if (data.isArriveLIst) {
            this.titleList[1].value = data.isArriveLIst.length
          }
          if (data.isArriveLIst) {
            this.titleList[2].value = data.notArriveLIst.length
          }
          // if (data.isArriveLIst) {
          //   this.titleList[3].value = data.leaveLIst.length
          // }
          this.data = data

          // var methodsObj = data.reminderMethod
          // this.objInit(methodsObj, 'reminderMethod')

          // var meetingClassificationObj = data.meetingClassification
          // this.objInit(meetingClassificationObj, 'meetingClassification')

          // var topicClassificationObj = data.topicClassification
          // this.objInit(topicClassificationObj, 'topicClassification')
        }

      }).then(()=>this.$hideLoading())
    },
    objInit(obj, name) {
      this.data[name] = []
      for (let i in obj) {
        if (obj[i] !== '') {
          this.data[name].push(obj[i])
        }
      }
    },
    //会议签到时间计算
    countTime(total) {
      var now = new Date(total)
      var y = now.getFullYear();
      var m = now.getMonth() + 1;
      m = m < 10 ? ('0' + m) : m;
      var da = now.getDate();
      da = da < 10 ? ('0' + da) : da;
      var h = now.getHours();
      h = h < 10 ? ('0' + h) : h;
      var minute = now.getMinutes();
      minute = minute < 10 ? ('0' + minute) : minute;
      var seconds = now.getSeconds();
      seconds = seconds < 10 ? ('0' + seconds) : seconds;
      var resDate = y + '-' + m + '-' + da + ' ' + h + ':' + minute + ":" + seconds;
      resDate = resDate.substring(0, 16)
      return resDate;
    },
    formatName(name) {
      if (name == undefined) {
        return
      }
      return name.substr(name.length - 2, name.length > 2 ? (name.length - 1) : name.length)
    },
    divAll() {
      if (this.btnspan == '展开') {
        this.btnspan = '收起'
        this.showAll = true
      } else {
        this.btnspan = '展开'
        this.showAll = false
      }
    },
    toVote() {
      var myVote = ''
      if (this.data.myVote) {
        myVote = this.data.myVote
      }
      uni.navigateTo({
        url: `./vote?id=${this.id}`
      })
    }
  },
};
</script>
<style lang="scss" scope>
@import "~dvcp-wui/common";

.page {
  width: 100%;
  overflow-x: hidden;
  background-color: #F4F6F8;

  .mask {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .8);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;

    .cancel-img {
      width: 219px;
      height: 94px;
      margin: 580px 0 166px 266px;
    }

    .text-img {
      position: absolute;
      top: 0;
      right: 0;
      width: 90%;
    }

    .btn {
      width: 50%;
      line-height: 112px;
      background: #D7261E;
      color: #fff;
      font-size: 32px;
      text-align: center;
      position: absolute;
      bottom: 0;
      right: 0;
    }
  }

  .right-icon {
    width: 32px;
    height: 32px;
    float: right;
    vertical-align: middle;
    transform: rotate(270deg);
    padding: 0 72px 0 0;
  }

  .vote-img {
    width: 140px;
    height: 140px;
    position: fixed;
    bottom: 344px;
    right: 48px;
  }

  .btn-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9;
    width: 100%;
    display: flex;

    .btn {
      flex: 1;
      line-height: 112px;
      background: #D7261E;
      color: #fff;
      font-size: 32px;
      text-align: center;
    }

    .sign {
      background-color: #fff;
      color: #666;
    }
  }

  .detail-info {
    padding: 16px 0 80px 32px;
    border-bottom: 2px solid #D8DDE6;
    background-color: #D7261E;
    position: relative;

    .info-title {
      line-height: 64px;
      font-size: 40px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #fff;
      word-break: break-all;
      margin-bottom: 16px;
    }

    .item-info {
      display: flex;
      line-height: 48px;
      font-size: 28px;
      margin-bottom: 8px;

      .info-label {
        color: #fff;
      }

      div {
        display: flex;
        align-items: center;
      }

      .info-value {
        flex: 1;
        color: #FFE8E8;
      }

      .item-status0 {
        color: #FF9B2B;
      }

      .item-status1 {
        color: #2EA222;
      }

      .item-status2 {
        color: #343D65;
      }

      .item-status3 {
        color: #5A98F2;
      }

      .item-status4 {
        color: #f46;
      }

    }

    .retract-btn {
      line-height: 80px;
      text-align: center;
      font-size: 28px;
      color: #fff;
      position: absolute;
      bottom: 0;
      width: 690px;

      .down-icon {
        width: 32px;
        height: 32px;
        margin-left: 4px;
        vertical-align: middle;
        transition: all .3s ease-in-out;
      }

      .icon-active {
        transform: rotate(180deg);
      }
    }
  }

  .page-title {
    line-height: 96px;
    color: #333;
    font-size: 32px;
    padding-left: 32px;
    background-color: #fff;

    span {
      font-size: 28px;
    }
  }

  .info-content {
    padding: 16px 32px;
    background-color: #fff;
    line-height: 48px;
    color: #333;
    font-size: 32px;
    box-sizing: border-box;
  }

  .user-list {
    padding-bottom: 140px;

    .user-item {
      background-color: #fff;
      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 0 32px;
        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;
      }
    }
  }

  .mar-b8 {
    margin-bottom: 16px;
  }

  .color-1365DD {
    color: #1365DD;
  }

  .color-999999 {
    color: #999999;
  }

  .pad-l7 {
    padding-left: 14px;
  }
}
</style>
