<template>
  <div class="center-top">
    <div class="left d-flex flex-column">
      <div class="top">
        <div class="bs-card">
          <div class="card-text">
            <p class="color-word">照护</p>
            <p>
              <span class="color-white fw-b" style="font-size: 42px">{{
                total.zhaohu
              }}</span>
              <span class="color-word" style="padding-left: 5px">万人次/年</span>
            </p>
          </div>
        </div>
        <div class="bs-card">
          <div class="card-text">
            <p class="color-word">服务覆盖人数</p>
            <p>
              <span class="color-white fw-b" style="font-size: 42px">{{
                total.fuwufugairenshu
              }}</span>
              <span class="color-word" style="padding-left: 5px">万人</span>
            </p>
          </div>
        </div>
        <div class="bs-card">
          <div class="card-text">
            <p class="color-word">总服务时长</p>
            <p>
              <span class="color-white fw-b" style="font-size: 42px">{{
                total.zongfuwushichang
              }}</span>
              <span class="color-word" style="padding-left: 5px">万小时</span>
            </p>
          </div>
        </div>
      </div>

      <div
        class="bottom flex-1"
        @mouseenter="isMouseHover = true"
        @mouseleave="isMouseHover = false"
      >
        <transition name="fade">
          <video
            :src="videos[videoIndex] ? videos[videoIndex].file : ''"
            ref="video"
            loop
            v-show="type === 'video'"
            :style="isPaused ? 'filter: brightness(75%);' : ''"
            @click="playVideo"
          ></video>
        </transition>
        <transition name="fade">
          <div class="carousel-img" v-show="type === 'img'">
            <div class="data-panel">
              <div class="data-panel__title">
                <i class="el-icon-arrow-left" @click="areaClick('prev')"></i>
                <div>{{ activeArea.name }}-{{ (activeArea && activeArea.data) ? activeArea.data.length : 0 }}个</div>
                <i class="el-icon-arrow-right" @click="areaClick('next')"></i>
              </div>

              <dv-scroll-board
                ref="scrollBoard"
                :key="scrollBoardKey"
                :config="areaConfig"
                style="width: 100%; height: 400px; margin-top: 16px"
              />
            </div>
            <dv-flyline-chart
              dev
              :config="flyingConfig"
              style="width: 100%; height: 100%"
            />
          </div>
        </transition>

        <transition name="fade">
          <div
            class="video-btn"
            v-show="(isPaused || isMouseHover) && type === 'video'"
            @click="playVideo"
          >
            <svg viewBox="0 0 100 100">
              <defs>
                <linearGradient id="yellow" x1="50%" x2="50%" y1="0%" y2="100%">
                  <stop offset="0%" stop-color="#eacab1"></stop>
                  <stop offset="40%" stop-color="#bf9271"></stop>
                </linearGradient>
                <linearGradient
                  id="yellow1"
                  x1="50%"
                  x2="50%"
                  y1="0%"
                  y2="100%"
                >
                  <stop offset="0%" stop-color="#e0c0a8"></stop>
                  <stop offset="40%" stop-color="#caa182"></stop>
                </linearGradient>
              </defs>
              <path
                d="M 50 50 m 0 47a 47 47 0 1 1 0 -94a 47 47 0 1 1 0 94"
                stroke="url(#yellow)"
                stroke-width="4"
                style="
                  stroke-dasharray: 260.1482px, 295.31px;
                  stroke-dashoffset: -4.9137px;
                "
                fill="none"
              ></path>
              <path
                :d="
                  isPaused
                    ? 'M 38.6 30 l 0 40 l 34.6 -20 Z'
                    : 'M 38.6 30 l 0 40 M 61.4 30 l 0 40'
                "
                ref="icon"
                fill="none"
                class="icon"
                stroke="url(#yellow1)"
                stroke-width="4"
              ></path>
            </svg>
          </div>
        </transition>

        <div
          class="video-change"
          v-show="type === 'video' && (isPaused || isMouseHover)"
        >
          <button
            type="button"
            class="el-carousel__arrow el-carousel__arrow--left"
            @click="
              (isPaused = true), (videoIndex = (videoIndex + 1) % videos.length)
            "
          >
            <i class="el-icon-arrow-left custom-cursor-on-hover"></i>
          </button>
          <button
            type="button"
            class="el-carousel__arrow el-carousel__arrow--right"
            @click="
              (isPaused = true),
                (videoIndex = (videoIndex - 1 + videos.length) % videos.length)
            "
          >
            <i class="el-icon-arrow-right custom-cursor-on-hover"></i>
          </button>
        </div>

        <div class="type-change">
          <div class="type-change-item" @click="type = 'img'">
            <i class="el-icon-picture type-change-item__icon"></i>
          </div>
          <div class="type-change-item" @click="type = 'video'">
            <i class="el-icon-video-camera-solid type-change-item__icon"></i>
            <div class="type-change-item__num">{{ videos.length }}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="right" style="height: 100%">
      <div class="bs-card">
        <div class="bs-card__title">
          <p class="bs-card__title--text">今日数量</p>
        </div>

        <div class="bs-card__body" style="margin-top: 18px">
          <div class="today">
            <div
              class="today-item"
              v-for="(item, index) in toDayNums"
              :style="{ 'grid-area': `d${index}` }"
              :class="{ 'today-item-active': activeToday.name === item.name }"
              @click.stop.prevent="todayClick($event,item,index)"
            >
              <div class="today-item__value">{{ item.val }}</div>
              <div class="today-item__name">{{ item.name }}</div>
            </div>
          </div>

          <dv-scroll-board
            @click="scrollBoardClick"
            ref="scrollBoard"
            :key="scrollBoardKey"
            :config="listConfig"
            style="width: 516px; height: 389px; margin-top: 34px"
          />
        </div>
      </div>
    </div>

    <dataPreview ref="dataPreview" v-model="isShowPreview" :data="selectData" :label="activeToday.name"></dataPreview>
  </div>
</template>

<script>
import { scheduleList } from "@/api/schedule"
import { getList as longInsuranceIndex } from "@/api/longInsurance"
import { getList as scheduleListChecksIndex } from "@/api/scheduleListChecks"
import { getList } from "@/api/bigScreen";
import gsap from "gsap";
import dataPreview from "@/views/bigSreen/component/dataPreview.vue";

export default {
  components: {
    dataPreview
  },
  data() {
    return {
      total: {
        zhaohu: 0,
        fuwufugairenshu: 0,
        zongfuwushichang: 0,
      },

      listData: new Map([
        ['changhuxian',[]],
        ['jujiayuanzhu',[]],
        ['canlianjujiatuoyang',[]],
        ['huifangjicha',[]]
      ]),
      toDayNums: [
        {
          key: "changhuxian",
          name: "长护险",
          val: 129,
        },
        {
          key: "jujiayuanzhu",
          name: "居家援助",
          val: 128,
        },
        {
          key: "canlianjujiatuoyang",
          name: "残联居家托养",
          val: 168,
        },

        {
          key: "huifangjicha",
          name: "回访稽查",
          val: 163,
        },
      ],
      scrollBoardKey: 0,
      timer: null,

      isPaused: true,
      isMouseHover: false,

      type: "img", //video img

      videoIndex: 0,
      videos: [],
      imgs: [],
      areas: [],
      activeIndex: 0,
      activeArea: {},

      activeToday: {},
      activeColor: "#8537d8",
      activeColors: ['#8537d8','#159138', '#4b72dc', '#c92d40'],
      selectData: {},
      isShowPreview: false,
    };
  },
  methods: {
    todayClick(e, item, index) {
      this.activeToday = item
      this.activeColor = this.activeColors[index]
    },
    async getTotal() {
      const res = (
        await getList(
          {
            type: "total",
          },
          false
        )
      ).data;
      this.total.zhaohu = res.find((i) => i.key === "zhaohu")?.value;
      this.total.fuwufugairenshu = res.find(
        (i) => i.key === "fuwufugairenshu"
      )?.value;
      this.total.zongfuwushichang = res.find(
        (i) => i.key === "zongfuwushichang"
      )?.value;
    },

    areaClick(type='next') {
      if(type === 'next') {
        this.activeIndex=++this.activeIndex%this.areas.length;
        this.activeArea = this.areas[this.activeIndex];
      } else {
        this.activeIndex > 0 ? (--this.activeIndex) : (this.activeIndex = this.areas.length-1);
        this.activeArea = this.areas[this.activeIndex];
      }
    },
    async getAreas() {
      try {
        this.areas = (
          await getList(
            {
              type: "areas",
            },
            false
          )
        ).data?.map(area => (JSON.parse(area.value)));
        this.activeArea = this.areas[0];
      } catch (err) {
        console.error(err)
      }

    },

    async getList () {
      try {
        const res = (await getList({
          type: 'media'
        },false))?.data

        this.videos = JSON.parse(res.find(i => i.key === 'video')?.value)
      } catch (err) {
        console.error(err)
      }
    },

    async getData() {
      const res = (
        await getList(
          {
            type: "today",
          },
          false
        )
      )?.data;
      this.toDayNums.forEach((i) => {
        i.val = isNaN(Number(res.find((j) => j.key === i.key)?.value))
          ? 0
          : Number(res.find((j) => j.key === i.key)?.value);
      });
      this.scrollBoardKey++;
      // try {
      //   this.listConfig.data = JSON.parse(
      //     res.find((i) => i.key === "list")?.value ?? "[]"
      //   ).map((i) => [
      //     i.name,
      //     i.people,
      //     `<span style="color: #03b1fa;">${i.time}</span>`,
      //   ]);
      //   this.scrollBoardKey++;
      // } catch (err) {
      //   console.error(err);
      // }
    },
    async getListData() {
      try {
        const res = await Promise.all([
          longInsuranceIndex({
            page: 1,
            page_size: 20,
            sort_name: 'created_at'
          },false),
          scheduleListChecksIndex({
            page: 1,
            page_size: 20,
            sort_name: 'created_at'
          },false),
          scheduleList({
            page: 1,
            page_size: 20,
            sort_name: 'created_at',
            product_type_id: 19
          }),
          scheduleList({
            page: 1,
            page_size: 20,
            sort_name: 'created_at',
            product_type_id: 20
          })
        ])
        this.listData.set("changhuxian",res[0]?.data||[])
        this.listData.set("huifangjicha",res[1]?.data||[])
        this.listData.set("canlianjujiatuoyang",res[2]?.list?.data||[])
        this.listData.set("jujiayuanzhu",res[3]?.list?.data||[])
      } catch (err) {
        console.error(err)
      }
    },

    playVideo() {
      if (this.type === "img") return;

      gsap.set(this.$refs["icon"], {
        strokeDasharray: "6.148px, 442.31px",
        strokeDashoffset: "100.9137px",
      });
      gsap.to(this.$refs["icon"], {
        strokeDasharray: "126.148px, 442.31px",
        strokeDashoffset: "19.9137px",
      });

      if (this.$refs["video"].paused) {
        this.isPaused = false;
        this.$refs["video"].play();
      } else {
        this.isPaused = true;
        this.$refs["video"].pause();
      }
    },

    keywordRegister(e) {
      if (e.code === "Space") {
        this.playVideo();
      }
    },
    scrollBoardClick({row, ceil, rowIndex	, columnIndex}) {
      if(columnIndex === 4) {
        this.selectData = this.listData.get(this.activeToday.key) ? this.listData.get(this.activeToday.key)[rowIndex] : {};
        setTimeout(() => {
          this.isShowPreview = true;
        },300)
      }
    }
  },
  computed: {
    flyingConfig() {
      return {
        points: this.areas?.map(area => ({
          position: area.point,
          text: area.name
        }))?.filter(i => i.text !== this.activeArea?.name) || [],
        centerPoint: this.activeArea?.point,
        bgImgUrl: require("@/assets/bigScreen/china.png"),
        pointsImg: {
          url: require("@/assets/bigScreen/points.png"),
        },
        centerPointImg: {
          url: require("@/assets/bigScreen/points-a.png")
        },
        orbitColor: "#0000",
        lineWidth: 0,
      }
    },
    areaConfig() {
      return {
        oddRowBGC: "#0a1b5632",
        evenRowBGC: "#0a1b5632",
        rowNum: 8,
        data: this.activeArea?.data?.map(i => [i]) || [],
      }
    },
    listConfig() {
      return {
        headerBGC: "#0a1b5632",
        oddRowBGC: "#0a1b5632",
        evenRowBGC: "#0a1b5632",
        indexHeader: "序号",
        index: true,
        rowNum: 8,
        align: ["center", "left", "center", "center"],
        columnWidth: [54],
        waitTime: 2000,
        header: [`<span style="color: ${this.activeColor}">${this.activeToday?.name||"服务名称"}</span>`, "人员", "时间","操作"],
        data:
          this.listData.get(this.activeToday.key) ? this.listData.get(this.activeToday.key).map(i =>
            [
              this.activeToday?.name,
              i.customer?.name||i.customer_id,
              `<span style="color: #03b1fa;">${this.$moment(i.created_at).format('HH:mm')}</span>`,
              '<button style="line-height: 25px; height: 25px;color: #fff;width: 68px;border-radius: 12px;background-color: #0e2e91;">查看</button>']
          ) : [],
        //   Array.from({ length: 10 }, () => [
        //   "稽查回访",
        //   "人员a",
        //   '<span style="color: #03b1fa;">13:55</span>',
        //   '<button style="line-height: 25px; height: 25px;color: #fff;width: 68px;border-radius: 12px;background-color: #0e2e91;">查看</button>'
        // ]),
      }
    }
  },
  created() {
    this.getTotal();
    this.getList();
    this.getAreas();
    Promise.all([
      this.getData(),
      this.getListData()
    ]).then(_ => {
      this.todayClick(false,this.toDayNums[0],0)
    })
  },
  mounted() {
    document.body.addEventListener("keypress", this.keywordRegister);
  },
  beforeDestroy() {
    document.body.removeEventListener("keypress", this.keywordRegister);
  },
};
</script>

<style scoped lang="scss">
$todayBkgColors:
  linear-gradient(0deg, #8537d8 0%, #8537d8 0%, #bb7efc 100%),
  linear-gradient(0deg, #159138 0%, #159138 0%, #51d893 99%, #51d893 100%),
  linear-gradient(0deg, #0d2d8f 0%, #2eafdc 100%),
  linear-gradient(0deg, #c92d40, #ec5b6d);
$todayColors:
  #8537d8,
  #159138,
  #4b72dc,
  #c92d40;
.center-top {
  display: flex;
  justify-content: space-between;

  .left {
    flex: 1;
    .top {
      height: 123px;
      display: flex;

      .bs-card {
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 14px;

        .card-text {
          flex: 1;
          padding-left: 10px;
          font-size: 20px;
        }
      }
      .bs-card + .bs-card {
        margin-left: 20px;
      }
    }
    .bottom {
      margin-top: 30px;
      flex: 1;
      border-radius: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 6px;
      box-sizing: border-box;
      background: conic-gradient(
        #5470ec,
        #506bec,
        #77cbf1,
        #3d58ca,
        #3b56ca,
        #6fbbf0,
        #6aa3f2
      );
      position: relative;

      video,
      .carousel-img {
        background: rgb(6, 23, 70);
        object-fit: cover;
        position: absolute;
        transition: all 0.2s;
        left: 6px;
        bottom: 6px;
        height: calc(100% - 12px);
        width: calc(100% - 12px);

        .data-panel {
          position: absolute;
          width: 338px;
          height: 98%;
          left: 8px;
          top: 1%;
          border-radius: 10px;
          background-color: #031e6099;

          &__title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 31px;
            color: #e67d33;
            font-weight: 600;
            padding: 0 28px;
            margin-top: 20px;

            & > i {
              cursor: pointer;
              font-weight: 600;
              font-size: 24px;
              color: #4f7bf5;
            }
          }
        }
      }
      .carousel-img > ::v-deep .el-carousel__container {
        height: 100%;
      }
      ::v-deep .el-carousel__arrow {
        width: 56px;
        height: 56px;
        font-size: 25px;
        color: #fff;
      }
      .carousel-item-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .video-btn {
        border-radius: 100%;
        background-color: #e7e6e630;
        cursor: pointer;
        width: 195px;
        height: 195px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: calc(50% - 97.5px);
        left: calc(50% - 97.5px);

        &::after {
          content: "";
          width: 143px;
          height: 143px;
          background: #fffd;
          border-radius: 100%;
          position: absolute;
          top: calc(50% - 71.5px);
          left: calc(50% - 71.5px);
        }

        svg {
          width: 72px;
          height: 72px;
          position: relative;
          z-index: 2;

          .icon {
            stroke-dasharray: 126.148px, 442.31px;
            stroke-dashoffset: 19.9137px;
          }
        }
      }
      .type-change {
        border-radius: 19px;
        background: #ffffff19;
        padding: 9px 15px;
        display: flex;
        z-index: 333;
        align-items: center;
        position: absolute;
        bottom: 14px;
        right: 30px;

        &-item {
          cursor: pointer;
          font-size: 24px;
          line-height: 24px;
          display: flex;
          align-items: center;

          &__icon {
            color: #fff;
          }
          &__num {
            color: #fff;
            margin-left: 10px;
          }

          &:nth-child(1) {
            margin-right: 30px;
            position: relative;

            &::after {
              content: "";
              height: 100%;
              width: 2px;
              background: #ffffff;
              opacity: 0.2;
              position: absolute;
              top: 0;
              right: -16px;
            }
          }
        }
      }
    }
  }

  .right {
    width: 552px;
    margin-left: 30px;


    .today {
      display: grid;
      grid-column-gap: 14px;
      grid-row-gap: 10px;
      grid-template-areas:
        "d0 d0 d1 d1 d2 d2"
        "d3 d3 d3 d3 d3 d3";
      text-align: center;

      @for $index from 1 through length($todayBkgColors) {
        &-item:nth-child(#{$index}) {
          background: nth($todayBkgColors, $index);
        }
        &-item-active:nth-child(#{$index}) {
          background: transparent;
          color: nth($todayColors, $index);
        }
      }
      &-item {
        height: 80px;
        border-radius: 5px;
        background-color: rgba(85, 199, 149, 0);
        box-shadow: inset 0 0 4px 2px #1a3676;
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: #fff;
        transition: all .2s;

        &__value {
          line-height: 1;
          font-size: 42px;
          color: #ffffff;
          font-weight: bold;
        }
        &__name {
          font-size: 14px;
        }

        &-active {
          background: transparent;

        }
      }
    }
  }
}
::v-deep .header-item:nth-child(1) {
  color: #3a67f7;
}
::v-deep .header-item:nth-child(2) span {
  font-weight: 600;
  font-size: 16px;
}
::v-deep .row-item:nth-child(2) .ceil button {
  transition: all .2s;
  background-color: #03b1fa !important;
  color: #000000 !important;
}
</style>
