<template>
  <div class="bg-box">
    <!-- 搜索栏 -->
    <div class="bg-card mb20">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="" style="margin-bottom: 0">
          <el-input v-model="formInline.user" placeholder="医院名称"></el-input>
        </el-form-item>
        <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>
        <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">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 统计部分 -->
    <div class="bg-card mb20">
      <div class="radio-box mb20">
        <el-radio-group v-model="tongjiradio">
          <el-radio-button :label="1">全院质控结果分析</el-radio-button>
          <el-radio-button :label="2">科室质控结果分析</el-radio-button>
        </el-radio-group>
      </div>
      <el-row :gutter="20" class="mb20">
        <el-col :span="8">
          <el-card shadow="never">
            <div class="card-item">
              <div class="main mb20">
                首页总例数：
                <span class="count">50000</span>
              </div>
              <div class="sub">
                日均例数：
                <span>50000</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="never">
            <div class="card-item">
              <div class="main mb20">
                缺陷总例数：
                <span class="count">50000</span>
              </div>
              <div class="sub">
                缺陷例数占比：
                <span>77.13%</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="never">
            <div class="card-item">
              <div class="main mb20">
                平均分：
                <span>96.62</span>
              </div>
              <div class="sub">
                最低分：
                <span>77.5</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="5">
          <div class="category-item">
            <span class="category">优</span>
            <span class="count">4000</span>
            <span>占比</span>
            <span>25%</span>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="category-item">
            <span class="category">良</span>
            <span class="count">4000</span>
            <span>占比</span>
            <span>25%</span>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="category-item">
            <span class="category">中</span>
            <span class="count">4000</span>
            <span>占比</span>
            <span>25%</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="category-item">
            <span class="category">差</span>
            <span class="count">4000</span>
            <span>占比</span>
            <span>25%</span>
          </div>
        </el-col>
        <el-col :span="3">
          <el-popover placement="top-start" title="" width="245" trigger="hover">
            <div slot v-html="levelText"></div>
            <div slot="reference" style="text-align: right">
              <i class="el-icon-question"></i>
              等级计算说明
            </div>
          </el-popover>
        </el-col>
      </el-row>
    </div>
    <!-- 缺陷问题分析 -->
    <QxwtfxVue />
    <!-- 科室优秀率 -->
    <KsyxlVue />
    <!-- 科室平均分 -->
    <div class="bg-card mb20">
      <CardTitle title="科室平均分" />
    </div>
    <!-- 科室质控结果 -->
    <div class="bg-card mb20">
      <CardTitle title="科室质控结果" />
    </div>
    <!-- 主治医师合格率 -->
    <div class="bg-card mb20">
      <CardTitle title="主治医师合格率" />
    </div>
    <!-- 主治医师平均分 -->
    <div class="bg-card mb20">
      <CardTitle title="主治医师平均分" />
    </div>
    <!-- 主治医师质控结果 -->
    <div class="bg-card mb20">
      <CardTitle title="主治医师质控结果" />
    </div>
    <!-- 住院医师合格率 -->
    <div class="bg-card mb20">
      <CardTitle title="住院医师合格率" />
    </div>
    <!-- 住院医师平均分 -->
    <div class="bg-card mb20">
      <CardTitle title="住院医师平均分" />
    </div>
    <!-- 住院医师质控结果 -->
    <div class="bg-card mb20">
      <CardTitle title="住院医师质控结果" />
    </div>
    <!-- 编码员排名 -->
    <div class="bg-card mb20">
      <CardTitle title="编码员排名" />
    </div>
    <!-- 缺陷问题 -->
    <div class="bg-card mb20">
      <CardTitle title="缺陷问题" />
    </div>
  </div>
</template>

<script>
import KsyxlVue from './components/Ksyxl.vue';
import QxwtfxVue from './components/Qxwtfx.vue';

export default {
  components: {
    QxwtfxVue,
    KsyxlVue
  },
  data() {
    return {
      formInline: {
        hospital: '',
        start_time: '',
        end_time: '',
      },
      tongjiradio: 2,
      levelText: '优：≥97分；</br>' + '良：90~96分且不出现A类错误；</br>' + '中：75~89分且不出现A类错误；</br>' + '差：＜75分。',
    };
  },
};
</script>

<style lang="scss" scoped>
.radio-box {
  text-align: center;
}
.card-item {
  text-align: center;
  .main {
    font-size: 24px;
    span {
      font-size: 24px;
      color: #409eff;
    }
  }
  .sub {
    font-size: 14px;
  }
}
.category-item {
  text-align: center;
  margin: 20px 0;
  span {
    font-size: 14px;
  }
  .category {
    font-size: 18px;
  }
  .count {
    font-size: 14px;
    color: #409eff;
    margin-right: 20px;
  }
}
</style>