<template>
  <div id="con">
    <Notice v-show="isNotice" :noticeName="noticeName"></Notice>
    <div v-show="!isNotice">
      <div class="flex">
        <div class="left box">
          <video :src="videoSrc" controls class="video" />
        </div>
        <!-- 新闻会议tab -->
        <div class="right box tabbox videoboxs">
          <el-tabs v-model="curTab" @tab-click="handleClick">
            <el-tab-pane
              v-for="(e, index) in tabList"
              :key="index"
              :label="e.title"
              :name="e.type"
            >
              <ul
                class="tabslist videoTabList"
                :style="{ height: videoHeight }"
              >
                <li
                  v-for="(item, index) in noticeList"
                  :key="index"
                  title="点击查看pdf文件"
                  @click="setPdf(item)"
                >
                  <div class="left">
                    <div class="circle"></div>
                    <span class="isTop" v-if="item.isTop">置顶</span>
                    {{ item.articleTitle }}
                  </div>
                  <div class="right">{{ item.createTime }}</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="" /> -->
            <Map></Map>
          </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"
                  :loading="listLoading"
                >
                  <li
                    v-for="(item, index) in exampleList"
                    :key="index"
                    title="点击查看pdf文件"
                    @click="setPdf(item)"
                  >
                    <div class="left">
                      <div class="circle"></div>
                      {{ item.articleTitle }}
                    </div>
                    <div class="right">
                      {{ item.createTime }}
                    </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 class="tooLong">
                      {{ 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
            v-for="(item, index) in rigBarList"
            :key="index"
            popper-class="poperbackground"
            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>

    <!-- 弹窗 -->
    <pdf-dialog
      ref="pdfDialog"
      :cur-pdf="curPdf"
      :pdf-src="pdfSrc"
    ></pdf-dialog>
  </div>
</template>
<script>
import { getRankTotal, getCurrentQuarter } from "@/api/Home"
import { articleList } from "@/api/operation-management"
import Map from "./Map"
import PdfDialog from "./PdfDialog/index.vue"
import Notice from "./notice/index.vue"
export default {
  components: { Map, PdfDialog, Notice },
  data() {
    return {
      noticeName: "",
      isNotice: false,
      curPdf: {},
      pdfSrc: "",
      videoHeight: "0px",
      fixIndex: -1,
      videoSrc: require("@/assets/video/video.mp4"),
      // videoSrc: "",
      exTab: "浙江省典型案例",
      example: [
        {
          title: "浙江省典型案例",
        },
      ],
      exampleList: [],
      tabList: [
        {
          title: "通知公告",
          type: "2",
        },
        {
          title: "新闻会议",
          type: "1",
        },

        {
          title: "学术动态",
          type: "3",
        },
        {
          title: "健康知识",
          type: "4",
        },
      ],
      noticeTopList: [
        {
          articleTitle: "申请加入国家消化道早癌防治中心联盟",
          createTime: "2022-09-20",
          isTop: 1,
          name: "AllianceApply",
          moduleType: 99,
        },
        {
          name: "HospitalsList",
          articleTitle: "GECA联盟理事及医院名单",
          createTime: "2022-11-20",
          isTop: 1,
          moduleType: 99,
        },
      ],
      noticeList: [],
      curTab: "2",
      listLoading: false,
      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,
      uploadPrefix: process.env.VUE_APP_UPLOAD_API,
    }
  },
  created() {
    this.getArticleList("2")
    this.getArticleList("6")
  },
  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
          }
        })

      var video = document.querySelector("video")
      video.addEventListener("canplay", (e) => {
        console.log(e.target.clientHeight)
        this.videoHeight = e.target.clientHeight - 66 + "px"
      })
    })

    window.onresize = () =>
      (() => {
        this.$nextTick(() => {
          this.videoHeight =
            document.querySelector("video").clientHeight - 66 + "px"
        })
      })()
  },
  beforeDestroy() {
    window.onresize = () => {}
  },
  methods: {
    setPdf(item) {
      if (item.moduleType === 99) {
        this.noticeName = item.name
        this.isNotice = true
        return
      }
      this.$refs.pdfDialog.showPdf = true
      this.curPdf = item
      this.pdfSrc =
        this.uploadPrefix +
        item.filePath[0].bucketName +
        "/" +
        item.filePath[0].uuidName
    },
    handleClick() {
      // if (this.curTab == "4") {
      // } else {
      this.getArticleList(this.curTab)
      // }
    },
    // 获取新闻会议tab的数据
    getArticleList(moduleType) {
      this.listLoading = true
      let params = {
        size: 10,
        current: 1,
        moduleType: moduleType,
        status: 1,
      }
      articleList(params)
        .then((res) => {
          if (res.code == 1) {
            if (["1", "2", "3", "4"].includes(moduleType)) {
              const d = res.data.records
              if (moduleType === "2") {
                this.noticeList = [...this.noticeTopList, ...d]
              } else {
                this.noticeList = [...d]
              }
            }
            if (["6"].includes(moduleType)) {
              this.exampleList = [...res.data.records]
            }
          }
        })
        .catch((e) => {
          this.listLoading = false
        })
    },
    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 {
  .tooLong {
    white-space: nowrap;
  }
  .flex {
    height: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 38px;
    .box {
      width: 48%;
      height: 100%;
      // background: blue;
      background: #fff;

      .video {
        width: 100%;
        border-radius: 5px;
        // height: 420px;
        object-fit: fill;
      }
    }
    .tabbox {
      padding: 8px 16px;
      border-radius: 8px;
      overflow: hidden;
      .tabslist {
        padding-right: 8px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        // justify-content: space-between;
        // &: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;
            .isTop {
              width: 40px;
              height: 20px;
              padding: 2px 5px;
              color: #7085fe;
              background: rgba(112, 133, 254, 0.1);
              border-radius: 1px;
            }
            .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: 15px;
              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: 46%;
              margin-bottom: 15px;
              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>