<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"
            >
              <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></Map>
          </div>
        </div>
        <div class="over-right">
          <div class="right-title">
            <img src="@/assets/img/DataCenter/bar.png" alt="" />
            <span>当前季度上报量机构排名</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Map from "./Map/index.vue"
export default {
  components: { Map },
  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 },
      ],
    }
  },
  watch: {},
  mounted() {},
  methods: {},
}
</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;
          }
        }
      }
    }
  }
}
</style>
