<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"
              popper-class="my-poper"
              @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.unionName }}</div>
              <div class="value">{{ item.count }}</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="screenNum"
            :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"
import {
  screenOverview,
  unionList,
  sixMonthList,
  genderCount,
  ageCount,
  riskCount,
  checkCondition,
  esophagusBenign,
  gastricBenign,
  cancerFound,
  earlyGastric,
} from "@/api/screen.js"
export default {
  components: { Map, PieChart, PieChartFour, BarChart, PieChartTwo },
  data() {
    return {
      overAllData: [
        { label: "机构总数", prop: "unionCount", value: 0, suffix: "家" },
        { label: "筛查总例数", prop: "patientCount", value: 0, suffix: "" },
        {
          label: "中高危占比",
          prop: "highMiddlePercent",
          value: 0,
          suffix: "%",
        },
        { label: "早诊率", prop: "earlyDiagnosis", value: 0, suffix: "%" },
        { label: "HP阳性人数", prop: "hp", value: 0, suffix: "" },
      ],
      curSelect: 1,
      selectList: [
        { label: "已筛查数 >1000", value: 1 },
        { label: "已筛查数 500-1000", value: 2 },
        { label: "已筛查数 100-500", value: 3 },
        { label: "已筛查数 <100", value: 4 },
      ],
      rangeList: [],
      sexNum: 0,
      ageNum: 0,
      riskNum: 0,
      midhignNum: 0,
      colorList1: ["#2197FF", "#1571EA"],
      colorList2: ["#0A56BD", "#1571EA", "#2197FF", "#3DA5FF", "#72BEFF"],
      colorList3: ["#47B7A0", "#FFA424", "#EB7126"],
      colorList4: ["#3B4466", "#1571EA"],
      pieData1: [
        { value: 0, name: "男性" },
        { value: 0, name: "女性" },
      ],
      pieData2: [
        { value: 0, name: "40-50" },
        { value: 0, name: "50-60" },
        { value: 0, name: "60-70" },
        { value: 0, name: "70-80" },
        { value: 0, name: "80以上" },
      ],
      pieData3: [
        { value: 0, name: "低风险" },
        { value: 0, name: "中风险" },
        { value: 0, name: "高风险" },
      ],
      pieData4: [
        { value: 0, name: "内镜未应答人数" },
        { value: 0, name: "内镜应答人数" },
      ],
      barData1: [
        { name: "Barret食管", value: "0" },
        { name: "反流性食管炎", value: "0" },
        { name: "低级别食管粘膜上皮内瘤变", value: "0" },
      ],
      barData2: [
        { name: "非萎缩性胃炎", value: "0" },
        { name: "萎缩性胃炎", value: "0" },
        { name: "胃息肉", value: "0" },
        { name: "胃溃疡", value: "0" },
        { name: "十二指肠球部溃疡", value: "0" },
        { name: "低级别胃粘膜上皮内瘤变", value: "0" },
      ],
      chartConfig1: {
        title: "食管良性疾病检出率",
      },
      chartConfig2: {
        title: "胃良性疾病检出率",
      },
      pieColor4: ["#4EC2AA", "#4EB6FF", "#4E6EFF"],
      botPieData: [
        { value: 0, name: "患癌占比" },
        { value: 0, name: "未患癌占比" },
        // { value: 0, name: "进展期胃癌" },
      ],
      screenNum: 0,
      botPieData2: [
        { value: 0, name: "患癌占比" },
        { value: 0, name: "未患癌占比" },
      ],
      mapData: [],
    }
  },
  watch: {},
  mounted() {
    this.screenOverview()
    this.getUnionList()
    this.getSixMonthList()
    this.getGenderCount()
    this.getAgeCount()
    this.getRiskCount()
    this.getCheckCondition()
    this.esophagusBenignList()
    this.gastricBenignList()
    this.cancerFound()
    this.earlyGastric()
  },
  methods: {
    changeSelect(v) {
      this.getUnionList()
    },
    // 总体概览五个数值
    screenOverview() {
      screenOverview().then((res) => {
        if (res.code == 1) {
          let data = res.data
          this.overAllData.forEach((e, index) => {
            let prop = e.prop
            if (data[prop]) {
              this.overAllData[index].value = data[prop]
            } else {
              this.overAllData[index].value = 0
            }
          })
        }
      })
    },
    // 地图列表
    getUnionList() {
      let type = this.curSelect
      unionList({ type }).then((res) => {
        if (res.code == 1) {
          let data = res.data
          if (data && data.length > 0) {
            // data = [
            //   {
            //     unionId: "1638093098842075138",
            //     unionName: "静安区中心医院",
            //     count: 21,
            //   },
            // ]
            this.mapData = []
            data.forEach((e) => {
              let obj = {
                name: e.unionName,
                value: e.count,
                unionId: e.unionId,
              }
              this.mapData.push(obj)
            })
          }
        }
      })
    },
    // 近六个月
    getSixMonthList() {
      sixMonthList().then((res) => {
        if (res.code == 1 && res.data) {
          this.rangeList = res.data
        }
      })
    },
    getGenderCount() {
      genderCount().then((res) => {
        if (res.code == 1) {
          this.pieData1[0].value = res.data.man
          this.pieData1[1].value = res.data.woman
          this.sexNum = res.data.total
        }
      })
    },
    getAgeCount() {
      ageCount().then((res) => {
        if (res.code == 1) {
          this.pieData2[0].value = res.data.num1
          this.pieData2[1].value = res.data.num2
          this.pieData2[2].value = res.data.num3
          this.pieData2[3].value = res.data.num4
          this.pieData2[4].value = res.data.num5
          this.ageNum = res.data.num
        }
      })
    },
    getRiskCount() {
      riskCount().then((res) => {
        if (res.code == 1) {
          this.pieData3[0].value = res.data.low
          this.pieData3[1].value = res.data.medium
          this.pieData3[2].value = res.data.high
          this.riskNum = res.data.total
        }
      })
    },
    // 内径应答情况
    getCheckCondition() {
      checkCondition().then((res) => {
        if (res.code == 1) {
          this.pieData4[0].value = res.data.checked
          this.pieData4[1].value = res.data.unChecked
          this.midhignNum = res.data.total
        }
      })
    },
    // 食管 良性疾病检出率
    esophagusBenignList() {
      esophagusBenign().then((res) => {
        if (res.code == 1 && res.data) {
          this.barData1[0].value = res.data.barret
          this.barData1[1].value = res.data.backPercent
          this.barData1[2].value = res.data.esophagusLevelPercent
        }
      })
    },
    // 胃 良性疾病
    gastricBenignList() {
      gastricBenign().then((res) => {
        if (res.code == 1 && res.data) {
          this.barData2[0].value = res.data.nonAtrophicGastritiPercent
          this.barData2[1].value = res.data.atrophicGastritiPercent
          this.barData2[2].value = res.data.gastricPolypPercent
          this.barData2[3].value = res.data.gastricUlcerPercent
          this.barData2[4].value = res.data.duodenalUlcerPercent
          this.barData2[5].value = res.data.inogmLevelPercent
        }
      })
    },
    // 胃癌内镜检出率
    cancerFound() {
      cancerFound().then((res) => {
        if (res.code == 1 && res.data) {
          this.botPieData[0].value = res.data.gastricCancer
          this.botPieData[1].value = res.data.unGastricCancer
        }
      })
    },
    // 早癌占比
    earlyGastric() {
      earlyGastric().then((res) => {
        if (res.code == 1 && res.data) {
          this.botPieData2[0].value = res.data.earlyGastricCancer
          this.botPieData2[1].value = res.data.unEarlyGastricCancer
        }
      })
    },
  },
}
</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: hidden;

          &:hover {
            overflow-y: overlay;
          }
          .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;
}
// 美化滚动条
::-webkit-scrollbar-track-piece {
  background-color: #fff;
  -webkit-border-radius: 0;
  opacity: 0.5;
}

::-webkit-scrollbar {
  width: 6px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  height: 30px;
  background-color: #b8b8b8;
  -webkit-border-radius: 6px;
  outline: 1px solid transparent;
  outline-offset: -2px;
  border: 1px solid transparent;
  filter: alpha(opacity = 30);
  -moz-opacity: 0.5;
  opacity: 0.5;
}

::-webkit-scrollbar-thumb:hover {
  height: 30px;
  background-color: #878987;
  -webkit-border-radius: 6px;
}
</style>
<style lang="scss">
// ::v-deep {
.el-select-dropdown.my-poper {
  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>
