<template>
  <div class="bg-box">
    <!-- 搜索栏 -->
    <div class="bg-card" style="margin-bottom: 18px;">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="出院日期" style="margin-bottom: 0">
          <el-date-picker v-model="formInline.start_time" type="date" placeholder="出院开始日期" value-format="yyyyMMdd" />
        </el-form-item>
        <span style="margin-right: 10px; line-height: 40px; color: #7E8BAB;">至</span>
        <el-form-item label="" style="margin-bottom: 0">
          <el-date-picker v-model="formInline.end_time" type="date" placeholder="出院结束日期" value-format="yyyyMMdd" />
        </el-form-item>
        <el-form-item style="margin-bottom: 0">
          <el-button type="primary" class="bg185DA6" @click="onGobalSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 汇总统计 -->
    <div class="bg-card" style="margin-bottom: 24px; padding">
      <CardTitle title="汇总统计">
        <el-image
          class="title_arrow"
          :class="{'arrow_top': !tongji_show}"
          :src="require('../../assets/images/arrow-down.png')"
          fit="contain"
          @click="onToggleTongjiShow">
        </el-image>
      </CardTitle>
      <el-collapse-transition>
        <div v-show="tongji_show">
          <el-row :gutter="20">
            <el-col :span="16">
              <el-row :gutter="20">
                <el-col :span="8">
                  <div class="tongji-item">
                    <div class="title">首页总例数</div>
                    <div class="middle">日均例数：<span>{{ tongjiData.dayAvg }}</span></div>
                    <div class="count">{{ tongjiData.blSum }}</div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="tongji-item nth2">
                    <div class="title">缺陷总例数</div>
                    <div class="middle">缺陷例数占比：<span>{{ tongjiData.averageError }}%</span></div>
                    <div class="count">{{ tongjiData.qxSum }}</div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="tongji-item">
                    <div class="title">平均得分</div>
                    <!-- <div class="middle">缺陷例数占比：<span>77.12%</span></div> -->
                    <div class="count">{{ tongjiData.averageScore }}</div>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="8">
                <el-col :span="5">
                  <div class="level-item">
                    <el-col :span="12">
                      <span class="level">优</span>
                      <span class="count">{{ tongjiData.you_sum }}</span>
                    </el-col>
                    <el-col :span="12" class="text-right">
                      <span>占比{{ tongjiData.you_ratio }}%</span>
                    </el-col>
                  </div>
                </el-col>
                <el-col :span="5">
                  <div class="level-item">
                    <el-col :span="12">
                      <span class="level">良</span>
                      <span class="count">{{ tongjiData.liang_sum }}</span>
                    </el-col>
                    <el-col :span="12" class="text-right">
                      <span>占比{{ tongjiData.liang_ratio }}%</span>
                    </el-col>
                  </div>
                </el-col>
                <el-col :span="5">
                  <div class="level-item">
                    <el-col :span="12">
                      <span class="level">中</span>
                      <span class="count">{{ tongjiData.zhong_sum }}</span>
                    </el-col>
                    <el-col :span="12" class="text-right">
                      <span>占比{{ tongjiData.zhong_ratio }}%</span>
                    </el-col>
                  </div>
                </el-col>
                <el-col :span="5">
                  <div class="level-item">
                    <el-col :span="12">
                      <span class="level">差</span>
                      <span class="count">{{ tongjiData.cha_sum }}</span>
                    </el-col>
                    <el-col :span="12" class="text-right">
                      <span>占比{{ tongjiData.cha_ratio }}%</span>
                    </el-col>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="level-item" style="background: #fff;">
                    <el-popover placement="top-start" title="" width="245" trigger="hover">
                      <div slot v-html="levelText"></div>
                      <div slot="reference" class="text-center" style="color: #D38D14; font-size: 16px;">
                        <i class="el-icon-warning-outline"></i>
                        等级计算说明
                      </div>
                    </el-popover>
                  </div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="8">
              <div id="tongji_pie"></div>
            </el-col>
          </el-row>
        </div>
      </el-collapse-transition>
    </div>
    <!-- 缺陷详情 -->
    <div class="bg-card" style="margin-bottom: 24px; padding">
      <CardTitle title="缺陷详情">
        <el-image
          class="title_arrow"
          :class="{'arrow_top': !quxian_show}"
          :src="require('../../assets/images/arrow-down.png')"
          fit="contain"
          @click="onToggleQuexianShow">
        </el-image>
      </CardTitle>
      <el-collapse-transition>
        <div v-show="quxian_show">
          <el-row :gutter="20">
            <el-col :span="16">
              <div class="mb20">
                <el-radio-group v-model="qxxqData.radio" text-color="#185DA6" fill="#ffffff" @change="handleRadioChange">
                  <el-radio-button :label="1">缺陷问题（前十）</el-radio-button>
                  <el-radio-button :label="2">缺陷问题</el-radio-button>
                </el-radio-group>
              </div>
              <!-- 搜索栏 -->
              <el-form :inline="true" :model="qxxqData" class="demo-form-inline mb20">
                <el-form-item label="缺陷分类" style="margin-bottom: 0">
                  <el-select v-model="qxxqData.type" clearable filterable placeholder="全部">
                    <el-option label="患者基本信息" :value="0"></el-option>
                    <el-option label="诊疗信息" :value="1"></el-option>
                    <el-option label="费用信息" :value="2"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="出院科室" style="margin-bottom: 0">
                  <el-select v-model="qxxqData.dep_id" clearable filterable placeholder="全部">
                    <el-option v-for="(item, index) in departmentList" :label="item.name" :value="item.id" :key="index"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item style="margin-bottom: 0">
                  <el-button type="primary" class="bg185DA6" @click="onQuexianSearch">查询</el-button>
                </el-form-item>
              </el-form>
              <!-- 表格 -->
              <el-table
                :data="tableData"
                class="mb20"
                style="width: 100%">
                <el-table-column
                  type="index"
                  label="序号"
                  width="80"
                  align="center">
                </el-table-column>
                <el-table-column
                  prop="desc"
                  label="缺陷描述"
                  align="center"
                  show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span class="c_FF786F">{{ scope.row.desc }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="field"
                  label="缺陷字段"
                  width="140"
                  align="center"
                  show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                  prop="level"
                  label="缺陷分级"
                  width="140"
                  align="center">
                </el-table-column>
                <el-table-column
                  prop="count"
                  label="缺陷数量"
                  width="140"
                  align="center">
                  <template slot-scope="scope">
                    <span class="link">{{ scope.row.count }}</span>
                  </template>
                </el-table-column>
              </el-table>
              <!-- 分页 -->
              <div class="text-right" v-if="qxxqData.radio === 2">
                <el-pagination
                  background
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="paginationData.page"
                  :page-size="paginationData.size"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="paginationData.total">
                </el-pagination>
              </div>
            </el-col>
            <el-col :span="8">
              <div id="qxxq_pie"></div>
            </el-col>
          </el-row>
        </div>
      </el-collapse-transition>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        levelText: '优：≥97分；</br>' + '良：90~96分且不出现A类错误；</br>' + '中：75~89分且不出现A类错误；</br>' + '差：＜75分。',
        formInline: {
          start_time: '',
          end_time: '',
        },
        tongjiData: {
          blSum: 0,
          dayAvg: 0,
          qxSum: 0,
          averageError: 0,
          averageScore: 0,
          minScore: 0,
          you_sum: 0,
          liang_sum: 0,
          zhong_sum: 0,
          cha_sum: 0,
          you_ratio: 0,
          liang_ratio: 0,
          zhong_ratio: 0,
          cha_ratio: 0,
          jbxx: 0,
          zlxx: 0,
          fyxx: 0,
          qtxx: 0
        },
        tongji_show: true,
        tongjiDom: null,
        // 缺陷详情
        quxian_show: true,
        qxxqData: {
          radio: 1,
          dep_id: '',
          level: ''
        },
        tableData: [],
        paginationData: {
          page: 1,
          size: 10,
          total: 100
        },
        departments: []
      }
    },
    async mounted() {
      this.getDepartmentData()
      await this.getTongjiData()
      this.tongjiPie()
      this.qxxqPie()
      this.getQuexianData()
    },
    methods: {
      // 全局筛选
      async onGobalSearch() {
        await this.getTongjiData()
        this.tongjiPieUpdate()
        this.qxxqPieUpdate()
        this.getQuexianData()
      },
      // 获取缺陷数据
      getQuexianData() {
        const { dep_id, level } = this.qxxqData
        const { page, size } = this.paginationData
        const params = {
          dep_id,
          level,
          page,
          page_size: size,
          ...this.formInline
        }
        this.$axios_new.post('/api/bmy/qualityData', params).then(res => {
          this.tableData = res.data.data
          this.paginationData.total = res.data.count
        })
      },
      // 获取部门集合
      getDepartmentData() {
        this.$axios.post('/get_omr_department_list').then(res => {
          this.departmentList = res.data;
        });
      },
      // 获取统计信息
      async getTongjiData() {
        await this.$axios_new.post('/api/bmy/qualityStatistics', this.formInline).then(res => {
          this.tongjiData = res.data
        })
      },
      onToggleTongjiShow() {
        this.tongji_show = !this.tongji_show
      },
      onToggleQuexianShow() {
        this.quxian_show = !this.quxian_show
      },
      // 统计环图
      tongjiPie() {
        this.tongjiDom = this.$echarts.init(
          document.getElementById('tongji_pie')
        )
        const option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'right',
            orient: 'vertical',
            align: 'left'
          },
          color: ['#5087EC', '#FF786F'],
          series: [
            {
              type: 'pie',
              radius: ['60%', '80%'],
              avoidLabelOverlap: false,
              label: {
                show: true,
                formatter: '{b}: {c}'
              },
              labelLine: {
                show: true
              },
              data: [
                { value: this.tongjiData.blSum, name: '首页总病例' },
                { value: this.tongjiData.qxSum, name: '缺陷总例数' },
              ]
            }
          ]
        }
        this.tongjiDom.setOption(option)
        // 窗口大小改变 重新渲染
        window.addEventListener('resize', () => {
          this.tongjiDom.resize()
        })
      },
      tongjiPieUpdate() {
        const option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'right',
            orient: 'vertical',
            align: 'left'
          },
          color: ['#5087EC', '#FF786F'],
          series: [
            {
              type: 'pie',
              radius: ['60%', '80%'],
              avoidLabelOverlap: false,
              label: {
                show: true,
                formatter: '{b}: {c}'
              },
              labelLine: {
                show: true
              },
              data: [
                { value: this.tongjiData.blSum, name: '首页总病例' },
                { value: this.tongjiData.qxSum, name: '缺陷总例数' },
              ]
            }
          ]
        }
        this.tongjiDom.setOption(option)
      },
      // 缺陷环图
      qxxqPie() {
        this.tongjiDom = this.$echarts.init(
          document.getElementById('qxxq_pie')
        )
        const option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '10%',
            left: 'center',
            align: 'left'
          },
          color: ['#FF8279', '#FF9F98', '#FFBEB9', '#FFD9D6'],
          series: [
            {
              type: 'pie',
              top: '20%',
              radius: ['55%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: true,
                formatter: '{b}: {c}'
              },
              labelLine: {
                show: true
              },
              data: [
                { value: this.tongjiData.jbxx || 0, name: '患者基本信息' },
                { value: this.tongjiData.zlxx || 0, name: '诊疗信息' },
                { value: this.tongjiData.fyxx || 0, name: '费用信息' },
                { value: this.tongjiData.qtxx || 0, name: '其他信息' }
              ]
            }
          ]
        }
        this.tongjiDom.setOption(option)
        // 窗口大小改变 重新渲染
        window.addEventListener('resize', () => {
          this.tongjiDom.resize()
        })
      },
      qxxqPieUpdate() {
        const option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '10%',
            left: 'center',
            align: 'left'
          },
          color: ['#FF8279', '#FF9F98', '#FFBEB9', '#FFD9D6'],
          series: [
            {
              type: 'pie',
              top: '20%',
              radius: ['55%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: true,
                formatter: '{b}: {c}'
              },
              labelLine: {
                show: true
              },
              data: [
                { value: this.tongjiData.jbxx || 0, name: '患者基本信息' },
                { value: this.tongjiData.zlxx || 0, name: '诊疗信息' },
                { value: this.tongjiData.fyxx || 0, name: '费用信息' },
                { value: this.tongjiData.qtxx || 0, name: '其他信息' }
              ]
            }
          ]
        }
        this.tongjiDom.setOption(option)
      },
      // 分页
      handleSizeChange(val) {
        this.paginationData.page = 1
        this.paginationData.size = val
        this.getQuexianData()
        
      },
      handleCurrentChange(val) {
        this.paginationData.page = val
        this.getQuexianData()
      },
      // tag 修改
      handleRadioChange(val) {
        if (val === 1) {
          this.paginationData.page = 1
          this.paginationData.size = 10
        }
        this.getQuexianData()
      },
      // 缺陷搜索
      onQuexianSearch() {
        this.paginationData.page = 1
        this.getQuexianData()
      }
    }
  }
</script>

<style lang="scss" scoped>
::v-deep .el-radio-button__inner  {
  border-color: #DCDFE6 !important;
  font-weight: 500;
  &:hover {
    color: #606266;
  }
}
::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner {
  box-shadow: #DCDFE6 -1px 0px 0px 0px !important;
}
.tongji-item {
  height: 114px;
  background: #5087EC;
  border-radius: 8px;
  margin-bottom: 20px;
  padding: 25px 18px 0;
  box-sizing: border-box;
  position: relative;
  &.nth2 {
    background: #FF786F;
  }
  .title {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 22px;
    margin-bottom: 20px;
  }
  .middle {
    text-align: right;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 22px;
    position: absolute;
    top: 45px;
    right: 18px;
  }
  .count {
    font-size: 24px;
    font-family: DINAlternate-Bold, DINAlternate;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 28px;
  }
}
.level-item {
  height: 75px;
  background: #EAF4FF;
  border-radius: 4px;
  padding: 0 11px;
  box-sizing: border-box;
  span {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 75px;
    vertical-align: middle;
  }
  .level {
    font-size: 20px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 75px;
  }
  .count {
    font-size: 24px;
    font-family: DINAlternate-Bold, DINAlternate;
    font-weight: bold;
    color: #38A1F2;
    line-height: 75px;
    margin-left: 5px;
  }
}
.title_arrow {
  width: 10px;
  height: 11px;
  margin-left: 5px;
  cursor: pointer;
  &.arrow_top {
    transform: rotate(180deg);
  }
}
#tongji_pie {
  height: 200px;
}
#qxxq_pie {
  height: 600px;
  margin-top: 68px;
}
</style>