<template>
  <div>
    <header>
      <div class="flex title">
        <h3>会议名称 {{ detailMsg.hysyd_hymc }}</h3>
        <div>
          <span v-if="detailMsg.status == 1">未开始</span>
          <span v-if="detailMsg.status == 2">进行中</span>
          <span v-if="detailMsg.status == 3">已结束</span>
        </div>
      </div>
      <p>会议室 {{ detailMsg.hysyd_hys_mc }}</p>
      <p>
        会议时间 {{ detailMsg.hysyd_hysj_ks }}-{{ detailMsg.hysyd_hysj_js }}
      </p>
      <div>
        会议资料:
        <template v-if="detailMsg.hysyd_hyzl">
          <div
            v-for="(wj, index) in detailMsg.hysyd_hyzl.split(';')"
            :key="index"
          >
            <a :href="https + wj.split('|')[0]">
              {{ wj.split("|")[1] }}
            </a>
          </div>
        </template>
        <span v-else>未上传附件</span>
      </div>
    </header>
    <nav class="flex" v-show="detailMsg.hysyd_ewm == '1'">
      <div class="left">
        <div class="ewm">
          <canvas ref="canvas"></canvas>
        </div>
        <p style="font-size: 14px; color: #265cd4; text-align: center">
          请扫描二维码进行签到
        </p>
      </div>
      <div class="right">
        <el-table :data="detailMsg.sign" style="width: 100%">
          <el-table-column
            label="序号"
            align="center"
            type="index"
            width="50"
          ></el-table-column>
          <el-table-column prop="realname" label="参会成员" width="100" />
          <el-table-column label="签到状态" width="180">
            <template slot-scope="scope">
              <span v-if="scope.row.is_sign == 0">未签到</span>
              <span class="signed" v-if="scope.row.is_sign == 1">已签到</span>
            </template>
          </el-table-column>
          <el-table-column label="签到时间">
            <template slot-scope="scope">
              <span class="signed" v-if="scope.row.dateline">{{
                scope.row.dateline
              }}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </nav>
  </div>
</template>
<script>
import QRCode from "qrcode";
import PreviewAttach from "@/components/PreviewAttach/index.vue";
import { hysyd_detail } from "./api";
export default {
  name: "index",
  components: { PreviewAttach },
  data() {
    return {
      detailMsg: {},
      https: window.globalVariables.api,
    };
  },
  methods: {
    getDetail() {
      let data = {
        site: "jnmf",
        hysyd_id: this.$route.params.yd_id,
      };
      hysyd_detail(data).then((res) => {
        if (res.code == "1") {
          this.detailMsg = res.data.one_info;
          this.makeQrcode();
        }
      });
    },
    makeQrcode() {
      let opts = {
        errorCorrectionLevel: "H",
        type: "image.png",
        width: 304,
        height: 304,
        text: this.detailMsg.qrcode,
      };
      QRCode.toCanvas(this.$refs.canvas, this.detailMsg.qrcode, opts);
    },
  },
  mounted() {
    this.getDetail();
  },
};
</script>
<style lang="scss" scoped>
.flex {
  display: flex;
}
header {
  padding: 15px 20px;
  box-sizing: border-box;
  .title {
    justify-content: space-between;
  }
}
nav {
  border-top: 1px solid #e3e3e3;
  padding: 15px 20px;
  box-sizing: border-box;
  .left {
    width: 310px;
    img {
      width: 304px;
      height: 304px;
      text-align: center;
    }
  }
  .right {
    width: 540px;
    margin: 0 70px;
    .signed {
      color: #265cd4;
    }
  }
}
</style>