<template>
  <div class="detail" v-if="pageShow">
    <template v-if="!list">
      <div class="card">
        <header>{{ detail.title }}</header>
        <u-gap height="16"></u-gap>
        <u-row v-if="detail.createUserId">
          <!--          <u-avatar :src="$cdn + 'common/xzh.png'" v-if="false"></u-avatar>-->
          <div class="u-avatar__img">
            {{detail.userName}}
          </div>
          <span class="user-name">
             {{detail.userName}}
          </span>
        </u-row>
        <u-gap height="32"></u-gap>
        <u-row>
          <img :src="$cdn + 'common/meeting.png'" alt="">
          <span :style="{color:color(detail.status)}">{{ $dict.getLabel('meetStatus', detail.status) }}</span>
        </u-row>
        <u-gap height="8"></u-gap>
        <u-row>
          <img :src="$cdn + 'common/date.png'" alt="">
          <span>{{
              detail.startTime && detail.startTime.substr(0, 16)
            }} 至 {{ detail.endTime && detail.endTime.substr(0, 16) }}</span>
        </u-row>
        <u-gap height="8"></u-gap>
        <u-row style="align-items: start;flex-wrap: nowrap;">
          <img :src="$cdn + 'common/location.png'" alt="">
          <span>{{ detail.address }}</span>
        </u-row>
      </div>
      <div class="card">
        <span>{{ detail.content }}</span>
      </div>
      <div class="card" v-if="detail.files && detail.files.length">
        <div class="label">相关附件</div>
        <div class="file" v-for="(item,index) in detail.files" @click="preFile(item)" :key="index">
          <u-row justify="between">
            <label class="left">
              <img :src="$cdn + 'common/appendix.png'" alt="">
              <span>{{ item.fileName }}.{{ item.postfix }}</span>
            </label>
            <span>{{ item.fileSizeStr }}</span>
          </u-row>
        </div>
      </div>
      <div class="card item-wrap">
        <u-row justify="between">
          <span>参会人</span>
          <label class="right" @click="list=true">
            查看全部<em>{{ detail.attendees && detail.attendees.length }}</em>人
            <div class="right-arrow"/>
          </label>
        </u-row>
      </div>

      <div class="footer cancel" v-if="detail.status==1 && detail.createUserId == user.id" @click="handleCancel">取消会议
      </div>

      <template v-else>
        <div class="footer" v-if="['1','2'].includes(detail.status) && ['0','3'].includes(detail.joinStatus)">
          <div class="leave" @click="updateStatus(0)">
            <img :src="$cdn + 'sass/leave.png'" alt="">请假
          </div>
          <div @click="toDo" class="leave">
            <img :src="$cdn + 'sass/toBe.png'" alt="">待定
          </div>
          <div @click="updateStatus(1)">确认会议</div>
        </div>

        <!--        <div class="footer" v-if="['1','2'].includes(detail.status) && detail.joinStatus!=0">-->
        <!--          <label>{{ detail.joinStatus|transform }}</label>-->
        <!--          <img :src="$cdn + tag(detail.joinStatus)" alt="">-->
        <!--        </div>-->
      </template>

    </template>
    <template v-else>
      <div class="att-list">
        <AiTopFixed>
          <u-tabs :list="tabs" :current="current" height="96" :is-scroll="false" bar-width="192"
                  @change="change"></u-tabs>
        </AiTopFixed>
        <div v-for="(item,index) in detail.attendees && detail.attendees.filter(e=>e.joinStatus==current)" :key="index"
             class="att-wrap">
          <div class="left">
            <u-avatar :src="item.avatar || (($cdn + 'common/xztx.png'))" size="74" mode="square"
                      style="margin-right: 8px"></u-avatar>
            <span v-text="item.name"/>
          </div>
          <!--          <img :src="$cdn + 'common/phone.png'" alt="" @click="call(item)">-->
        </div>
      </div>
    </template>
    <u-modal v-model="show" title="提示" show-cancel-button content='是否要取消该会议？' @confirm="onConfirm"></u-modal>

  </div>
</template>

<script>
import {mapActions, mapState} from "vuex";

export default {
  name: "detail",
  data() {
    return {
      detail: {},
      list: false,
      current: 0,
      pageShow: false,
      show: false,
      id: null,
    }
  },
  onLoad(opt) {
    this.id = opt.id;
    document.title = "会议详情";
  },
  computed: {
    ...mapState(["user"]),
    tabs() {
      return [
        {name: this.count(0) + "人未确认"},
        {name: this.count(1) + "人已确认"},
        {name: this.count(2) + "人已请假"},
        {name: this.count(3) + "人待定"},
      ]
    },
  },
  methods: {
    onConfirm() {
      this.$http.post("/app/appmeetinginfo/cancel", null, {
        params: {
          meetingId: this.id,
        }
      }).then(res => {
        if (res.code == 0) {
          this.$u.toast("取消成功");
          this.getDetail();
        }
      })
    },
    handleCancel() {
      this.show = true;
    },
    toDo() {
      this.$http.post("/app/appmeetinginfo/tobeConfirm", null, {
        params: {
          meetingId: this.id,
        }
      }).then(res => {
        if (res.code == 0) {
          this.$u.toast("会议待定");
          setTimeout(_ => {
            uni.navigateBack();
          }, 800)
        }
      })
    },
    count(sta) {
      return this.detail.attendees ? this.detail.attendees?.filter(e => e.joinStatus == sta)?.length : 0;
    },
    change(index) {
      this.current = index;
      this.detail = {};
      this.getDetail();
    },
    call(item) {
      if (item.phone) {
        uni.makePhoneCall({
          phoneNumber: item.phone
        });
      }
    },
    ...mapActions(['previewFile', 'injectJWeixin']),
    preFile(e) {
      if ([".jpg", ".png", ".gif"].includes(e.postfix.toLowerCase())) {
        uni.previewImage({
          current: e.url,
          urls: [e.url]
        })
      } else {
        this.previewFile({...e})
      }
    },
    tag(status) {
      return {
        "1": "common/2confirmed2.png",
        "2": "common/2absent2.png"
      }[status]
    },
    updateStatus(status) {
      this.$http.post(status == 0 ? "/app/appmeetinginfo/absent" : "/app/appmeetinginfo/confirm", null, {
        params: {
          meetingId: this.id,
          reason: status == 0 ? "" : null
        }
      }).then(res => {
        if (res.code == 0) {
          this.$u.toast(status == 0 ? "请假成功" : "确认成功")
          this.getDetail()
        }
      })
    },
    color(status) {
      if (status == 1) {
        return "#FF8822"
      }

      if (status == 2) {
        return "#1365DD"
      }

      if (status == 3) {
        return "#FF4466"
      }

      return "#343D65"
    },
    getDetail() {
      this.$http.post("/app/appmeetinginfo/info-id", null, {
        params: {id: this.id}
      }).then(res => {
        if (res && res.data) {
          this.detail = res.data
          this.pageShow = true
        }
      })
    }
  },
  created() {
    this.injectJWeixin(['sendChatMessage']).then(() => {
      this.getDetail()
    })
  },

  onShow() {
    document.title = "会议详情";
    this.$dict.load("meetStatus");
    wx.hideOptionMenu();
  },
  filters: {
    transform(status) {
      if (status == 1) {
        return "已确认"
      }
      if (status == 2) {
        return "已请假"
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.detail {
  min-height: 100%;
  background-color: #F5F5F5;
  padding-bottom: 140px;


  ::v-deep .AiTopFixed {
    margin-bottom: 16px;

    .content {
      padding: 0 !important;
    }
  }


  .att-list {
    min-height: 100%;

    .att-wrap {
      display: flex;
      height: 112px;
      align-items: center;
      justify-content: space-between;
      background-color: #ffffff;
      box-sizing: border-box;
      padding: 112px 50px 0;
      border-bottom: 1px solid #E4E5E6;

      .left {
        display: flex;
        align-items: center;

        .name {
          font-size: 30px;
          font-weight: 600;
          color: #333333;
        }
      }

      & > img {
        width: 48px;
        height: 48px;
      }
    }
  }

  .card {
    background-color: #FFFFFF;
    margin-bottom: 8px;
    box-sizing: border-box;
    padding: 16px 32px;

    header {
      font-size: 40px;
      font-weight: 600;
      color: #333333;
      line-height: 64px;
      letter-spacing: 1px;
    }

    .u-row {
      & > div {
        border-radius: 50%;
        text-align: center;
        font-size: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        /*margin-left: 8px;*/
      }

      & > span {
        font-size: 30px;
        color: #343D65;
        margin-left: 16px;
      }

      ::v-deep .u-avatar__img {
        width: 56px;
        height: 56px;
        vertical-align: middle;
        color: #ffffff;
        background-color: #2266FF;
        font-size: 16px;
      }

      .user-name {
        font-size: 30px;
        color: #343D65;
      }

      img {
        width: 48px;
        height: 48px;
      }
    }

    & > span {
      font-size: 32px;
      color: #333333;
      line-height: 48px;
      letter-spacing: 1px;
      display: inline-block;
      box-sizing: border-box;
      padding: 16px 0;
    }

    .label {
      height: 96px;
      font-size: 32px;
      color: #333333;
      display: flex;
      align-items: center;
      margin-bottom: 16px;
    }

    .file {
      height: 128px;
      background: #FFFFFF;
      border-radius: 8px;
      border: 1px solid #CCCCCC;
      box-sizing: border-box;
      padding: 0 16px;
      margin-bottom: 32px;

      & > .u-row {
        height: 100%;

        .left {
          width: 522px;
          display: flex;
          align-items: center;

          & > img {
            width: 96px;
            height: 96px;
          }

          & > span {
            font-size: 32px;
            color: #333333;
            display: inline-block;
            line-height: 44px;
            text-overflow: ellipsis;
            overflow-x: hidden;
            white-space: nowrap;
          }
        }

        & > span {
          font-size: 28px;
          color: #999999;
        }
      }
    }

    .active {
      background-color: #F3F6F9;
    }

    .name {
      font-size: 32px;
      font-weight: 400;
      color: #333333;
    }

    .wrap {
      height: 112px;
      display: flex;
      align-items: center;
      position: relative;

      &:after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        width: 622px;
        height: 2px;
        background-color: rgba(216, 221, 230, 0.5);
      }

      & > label {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background-color: #4E8EEE;
        font-size: 28px;
        font-weight: 600;
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }

  .item-wrap {
    height: 112px;
    padding: 0 32px;

    .u-row {
      height: 100%;

      & > span {
        font-size: 32px;
        font-weight: 400;
        color: #333333;
      }
    }

    .right {
      font-size: 28px;
      color: #999999;
      display: flex;
      align-items: center;

      em {
        font-style: normal;
        color: #1365DD;
      }

      .right-arrow {
        width: 16px;
        height: 16px;
        border-top: 5px solid #CCCCCC;
        border-right: 5px solid #CCCCCC;
        transform: rotate(45deg);
      }
    }
  }

  .footer {
    height: 112px;
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    background-color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;

    & > div {
      font-size: 28px;
      color: #666666;
      display: flex;
      flex-direction: column;

      & > img {
        width: 48px;
        height: 48px;
      }
    }

    & > div:nth-child(1), & > div:nth-child(2) {
      width: 135px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    & > div:last-child {
      width: calc(100% - 270px);
      height: 100%;
      color: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #1365DD;
    }

    & > label {
      font-size: 36px;
      font-weight: 400;
      color: #999999;
    }

    /*img {*/
    /*  width: 158px;*/
    /*  height: 104px;*/
    /*  position: absolute;*/
    /*  right: 0;*/
    /*  top: 0;*/
    /*}*/
  }

  .cancel {
    color: #ffffff;
    font-size: 36px;
    background-color: #005DFF
  }
}
</style>
