<template>
  <div id="con">
    <div class="top flex">
      <div class="left box">
        <video :src="videoSrc" controls class="video" />
      </div>
      <!-- 新闻会议tab -->
      <div class="right box tabbox videoboxs">
        <el-tabs v-model="curTab">
          <el-tab-pane
            v-for="(e, index) in tabList"
            :key="index"
            :label="e.title"
            :name="e.title"
          >
            <ul class="tabslist">
              <li v-for="(item, index) in noticeList" :key="index">
                <div class="left">
                  <div class="circle"></div>
                  {{ item.title }}
                </div>
                <div class="right">
                  {{ item.date }}
                </div>
              </li>
            </ul>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <!-- 联盟地图 -->
    <div class="dataAnalysis map_box">
      <div class="flex">
        <div class="left box cenbox">
          <div class="box_title text-center">联盟地图</div>
          <img class="map" src="~@/assets/img/Home/map.png" alt="" />
        </div>
        <div class="right box tabbox" style="height: 458px">
          <el-tabs v-model="exTab">
            <el-tab-pane
              v-for="(e, index) in example"
              :key="index"
              :label="e.title"
              :name="e.title"
            >
              <ul class="tabslist" style="height: 380px">
                <li v-for="(item, index) in exampleList" :key="index">
                  <div class="left">
                    <div class="circle"></div>
                    {{ item.title }}
                  </div>
                  <div class="right">
                    {{ item.date }}
                  </div>
                </li>
              </ul>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <!-- 机构排名 -->
    <div class="dataAnalysis" style="background: #fff">
      <div class="flex" style="margin-bottom: 0px">
        <div class="box cenbox cenboxs">
          <div class="range left_range">
            <div class="text-center">
              <span class="range_title text-center">
                累计上报合格病例数机构排名
              </span>
            </div>
            <div class="rangecontent">
              <div class="top20"></div>
              <ul class="rangeList">
                <li
                  v-for="(item, index) in rangeList"
                  :key="index"
                  :style="{
                    color: index < 3 ? '#4E68FF' : '#333333',
                    alignSelf: index > 9 ? 'flex-end' : '',
                  }"
                >
                  <div>{{ index + 1 }}</div>
                  <div>{{ item.unionName }}</div>
                  <div>{{ item.nums }}</div>
                </li>
              </ul>
            </div>
          </div>
          <div class="range">
            <div class="text-center">
              <span class="range_title text-center">近90天上报量机构排名</span>
            </div>

            <div class="rangecontent">
              <div class="top10"></div>
              <ul class="rangeList">
                <li
                  v-for="(item, index) in curQuarterList"
                  :key="index"
                  :style="{
                    color: index < 3 ? '#4E68FF' : '#333333',
                  }"
                >
                  <div>{{ index + 1 }}</div>
                  <div>{{ item.unionName }}</div>
                  <div>{{ item.nums }}</div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 健康科普 -->
    <div class="healthPopularization">
      <div class="title_box">
        <div class="title">健康科普</div>
        <div class="empty"></div>
      </div>
      <ul class="typeList">
        <li
          v-for="(item, index) in typeList"
          :key="index"
          :style="{ backgroundImage: 'url(' + item.src + ')' }"
          @click="
            $router.push({
              path: '/healthpopularization',
              query: { tabIndex: index },
            })
          "
        >
          {{ item.name }}
        </li>
      </ul>
    </div>

    <!--  科学研究 -->
    <div class="scientificresearch">
      <div class="title_box">
        <div class="title">科学研究</div>
        <div class="empty"></div>
      </div>
      <ul class="researchList">
        <li
          v-for="(item, index) in researchList"
          :key="index"
          @click="
            $router.push({
              path: '/scientificresearch',
              query: { tabIndex: index },
            })
          "
        >
          {{ item }}
        </li>
      </ul>
    </div>
    <!-- 粘性定位 -->
    <div v-show="showFixed" class="fixed_box">
      <ul class="f_list">
        <el-popover
          popper-class="poperbackground"
          v-for="(item, index) in rigBarList"
          :key="index"
          placement="left-start"
          title=""
          width="200"
          trigger="hover"
          :content="item.content"
        >
          <li
            slot="reference"
            :style="{ background: fixIndex == index ? '#4e68ff' : '#fff' }"
            @mouseenter="fixIndex = index"
            @mouseleave="fixIndex = -1"
          >
            <template v-if="fixIndex == index">
              <img :src="item.src2" alt="" /><span style="color: #fff">{{
                item.name
              }}</span>
            </template>
            <template v-else>
              <img :src="item.src1" alt="" /><span>{{ item.name }}</span>
            </template>
          </li>
        </el-popover>
      </ul>
    </div>
  </div>
</template>
<script>
import { getRankTotal, getCurrentQuarter } from "@/api/Home"
export default {
  data() {
    return {
      fixIndex: -1,
      // videoSrc: require("../../../public/aaa.mp4"),
      videoSrc: "",
      exTab: "浙江省典型案例",
      example: [
        {
          title: "浙江省典型案例",
        },
      ],
      exampleList: [
        {
          title: "典型案例小标题典型案例小标题",
          date: "2022-09-26",
        },
        {
          title: "典型案例小标题典型案例小标题",
          date: "2022-09-26",
        },
        {
          title: "典型案例小标题典型案例小标题",
          date: "2022-09-26",
        },
        {
          title: "典型案例小标题典型案例小标题",
          date: "2022-09-26",
        },
        {
          title: "典型案例小标题典型案例小标题",
          date: "2022-09-26",
        },
        {
          title: "典型案例小标题典型案例小标题",
          date: "2022-09-26",
        },
        {
          title: "典型案例小标题典型案例小标题",
          date: "2022-09-26",
        },
        {
          title: "典型案例小标题典型案例小标题",
          date: "2022-09-26",
        },
        {
          title: "典型案例小标题典型案例小标题",
          date: "2022-09-26",
        },
        {
          title: "典型案例小标题典型案例小标题",
          date: "2022-09-26",
        },
        {
          title: "典型案例小标题典型案例小标题",
          date: "2022-09-26",
        },
        {
          title: "典型案例小标题典型案例小标题",
          date: "2022-09-26",
        },
        {
          title: "典型案例小标题典型案例小标题",
          date: "2022-09-26",
        },
        {
          title: "典型案例小标题典型案例小标题",
          date: "2022-09-26",
        },
        {
          title: "典型案例小标题典型案例小标题",
          date: "2022-09-26",
        },
        {
          title: "典型案例小标题典型案例小标题",
          date: "2022-09-26",
        },
      ],
      tabList: [
        {
          title: "新闻会议",
        },
        {
          title: "通知公告",
        },
        {
          title: "学术动态",
        },
      ],
      noticeList: [
        {
          title: "典型案例小标题典型案例小标题",
          date: "2022-09-26",
        },
        {
          title: "典型案例小标题典型案例小标题",
          date: "2022-09-26",
        },
        {
          title: "典型案例小标题典型案例小标题",
          date: "2022-09-26",
        },
        {
          title: "典型案例小标题典型案例小标题",
          date: "2022-09-26",
        },
        {
          title: "典型案例小标题典型案例小标题",
          date: "2022-09-26",
        },
        {
          title: "典型案例小标题典型案例小标题",
          date: "2022-09-26",
        },
        {
          title: "典型案例小标题典型案例小标题",
          date: "2022-09-26",
        },
        {
          title: "典型案例小标题典型案例小标题",
          date: "2022-09-26",
        },
        {
          title: "典型案例小标题典型案例小标题",
          date: "2022-09-26",
        },
        {
          title: "典型案例小标题典型案例小标题",
          date: "2022-09-26",
        },
        {
          title: "典型案例小标题典型案例小标题",
          date: "2022-09-26",
        },
      ],
      curTab: "新闻会议",
      rangeList: [], // 上报排名
      curQuarterList: [], //当前季度排名
      typeList: [
        {
          src: require("@/assets/img/Home/shaicha.png"),
          name: "筛查",
          route: "/healthpopularization",
        },
        {
          src: require("@/assets/img/Home/shenghuo.png"),
          name: "生活",
        },
        {
          src: require("@/assets/img/Home/yixuezhishi.png"),
          name: "医学知识",
        },
        {
          src: require("@/assets/img/Home/qita.png"),
          name: "其他",
        },
      ],
      rigBarList: [
        {
          src1: require("@/assets/img/Home/kefu.png"),
          src2: require("@/assets/img/Home/kefuwhite.png"),
          content: "021-31161236",
          name: "客服",
        },
        {
          src1: require("@/assets/img/Home/youxiang.png"),
          src2: require("@/assets/img/Home/youxiangwhite.png"),
          content: "service@gecachina.cn",
          name: "邮箱",
        },
        {
          src1: require("@/assets/img/Home/dizhi.png"),
          src2: require("@/assets/img/Home/dizhiwhite.png"),
          content: "上海市杨浦区长海路168号综合保障楼4楼",
          name: "地址",
        },
      ],
      researchList: ["筛查技术方案", "筛查指南", "学术成果", "项目进展与成果"],
      showFixed: false,
    }
  },
  mounted() {
    this.getRankTotal()
    this.getCurrentQuarter()
    // console.log(document.querySelector("#vue-admin-beautiful"))
    this.$nextTick(() => {
      document
        .querySelector("#vue-admin-beautiful")
        .addEventListener("scroll", () => {
          let scrollTop = document.querySelector("#vue-admin-beautiful")
            .scrollTop
          if (scrollTop >= 700) {
            this.showFixed = true
          } else {
            this.showFixed = false
          }
        })
    })
  },
  methods: {
    getRankTotal() {
      getRankTotal().then((res) => {
        if (res.code == 1) {
          this.rangeList = res.data
        }
      })
    },
    getCurrentQuarter() {
      getCurrentQuarter().then((res) => {
        if (res.code == 1) {
          this.curQuarterList = res.data
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
#con {
  .flex {
    height: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 38px;
    .box {
      width: 48%;
      height: 100%;
      // background: blue;
      background: #fff;
      .video {
        width: 100%;
        height: 400px;
        object-fit: fill;
      }
    }
    .tabbox {
      padding: 8px 16px;
      border-radius: 8px;
      overflow: hidden;
      .tabslist {
        height: 332px;
        padding-right: 8px;
        overflow: hidden;
        &:hover {
          overflow: overlay;
        }

        li {
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 14px;
          font-family: AlibabaPuHuiTiR;
          color: #666666;
          margin-bottom: 16px;
          cursor: pointer;
          .left {
            display: flex;
            align-items: center;
            .circle {
              width: 4px;
              height: 4px;
              background: #7085fe;
              border-radius: 50%;
              margin-right: 8px;
            }
          }
        }
      }
    }
    .videoboxs {
      height: 100%;
    }
  }
  .dataAnalysis {
    margin-bottom: 32px;
    padding: 32px;
    .box_title {
      width: 180px;
      height: 36px;
      background: #4e68ff;
      border-radius: 0px 0px 4px 4px;
      font-size: 16px;
      font-family: AlibabaPuHuiTiM;
      color: #ffffff;
      margin: 0 auto;
      line-height: 36px;
    }
    .range_title {
      position: relative;
      font-size: 20px;
      font-family: AlibabaPuHuiTiB;
      color: #333333;
      font-weight: bold;
      &::after {
        content: "实时统计";
        font-size: 14px;
        font-family: AlibabaPuHuiTiR;
        color: #4e68ff;
        background: rgba(78, 104, 255, 0.1);
        border-radius: 2px;
        width: 62px;
        height: 20px;
        font-weight: normal;
        position: absolute;
        right: -74px;
        top: 4px;
      }
    }
    .cenbox {
      height: 458px;
      .map {
        width: 100%;
        height: 422px;
        object-fit: contain;
      }
    }
    .cenboxs {
      width: 100%;
      display: flex;
      justify-content: space-between;
      .range {
        width: 32%;
        background: #ffffff;
        border-radius: 4px;
        padding: 0 7px;
        .rangecontent {
          margin-top: 24px;
          height: 408px;
          background: rgba(78, 104, 255, 0.04);
          border-radius: 4px;
          padding: 24px 32px;
          font-size: 14px;
          font-family: AlibabaPuHuiTiM;
          // color: #4e68ff;
          .rangeList {
            li {
              margin-bottom: 14px;
              display: flex;
              justify-content: space-between;
              div:nth-child(1) {
                width: 20px;
              }
              div:nth-child(2) {
                flex: 1;
              }
              div:nth-child(3) {
                text-align: right;
              }
            }
          }
        }
        .top10 {
          height: 32px;
          background: url("~@/assets/img/Home/top10.png") no-repeat center
            center;
          background-size: contain;
          margin-bottom: 18px;
        }
        .top20 {
          height: 32px;
          background: url("~@/assets/img/Home/top20.png") no-repeat center
            center;
          background-size: contain;
          margin-bottom: 18px;
        }
      }
      .left_range {
        width: 60%;
        .rangecontent {
          .rangeList {
            height: 100%;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            li {
              width: 40%;
              margin-bottom: 14px;
              display: flex;
              justify-content: space-between;

              div:nth-child(1) {
                width: 20px;
              }
              div:nth-child(2) {
                flex: 1;
              }
              div:nth-child(3) {
                text-align: right;
              }
            }
          }
        }
      }
    }
  }
  .map_box {
    padding: 0;
  }
  .healthPopularization {
    .typeList {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      li {
        cursor: pointer;
        width: 23%;
        margin-bottom: 24px;
        height: 188px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24px;
        color: #ffffff;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
      }
    }
  }
  .scientificresearch {
    .researchList {
      display: flex;
      margin-bottom: 20px;
      li {
        width: 188px;
        height: 64px;
        background: #ffffff;
        box-shadow: 0px 4px 1px 1px #3d58f9;
        text-align: center;
        line-height: 64px;
        border-radius: 4px;
        border: 1px solid rgba(78, 104, 255, 0.12);
        font-size: 16px;
        font-family: AlibabaPuHuiTiM;
        color: #333333;
        margin-right: 20px;
        cursor: pointer;
      }
    }
  }
  .title_box {
    display: flex;
    margin-bottom: 24px;
    .title {
      width: 64px;
      height: 30px;
      font-size: 16px;
      font-family: AlibabaPuHuiTiM;
      color: #4e68ff;
      line-height: 22px;
      border-bottom: 2px solid #4e68ff;
    }
    .empty {
      flex: 1;
      height: 30px;
      border-bottom: 2px solid #ffffff;
    }
  }
  .fixed_box {
    background: #fff;
    position: fixed;
    padding: 20px 0px;
    right: 30px;
    bottom: 300px;
    z-index: 1000;
    .f_list {
      li {
        display: flex;
        align-items: center;
        padding: 16px 14px;
        cursor: pointer;
        img {
          width: 20px;
          height: 20px;
          margin-right: 5px;
        }
        span {
          width: 28px;
          font-size: 14px;
          font-family: AlibabaPuHuiTiR;
          color: #333333;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.poperbackground {
  background-color: #4e68ff !important;
  border-color: #4e68ff !important;
  color: #ffffff;
}
.poperbackground[x-placement^="left"] .popper__arrow::after {
  border-left-color: #4e68ff;
}
</style>
