<template>
  <div class="meeting-in">
    <div class="meeting-in-hd">
      <p>
        <span
          @click="back"
          :style="{
            color: isWrite ? '#777' : '',
            cursor: isWrite ? 'pointer' : 'default',
            fontWeight: 400
          }"
          ><i
            v-if="isWrite"
            class="el-icon-arrow-left"
            style="margin-right: 5px;color:rgba(0, 0, 0, 1)!important;font-weight:600"
          ></i
          >MDT会议中</span
        ><span v-if="isWrite"> / 填写会议记录</span>
      </p>
      <div v-show="!isWrite">
        <p @click="changeText(3)" style="padding-left:2px"><i class="el-icon-arrow-left"></i>返回</p>
        <p @click="isWrite = true">
          <i class="el-icon-edit-outline"></i>填写会议记录
        </p>
        <p @click="changeText(1)"><i class="el-icon-switch-button"></i>结束会议</p>
      </div>
    </div>
    <div class="meeting-in-con" v-show="!isWrite">
      <div class="left">
        <!--会议评论查看组件-->
        <common-mark ref="mark" :url="pdfUrl" readonly :item="allFileData" :multiple="allFileData.length > 1 ? true : false" size="big" />
      </div>
      <div class="right" :class="{ show: show }" @mouseleave="handleLeave" @mouseover="handleEnter">
        <i @click="show = !show" @mouseenter="show=true" class="iconfont iconshaixuan"></i>
        <!--mdt时间轴组件-->
        <timelineDialog v-show="show" @check="timelineCheck" ref="timeline"/>
      </div>
    </div>

    <!--会议填写-->
    <div class="meeting-in-con meeting-write" v-show="isWrite">
      <div>
        <p>会议记录</p>
        <el-input
          @blur="saveMdtRecord(1)"
          @input="changeTextOnline(1)"
          resize="none"
          type="textarea"
          show-word-limit
          maxlength="5000"
          placeholder="请输入会议记录"
          v-model="textarea"
        >
        </el-input>
        <div class="option-btn">
          <el-button type="primary" size="mini" @click="changeText(2)"
            >完成记录</el-button
          >
        </div>
      </div>
    </div>
    <!--会议结束-->
  </div>
</template>
<script>
import timelineDialog from '../components/timelineDialog.vue'
import commonMark from "../components/common-mark.vue";
import { debounce, throttle } from "lodash";
import { getMeetingNode,saveMdtRecord,getMdtRecord,changeMdtStatus,getSourceBack } from '@/request/mdt.js'
export default {
  inject: ['topObj'],
  components: { commonMark,timelineDialog },
  data() {
    return {
      pdfUrl: [],//用于存储时间轴的pdf链接
      markType: 1,
      textarea: "", //会议记录
      currentPanel: 1,
      show: true,
      elWidth: 0,
      elHeight: 0,
      elLeft: 0,
      elTop: 0,
      zoom: 1,
      initWidth: 0,
      initHeight: 0,
      startClientX: 0,
      startClientY: 0,
      isWrite: false,
      markList: [],
      allFileData: [],
      timer: null
    };
  },
  watch: {
    show() {
      this.initBoxSize();
    },
    'topObj.mdtId'(v) {
      if(v) this.getSourceList()
    },
    isWrite(v) {
      if(v) {
        this.getMdtRecord()
      } else {
        this.textarea = '';
      }
    }
  },
  mounted() {
    this.initBoxSize();
    this.getSourceList()
  },
  methods: {
    handleEnter() {
      clearTimeout(this.timer)
    },
     handleLeave() {
      this.timer = setTimeout(() => {
        this.show = false
      }, 3000)
    },
    timelineCheck(e) {
      const arr = e.filter(item => {
        if(!(this.pdfUrl.some(i => {
          return i.url == item.url
        }))) return item;
      })
      this.pdfUrl = this.pdfUrl.concat(arr)
      this.$refs.mark.showTimeline(e[0].url)
    },
    async getMdtRecord() {
      const {code, data} = await getMdtRecord(this.topObj.mdtId)
      if(code == 0) {
        this.textarea = data
      }
    },
    //获取会议资料
    async getSourceList() {
      const {code, data} = await getSourceBack(this.topObj.mdtId)
      if(code == 0) {
        this.allFileData = data
      }
    },
    //会议记录保存
    async saveMdtRecord(type) {
      if((!this.textarea || !this.textarea.trim()) && type == 2){
        this.$message.error('会议记录不能为空！')
        return
      }
      const {code, msg} = await saveMdtRecord({id: this.topObj.mdtId, meetingRecord: this.textarea, recordStatus: type == 2 ? 1 : 0})
      if(code == 0) {
        if(type === 2) {
          this.$message.success('会议记录已保存成功！')
          this.isWrite = false;
          // this.getSourceList()
        }
      } else {
        this.$message.error(msg)
      }
    },
    //记录实时节流保存
    changeTextOnline: throttle(
      function (type) {
        getMeetingNode(this.topObj.mdtId).then(res1 => {
          if(res1?.data == 4){
            this.$message.warning('会议已结束！')
            this.$emit('changeStep', {step:4,status: 1})
          } else {
            //type1为无提示保存，2为有提示保存
            this.saveMdtRecord(type)
          }
        })
      },
      3000,
      { leading: true, trailing: false }
    ),
    changeText: debounce(function(type){
      if(type == 3){
        this.topObj.handleOption(4, '-1')
        // if(this.topObj.route == '/caseManage/myPatient'){
        //   this.changeCurICm(-1)
        // } else {
        //   this.changeCurMdtI('-1')
        // }
        return
      }
      getMeetingNode(this.topObj.mdtId).then(res1 => {
          if(res1?.data == 4){
            this.$message.error('会议已结束！')
            this.$emit('changeStep', {step:4,status: 1})
          } else {
            //此处type1为结束会议保存
            if(type == 2){
              this.saveMdtRecord(type)
            } else if(type == 1){
              this.finish()
            }
          }
      })
    },
    3000,
    { leading: true, trailing: false }),
    //结束会议
    finish() {
      const h = this.$createElement;
      this.$msgbox({
        title: "结束会议确认",
        message: h(
          "div",
          {
            style: {
              lineHeight: "26px",
              fontFamily: "font-family: PingFangSC, PingFangSC-Regular;",
            },
          },
          [
            
            h(
              "span",
              { style: { color: "red", fontSize: "14px" } },
              [h("i", {style: {color: "red", fontSize: "16px",marginRight: '5px'},class: 'el-icon-warning-outline'}),"结束后不可再返回该界面"]
            ),
            h("span", { style: { display: 'inline-block',width: '100%',fontSize: "14px",opacity: 0.8 } }, "是否确认结束会议？"),
          ]
        ),
        customClass: 'self-com-dialog finish-dialog',
        showCancelButton: true,
        confirmButtonText: "是",
        cancelButtonText: "否",
        closeOnClickModal: false,
        closeOnPressEscape: false,
        showClose: false,
        beforeClose: (action, instance, done) => {
          if (action === "confirm") {
            changeMdtStatus({meetingNodeStatus: 4,mdtId: this.topObj.mdtId}).then(({code,msg}) => {
              if(code === 0){
                this.$emit("changeStep", {step:4,status: 1});
              } else {
                this.$message.error(msg)
              }
            })
          }
          done();
        },
      }).then((res) => {
        console.log(res);
      });
    },
    //初始化批注容器宽高
    initBoxSize() {
      if (this.$refs.grab) {
        this.initWidth = this.$refs.grab.clientWidth;
        this.initHeight = this.$refs.grab.clientHeight;
        this.elWidth = this.initWidth * this.zoom;
        this.elHeight = this.initHeight * this.zoom;
      }
    },
    //缩放
    handleWheel(e) {
      if (e.wheelDelta < 0) {
        this.zoom -= 0.05;
      } else {
        this.zoom += 0.05;
      }
      if (this.zoom > 3) {
        this.zoom = 3;
        return;
      }
      if (this.zoom < 1) {
        this.zoom = 1;
        return;
      }
      this.elWidth = this.initWidth * this.zoom;
      this.elHeight = this.initHeight * this.zoom;
    },
    //拖动开始
    dragstart(e) {
      this.startClientX = e.clientX;
      this.startClientY = e.clientY;
      const img = new Image();
      img.src = "../../../../assets/images/doctor.jpg"; //透明图片
      e.dataTransfer.setDragImage(img, 0, 0);
    },
    //拖动结束
    dragend(e) {
      const x = e.clientX - this.startClientX;
      const y = e.clientY - this.startClientY;
      this.elLeft += x;
      this.elTop += y;
    },
    back() {
      if (this.isWrite) {
        this.isWrite = false;
      }
    },
    markTypeChange(type) {
      this.markType = type;
    },
    addMark() {},
    addToBox(e) {
      const wid = (e.offsetX / this.$refs.page.clientWidth) * 100;
      const hei = (e.offsetY / this.$refs.page.clientHeight) * 100;
      this.markList.push({
        top: hei,
        left: wid,
      });
    },
  },
};
</script>
<style lang="less">
.finish-dialog {
  .el-message-box__content {
    padding-top: 4px;
  }
  .el-message-box__container {
    padding-top: 0!important;
  }
}
</style>
<style lang="less" scoped>
.meeting-in {
  height: 100vh;
  position: fixed;
  width: 100vw;
  top: 0;
  left: 0;
  z-index: 890;
  &-hd {
    height: 62px;
    background: #ffffff;
    border-bottom: 1px solid rgba(151, 151, 151, 0.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    font-size: 16px;
    font-family: PingFangSC, PingFangSC-Semibold;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
    div {
      font-size: 14px;
      font-weight: 500;
      color: #3e98ff;
      display: flex;
      align-items: center;
      p {
        background: #ffffff;
        border: 1px solid #3e98ff;
        border-radius: 13px;
        color: #3e98ff;
        margin: 0;
        height: 24px;
        display: flex;
        align-items: center;
        padding: 0 5px;
        cursor: pointer;
        margin-left: 8px;
        i {
          margin: 0 3px 0 0!important;
          // font-weight: 500;
        }
      }
      p:last-child {
        color: #ef3f2e;
        border: 1px solid #ef3f2e;
        i {
          color: #ef3f2e!important;
        }
      }

    }
  }
  &-con {
    background: #d8d8d8;
    height: calc(100% - 62px);
    display: flex;
    .right {
      width: 0;
      background-color: #fff;
      transition: width 0.5s;
      position: relative;
      // padding: 20px;
      &.show {
        width: 296px;
        transition: width 0.5s;
      }
      .iconshaixuan {
        width: 28px;
        height: 28px;
        background: #1890ff;
        border-radius: 4px 0px 0px 4px;
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.19);
        color: #fff;
        line-height: 28px;
        text-align: center;
        position: absolute;
        left: -28px;
        top: 0px;
      }
      .right-con {
        height: 100%;
        > p {
          font-size: 16px;
          font-family: PingFangSC, PingFangSC-Medium;
          font-weight: 500;
          color: rgba(0, 0, 0, 0.85);
          line-height: 22px;
          position: relative;
          padding-left: 20px;
          &::before {
            top: 7px;
            left: 10px;
            display: block;
            content: "";
            width: 3px;
            height: 12px;
            background: #407df3;
            border-radius: 2px;
            position: absolute;
          }
        }
        .scroll {
          height: calc(100% - 171px);
          padding: 20px 0 20px;
        }
        /deep/ .el-scrollbar__wrap {
          overflow-x: hidden;
        }
      }
      .timeline-item {
        width: 100%;
        display: flex;
        padding: 0 20px 0;
        position: relative;
        > div {
          padding-top: 16px;
        }

        &::before {
          content: "";
          display: inline-block;
          width: 5px;
          height: 5px;
          background: #407df3;
          border-radius: 50%;
          position: absolute;
          top: 24px;
          left: 20px;
        }
        &::after {
          content: "";
          display: inline-block;
          width: 0;
          height: 100%;
          border-right: 1px dashed #ddd;
          position: absolute;
          top: 30px;
          left: 22px;
        }
        &:last-child::after {
          height: 0;
        }
        &:first-child {
          // padding-top: 10px;
          > div {
            padding-top: 0;
          }
          &::before {
            top: 10px;
          }
          &::after {
            top: 17px;
            height: 45px;
          }
        }
        p {
          line-height: 20px;
          margin: 0;
          font-size: 12px;
          font-family: PingFangSC, PingFangSC-Regular;
          color: rgba(0, 0, 0, 0.8);
        }
        .timeline-left {
          width: 100px;
          padding-left: 12px;
          p:last-child {
            color: rgba(0, 0, 0, 0.65);
            opacity: 0.8;
          }
        }
        .timeline-right {
          width: 100%;
          padding-left: 10px;
          // flex: 1;
          p.text {
            width: 100%;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            cursor: default;
          }
          span {
            text-decoration: underline;
            color: rgba(24, 144, 255, 1);
            cursor: pointer;
          }
        }
      }
    }
    .left {
      overflow: hidden;
      flex: 1;
      transform: all 3s;
    }
    &.meeting-write {
      padding: 20px;
      > div {
        padding: 0 20px;
        width: 100%;
        height: 100%;
        background-color: #fff;
        /deep/ .el-textarea {
          height: calc(100% - 126px);
          .el-textarea__inner {
            height: 100%;
            font-family: PingFangSC, PingFangSC-Regular;
            color: rgba(0, 0, 0, 0.85);
          }
        }
        > p {
          margin: 0;
          // height: 54px;
          // line-height: 54px;
          font-size: 16px;
          font-family: PingFangSC, PingFangSC-Semibold;
          font-weight: 600;
          color: rgba(0, 0, 0, 0.85);
          padding: 20px 0 12px;
        }
      }
      .option-btn {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: 72px;
      }
    }
  }
}
</style>