<template>
  <div class="mdt-consult">
    <div class="mdt-consult-item">
      <div class="consult-item-head">
        <div class="item-left">
          <span style="font-size: 40px" class="iconfont icontitle"></span>
          <p>讨论日期</p>
        </div>
      </div>
      <div class="consult-item-con">
        <p style="color: #666">{{ patientCase.startTime }}</p>
      </div>
    </div>
    <div class="mdt-consult-item">
      <div class="consult-item-head">
        <div class="item-left">
          <span class="iconfont iconH1"></span>
          <p>参与人员</p>
        </div>
      </div>
      <div class="consult-item-con">
        <p style="color: #666">{{ mdtMember }}</p>
      </div>
    </div>
    <div class="mdt-consult-item" style="margin-bottom: 0">
      <div class="consult-item-head">
        <div class="item-left">
          <span style="font-size: 40px" class="iconfont icontitle"></span>
          <p>MDT多学科会诊建议</p>
        </div>
        <div class="item-right">
          <el-popover placement="bottom-start" width="200" @show="isShowModel = true" @hide="isShowModel = false" trigger="click">
            <div class="sugg-draggable-box">
              <p class="title" style="display: flex">
                <span style="flex: 2">模块</span
                ><span style="flex: 1">操作</span>
              </p>
              <draggable
                class="syllable_ul"
                element="ul"
                handle="i"
                :list="formData.summaryData"
                :options="{ group: {name:'title',pull: '',put: false}, animation: 150 }"
                :no-transition-on-drag="true"
              >
                <transition-group
                  type="transition"
                  :name="!drag ? 'syll_li' : null"
                  :css="true"
                >
                  <li v-for="(item, idx) in formData.summaryData" :key="'syll_li_' + idx">
                    <span>{{ mapNum[idx] + item.title_ }}</span>
                    <span
                      ><el-tooltip
                        :enterable="false"
                        content="模块移除"
                        placement="top-start"
                      >
                        <i
                          @click="deleteData(item, idx)"
                          class="iconfont iconmokuaiyichu"
                        ></i>
                      </el-tooltip>
                      <el-tooltip
                        :enterable="false"
                        content="拖拽排序"
                        placement="top-start"
                      >
                        <i class="iconfont icontuozhuaipaixu"></i>
                      </el-tooltip>
                    </span>
                  </li>
                </transition-group>
              </draggable>
            </div>
            <i
              slot="reference"
              style="font-size: 14px;opacity:0.8; color: #1890ff; cursor: pointer;text-decoration:underline;font-style:normal"
              >编辑</i
            >
            <!-- style="font-size: 14px; color: #8494b7; cursor: pointer" -->
          </el-popover>
        </div>
      </div>
      <div class="consult-item-con" style="position:relative">
        <!-- 用于遮罩，拖拽不能复制到富文本开始 -->
        <div class="fixed-model" v-show="isShowModel"></div>
        <!-- 用于遮罩，拖拽不能复制到富文本结束 -->
        <el-form :inline-message="true" ref="ruleForm">
          <div
            v-for="(item, i) in formData.summaryData"
            :data-index="i"
            :key="'s_' + i"
          >
            <div class="mdt-module-edit" style="border-top: 1px dashed rgba(151,151,151,.4)">
              <el-form-item
                style="padding: 0"
                :prop="'summaryData.' + i + 'title_'"
                :rules="rules.title_"
              >
                <el-input
                  ref="input"
                  class="self-input"
                  :autofocus="item.edit"
                  type="text"
                  maxlength="50"
                  show-word-limit
                  v-show="item.edit"
                  v-model="item.title_"
                  @blur="changeform(item)"
                ></el-input>
              </el-form-item>
              <span v-show="!item.edit">{{ mapNum[i] + item.title_ }}</span>
              <i
                class="iconfont iconMDTxiaozuyijian-weitianxie"
                @click="item.edit = true"
              ></i>
              <el-tooltip :enterable="false" content="模块移除" placement="top">
                <i
                  @click="deleteData(item, i)"
                  class="iconfont iconmokuaiyichu"
                ></i>
              </el-tooltip>
            </div>
            <el-form-item :prop="'summaryData.' + i + 'content'">
              <Editor
                style="margin-bottom: 20px"
                :init="editorInit"
                v-model="item.content"
              ></Editor>
            </el-form-item>
          </div>
          <el-form-item style="cursor: pointer">
            <p @click="addModule" class="add-module">+添加模块</p>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="mdt-consult-item" style="padding: 0 20px;background:#fff">
      <div>
        <div class="mdt-module-edit" style="padding:20px 0;">
          <span>是否随访<sup style="color:red">*</sup></span>
           <el-radio-group @change="clearFollow" v-model="followStatus" style="margin-left: 15px;padding-top:5px">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
        </div>
        <div v-show="followStatus === 1" style="padding-bottom: 20px">
          <el-input show-word-limit type="textarea" :disabled="followStatus === 0" :rows="4" :maxlength="2000" v-model="followContent" placeholder="请输入内容"/>
        </div>
      </div>
    </div>
    <div class="mdt-consult-item">
        <div class="add">
          <el-button
            plain
            class="btn-lv-blue"
            size="small"
            :loading="loading"
            :disabled="loading"
            @click="saveInfo(4)"
            >预览</el-button
          >
            <el-button
            plain
            class="btn-lv-blue"
            size="small"
            :loading="loading"
            :disabled="loading"
            @click="saveInfo(1)"
            >参会人员查看</el-button
          >
          <el-button
          plain
          class="btn-lv-blue"
            size="small"
            @click="saveInfo(2)"
            :loading="loading"
            :disabled="loading"
            >暂存</el-button
          >
          <el-button type="primary" :loading="loading" size="mini" :disabled="loading" @click="saveInfo(3)"
            >病案归档</el-button
          >
        </div>
    </div>
    <!--预览-->
    <sp-preview :visible.sync="dialogVisible" :list="urlList"></sp-preview>
  </div>
</template>
<script>
let that;
import spPreview from '../../AeglePreview'
// import "tinymce/skins/ui/oxide/skin.css"
import tinymce from "tinymce/tinymce";
import "tinymce/themes/silver";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/icons/default/icons";
import "tinymce/plugins/image";
import "tinymce/plugins/textcolor";
// import "tinymce/plugins/lists";
import "tinymce/plugins/autoresize";
import "tinymce/plugins/paste";
// import { bus } from "@/assets/js/bus.js";
import draggable from "vuedraggable";
import { uploadFileProgress } from "@/request/cm.js";
import uploadImage from "aegle-sp-components/src/utils/mdtUpload";
import {
  deleteConsult,
  saveNewConsult,
  getNewConsult,
  getMdtInfo
} from "@/request/mdt.js";
import { summaryData,mapNum } from 'aegle-sp-components/src/utils/variable.js'
import { httpproxyMethod, parseHttpMethod,getHttpStr } from 'aegle-sp-components/src/utils/index'
const Base64 = require("js-base64").Base64;
import { cloneDeep, debounce } from "lodash";
export default {
  name: "consult",
  components: { draggable, Editor, spPreview },
  props: {
    healthCardNoCm: String,
    mdtId: [String,Number],
    oldMeeting: {
      type: Object,
      default: () => {
        return {
          oldMdtId: '',
          oldName: ''
        }
      }
    }
  },
  inject: ['topObj'],
  data() {
    let validateName = (rule, value, callback) => {
      if (this.currentItem.title_ === "") {
        callback(new Error("请输入标题"));
      } else {
        callback();
      }
    };
    let validateContent = (rule, value, callback) => {
      if (this.currentItem.content === "") {
        callback(new Error("请输入内容"));
      } else {
        callback();
      }
    };
    return {
      isShowModel: false,
      loadingSave: false,
      followStatus: '',//是否随访
      followContent: '',//随访任务描述
      tinymceFlag: 1,
      mapNum: {},
      loading: false,
      visible: false,
      drag: "syll_li",
      syllable: [],
      formData: {
        summaryData,
      },
      summaryData: [], //综合意见模块
      mdtMember: "", //小组成员
      patientCase: {}, //患者信息
      rules: {
        title_: { validator: validateName, trigger: "blur" },
        content: { validator: validateContent, trigger: "blur" },
      },
      currentItem: {},
      mdtMeetingInfo: {},
      type: "mdt",
      stopStatus: false,
      editorInit: {
        // resize: true,
        images_upload_credentials: true,
        menubar: false,
        language_url: "/tinymce/zh_CN.js",
        language: "zh_CN",
        fontsize_formats: "14px",
        skin_url: "/tinymce/skins/ui/oxide",
        content_css: "img {max-width:100%}",
        height: 200,
        plugins: "textcolor lists autoresize paste imageSelector",//imageSelector
        toolbar: "bold italic underline removeformat imageSelector",//imageSelector
        imagetools_toolbar: 'editimage imageoptions',
        statusbar: false,
        paste_data_images: true,
        paste_as_text: true,
        automatic_uploads: true,
        relative_urls: false,
        remove_scrip_host: false,
        object_resizing: true,
        min_height: 200,
        max_height: 400,
        autoresize_on_init: true,
        autoresize_max_height: 300,
        setup: (editor) => {
          editor.on("init", function (e) {
            this.getBody().style.fontSize = "14px";
            this.getBody().style.color = "rgba(0,0,0,0.65)";
            this.getBody().style.fontFamily = "PingFangSC, PingFangSC-Regular";
            this.getBody().style.lineHeight = 1.5;
          });
        },
        init_instance_callback(d) {
          d.on('complete',e => {
            // if(e.key == 'Backspace'){
            //   const historyData = d.undoManager.data
            //   const prevText = historyData[historyData.length - 1]
            //   console.log(prevText)
            //   // this.getContent(prevText,d)
            // }
          })
          d.on('keyup setContent', (e) => {
            if(e.key == 'Backspace'){
              const historyData = d.undoManager.data
              const prevText = historyData[historyData.length - 1].content
              const nowText = d.getContent()
              that.getContent(prevText,d, 1)
              that.getContent(nowText,d,2)
            }
          })
        },
        paste_preprocess(plugins,content) {
          const re1 = new RegExp("<(?!/?p).+?>","g");//匹配html标签的正则表达式，"g"是搜索匹配多个符合的内容
          const str = content.content.replace(re1,'')
          content.content = str
        }
      },
      dialogVisible: false,
      urlList:[{
        label: 'MDT小结',
        url: '',
        isSucceed: true
      }],
    };
  },
  created() {
    this.mapNum = mapNum;
    if (this.mdtId) {
      this.getConsultInfo();
      this.getMeetingInfo();
    }
  },
  mounted() {
    //添加自定义图片上传
    that = this
    tinymce.init({});
    tinymce.PluginManager.add("imageSelector", function(editor) {
      editor.ui.registry.addToggleButton("imageSelector", {
        icon: "image",
        tooltip: "Insert/edit image",
        onAction: () => {
          that.showImageSelector(editor);
        },
      });
    });
    // 用于消息通知
    this.topObj.handleOption(1,{ pointLoading: false })
  },
  watch: {
    mdtId(v) {
      if (v) {
        this.getConsultInfo();
        this.getMeetingInfo();
        this.updateLookRecord()
      }
    },
  },
  activated() {
    this.tinymceFlag++
  },
  methods: {
    getContent(data,editor,type) {
      let arr = []
      if(type == 1 ){
        arr = data.split('</p>').map(item => {
          return item ? item + '</p>' : ''
        })
        //处理分隔出来存在空的情况
        arr = arr.filter(item => {
          if(item) {return item}
        })
      } else {
        arr = data.split('\n')
      }
      const status = arr.some(item => {
        return (item.indexOf('<img') !== -1 && (!item.startsWith('<p><img') || (!item.endsWith('></p>'))))
      })
      if(status) {
        const imgReg = /<img.*?(?:>|\/>)/gi;
        arr = arr.map(item => {
          if((item.indexOf('<img') !== -1 && (!item.startsWith('<p><img') || (!item.endsWith('></p>'))))){
            let a = item.match(imgReg)
            if(a.length){
              item = item.replace(imgReg,'')
              item += a.map(b => {
                return `<p>${b}</p>`
              })
            }
          }
          return item
        })
        editor.setContent(arr.join(''))
      }
    },
    updateLookRecord(){
      updateLookRecord(this.mdtId).then(res => {})
    },
    //按钮点击
    saveInfo: debounce(function(type){
      //type: 1医生查看， 暂存， 3归档, 4预览
      if(type == 1){
        this.saveConsultInfo(1)
      } else if(type == 2) {
        this.saveConsultInfo(0)
      } else if(type == 3){
        this.placeOnFile()
      } else if(type == 4){
        this.previewMDT()
      }
    },3000,{ leading: true, trailing: false }),
    // 会议信息
    async getMeetingInfo(isFirst) {
      const res = await getMdtInfo(this.mdtId);
      if (res.code === 0 && res.data) {
        this.mdtMeetingInfo = {
          ...res.data.mdtMeeting,
        };
      }
    },
    //清空follow
    clearFollow(e) {
      if(!e) this.followContent = '';
    },
    //归档
    async placeOnFile() {
      let status = await this.$confirm(
        "是否确认该病历为最终版本，可归档提交，提交后您将无法继续编辑修改该份病历。",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          customClass: "my-message-box",
        }
      ).catch(() => {});
      if (!status) return false;
      await this.saveConsultInfo(3);
    },
    //判断字符串是不是base64
    isBase64(str) {
      if (str === "" || str.trim() === "" || str == null) {
        return false;
      }
      try {
        return Base64.btoa(Base64.atob(str)) == str;
      } catch (err) {
        return false;
      }
    },
    //非空验证
    validate(type) {
      for (let i = 0; i < this.formData.summaryData.length; i++) {
        let item = this.formData.summaryData[i];
        item.title_ = item.title_ === null ? "" : item.title_;
        if (item.title_.trim() == "") {
          this.stopStatus = true;
          this.$message.error("标题不能为空");
        }
        if (this.stopStatus) return;
        item.content = item.content === null ? "" : item.content;
        if (!item.content || item.content.trim() == "") {
          this.stopStatus = true;
          this.$message.error(item.title_ + "的内容不能为空");
        }
        if (this.stopStatus) return;
      }
      if(type){
        if(this.followStatus === ''){
          this.stopStatus = true;
          this.$message.error('请选择是否随访')
        }
        if(this.followStatus && this.followContent.trim() == ''){
          this.stopStatus = true;
          this.$message.error('请填写随访内容')
        }
      }
    },
    //获取保存时的参数
    getParam(type, status) {
      let arr = [];
      this.formData.summaryData.map((item, i) => {
        let obj = {
          mdtMeetingId: this.mdtId,
          content: item.content ? Base64.encode(getHttpStr(item.content)) : "",
          title: this.mapNum[i] + item.title_,
        };
        if (item.id && !this.oldMeeting.oldMdtId) {
          obj.id = item.id;
        }
        arr.push(obj);
      });
      let param = {
        list: arr,
        paramDTO: {
          healthCardNo: this.healthCardNoCm || '',
          followContent: '',
          followStatus: '',
          id: this.mdtId,
          meetingOpinionStatus: status == 3 ? null : status,
        },
      };
      
      if(type){
        param.paramDTO.followStatus = (this.followStatus === null || this.followStatus === '') ? null : this.followStatus;
        param.paramDTO.followContent = this.followStatus ? this.followContent.trim() : '';
      }
      return param
    },
    //预览小结
    async previewMDT() {
      this.stopStatus = false;
      this.validate()
      if (this.stopStatus) return;
      const param = this.getParam(true,2)
      this.loading = true;
      const { code, data, msg } = await saveNewConsult(param)
      this.loading = false;
      if(code === 0){
        this.urlList[0].url = data.pdfFileUrl
        this.dialogVisible = true;
        this.getConsultInfo()
      } else {
        this.$message.error(msg)
      }
    },
    //综合意见保存
    async saveConsultInfo(status, cal) {
      if(status!==0){
        this.$refs.input.forEach((item) => {
        item.focus();
        item.blur();
      });
      this.stopStatus = false;
      this.validate(true)
      if (this.stopStatus) return;
      }
      const data = this.getParam(true,status)
      // console.log(data);
      // return
      this.loading = true;
      const res = await saveNewConsult(data);
      cal ? cal(res) : null;
      this.loading = false;
      if (res.code === 0) {
        this.$message.success(status == 1 ? "已通知各参会人员！" : (status === 0 ? "小结保存成功！" : "操作成功！"));
        if(status == 3) {
          this.$emit('changeStep', {step: 6, status: 1})
        } else {
          if(status == 1 && this.mdtMeetingInfo && this.mdtMeetingInfo.meetingNodeStatus == 7){
            this.$emit('refresh',this.mdtMeetingInfo.id)
          }
          this.$emit('changeStep', {step: 4, status: 0})
        }
      } else {
        this.$message.error(res.msg);
      }
    },
    //获取咨询意见
    async getConsultInfo() {
      let id =
        this.oldMeeting.oldName != "Tumor Board" && this.oldMeeting.oldMdtId
          ? this.oldMeeting.oldMdtId
          : this.mdtId;
       const res = await getNewConsult(id);
      if (res.code === 0) {
        this.mdtMeetingInfo = {...res.data.mdtMeeting}
        this.followStatus = res.data.mdtMeeting.followStatus == null ? '' : res.data.mdtMeeting.followStatus;
        this.followContent = res.data.mdtMeeting.followContent || '';
        this.formData.summaryData = res.data.opinionRecord.map((item) => {
          item.content = item.content
            ? parseHttpMethod(this.isBase64(item.content)
              ? Base64.decode(item.content)
              : item.content)
            : "";
          item.title_ = item.title && item.title.substring(2);
          item.edit = false;
          return item;
        });
        // this.formData.summaryData = this.formData.summaryData.map(item => {
        //   parseHttpMethod(item.content)
        //   return item;
        // })
        // if(res?.data?.mdtMeeting?.meetingOpinionStatus == 1){
        //   this.$emit('show','check')
        // }
        this.syllable = cloneDeep(this.formData.summaryData);
        this.mdtMember = res.data.doctor;
        this.patientCase = res.data.patientCase;
      } else {
        this.$message.error(res.msg);
      }
    },
    //删除咨询意见
    async deleteData(d, index) {
      if (this.formData.summaryData.length == 1) {
        this.$message.error("至少保留一条！");
        return false;
      }
      if (d.id == undefined || d.id == null) {
        this.formData.summaryData.splice(index, 1);
      } else {
        const res = await deleteConsult({ id: d.id });
        if (res.code === 0) {
          this.formData.summaryData.splice(index, 1);
        } else {
          this.$message.error(res.msg);
        }
      }
    },
    getFirstKey(obj) {
      for (key in obj) {
        return key;
      }
    },
    //添加模块点击
    addModule() {
      let obj = {
        edit: true,
        content: "",
        mdtMeetingId: this.mdtId,
        createTime: null,
        title: "",
        title_: "",
        updateTime: null,
        titleContent: "",
      };
      this.currentItem = obj;
      this.formData.summaryData.push(obj);
    },
    changeform(item) {
      this.currentItem = item;
      if (item.title_) item.edit = false;
    },
    //富文本图片选择点击
    showImageSelector(editor) {
      //uploadImage选择图片之后回调
      uploadImage(this,'', (files) => {
        if('.bmp,.png,.jpg,.jpeg'.indexOf(files[0].name.substring(files[0].name.lastIndexOf(".")+1)) == -1){
          this.$message.error('暂不支持上传该类文件！')
          return
        }
        const size = files[0].size;
        if (size / (1024 * 1024) > 99) {
          this.$message.warning("图片大小不能超过99M，请重新选择");
          return;
        }
        //首次的时候拿到图片的width和height，给img标签设置属性
        let reader = new FileReader()
        reader.readAsDataURL(files[0])
        reader.onload = (e) =>{
          let data = e.target.result
          let image = new Image()
          image.src = data;
          image.onload = () => {
            this.topObj.handleOption(6, true)
            uploadFileProgress("", files[0],(d => {
              this.topObj.handleOption(8, d)
            })).then((res) => {
              this.topObj.handleOption(6, false)
              if (res.code == 0) {
                if (res.data.length) {
                  res.data[0] = httpproxyMethod(res.data[0])
                  let str = ''
                  const rate = this.getMaxWidthAndHeight(image.width,image.height)
                  if(editor.selection.getRng().startOffset === 0){
                    str = '<p><img alt="" width="'+ image.width +'" height="'+ image.height +'" data-rate="'+ (parseInt(image.width / image.height)) +'" data-center="true" style="max-width:100%;" src="' + res.data[0] + '"/></p>'
                    // str = '<p><img alt="" width="'+ image.width +'" height="'+ image.height +'" data-rate="'+ (parseInt(image.width / image.height)) +'" data-center="true" style="max-width:' + rate.maxWidth +'px;max-height:'+ rate.maxHeight +'px" src="' + res.data[0] + '"/></p>'
                  } else {
                    // str = '<p><img alt="" width="'+ image.width +'" height="'+ image.height +'" data-rate="'+ (parseInt(image.width / image.height)) +'" style="' + rate.maxWidth +'px;max-height:'+ rate.maxHeight +'px" src="' + res.data[0] + '"/></p>'
                    str = '<p><img alt="" width="'+ image.width +'" height="'+ image.height +'" data-rate="'+ (parseInt(image.width / image.height)) +'" style="max-width:100%;" src="' + res.data[0] + '"/></p>'
                  }
                  editor.execCommand(
                    "mceInsertContent",
                    false,
                    str
                  );
                  editor.execCommand('mceEditImage')
                }
              } else {
                this.$message.error(res.msg);
              }
            });
          }
        }
      });
    },
    getMaxWidthAndHeight(width,height) {
      // 1820,2500
      let maxWidth = 0,maxHeight = 0;
      if(width > height){
        if(width > 1820){
          maxWidth = 1820
          maxHeight = (height / width) * maxWidth
          if(maxHeight > 2500) maxHeight = 2500
        } else {
          maxWidth = width
          maxHeight = (height / width) * maxWidth
          if(maxHeight > 2500) maxHeight = 2500
        }
      } else {
        if(height > 2500){
          maxHeight = 2500
          maxWidth = (width / height) * maxHeight
          if(maxWidth > 1820) maxWidth = 1820
        } else {
          maxHeight = height
          maxWidth = (width / height) * maxHeight
          if(maxWidth > 1820) maxWidth = 1820
        }
      }
      return {
        maxWidth,
        maxHeight
      }
    }
  },
  beforeDestroy() {
  },
};
</script>
<style lang="less">
.tox-edit-area__iframe {
  p {
    margin: 0!important;
  }
}
.tox-tinymce {
  padding-bottom: 20px;
  border: 1px solid #DCDFE6!important;
  border-radius: 4px!important;
  .tox-statusbar__branding {
    display: none;
  }
  // .tox-toolbar__primary {
  //   .tox-toolbar__group {
  //     button[title='插入/编辑图片'] {
  //       svg {
  //         width: 20px;
  //         height: 20px;
  //         path {
  //           width: 100%;
  //           height: 100%;
  //         }
  //       }
  //     }
  //   }
  // }
  .tox-icon.tox-tbtn__icon-wrap {
    svg {
      fill: #8494b7;
    }
    svg:focus,
    svg:active,
    svg:hover {
      fill: rgba(24,144,255,1);
      background-color: #EBF4FF;
    }
  }
  .tox-tbtn.tox-tbtn--enabled {
    svg {
      fill: rgba(24,144,255,1);
      background-color: #EBF4FF;
    }
  }
}
.tox-dialog-wrap {
  .tox-form {
    > .tox-form__group:nth-child(2) {
      display: none !important;
    }
  }
  .tox-form__controls-h-stack .tox-form__group:last-child,
  .tox-lock.tox-button {
    display: none !important;
  }
  .tox-dialog-wrap__backdrop {
    background: rgba(0, 0, 0, 0.7) !important;
  }
  .tox-button {
    padding: 0 16px !important;
    line-height: 28px !important;
    height: 28px;
    background-color: #409eff !important;
    border-color: #409eff !important;
    font-size: 12px !important;
    font-weight: 500 !important;
  }
  .tox-button--secondary {
    background-color: #f0f0f0 !important;
    border-color: #f0f0f0 !important;
  }
  .tox-button--icon {
    background-color: transparent !important;
    border-color: #fff !important;
    padding: 0 !important;
  }
  .tox-dialog__body-nav-item--active {
    color: #409eff !important;
    border-bottom: 2px solid #409eff !important;
  }
  .tox-textfield:focus {
    border-color: #409eff !important;
  }
}

.tox-editor-container {
  .tox-editor-header {
    border-bottom: 1px solid#DCDFE6 !important;
  }
  .tox-tbtn {
    width: 24px !important;
    height: 24px !important;
  }
}
.my-message-box {
  width: 500px;
  border-radius: 0;
  .el-message-box__headerbtn {
    right: 40px;
    top: 30px;
  }
  .el-message-box__header {
    padding: 30px 40px 10px;
  }
  .el-message-box__title {
    font-size: 16px;
    font-family: PingFangSC, PingFangSC-Semibold;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
  }
  .el-message-box__content {
    padding: 10px 40px;
    min-height: 150px;

    p {
      color: rgba(0, 0, 0, 0.85);
      font-weight: 400;
    }
  }
  .el-message-box__btns {
    padding: 5px 40px 20px;
  }
}
.sugg-draggable-box {
  > .title {
    display: flex;
    span {
      flex: 2;
    }
    span:last-child {
      flex: 1;
    }
  }
  .syllable_ul {
    margin: 0;
    padding: 0;
    li {
      display: flex;
      align-items: center;
      height: 40px;
      margin: 0;
      font-size: 14px;
      color: #000000;
      span {
        flex: 2;
        i.iconfont {
          margin-right: 5px;
          cursor: pointer;
          font-size: 24px;
          color: #8494b7;
        }
      }
      span:last-child {
        flex: 1;
      }
    }

    li:hover {
      background: rgba(234, 246, 255, 0.8);
      i {
        color: #3e98ff;
      }
    }
  }
  p.title {
    display: flex;
    align-items: center;
    height: 40px;
    margin: 0;
    span {
      height: 100%;
      line-height: 40px;
      flex: 2;
      border-bottom: 1px solid rgba(151, 151, 151, 0.3);
      font-weight: 500;
    }
    span:last-child {
      flex: 1;
    }
  }
}
.filter-timeline-type {
  > p {
    font-size: 14px;
    text-align: left;
    color: rgba(0, 0, 0, 0.8);
    line-height: 22px;
    margin: 0;
    padding: 5px 0;
    border-bottom: 1px solid #dcdfe6;
  }

  .type-tree-box {
    height: 200px;
    overflow-y: auto;
  }

  .footer-option {
    display: flex;
    justify-content: space-around;
    padding: 5px 0;
  }
}
</style>
<style lang="less" scope>
.new-mdt-dialog {
  .el-tab-pane,
  .el-tabs__content {
    height: 100%;
  }
  > .el-dialog__body {
    padding-top: 0;
    padding-bottom: 0;
    overflow-y: hidden;
  }
}
.fixed-model {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  // background-color: rgba(0,0,0,.1);
  z-index: 10;
}
.mdt-consult {
  height: 100%;
  overflow-y: auto;

  .old-consult {
    margin-bottom: 15px;
  }
  &-item {
    // background-color: #fff;
    margin-bottom: 12px!important;
    &:last-child {
      margin-bottom: 0px!important;
      background: #e6e7ec!important;
    }
    .consult-item-head {
      width: 100%;
      height: 60px;
      background: #ffffff;
      border-radius: 2px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      box-sizing: border-box;

      .item-left {
        display: flex;
        align-items: center;
        span {
          font-size: 34px;
          color: #3e98ff;
          font-weight: 500;
        }
        p {
          font-size: 16px;
          font-family: PingFangSC, PingFangSC-Medium;
          font-weight: 600;
          text-align: left;
          color: #262626;
          line-height: 22px;
          padding-left: 10px;
          margin: 0;
        }
      }
      .item-right {
        color: rgba(0, 0, 0, 0.65);
        .el-icon-setting {
          color: #8494b7;
        }
      }
    }

    .consult-item-con {
      padding: 0 20px 20px;
      background-color: #fff;
      >p {
        margin: 0;
        font-size: 14px;
        font-family: PingFangSC, PingFangSC-Regular;
        opacity: 0.8;
      }
    }

    .patient-info {
      padding: 0 20px;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;

      .label {
        padding-right: 10px;
      }

      p {
        margin: 0 60px 0 0;
        color: rgba(0, 0, 0, 0.65);
        display: flex;
        align-items: center;
      }
    }
    h5 {
      display: flex;
      align-items: center;
      margin: 0 0 15px;
      padding: 0 20px;
      font-weight: normal;
      // color: rgba(0, 0, 0, 0.65);

      .dot {
        display: inline-block;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background-color: rgba(62, 152, 255, 1);
        margin-right: 5px;
      }
    }

    .el-form-item {
      background-color: #fff;
      margin-bottom: 20px;
    }
    .mdt-module-edit {
      display: flex;
      // height: 60px;
      padding: 20px 0 12px;
      align-items: center;
      // border-top: 1px dashed #ccc;
      .el-form-item {
        margin-bottom: 0px!important;
      }

      > span {
        font-size: 15px;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.85);
      }
      i.iconfont {
        margin-left: 10px;
        font-size: 26px;
        color: rgba(132, 148, 183, 1);
        cursor: pointer;

        &:hover {
          color: #3e98ff;
        }
      }
    }

    .self-input {
      height: 30px;
      width: auto;
      .el-input__inner {
        width: auto;
        height: 30px;
      }
      &.el-select {
        width: 120px;
        .el-input__inner {
          width: 120px;
        }
        .el-input__icon {
          line-height: 30px;
        }
      }
    }

    .add-module {
      text-align: center;
      padding: 15px;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      margin: 0;
    }
    /deep/ .el-textarea__inner {
        font-family: PingFangSC, PingFangSC-Regular;
        font-size: 14px;
      }
  }

  .add {
    padding: 10px 0 0;
    display: flex;
    justify-content: flex-end;
    background: #e6e7ec!important;
    margin-bottom: 10px;
    .btn-lv-blue {
      background: #e6e7ec;
      padding: 8px 15px;
      border-color: #3e98ff!important;
      color: #3e98ff!important;
    }
  }
}
.dialog-box {
  height: 100%;
  display: flex;
  &-left {
    flex: 0 0 200px;
    height: 100%;
    .el-scrollbar__wrap {
      overflow-x: hidden;
    }
    .filename-item {
      display: flex;
      align-items: center;
      color: rgba(0,0,0,0.4);
      i {
        font-size: 13px;
      }
      span {
        font-size: 12px;
        font-family: PingFangSC, PingFangSC-Semibold;
        font-weight: 600;
        text-align: left;
        line-height: 17px;
        letter-spacing: 0.18px;
      }
      &.active span{
        color: #1890ff;
      }
    }
  }
  &-right {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    background-color: rgba(216,216,216,.3);
  }
}
</style>