<template>
    <div class="mdt-source">
        <div class="mdt-panel-head">
        <p :class="{ active: current == 0 }">
          <span @click="current = 0">会议PPT</span>
        </p>
        <p :class="{ active: current == 1 }">
          <span @click="current = 1">会议记录</span>
        </p>
        <!-- <p :class="{ active: current == 2 }">
          <span @click="current = 2">图片批注</span>
        </p> -->
      </div>
      <div class="mdt-source-con">
        <commonMark readonly :multiple="false" size="small" :item="allFileData" v-show="current != 1"/>
        <!-- <preview v-if="current == 0"/> -->
        <el-scrollbar style="height:100%" class="meeting-record" v-show="current == 1">
          <p class="meeting-record-text"><pre>{{textarea}}</pre></p>
        </el-scrollbar>
        <!-- <div v-if="current == 2">图片批注</div> -->
      </div>
    </div>
</template>
<script>
import { getMdtRecord,getSourceBack } from '@/request/mdt.js'
import commonMark from '../components/common-mark.vue'
export default {
  components: { commonMark },
  props: {
    mdtId: [String, Number]
  },
  data() {
    return {
      current: 0,
      allFileData: [],
      textarea: ''
    }
  },
  created() {
    this.getSourceList()
    this.getMdtRecord()
  },
  watch: {
    // current(v) {
    //   if(v == 1) this.getMdtRecord()
    // }
  },
  mdtId(v) {
      if(v) {
        this.getSourceList()
        this.getMdtRecord()
      }
  },
  methods: {
    async getSourceList() {
      const {code, data} = await getSourceBack(this.mdtId)
      if(code == 0) {
        // this.allFileData = data?.cmFileUrl.concat(data?.otherFileUrl)
        this.allFileData = data
      }
    },
    async getMdtRecord() {
      const {code, data} = await getMdtRecord(this.mdtId)
      if(code == 0) {
        this.textarea = data
      }
    },
  }
}
</script>
<style lang="less" scoped>
.mdt-source {
  width: 100%;
  height: 100%;
  border-radius: 2px 2px 0px 2px 2px;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  .mdt-panel-head {
    border-bottom: 1px solid rgba(151, 151, 151, 0.2);
    display: flex;
    justify-content: center;
    height: 50px;
    p {
      margin: 0;
      opacity: 0.7;
      font-size: 16px;
      text-align: left;
      color: rgba(0, 0, 0, 0.85);
      font-family: PingFangSC, PingFangSC-Regular;
      padding: 0 30px;
      line-height: 53px;
      // transition: all 0.3s;
      display: flex;
      span {
        cursor: pointer;
      }
    }
    p.active {
      opacity: 1;
      font-weight: 600;
      color: rgba(0, 0, 0, 0.85);
      font-family: PingFangSC, PingFangSC-Semibold;
      position: relative;
      // transition: all 0.3s;
    }
    p.active::after {
      content: "";
      display: block;
      position: absolute;
      bottom: 0;
      left: 40px;
      background-color: #1890ff;
      width: 44px;
      height: 3px;
    }
  }
  .mdt-source-con {
    /deep/ .el-scrollbar__wrap {
      overflow-x: hidden;
    }
    width: 100%;
    // background-color: #fff;
    flex: 1;
    height: 0;
    padding-bottom: 15px;
    padding-top: 10px;
    .meeting-record {
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Regular;
      color: rgba(0, 0, 0, 0.85);
      line-height: 22px;
      .meeting-record-text,pre {
        font-size: 14px;
        font-family: PingFangSC, PingFangSC-Regular;
        color: rgba(0, 0, 0, 0.85);
        line-height: 22px;
        user-select: text;
      }
    }
  }
}
</style>