<template>
  <div class="home">
    <div class="home-left">
      <div class="home-user">
        <div class="user-top">
          <span class="user-name">{{ patientInfo.patientName }}</span>
          <span>{{ formatSex(patientInfo.sex) }}</span>
          <span>{{ patientInfo.age }}岁</span>
          <span>{{ patientInfo.patientProperties }}</span>
        </div>
        <div class="user-item">
          <span>出生日期：</span>
          <span class="">{{ formatTime(patientInfo.brithDate) }}</span>
        </div>
        <div class="user-item">{{ jzlshFlag === '1' ? '就诊号：' + patientTitle.jzlsh : '住院号：' + patientTitle.jzlsh }}</div>
      </div>
      <div class="cycle" :style="{'max-height': Height + 'px' }"
           style="overflow-y:scroll;"
      >
        <div
          class="cycle-item"
          v-for="(item,index) in cycleData"
          :key="index"

        >
          <div class="cycle-parent">{{ item.name }}</div>
          <div class="cycle-child">
            <div
              class="child-item"
              v-for="child in item.children"
              :key="child.patId"
              v-if="child.deptName"
            >
              <div class="child-date">
                <div class="child-day">{{ formatDay(child.clinicDate) }}</div>
                <div class="child-year">{{ formatYear(child.clinicDate) }}</div>
              </div>
              <div class="child-text">
                <div :class="active===child.patId?'active':''" @click="clickLable(child)" >
                  {{ child.deptName }}
<!--                    <el-tooltip slot="label" effect="dark"-->
<!--                                :content="child.deptName "-->
<!--                                placement="bottom-start"-->
<!--                    >-->
<!--                    <span class="tmp"-->
<!--                    > {{  child.deptName }}</span>-->
<!--                    </el-tooltip>-->

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="home-right">
      <div class="right-head">
        <el-tag type="warning">{{ patientTitle.clinicClass === '1' ? '门诊' : '住院' }}</el-tag>
        <div class="right-head-name">
          {{
            patientTitle.auxiliaryDiagnosis === null ? patientTitle.primaryDiagnosis : patientTitle.auxiliaryDiagnosis
          }}
        </div>
        <div class="right-head-time">{{  patientTitle.clinicClass === '1' ? '就诊日期：'+ formatDate(patientTitle.clinicDate) : '住院日期：'+ formatDate(patientTitle.clinicDate) }}</div>
      </div>
      <div class="right-main">
        <div class="main-collapse">
          <el-collapse v-model="activeName">
            <el-collapse-item
              v-for="(item,index) in manuData"
              :title="item.title"
              :name="index"
            >
              <div
                class="collapse-des"
                v-for="child in item.children"
                :key="child.orderId"
                :class="collapseActive===child.orderId?'collapse-active':''"
                @click="handleCollapse(child)"
              >
                <div class="collapse-title">
                  <span style="margin-right: 30px;display: inline-block ;width: 50px">{{ child.title }}</span>
                  <el-tag type="success" v-if="!(child.title  === '护理文书')">{{ child.count }}条</el-tag>
                </div>
                <!--                <div class="collapse-time">{{ child.time }}</div>-->
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
        <div class="main-content">
          <component :is="mainComponent" :msg="patientTitle" v-if="tableShow"></component>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import diagnosis from './main/components/diagnosis'
import inpatientAdvice from './main/components/inpatientAdvice'
import bloodRoutine from './main/components/bloodRoutine'
import inspect from './main/components/inspect'
import medRecord from './main/components/medRecord'
import surgicalRecord from './main/components/surgicalRecord'
import caseFile from './main/components/caseFile'
import outpatientprescription from './main/components/outpatientPrescription'
import { getClosedLoopList, handlerRequestNoAuth, reqPatientAllRecordCount } from '@/api/patient360'
import medicalRecord from './main/components/medicalRecord'
import admittingDiagnosis from './main/components/admittingDiagnosis'
import longTermMedicalOrder from './main/components/longTermMedicalOrder'
import temporaryMedicalOrder from './main/components/temporaryMedicalOrder'
import hospitalizedRecord from './main/components/hospitalizedRecord'
import courseRecord from './main/components/courseRecord'
import dischargedRecord from './main/components/dischargedRecord'
import diedRecord from './main/components/diedRecord'
import doctorPaper from './main/components/doctorPaper'
import mobileNursing from './main/components/mobileNursing'
import operationApply from './main/components/operationApply'
import operationInfo from './main/components/operationInfo'
import anesthesiaRecordSheet from './main/components/anesthesiaRecordSheet'
import hempManagement from './main/components/hempManagement'
import consultationRecords from './main/components/consultationRecords'
import consentBook from './main/components/consentBook'
export default {
  name: 'Index',
  components: {
    diagnosis,
    inpatientAdvice,
    bloodRoutine,
    inspect,
    medRecord,
    surgicalRecord,
    caseFile,
    outpatientprescription,
    medicalRecord,
    admittingDiagnosis,
    longTermMedicalOrder,
    temporaryMedicalOrder,
    hospitalizedRecord,
    courseRecord,
    dischargedRecord,
    diedRecord,
    doctorPaper,
    mobileNursing,
    operationApply,
    operationInfo,
    anesthesiaRecordSheet,
    hempManagement,
    consultationRecords,
    consentBook
  },
  data() {
    return {
      cycleData: [],
      active: 1,
      activeName: [0, 1, 2, 3],
      collapseData: [
        {
          title: '诊断',
          children: [
            {
              orderId: 1,
              title: '门诊诊断',
              time: '2022-07-26 16:20:10',
              componentName: 'diagnosis',
              count: 0
            }
          ]
        },
        {
          title: '检验检查',
          children: [
            {
              orderId: 2,
              title: '医学检验',
              time: '2022-07-24 09:40:10',
              componentName: 'bloodRoutine',
              count: 0
            },
            {
              orderId: 3,
              title: '影像检查',
              time: '2021-12-02 10:38:52',
              componentName: 'caseFile',
              count: 0
            }
          ]
        },
        {
          title: '处方',
          children: [
            {
              orderId: 4,
              title: '门诊处方',
              time: '2021-12-02 10:38:52',
              componentName: 'outpatientprescription',
              count: 0
            }

          ]
        },
        {
          title: '病历文书',
          children: [
            {
              orderId: 5,
              title: '门诊病历',
              time: '2021-12-02 10:38:52',
              componentName: 'medicalRecord',
              count: 0
            },
            // {
            //   orderId: 6,
            //   title: '电子病历',
            //   time: '2021-12-02 10:38:52',
            //   componentName: 'doctorPaper',
            //   count: 0
            // }

          ]
        }
      ],
      collapseDataInHospital: [
        {
          title: '诊断',
          children: [
            {
              orderId: 1,
              title: '住院诊断',
              time: '2022-07-26 16:20:10',
              componentName: 'admittingDiagnosis',
              count: 0
            }
          ]
        },
        {
          title: '检验检查',
          children: [
            {
              orderId: 2,
              title: '医学检验',
              time: '2022-07-24 09:40:10',
              componentName: 'bloodRoutine',
              count: 0
            },
            {
              orderId: 3,
              title: '影像检查',
              time: '2021-12-02 10:38:52',
              componentName: 'caseFile',
              count: 0
            }
          ]
        },
        {
          title: '医嘱',
          children: [
            {
              orderId: 4,
              title: '长期医嘱',
              time: '2021-12-02 10:38:52',
              componentName: 'longTermMedicalOrder',
              count: 0
            },
            {
              orderId: 5,
              title: '临时医嘱',
              time: '2021-12-02 10:38:52',
              componentName: 'temporaryMedicalOrder',
              count: 0
            }

          ]
        },
        {
          title: '病历文书',
          children: [
            // {
            //   orderId: 6,
            //   title: '电子病历',
            //   time: '2021-12-02 10:38:52',
            //   componentName: 'doctorPaper',
            //   count: 0
            // },
            {
              orderId: 7,
              title: '护理文书',
              time: '2021-12-02 10:38:52',
              componentName: 'mobileNursing',
              count: 0
            }

          ]
        },
        {
          title: '住院记录',
          children: [
            {
              orderId: 8,
              title: '入院记录',
              time: '2021-12-02 10:38:52',
              componentName: 'hospitalizedRecord',
              count: 0
            },
            {
              orderId: 9,
              title: '病程记录',
              time: '2021-12-02 10:38:52',
              componentName: 'courseRecord',
              count: 0
            },
            {
              orderId: 10,
              title: '出院记录',
              time: '2021-12-02 10:38:52',
              componentName: 'dischargedRecord',
              count: 0
            },
            {
              orderId: 11,
              title: '死亡记录',
              time: '2021-12-02 10:38:52',
              componentName: 'diedRecord',
              count: 0
            },
            {
              orderId: 16,
              title: '会诊记录',
              time: '2021-12-02 10:38:52',
              componentName: 'consultationRecords',
              count: 0
            },
            {
              orderId: 17,
              title: '同意书',
              time: '2021-12-02 10:38:52',
              componentName: 'consentBook',
              count: 0
            }

          ]
        },
        {
          title: '手术麻醉',
          children: [
            {
              orderId: 12,
              title: '手术申请',
              time: '2021-12-02 10:38:52',
              componentName: 'operationApply',
              count: 0
            },
            {
              orderId: 13,
              title: '过敏记录',
              time: '2021-12-02 10:38:52',
              componentName: 'hempManagement',
              count: 0
            },
            {
              orderId: 14,
              title: '手术记录',
              time: '2021-12-02 10:38:52',
              componentName: 'operationInfo',
              count: 0
            },
            {
              orderId: 15,
              title: '麻醉记录',
              time: '2021-12-02 10:38:52',
              componentName: 'anesthesiaRecordSheet',
              count: 0
            }

          ]
        }
      ],

      collapseActive: [1, 2, 3],
      mainComponent: '',
      patientInfo: {
        patientName: '',
        sex: '',
        age: '',
        patientProperties: '',
        brithDate: ''
      },
      electronicMedicalRecord: [],
      patientTitle: {},
      manuData: [],
      tableShow: true,
      jzlshFlag: '',
      addToTabs: '',
      patientIds: '',
      Height: '',
      fullscreenLoading: false
    }
  },
  mounted() {
    this.initData(() => {
      this.handleCollapse({
        orderId: 1,
        componentName: 'diagnosis'
      })
    })
    this.Height = document.documentElement.clientHeight -210
    window.onresize = () => {
      this.Height = document.documentElement.clientHeight-210
    }
  },
  methods: {
    //点击树形菜单
    handleCollapse(val) {
      this.collapseActive = val.orderId
      this.mainComponent = val.componentName
    },

    formatYear(time) {
      return moment(time).format('YYYY')
    },
    formatDay(time) {
      return moment(time).format('MM-DD')
    },
    //初始化加载就诊数据
    async initData(callback) {

      let thisContent = this;
      let loading = thisContent.$loading({
        lock: true,
        text: '加载中，请稍候...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.5)'
      })

      this.$route.query.empiId
      this.$route.query.orgCode
      this.$route.query.patientId
      if ( this.$route.query.orgCode && this.$route.query.patientId){
        console.log(this.$route.query.orgCode)
        console.log(this.$route.query.patientId)
        let param = {
          patientId: this.$route.query.patientId,
          orgCode:this.$route.query.orgCode
        }
        param = JSON.stringify(param)
        let data = {
          apiId: '455',
          param: param
        }
        const res = await handlerRequestNoAuth(data)
        this.electronicMedicalRecord = res.data
      }else {
        let param = {
          empiId: this.$route.query.empiId
        }
        param = JSON.stringify(param)
        let data = {
          apiId: '133',
          param: param
        }
        const res = await handlerRequestNoAuth(data)
        this.electronicMedicalRecord = res.data
      }


      this.patientInfo = this.electronicMedicalRecord[0]
      this.cycleData = [
        {
          name: '门诊',
          children: []
        },
        {
          name: '住院',
          children: []
        }
      ]
      let j = 0

      //分组时间条
      for (let i = 0; i < this.electronicMedicalRecord.length; i++) {
        if (this.electronicMedicalRecord[i].clinicClass === '1') {
          this.electronicMedicalRecord[i].patId = i
          this.cycleData[0].children.push(this.electronicMedicalRecord[i])
        } else {
          this.electronicMedicalRecord[i].patId = i
          this.cycleData[1].children.push(this.electronicMedicalRecord[i])
        }
      }
      this.patientIds = ' \''
      for (let i = 0; i <  this.electronicMedicalRecord.length; i++) {
        if (this.electronicMedicalRecord.length === 1){
          this.patientIds = this.patientIds +  this.electronicMedicalRecord[i].patientId+'\''
        }else {
          if (i === 0) {
            this.patientIds = this.patientIds + this.electronicMedicalRecord[i].patientId
          } else if (i === this.electronicMedicalRecord.length - 1) {
            this.patientIds = this.patientIds + '\' , \'' + this.electronicMedicalRecord[i].patientId + '\''
          } else {
            this.patientIds = this.patientIds + '\' , \'' + this.electronicMedicalRecord[i].patientId
          }
        }

      }

      console.log('leng', this.cycleData[0].children)
      //初始化加载哪个组件与目录默认选中
      if (this.cycleData[0].children.length > 0) {
        this.patientTitle = this.cycleData[0].children[0]
        this.patientTitle.patientIds = this.patientIds
        this.active = this.cycleData[0].children[0].patId

        if ( this.$route.query.manue){
          console.log("manue",this.$route.query.manue)
          let parentManue = []
          let parentManueInfo = {
            title:"",
            children:[]
          }
          let manue = []
          for (let i = 0; i < this.collapseData.length; i++) {
            for (let k = 0; k < this.collapseData[i].children.length; k++) {
              if (this.collapseData[i].children[k].componentName === this.$route.query.manue){
                parentManueInfo.title = this.collapseData[i].title
                parentManueInfo.children.push(this.collapseData[i].children[k])
                console.log("parentManueInfo",parentManueInfo)
                parentManue.push(parentManueInfo)
                this.mainComponent = this.collapseData[i].children[k].componentName
              }
            }
          }
          this.manuData = parentManue
        }else {
          this.manuData = this.collapseData
        }

        this.manueCount(this.patientTitle)
        console.log('active', this.active, this.patientTitle)
        if (callback) {
          this.$nextTick(() => {
            callback()
          })
        }
      } else {
        this.patientTitle = this.cycleData[1].children[0]
        this.patientTitle.patientIds = this.patientIds
        this.active = this.cycleData[1].children[0].patId
        this.manuData = this.collapseDataInHospital
        this.manueCount(this.patientTitle)
        if (callback) {
          this.$nextTick(() => {
            callback()
          })
        }
      }
      this.jzlshFlag = this.patientTitle.clinicClass
      loading.close()
      console.log('jzlshFlag', this.jzlshFlag, this.patientTitle, patientIds)
      console.log('初始化就诊数据', res)
    },
    formatSex(val) {
      if (val == '0') {
        return '不确定'
      } else if (val == '1') {
        return '男'
      } else if (val == '2') {
        return '女'
      } else if (val == '9') {
        return '未说明的性别'
      } else {
        return val
      }
    },
    //点击时间流
    async clickLable(pat) {
      console.log('点击', pat)
      this.active = pat.patId
      this.patientTitle = pat
      this.patientTitle.patientIds = this.patientIds
      if (pat.clinicClass === '2') {
        this.manuData = this.collapseDataInHospital
      } else {
        this.manuData = this.collapseData
      }
      // 给树型目录加数据条数
      this.manueCount(pat)
      console.log(' self.addToTabs', this.manuData)
      this.jzlshFlag = pat.clinicClass
      console.log('manue', this.manuData[0], this.activeName)
      this.tableShow = false
      this.handleCollapse(this.manuData[0].children[0])
      this.$nextTick(function() {
        // 加载
        this.tableShow = true
      })
      this.openAllTable()
      this.collapseActive = 1

    },
    formatDate(time) {
      return moment(time).format('YYYY/MM/DD hh:mm')
    },
    change(index, item) {

      if (item.children.length === 1) {
        console.log('item.children', item.children)
        this.handleCollapse(item.children[0])
      }
      console.log('ai')
    },
    openAllTable() {
      // this.activeName.clean()
      for (let i = 0; i < this.manuData.length; i++) {
        this.activeName.push(i)
      }
    },
    //树形菜单每页数据数量
   async manueCount(pat) {
      let registeredId = ''
      let clinicClass = ''
      let recordAppIds = ''
      let self = this
      if (pat.clinicClass === '2') {
        const data1 = {
          configId: 102
        }
        const param_a = {
          apiId: 423,
          param: JSON.stringify(data1),

        }
        await handlerRequestNoAuth(param_a).then((list) => {
        	if(list.data){
        		console.log(list.data)
        		let tabs = list.data.config_value.split(",");
        		recordAppIds = tabs;
        	}
        })
        // recordAppIds = [169, 171, 172, 173, 174, 178, 179, 189, 191]
      } else {
        //门诊
        const data2 = {
          configId: 103
        }
        const param_b = {
          apiId: 423,
          param: JSON.stringify(data2),

        }
        await handlerRequestNoAuth(param_b).then((list) => {
        	if(list.data){
        		console.log(list.data.data)
        		let tabs = list.data.config_value.split(",");
        		recordAppIds = tabs;
        	}
        })
        // recordAppIds = [170, 174, 175, 176, 177]
      }
      const data = {
        empiId: pat.empiId,
        patientId: pat.patientId,
        jzlsh: pat.jzlsh,
        clinicClass: clinicClass,
        orgCode: pat.orgCode,
        registeredId: pat.jzlsh,
        patientIds: this.patientIds
      }
      const param_d = {
        apiId: -1,
        param: JSON.stringify(data),
        recordAppIds: recordAppIds
      }
      //获取树形目录每个菜单数据数量
      reqPatientAllRecordCount(param_d).then(res => {
        if (res.code === 200) {
          const patientAllRecord = res.data
          console.log("aaaa",patientAllRecord,pat)
          if (pat.clinicClass === '2') {
            //住院选项卡
            this.manuData[0].children[0].count = patientAllRecord.count191//门诊诊断
            this.manuData[1].children[0].count = patientAllRecord.count174//医学检验
            this.manuData[1].children[1].count = patientAllRecord.count189//影像检查
            this.manuData[2].children[0].count = patientAllRecord.count172//长期医嘱
            this.manuData[2].children[1].count = patientAllRecord.count171//临时医嘱
            this.manuData[4].children[0].count = patientAllRecord.count446//入院记录
            this.manuData[4].children[1].count = patientAllRecord.count447//病程记录
            this.manuData[4].children[2].count = patientAllRecord.count448//出院记录
            this.manuData[4].children[3].count = patientAllRecord.count449//死亡记录
            this.manuData[4].children[4].count = patientAllRecord.count450//会诊记录
            this.manuData[4].children[5].count = patientAllRecord.count454//同意书
            this.manuData[3].children[0].count = patientAllRecord.count453//电子病历
            this.manuData[5].children[0].count = patientAllRecord.count435//手术申请
            this.manuData[5].children[1].count = patientAllRecord.count433//过敏记录
            // this.manuData[5].children[2].count = patientAllRecord.count435//手术记录
            this.manuData[5].children[3].count = patientAllRecord.count443//手术记录


            // self.addToTabs(patientAllRecord.count191,'住院诊断')
            // self.addToTabs(patientAllRecord.count171,'临时医嘱')
            // self.addToTabs(patientAllRecord.count172,'长期医嘱')
            // self.addToTabs(patientAllRecord.count174,'医学检验')
            // self.addToTabs(patientAllRecord.count189,'影像检查')
            // self.addToTabs(patientAllRecord.count169,'入院记录')
            // // self.addToTabs(patientAllRecord.count173,'病程记录')
            // self.addToTabs(patientAllRecord.count173,'病程记录')
            // self.addToTabs(patientAllRecord.count178,'出院记录')
            // self.addToTabs(patientAllRecord.count179,'死亡记录')
            // self.addToTabs(patientAllRecord.count438,'医生文书')
            // self.addToTabs(patientAllRecord.count435,'手术申请')
            // self.addToTabs(patientAllRecord.count433,'过敏记录')
            // self.addToTabs(1,'护理文书')
            // self.addToTabs(patientAllRecord.count435,'手术记录')
            // self.addToTabs(patientAllRecord.count443,'麻醉记录')
          } else {

            //门诊选项卡
            this.manuData[0].children[0].count = patientAllRecord.count175//门诊诊断
            this.manuData[1].children[0].count = patientAllRecord.count445//医学检验
            this.manuData[2].children[0].count = patientAllRecord.count176//门诊处方
            this.manuData[3].children[0].count = patientAllRecord.count451//门诊病历
            // this.manuData[3].children[1].count = patientAllRecord.count177//电子病历
            // self.addToTabs(patientAllRecord.count175,'门诊诊断')
            // self.addToTabs(patientAllRecord.count174,'医学检验')
            // // self.addToTabs(patientAllRecord.count170,'影像检查')
            // self.addToTabs(2,'影像检查')
            // self.addToTabs(patientAllRecord.count176,'门诊处方')
            // self.addToTabs(patientAllRecord.count177,'门诊病历')
            // // self.addToTabs(patientAllRecord.count439,'电子病历')
            // self.addToTabs(patientAllRecord.count434,'电子病历')
          }
          console.log("asef",this.manuData)
          if (this.menuTabs && this.menuTabs.length > 0) {
            self.tabName = this.menuTabs[self.tabIndex].name
          } else {
            this.addToTabs(1, '未查询到相关信息！')
          }
        }
      })
    },
    formatTime(time) {
      if (time) {
        return moment(time).format('YYYY/MM/DD')
      }
    },
    openFullScreen2() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      setTimeout(() => {
        loading.close();
      }, 2000);
    }
  }

}
</script>

<style scoped lang="scss">
.home {
  display: flex;
  padding: 10px;

  .home-left {
    width: 220px;
    position: relative;
    background: white;
    box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.04);
    min-height: calc(100vh - 70px);
    margin-right: 10px;

    .home-user {
      font-size: 14px;
      color: #333333;
      padding: 10px;
      border-bottom: 1px solid #dddddd;

      .user-top {
        .user-name {
          font-size: 15px;
          color: #333333;
          font-weight: bold;
        }

        span {
          margin-right: 8px;

          &:last-child {
            margin-right: 0;
          }
        }
      }

      .user-item {
        margin-top: 10px;
      }
    }

    .cycle {
      padding: 20px 10px;
      position: relative;

      &:before {
        position: absolute;
        content: "";
        width: 2px;
        height: 100%;
        top: 20px;
        left: 70px;
        background: #e6e6e6;
      }

      .cycle-parent {
        margin-left: 54px;
        font-size: 14px;
        position: relative;
        padding-left: 25px;
        line-height: 20px;
        margin-bottom: 12px;
        font-weight: bold;
        color: #333333;

        &:before {
          position: absolute;
          content: "";
          width: 8px;
          height: 8px;
          top: 2px;
          left: 0;
          border-radius: 200px;
          background: #28b276;
          border: 3px solid #ffffff;
          box-sizing: content-box;
        }
      }

      .cycle-child {
        padding-bottom: 7px;
      }

      .child-item {
        display: flex;
        margin-bottom: 8px;
        align-items: center;

        .child-date {
          width: 60px;
          text-align: right;
          padding-right: 15px;
        }

        .child-day {
          font-size: 12px;
          color: #999;
        }

        .child-year {
          font-size: 14px;
          color: #333333;
        }

        .child-text {
          position: relative;
          font-size: 14px;
          padding-left: 15px;
          color: #444;

          &:before {
            position: absolute;
            content: "";
            width: 6px;
            height: 6px;
            top: 8px;
            left: -4px;
            border-radius: 200px;
            background: #e0e2e4;
            border: 2px solid #ffffff;
            box-sizing: content-box;
          }

          div {
            max-width: 120px;
            padding: 3px 5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }

        .active {
          border: 1px solid #c8eddd;
          color: #28b276;
          background: #e6fcf2;
          position: relative;
        }
      }
    }

  }

  .home-right {
    margin-left: auto;
    flex: 1;
    position: relative;
    background: white;
    box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.04);
    overflow: auto;

    .right-head {
      display: flex;
      align-items: center;
      padding: 0 10px;
      line-height: 40px;
      border-bottom: 1px solid #e7e7e7;

      .right-head-name {
        font-size: 15px;
        font-weight: bold;
        margin: 0 10px;
        color: #333333;
      }

      .right-head-time {
        color: #333333;
        font-size: 14px;
        margin-left: 20px;
      }
    }

    .right-main {
      display: flex;

      .main-collapse {
        width: 160px;
        border-right: 1px solid #e7e7e7;
        min-height: calc(100vh - 111px);

        ::v-deep {
          .el-collapse {
            border-top: none;
          }

          .el-collapse-item__header {
            height: 30px;
            line-height: 30px;
            background: #F2F7FF;
            color: #409eff;
            padding-left: 10px;
          }

          .el-collapse-item__content {
            padding: 0;
          }
        }

        .collapse-des {
          padding: 5px 8px;
          line-height: 18px;
          font-size: 12px;
          color: #333333;
          border-top: 1px solid #e7e7e7;
          cursor: pointer;

          .collapse-title {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            height: 20px;
          }

          .collapse-time {
            color: #999999;
          }
        }

        .collapse-active {
          background: #0A69F3;
          color: white;
          border-right: 4px solid #fcb03f;

          .collapse-time {
            color: white;
          }
        }
      }

      .main-content {
        padding: 20px;
        flex: 1;
        overflow: hidden;
      }
    }

  }
  .tmp {
    white-space: nowrap; /*强制单行显示*/
    text-overflow: ellipsis; /*超出部分省略号表示*/
    overflow: hidden; /*超出部分隐藏*/
    //width: 100px;/*设置显示的最大宽度*/
    display: inline-flex;
  }

}
</style>

