<template>
  <el-dialog class="data-vision" :fullscreen="true" :visible.sync="visible" :modal-append-to-body="false" @close="closedDialog">
    <!-- 上 -->
    <div class="data-vision-top" />
    <!-- 中 -->
    <div class="data-vision-middle">
      <el-row :gutter="16">
        <el-col :span="6">
          <!-- 左侧 -->
          <div class="data-vision-middle-left">
            <!-- 今日数据 -->
            <div class="today-data">
              <p class="title">
                <svg-icon icon-class="icon-three-xiexian" />
                <span style="padding-left:10px;">今日数据</span>
              </p>
              <div class="today-data-content">
                <div class="dp data-flex">
                  <p>手术患者数量</p>
                  <p class="patientData" />
                </div>
                <div class="dh data-flex">
                  <p>新增档案</p>
                  <p class="addArchivesData" />
                </div>
                <div class="qj data-flex">
                  <p>检查项目数</p>
                  <p class="inspectionData" />
                </div>
              </div>
            </div>
            <!-- 当月手术top5 -->
            <div class="month-operation-top5">
              <p class="title">
                <svg-icon icon-class="icon-three-xiexian" />
                <span style="padding-left:10px;">当月手术医生TOP 5</span>
              </p>
              <div class="month-operation-content">
                <month-top-echarts
                  v-if="monthOperationContentHeight"
                  id-name="month-top-echarts"
                  :height="monthOperationContentHeight"
                  :chart-data="monthOperationTopList"
                />
              </div>
            </div>
            <!-- 历史数据录入 -->
            <div class="history-data">
              <p class="title">
                <svg-icon icon-class="icon-three-xiexian" />
                <span style="padding-left:10px;">历史手术记录</span>
              </p>
              <div class="history-data-content">
                <history-data-echarts id-name="history-data-echarts" :chart-data="historyDataList" />
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <!-- 中间 -->
          <div class="data-vision-middle-middle">
            <p class="title">
              <svg-icon icon-class="icon-three-xiexian" />
              <span style="padding-left:10px;">患者信息</span>
            </p>
            <div class="patient-bank-count">
              <div class="sex-age-count">
                <div class="age-count-left">
                  <p>
                    <span>患者总数</span>
                    <span class="patientTotal" />
                  </p>
                  <p>
                    <span>档案总数</span>
                    <span class="archivesTotal" />
                  </p>
                </div>
                <div class="sex-age-count-right">
                  <div class="sex-count">
                    <sex-count-echarts v-if="sexCountHeight" id-name="sex-count-echarts" :height="sexCountHeight" :chart-data="patientAnalyseList.sexAnalyse" />
                  </div>
                  <div class="age-count">
                    <age-count-echarts v-if="sexCountHeight" id-name="age-count-echarts" :height="sexCountHeight" :chart-data="patientAnalyseList.ageAnalyse" />
                  </div>
                </div>
              </div>
              <div class="yanya">
                <p class="patient-bank-title">
                  <svg-icon icon-class="icon-three-xiexian" />
                  <span>眼压分布</span>
                </p>
                <div class="yanya-content">
                  <qipao-echarts v-if="yanyaContentHeight" :height="yanyaContentHeight" id-name="yanya-echarts" :chart-data="yanyaList" />
                </div>
              </div>
              <div class="shili">
                <p class="patient-bank-title">
                  <svg-icon icon-class="icon-three-xiexian" />
                  <span>视力分布</span>
                </p>
                <div class="shili-content">
                  <qipao-echarts v-if="yanyaContentHeight" :height="yanyaContentHeight" id-name="shili-echarts" :chart-data="shiliList" />
                </div>
              </div>
              <div class="yanzhou">
                <p class="patient-bank-title">
                  <svg-icon icon-class="icon-three-xiexian" />
                  <span>眼轴分布</span>
                </p>
                <div class="yanzhou-content">
                  <qipao-echarts v-if="yanyaContentHeight" :height="yanyaContentHeight" id-name="yanzhou-echarts" :chart-data="yanzhouList" />
                </div>
              </div>
            </div>
            <div class="patient-bank-count-bottom" />
          </div>
        </el-col>
        <el-col :span="6">
          <!-- 右侧 -->
          <div class="data-vision-middle-right">
            <!-- 手术诊断用药 -->
            <div class="medication">
              <p class="title">
                <svg-icon icon-class="icon-three-xiexian" />
                <span style="padding-left:10px;">手术-诊断-用药</span>
              </p>
              <div class="medication-diagnosis-content">
                <medication-diagosis-echarts v-if="medicationDiagContentHeight" :height="medicationDiagContentHeight" id-name="medication-diagosis-echarts" :chart-data="medicationList" />
              </div>
            </div>
            <!-- 收费项统计 -->
            <!-- <div class="charge-statistics">
              <p class="title">
                <svg-icon icon-class="icon-three-xiexian" />
                <span style="padding-left:10px;">收费项统计</span>
              </p>
              <div class="charge-statistics-content">
                <month-top-echarts
                  v-if="chargeStatisticsHeight"
                  id-name="charge-statistics-echarts"
                  :height="chargeStatisticsHeight"
                  :chart-data="monthOperationTopList"
                />
              </div>
            </div> -->
          </div>
        </el-col>
      </el-row>
      <el-row />
    </div>
    <!-- 下 -->
    <div class="data-vision-bottom" />
  </el-dialog>
</template>

<script>
import monthTopEcharts from './month-top-echarts.vue'
import historyDataEcharts from './history-data-echarts.vue'
import sexCountEcharts from './sex-count-echarts.vue'
import ageCountEcharts from './age-count-echarts.vue'
import qipaoEcharts from './qipao-echarts.vue'
import medicationDiagosisEcharts from './medication-diagnosis-echarts.vue'
export default {
  components: { monthTopEcharts, historyDataEcharts, sexCountEcharts, ageCountEcharts, qipaoEcharts, medicationDiagosisEcharts },
  props: {
  },
  data() {
    return {
      visible: false,
      drgsName: window.localStorage.getItem('identity'),
      monthOperationContentHeight: '',
      sexCountHeight: '',
      yanyaContentHeight: '',
      medicationDiagContentHeight: '',
      chargeStatisticsHeight: '',
      todayDataList: [{
        name: '手术患者数据',
        value: '1000'
      },
      {
        name: '新增档案',
        value: '100'
      }, {
        name: '检查项目数',
        value: '3000'
      }, {
        name: '患者总数',
        value: '12000'
      }, {
        name: '档案总数',
        value: '13000'
      }],
      monthOperationTopList: [{
        name: '孟医生',
        value: 15
      }, {
        name: '张医生',
        value: 12
      }, {
        name: '刘医生',
        value: 10
      }, {
        name: '李医生',
        value: 8
      }, {
        name: '葛医生',
        value: 6
      }],
      historyDataList: [],
      patientAnalyseList: [],
      yanyaList: {},
      shiliList: {},
      yanzhouList: {},
      medicationList: {},
      diagnosenList: []
    }
  },
  mounted() {

  },
  methods: {
    init() {
      this.visible = true
      this.$nextTick(() => {
        // 今日数据
        this.getTodayDataList()
        // 当月手术top5
        // this.getMonthOperationTop()
        // 获取历史录入数据
        this.getHistoryDataList()
        // 获取患者分析数据
        this.getPatientSnalyse()
        // 获取眼压分布
        this.getYanyaList()
        // 获取视力分布
        this.getShiliList()
        // 获取眼轴分布
        this.getYanzhouList()
        // 获取用药分析
        this.medication()
        // 获取诊断分析
        this.getDiagnosis()
        this.monthOperationContentHeight = document.querySelector('.month-operation-content') ? document.querySelector('.month-operation-content').offsetHeight + 'px' : ''
        this.sexCountHeight = document.querySelector('.sex-count') ? document.querySelector('.sex-count').offsetHeight + 'px' : ''
        this.yanyaContentHeight = document.querySelector('.yanya-content') ? document.querySelector('.yanya-content').offsetHeight + 'px' : ''
        this.medicationDiagContentHeight = document.querySelector('.medication-diagnosis-content') ? document.querySelector('.medication-diagnosis-content').offsetHeight + 'px' : ''
      })
    },
    // 获取今日数据
    async getTodayDataList() {
      // const { data: res } = await this.$http.get('/quguang/data/analyse/todayDpAnalyse')
      // if (res.code === 0) {
      //   this.todayDataList = JSON.parse(JSON.stringify(res.data))
      //   this.todayDataList.forEach(item => {
      //     item.innerHTML = [0, item.value]
      //     item.name === '订片' ? item.targets = '.dpData' : ''
      //     item.name === '到货' ? item.targets = '.dhData' : ''
      //     item.name === '取镜' ? item.targets = '.qjData' : ''
      //     item.name === '总数' ? item.targets = '.patientTotal' : ''
      //     item.name === '今日新增' ? item.targets = '.patientTodayAdd' : ''
      //   })
      //   this.todayDataAnime()
      // } else {
      //   this.$message.error(res.msg)
      // }
      this.todayDataList.forEach(item => {
        item.innerHTML = [0, item.value]
        item.name === '手术患者数据' ? item.targets = '.patientData' : ''
        item.name === '新增档案' ? item.targets = '.addArchivesData' : ''
        item.name === '检查项目数' ? item.targets = '.inspectionData' : ''
        item.name === '患者总数' ? item.targets = '.patientTotal' : ''
        item.name === '档案总数' ? item.targets = '.archivesTotal' : ''
      })
      this.todayDataAnime()
    },
    // 数据动画
    todayDataAnime() {
      this.todayDataList.forEach(item => {
        this.$anime({
          targets: item.targets,
          innerHTML: item.innerHTML,
          easing: 'linear',
          round: 1, // 去除小数点
          duration: 1500
        })
      })
    },
    // 当月订片top5
    async getMonthOperationTop() {
      const { data: res } = await this.$http.get('/quguang/data/analyse/monthDpTop5')
      if (res.code === 0) {
        this.monthOperationTopList = res.data
      } else {
        this.$message.error(res.msg)
      }
    },
    // 获取历史录入数据
    async getHistoryDataList() {
      const { data: res } = await this.$http.get('/quguang/data/analyse/historyInsert')
      if (res.code === 0) {
        this.historyDataList = res.data
      } else {
        this.$message.error(res.msg)
      }
    },
    // 获取患者分析数据
    async getPatientSnalyse() {
      const { data: res } = await this.$http.get('/quguang/data/analyse/patientAnalyse')
      if (res.code === 0) {
        this.patientAnalyseList = res.data
      } else {
        this.$message.error(res.msg)
      }
    },
    // 获取眼压分布
    async getYanyaList() {
      const { data: res } = await this.$http.get('/quguang/data/analyse/IOPAnalyse')
      if (res.code === 0) {
        this.yanyaList = res.data
      } else {
        this.$message.error(res.msg)
      }
    },
    // 获取视力分布
    async getShiliList() {
      const { data: res } = await this.$http.get('/quguang/data/analyse/VAAnalyse')
      if (res.code === 0) {
        this.shiliList = res.data
      } else {
        this.$message.error(res.msg)
      }
    },
    // 获取眼轴分布
    async getYanzhouList() {
      const { data: res } = await this.$http.get('/quguang/data/analyse/ALAnalyse')
      if (res.code === 0) {
        this.yanzhouList = res.data
      } else {
        this.$message.error(res.msg)
      }
    },
    // 获取用药分析
    async medication() {
      const { data: res } = await this.$http.get('/quguang/data/analyse/medicationAnalyse')
      if (res.code === 0) {
        this.medicationList = res.data
      } else {
        this.$message.error(res.msg)
      }
    },
    // 获取诊断分析
    async getDiagnosis() {
      const { data: res } = await this.$http.get('/quguang/data/analyse/diagnoseAnalyse')
      if (res.code === 0) {
        this.diagnosenList = res.data
      } else {
        this.$message.error(res.msg)
      }
    },
    closedDialog() {
      this.$emit('dataVisionVisible')
      this.visible = false
    }
  }
}
</script>
<style lang="scss" scoped>
.data-vision {
  .data-vision-top,
  .data-vision-bottom,
  .today-data {
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
  }
  .data-vision-top {
    height: 70px;
    background: url(../../assets/img/data-vision-head.png) no-repeat top center;
    background-size: 100% 100px;
    position: fixed;
    left: 0;
    width: 100%;
    top: 0;
  }
  .data-vision-bottom {
    height: 60px;
    background: url(../../assets/img/data-vision-bottom.png) no-repeat top
      center;
    background-size: 100% 60px;
    position: fixed;
    left: 0;
    width: 100%;
    bottom: 0;
  }
  .data-vision-middle {
    height: calc(100vh - 70px - 60px);
    padding: 0 24px;
    margin-top: 85px;
    // display: flex;
    color: #fff;
    .title {
      display: flex;
      align-items: center;
      font-size: 16px;
      padding: 0 16px;
      height: 36px;
      background: url(../../assets/img/data-vision-left-head.png) no-repeat top
        center;
      background-size: 100% 48px;
    }
    .svg-icon {
      width: 24px;
    }
    .today-data-content,
    .month-operation-content,
    .history-data-content,.medication-diagnosis-content,.charge-statistics-content {
      padding: 16px;
      width: 100%;
      flex: 1;
      background: rgba(14, 33, 84, 0.6);
      box-shadow: inset 0px 0px 32px rgba(108, 167, 255, 0.4);
      border: 1px solid #3d91e4;
      border-image: -webkit-linear-gradient(
          184deg,
          #3d91e4 50%,
          #133b72,
          #3d91e4,
          #133b72
        )
        5 5;
      border-image: -moz-linear-gradient(
          184deg,
          #3d91e4 50%,
          #133b72,
          #3d91e4,
          #133b72
        )
        5 5;
      border-image: linear-gradient(
          184deg,
          #3d91e4 50%,
          #133b72,
          #3d91e4,
          #133b72
        )
        5 5;
    }
    .data-vision-middle-left {
      display: flex;
      flex-direction: column;
      height: 100%;
      .today-data {
        width: 100%;
        flex: 25%;
        line-height: 30px;
        margin-bottom: 16px;
        display: flex;
        flex-direction: column;
      }
      .month-operation-top5 {
        flex: 35%;
        display: flex;
        flex-direction: column;
      }
      .history-data {
        flex: 40%;
        display: flex;
        flex-direction: column;
      }
      .today-data-content {
        display: flex;
        align-items: center;
        .data-flex {
          flex: 33.33%;
          text-align: center;
          p:nth-child(1) {
            color: #00ffff;
            font-size: 16px;
            white-space: nowrap; // 段落不换行
            text-overflow: ellipsis;
            overflow: hidden;
          }
          p:nth-child(2) {
            color: #ffc700;
            font-size: 24px;
            font-weight: 700;
          }
        }
        .dp,
        .dh {
          border-right: 2px solid #3d91e4;
          border-image: -webkit-linear-gradient(
              transparent,
              #17a5e5,
              transparent
            )
            5 5;
        }
      }

      .month-operation-content {
        padding: 0;
        margin-bottom: 16px;
      }
      .history-data-content {
      }
    }
    .data-vision-middle-middle {
      height: 100%;
      display: flex;
      flex-direction: column;
      .title {
        background: url(../../assets/img/data-vision-middle.png) no-repeat top
          center;
        background-size: 100% 48px;
      }
      .patient-bank-count {
        padding: 0 20px;
        border-bottom: 0;
        flex: 1;
        border-top: 1px solid #3d91e4;
        background: url(../../assets/img/data-vision-middle-two.png) repeat-y bottom;
        background-size: 100%;
        display: flex;
        flex-direction: column;
        .sex-age-count {
          display: flex;
          flex: 35%;
        }
        .age-count-left {
          width: 20%;
          text-align: center;
          display: flex;
          flex-direction: column;
          justify-content: center;
          border-right: 2px solid #3d91e4;
          border-image: -webkit-linear-gradient(
              transparent,
              #17a5e5,
              transparent
            )
            5 5;
          p {
            span {
              display: block;
            }
            span:nth-child(1) {
              color: #00FFFF;
              font-size: 16px;
            }
            span:nth-child(2) {
              color: #FFC700;
              font-size: 24px;
              font-weight: 700;
            }
          }
        }
        p:nth-child(1) {
          margin-bottom: 10px;
        }
        .sex-age-count-right {
          flex: 1;
          height: 100%;
          width: 100%;
          display: flex;
          align-items: center;
        }
        .sex-count,.age-count {
          flex: 50%;
          height: 100%;
        }
        .yanya,.shili,.yanzhou {
          flex: 21.6%;
          display: flex;
          flex-direction: column;
          margin-bottom: 6px;
        }
        .yanzhou {
          margin-bottom: 0;
        }
        .patient-bank-title {
          display: flex;
          align-items: center;
          height: 20px;
          span {
            padding-left: 4px;
            color: #00ffff;
            font-size: 16px;
          }
        }
        .yanya-content {
          flex: 1;
        }
      }
      .patient-bank-count-bottom {
        width: 100%;
        height: 33px;
        background: url(../../assets/img/data-vision-middle-bottom.png) no-repeat bottom;
        background-size: 100% 33px;
      }
    }
    .data-vision-middle-right {
      display: flex;
      flex-direction: column;
      height: 100%;
      .medication {
        flex: 60%;
        display: flex;
        flex-direction: column;
        .medication-diagnosis-content {
          padding: 0;
          // margin-bottom: 16px;
        }
      }

      .charge-statistics {
        flex: 40%;
        display: flex;
        flex-direction: column;
      }
    }
  }
}
</style>

<style lang="scss">
.data-vision {
  .el-dialog__header,
  .el-dialog__body {
    padding: 0;
  }
  .el-dialog__headerbtn {
    z-index: 99;
  }
  .el-dialog.is-fullscreen {
    background: #000000;
  }
  .el-row,
  .el-col {
    height: 100%;
  }
  .el-dialog.is-fullscreen {
    height: 100vh;
    overflow: hidden;
  }
}
</style>

