<template>
  <div id="dataAnalysis">
    <div class="data-title">
      <img src="@/assets/img/DataCenter/wei@2x.png" />
      <div class="line-gredient">无症状人群胃癌筛查随访数据分析</div>
    </div>
    <div class="over-all">
      <div class="data-time">数据截止到 2022-10-20 18:00</div>
      <div class="common-title">总体概览</div>
      <div class="over-box">
        <div class="over-left">
          <div class="left-title">
            <template v-for="(item, index) in overAllData">
              <div :key="index" class="single-data">
                <span>{{ item.label }}</span>
                <span>{{ item.value }}{{ item.suffix }}</span>
              </div>
            </template>
          </div>
          <div class="over-absolute">
            <el-select
              v-model="curSelect"
              placeholder="请选择"
              class="my-el-select"
              @change="changeSelect"
            >
              <el-option
                v-for="item in selectList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="left-map">
            <Map :mapData="mapData"></Map>
          </div>
        </div>
        <div class="over-right">
          <div class="right-title">
            <img src="@/assets/img/DataCenter/bar.png" alt="" />
            <span>当前季度上报量机构排名</span>
          </div>
          <div class="right-list">
            <div
              class="list-item"
              v-for="(item, index) in rangeList"
              :key="index"
              :style="{ color: index < 3 ? '#9bdfff' : '#ffffff' }"
            >
              <div class="index">{{ index + 1 }}</div>
              <div class="name">{{ item.name }}</div>
              <div class="value">{{ item.value }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 详细看板 -->
    <div class="detail-panel">
      <div class="common-title">详细看板</div>
      <div class="crowdDistribution">
        <div class="detail-title">筛查人群分布分析</div>
      </div>
      <div class="pie-list">
        <div class="pie-item">
          <pie-chart
            :class-name="'pie1'"
            :height="'300px'"
            :title="'筛查人群性别分布'"
            :total-num="sexNum"
            :chart-data="pieData1"
            :colorList="colorList1"
          ></pie-chart>
        </div>
        <div class="pie-item">
          <pie-chart
            :class-name="'pie1'"
            :height="'300px'"
            :title="'筛查人群年龄段分布'"
            :total-num="ageNum"
            :chart-data="pieData2"
            :colorList="colorList2"
          ></pie-chart>
        </div>
        <div class="pie-item">
          <pie-chart
            :class-name="'pie1'"
            :height="'300px'"
            :title="'筛查人群风险程度分布'"
            :total-num="riskNum"
            :chart-data="pieData3"
            :colorList="colorList3"
          ></pie-chart>
        </div>
        <div class="pie-item">
          <pie-chart-four
            :class-name="'pie4'"
            :height="'300px'"
            :title="'中高危人群内镜应答情况'"
            :total-num="midhignNum"
            :chart-data="pieData4"
            :colorList="colorList4"
          ></pie-chart-four>
        </div>
      </div>
      <!-- 内镜检出疾病情况 -->
      <div class="deseaseSituation">
        <div class="detail-title">内镜检出疾病情况</div>
      </div>
      <div class="pie-list">
        <div class="pie-item">
          <bar-chart
            :className="'barchart1'"
            :chartData="barData1"
            :chartConfig="chartConfig1"
          ></bar-chart>
        </div>
        <div class="pie-item">
          <bar-chart
            :className="'barchart2'"
            :chartData="barData2"
            :chartConfig="chartConfig2"
          ></bar-chart>
        </div>
        <div class="pie-item">
          <div class="pie-item-title">胃癌内镜检出率</div>
          <pie-chart-two
            :className="'pieChart4'"
            :colorList="pieColor4"
            :totalNum="20"
            :chartData="botPieData"
            :title="'内镜总数'"
          ></pie-chart-two>
        </div>
        <div class="pie-item">
          <div class="pie-item-title">早期胃癌占比</div>
          <pie-chart-two
            :className="'pieChart5'"
            :colorList="pieColor4"
            :totalNum="'70%'"
            :chartData="botPieData2"
            :title="'早期胃癌占比'"
          ></pie-chart-two>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import BarChart from "./Bar/BarChart.vue"
import Map from "./Map/index.vue"
import PieChart from "./Pie/PieChart.vue"
import PieChartFour from "./Pie/PieChartFour.vue"
import PieChartTwo from "./Pie/PieChartTwo.vue"
export default {
  components: { Map, PieChart, PieChartFour, BarChart, PieChartTwo },
  data() {
    return {
      overAllData: [
        { label: "机构总数", prop: "", value: 191, suffix: "家" },
        { label: "筛查总例数", prop: "", value: 139694, suffix: "" },
        { label: "中高危占比", prop: "", value: 37, suffix: "%" },
        { label: "早诊率", prop: "", value: 91, suffix: "%" },
        { label: "HP阳性人数", prop: "", value: 9703, suffix: "" },
      ],
      curSelect: 1,
      selectList: [
        { label: "已筛查数 >1000", value: 1 },
        { label: "已筛查数 500-1000", value: 2 },
        { label: "已筛查数 100-500", value: 3 },
        { label: "已筛查数 <100", value: 4 },
      ],
      rangeList: [
        {
          name: "包头医学院属医院",
          value: 480,
        },
        {
          name: "包头医学院第二附属医院",
          value: 480,
        },
        {
          name: "包头医学院第二附属医院",
          value: 480,
        },
        {
          name: "包头医学院第二附属医院",
          value: 480,
        },
        {
          name: "包头医学院第二附属医院",
          value: 480,
        },
        {
          name: "包头医学院第二附属医院",
          value: 480,
        },
        {
          name: "包头医学院第二附属医院",
          value: 480,
        },
        {
          name: "包头医学院第二附属医院",
          value: 480,
        },
        {
          name: "包头医学院第二附属医院",
          value: 480,
        },
        {
          name: "包头医学院第二附属医院",
          value: 480,
        },
      ],
      sexNum: 123455,
      ageNum: 34512,
      riskNum: 12314,
      midhignNum: 1234,
      colorList1: ["#2197FF", "#1571EA"],
      colorList2: ["#0A56BD", "#1571EA", "#2197FF", "#3DA5FF", "#72BEFF"],
      colorList3: ["#47B7A0", "#FFA424", "#EB7126"],
      colorList4: ["#3B4466", "#1571EA"],
      pieData1: [
        { value: 1048, name: "男性" },
        { value: 735, name: "女性" },
      ],
      pieData2: [
        { value: 10, name: "40-50" },
        { value: 20, name: "50-60" },
        { value: 20, name: "60-70" },
        { value: 20, name: "70-80" },
        { value: 20, name: "80以上" },
      ],
      pieData3: [
        { value: 20, name: "低风险" },
        { value: 20, name: "中风险" },
        { value: 20, name: "高风险" },
      ],
      pieData4: [
        { value: 20, name: "内镜未应答人数" },
        { value: 30, name: "内镜应答人数" },
      ],
      barData1: [
        { name: "Barret食管", value: "27" },
        { name: "反流性食管炎", value: "2" },
        { name: "低级别食管粘膜上皮内瘤变", value: "3" },
      ],
      barData2: [
        { name: "非萎缩性胃炎", value: "27" },
        { name: "萎缩性胃炎", value: "2" },
        { name: "胃息肉", value: "3" },
        { name: "胃溃疡", value: "8" },
        { name: "十二指肠球部溃疡", value: "11" },
        { name: "低级别胃粘膜上皮内瘤变", value: "11" },
      ],
      chartConfig1: {
        title: "食管良性疾病检出率",
      },
      chartConfig2: {
        title: "胃良性疾病检出率",
      },
      pieColor4: ["#4EC2AA", "#4EB6FF", "#4E6EFF"],
      botPieData: [
        { value: 20, name: "高级别胃粘膜上皮内瘤变数" },
        { value: 30, name: "早期胃癌数" },
        { value: 30, name: "进展期胃癌" },
      ],
      botPieData2: [
        { value: 20, name: "高级别胃粘膜上皮内瘤变数" },
        { value: 30, name: "早期胃癌数" },
        { value: 30, name: "进展期胃癌" },
      ],
      mapData: [
        {
          name: "静安区中心医院",
          value: 123,
        },
        {
          name: "呼和浩特市第一医院",
          value: 456,
        },
      ],
    }
  },
  watch: {},
  mounted() {},
  methods: {
    changeSelect(v) {
      console.log(v)
      this.mapData = [
        {
          name: "上海长海医院",
          value: 123,
        },
        {
          name: "南方医科大学南海医院",
          value: 456,
        },
      ]
    },
  },
}
</script>
<style lang="scss" scoped>
#dataAnalysis {
  width: 100%;
  height: calc(100vh - 108px);
  overflow: auto;
  padding: 0 24px;
  background: #202232;
  .data-title {
    margin: 0 auto 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 764px;
    height: 96px;
    background: #141725;
    // border-radius: 0px 0px 50px 50px;
    img {
      width: 56px;
      height: 56px;
      margin-right: 10px;
    }
    .line-gredient {
      font-weight: bold;
      font-size: 28px;
      font-family: AlibabaPuHuiTiB;
      // color: #4e68ff;
      background: linear-gradient(111deg, #c3ccff 0%, #778bff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .common-title {
    font-size: 24px;
    position: relative;
    font-family: AlibabaPuHuiTiB;
    font-weight: bold;
    color: #a8b5ff;
    background: linear-gradient(145deg, #a8c9ff 0%, #8c9aec 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-indent: 26px;
    margin-bottom: 24px;
    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 2px;
      width: 10px;
      height: 28px;
      background: #a8c9ff;
    }
  }

  .over-all {
    position: relative;
    .data-time {
      position: absolute;
      left: 50%;
      transform: translateX(-50%) translateY(-10px);
      width: 232px;
      height: 30px;
      background: linear-gradient(
        180deg,
        rgba(213, 242, 255, 0.25) 0%,
        rgba(255, 255, 255, 0) 49%,
        rgba(215, 242, 255, 0.25) 100%
      );
      font-size: 16px;
      font-family: AlibabaPuHuiTiR;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #dbe0ff;
    }
    .over-box {
      display: flex;
      justify-content: space-between;
      .over-left {
        // min-width: 1103px;
        width: 79.5%;
        height: 628px;
        margin-right: 20px;
        display: flex;
        flex-direction: column;
        position: relative;
        .left-title {
          width: 100%;
          height: 74px;
          background: linear-gradient(180deg, #252c49 0%, #434c71 100%);
          border-radius: 4px 4px 0px 0px;
          display: flex;
          align-items: center;
          padding: 0 24px;
          .single-data {
            margin-right: 28px;
            span {
              &:first-child {
                font-size: 20px;
                font-family: AlibabaPuHuiTiR;
                color: #ffffff;
                margin-right: 8px;
              }
              &:last-child {
                font-size: 20px;
                font-family: AlibabaPuHuiTiR;
                color: #ffe131;
              }
            }
          }
        }
        .over-absolute {
          position: absolute;
          left: 20px;
          top: 94px;
          z-index: 100;
          .my-el-select {
            ::v-deep .el-input {
              input {
                width: 226px;
                font-size: 16px;
                color: #a8c9ff;
                height: 44px;
                border: 1px solid rgba(168, 201, 255, 0.5);
                background: #19283f;
              }
            }
          }
        }
        .left-map {
          flex: 1;
          position: relative;
        }
        #map {
          height: 554px;
          background: url("~@/assets/img/DataCenter/NB-Map-7@2x.png") no-repeat;
          background-size: 100% 100%;
        }
      }
      .over-right {
        // min-width: 266px;
        width: 19%;
        height: 628px;
        background: #252c49;
        border-radius: 4px;
        .right-title {
          height: 74px;
          background: linear-gradient(180deg, #252c49 0%, #303859 100%);
          border-radius: 4px 4px 0px 0px;
          display: flex;
          align-items: center;
          padding-left: 18px;
          img {
            width: 16px;
            height: 16px;
            margin-right: 8px;
          }
          span {
            font-size: 14px;
            font-family: AlibabaPuHuiTiM;
            color: #9bdfff;
          }
        }
        .right-list {
          height: 554px;
          padding: 0 18px 18px;
          overflow: auto;
          .list-item {
            font-size: 14px;
            font-family: AlibabaPuHuiTiM;

            margin-top: 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .index {
              width: 20px;
            }
            .name {
              flex: 1;
              padding: 0 4px;
              word-break: break-all;
            }
            .value {
              width: 60px;
            }
          }
        }
      }
    }
  }
  .detail-panel {
    margin-top: 24px;
    // margin-bottom: 24px;
    .detail-title {
      width: 230px;
      height: 46px;
      line-height: 46px;
      padding-left: 18px;
      font-size: 18px;
      background: linear-gradient(
        90deg,
        rgba(168, 181, 255, 0.4) 0%,
        rgba(168, 181, 255, 0) 100%
      );
      border-radius: 4px 4px 0px 0px;
      color: #cad2ff;
    }
    .pie-list {
      width: 100%;
      height: 334px;
      background: #252c49;
      display: flex;
      margin-bottom: 32px;
      .pie-item {
        padding: 30px 0;
        flex: 1;
      }
    }
  }
}
.pie-item-title {
  text-align: center;
  color: #fff;
  font-size: 18px;
}
</style>
<style lang="scss">
// ::v-deep {
.el-select-dropdown {
  background: #19283f !important;
  border: 1px solid rgba(168, 201, 255, 0.5);
  .el-select-dropdown__item {
    color: #a8c9ff;
  }
  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    background: #283c5a;
  }
  .el-select-dropdown__item.selected {
    background: #283c5a;
  }
}
// }
</style>
