<template>
  <transition
    appear
    name="animate__animated animate__move"
    enter-active-class="animate__slideInLeft"
    leave-active-class="animate__slideOutLeft"
  >
    <div class="widget-FocusOnWarning">
      <div class="head">
        <div class="title">
          <div class="icon"></div>
          <span class="site-info">重点关注预警</span>
        </div>
      </div>
      <div class="content-info">
        <div class="warningStaWrap">
          <div class="warningSta">
            <div class="ws-item" v-for="item in typeList" :key="item.title" :class="{ radar: item.title == '预警' }">
              <img :class="{ pic: item.title !== '预警' }" :src="item.img" />
              <div class="txt">
                <div class="txt-value" :class="{ 'early-value': item.title == '预警' }">{{ item.num }}个</div>
                <div class="txt-title" :class="{ 'early-title': item.title == '预警' }">{{ item.title }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="rankList">
          <div class="title">
            <div class="icon"></div>
            <span class="item-name">重点关注排行榜</span>
          </div>
          <div class="rankListContent">
            <div class="loadingText" v-if="rankList.length == 0"><i class="el-icon-loading"></i>加载中...</div>
            <ComTriangleBarChart :chartData="rankList" />
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
import ComDynamicRingChart from '../../components/OthersChart/ComDynamicRingChart.vue'
import ComTriangleBarChart from '../../components/BarChart/ComTriangleBarChart.vue'
import { getByKeys } from '../../apis'
//重点关注预警
@Component({ name: 'FocusOnWarning', components: { ComDynamicRingChart, ComTriangleBarChart } })
export default class FocusOnWarning extends Vue {
  typeList = [
    { title: '报警', num: 0, img: require('@/views/groupPage/images/模块图标/智慧预警/报警.png') },
    { title: '预警', num: 0, img: require('@/views/groupPage/images/模块图标/智慧预警/radar.png') },
    { title: '推测', num: 0, img: require('@/views/groupPage/images/模块图标/智慧预警/推测.png') }
  ]
  timeout = null

  rankList = []

  get wisdomWarningInfo() {
    return this.$store.state.bigScreen.wisdomWarningInfo
  }
  @Watch('wisdomWarningInfo')
  onChangeMethod(val) {
    this.dataAssociation(val)
  }
  async dataAssociation(arr) {
    let res = await getByKeys({ keys: 'WARNING_TYPE' })
    const types = res.result.WARNING_TYPE
    let mapArr = JSON.parse(JSON.stringify(arr))
    mapArr = mapArr.map((item) => {
      let type =
        types.find((e) => e.codeValue == item.warnIndexManageInfo.warningType).notes ||
        item.warnIndexManageInfo.warningType
      item.warnIndexManageInfo.warningType = type
      return { ...item }
    })
    this.assembleData(mapArr)
  }
  assembleData(result) {
    let showList = result.filter((e) => e.concernExtent == '重点关注')
    const length = showList.length
    let typeArr = []
    let methodArr = []
    for (let index = 0; index < length; index++) {
      const item = showList[index]
      if (!typeArr.find((e) => e.type == item.warnIndexManageInfo.warningType)) {
        typeArr.push({ type: item.warnIndexManageInfo.warningType, children: [item] })
      } else {
        typeArr.find((e) => e.type == item.warnIndexManageInfo.warningType).children.push(item)
      }
      if (!methodArr.find((e) => e.method == item.warnIndexManageInfo.warningMethod)) {
        methodArr.push({ method: item.warnIndexManageInfo.warningMethod, children: [item] })
      } else {
        methodArr.find((e) => e.method == item.warnIndexManageInfo.warningMethod).children.push(item)
      }
    }
    this.typeList[0].num = methodArr.find((i) => i.method == 'BJ').children.length
    this.typeList[2].num = methodArr.find((i) => i.method == 'TC').children.length
    //
    typeArr.sort(this.objectSort('children'))
    this.rankList = typeArr.map((item) => {
      return { name: item.type, value: item.children.length }
    })
  }
  objectSort(property) {
    return function (Obj1, Obj2) {
      return Obj2[property].length - Obj1[property].length
    }
  }
}
</script>

<style lang="scss" scoped>
.animate__slideInLeft,
.animate__slideOutLeft {
  animation-duration: 3s; //动画持续时间
  animation-delay: 0s; //动画延迟时间
}
.widget-FocusOnWarning {
  $size20: 0.104167rem /* 20/192 */;
  z-index: 2;
  //position
  top: 0.505208rem /* 97/192 */;
  margin-left: $size20 /* 20/192 */;
  position: absolute;
  //size
  height: 2.223958rem /* 427/192 */;
  width: 2.083333rem /* 400/192 */;
  color: #eee;
  .head {
    height: 0.166667rem /* 32/192 */;
    width: 100%;
    background: linear-gradient(-90deg, rgba(43, 167, 255, 0.2) 0%, rgba(43, 167, 255, 0.08) 100%);
    font-family: Source Han Sans CN-HEAVY;
    .title {
      width: 100%;
      height: 100%;
      display: flex;
      font-weight: 400;
      align-items: center;
      .icon {
        height: 0.166667rem /* 32/192 */;
        width: 0.34375rem /* 66/192 */;
        background: url('~@/views/groupPage/images/模块图标/智慧预警/重点关注.png') no-repeat center center;
        background-size: 100% 100%;
      }
      span {
        flex: 1;
        font-weight: bold;
        font-size: 0.083333rem /* 16/192 */;
        color: #ffffff;
        padding: 0.041667rem /* 8/192 */;
        background: linear-gradient(0deg, #9bd2fa 0%, #ffffff 100%);
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
  .content-info {
    width: 100%;
    height: calc(100% - 0.166667rem);
    display: inline-block;
    font-family: Source Han Sans CN;
    background: linear-gradient(0deg, rgba(14, 167, 255, 0.16) 0%, rgba(14, 167, 255, 0.02) 100%);
    .title {
      width: 100%;
      display: flex;
      .icon {
        height: 0.072917rem /* 14/192 */;
        width: 0.078125rem /* 15/192 */;
        margin-right: 0.046875rem /* 9/192 */;
        background: url('~@/views/groupPage/images/三角.png') no-repeat center center;
        background-size: 100% 100%;
      }
      .item-name {
        font-family: Source Han Sans CN;
        color: #0ea7ff;
        font-size: 0.072917rem /* 14/192 */;
        font-weight: 500;
      }
    }
    @mixin contentCenter() {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .warningStaWrap {
      width: 100%;
      height: 0.807292rem /* 155/192 */;
      @include contentCenter();
      overflow: hidden;
      .warningSta {
        width: 100%;
        height: 0.625rem /* 120/192 */;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        .ws-item {
          @include contentCenter();
          height: 100%;
          width: 100%;
          justify-content: flex-start;
          background: #062239;
        }
        .pic {
          width: 0.46875rem /* 90/192 */;
          height: 0.453125rem /* 87/192 */;
          object-fit: contain;
        }
        .txt {
          z-index: 10;
          font-family: Source Han Sans CN;
          color: #ffffff;
          height: 0.3125rem /* 60/192 */;
          display: flex;
          flex-flow: column;
          justify-content: space-evenly;
          .txt-value {
            font-size: 0.104167rem /* 20/192 */;
            font-weight: 500;
            white-space: nowrap;
          }
          .txt-title {
            font-size: 0.072917rem /* 14/192 */;
            font-weight: 400;
          }
          .early-value {
            color: #ffffff;
            font-size: 0.125rem /* 24/192 */;
            font-family: Source Han Sans CN-HEAVY;
            background: linear-gradient(0deg, #03e8d5 0%, #ffea77 100%);
            background-clip: text;
            -webkit-text-fill-color: transparent;
          }
          .early-title {
            font-size: 0.083333rem /* 16/192 */;
            font-weight: 500;
            font-family: Source Han Sans CN-MEDIUM;
          }
        }
        .radar {
          justify-content: center;
          flex-flow: column;
          position: relative;
          img {
            position: absolute;
            height: 0.703125rem /* 135/192 */;
            width: 0.703125rem /* 135/192 */;
          }
        }
        .radar::after {
          content: ' ';
          display: block;
          background-image: linear-gradient(44deg, rgba(0, 255, 51, 0) 50%, #35fff5 100%);
          width: 0.333333rem /* 64/192 */;
          height: 0.333333rem /* 64/192 */;
          position: absolute;
          top: -0.015625rem /* 3/192 */;
          left: 0.015625rem /* 3/192 */;
          animation: radar-beam 4s infinite;
          animation-timing-function: linear;
          transform-origin: bottom right;
          border-radius: 100% 0 0 0;
        }
        @keyframes radar-beam {
          0% {
            transform: rotate(0deg);
          }
          100% {
            transform: rotate(360deg);
          }
        }
      }
    }
    .rankList {
      width: 100%;
      height: calc(100% - 0.807292rem /* 155/192 */);
      .rankListContent {
        width: 100%;
        height: calc(100% - 0.072917rem /* 14/192 */);
        position: relative;
        .loadingText {
          position: absolute;
          top: 45%;
          left: 45%;
          margin: auto 0;
        }
      }
    }
  }
}
</style>