<template>
  <transition
    appear
    name="animate__animated animate__move"
    enter-active-class="animate__slideInRight"
    leave-active-class="animate__slideOutRight"
  >
    <div class="widget-TodayWarningList">
      <div class="head">
        <div class="title">
          <div class="icon"></div>
          <span class="site-info">今日预警列表</span>
        </div>
      </div>
      <div class="content-info">
        <!---->
        <div class="categoryPecent">
          <div class="arrow-left"><i class="el-icon-caret-left"></i></div>
          <div class="categoryContent">
            <div class="categoryItem" :class="'activeItem'">
              <div class="categoryValue"><span>12个</span></div>
              <div class="categoryName">重点关注</div>
            </div>
            <div class="categoryItem">
              <div class="categoryValue"><span>6个</span></div>
              <div class="categoryName">工程隐患</div>
            </div>
            <div class="categoryItem">
              <div class="categoryValue"><span>22个</span></div>
              <div class="categoryName">工程安全</div>
            </div>
          </div>
          <div class="arrow-right"><i class="el-icon-caret-right"></i></div>
        </div>
        <!---->
        <div class="categoryNumber">
          <div class="cn-item" v-for="item of cnList" :key="item.title">
            <div class="cn-icon"><img :src="item.imgUrl" /></div>
            <div class="cn-text">
              <div class="cnt-val">{{ item.val }}个</div>
              <div class="cnt-title">{{ item.title }}</div>
            </div>
          </div>
        </div>
        <!---->
        <div class="focusDetails">
          <div class="title">
            <div class="icon"></div>
            <span class="item-name">重点关注详情</span>
          </div>
          <div class="focusDetailsContent">
            <div class="fdc-item" v-for="(item, index) of fcdList" :key="index">
              <div class="fdc-icon"><img :src="item.img" /></div>
              <div class="fdc-text">实际进度较计划进度严重“滞后”</div>
            </div>
          </div>
        </div>
        <!---->
        <div class="warningWord">
          <div class="title">
            <div class="icon"></div>
            <span class="item-name">预警词云图</span>
          </div>
          <div class="warningWordChart">
            <!-- <ComWordCloudChart /> -->
            <WordCloud />
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
import ComWordCloudChart from '@/views/groupPage/components/OthersChart/ComWordCloudChart.vue'
import WordCloud from './WordCloud.vue'
const iconList = {
  进度: require('@/views/groupPage/images/模块图标/智慧预警/进度.png'),
  质量: require('@/views/groupPage/images/模块图标/智慧预警/质量.png'),
  安全: require('@/views/groupPage/images/模块图标/智慧预警/安全.png'),
  监测: require('@/views/groupPage/images/模块图标/智慧预警/监测.png')
}
//今日预警列表
@Component({
  name: 'TodayWarningList',
  components: { ComWordCloudChart, WordCloud }
})
export default class TodayWarningList extends Vue {
  cnList = [
    { imgUrl: iconList['进度'], title: '进度', val: 6 },
    { imgUrl: iconList['质量'], title: '质量', val: 3 },
    { imgUrl: iconList['安全'], title: '安全', val: 2 },
    { imgUrl: iconList['监测'], title: '监测', val: 1 }
  ]
  fcdList = [
    { type: '进度', img: iconList['进度'] },
    { type: '进度', img: iconList['进度'] },
    { type: '进度', img: iconList['进度'] },
    { type: '进度', img: iconList['进度'] },
    { type: '进度', img: iconList['进度'] },
    { type: '进度', img: iconList['进度'] },
    { type: '质量', img: iconList['质量'] },
    { type: '质量', img: iconList['质量'] },
    { type: '质量', img: iconList['质量'] },
    { type: '安全', img: iconList['安全'] },
    { type: '安全', img: iconList['安全'] },
    { type: '监测', img: iconList['监测'] }
  ]
}
</script>

<style lang='scss' scoped>
.animate__slideInRight,
.animate__slideOutRight {
  animation-duration: 3s; //动画持续时间
  animation-delay: 0s; //动画延迟时间
}
.widget-TodayWarningList {
  $size10: 0.052083rem /* 10/192 */;
  $size20: 0.104167rem /* 20/192 */;
  z-index: 2;
  //position
  bottom: $size10 /* 10/192 */;
  margin-right: $size20 /* 20/192 */;
  right: 0;
  position: absolute;
  //size
  height: calc(100% - 0.557292rem /* 107/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%);
    @mixin positionCenter() {
      display: flex;
      align-items: center;
    }
    .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;
      }
    }
    .categoryPecent {
      margin-top: 0.083333rem /* 16/192 */;
      width: 100%;
      height: 0.364583rem /* 70/192 */;
      @include positionCenter();
      justify-content: space-between;
      .arrow-left,
      .arrow-right {
        height: 100%;
        width: 0.15625rem /* 30/192 */;
        @include positionCenter();
        justify-content: center;
        background: #062239;
        color: #2ba7ff;
        font-size: 0.09375rem /* 18/192 */;
        cursor: pointer;
      }
      .categoryContent {
        height: 100%;
        width: calc(100% - 0.416667rem /* 80/192 */);
        @include positionCenter();
        justify-content: space-between;
        .categoryItem {
          height: 100%;
          width: 0.520833rem /* 100/192 */;
          background: #062239;
          display: flex;
          flex-flow: column;
          justify-content: center;
          .categoryValue,
          .categoryName {
            @include positionCenter();
            justify-content: center;
            flex: 1;
          }
          .categoryValue {
            span {
              display: inline-block;
              font-size: 0.083333rem /* 16/192 */;
              font-weight: bold;
              color: #ffffff;
            }
          }
          .categoryName {
            font-size: 0.072917rem /* 14/192 */;
            font-weight: 400;
            color: #84bde5;
          }
        }
        .activeItem {
          border-bottom: 3px solid;
          border-image: linear-gradient(90deg, #00cdec, #f7de51) 30 30;
          .categoryValue {
            span {
              color: #ffffff;
              background: linear-gradient(0deg, #11f7ff 0%, #ffe76e 100%);
              background-clip: text;
              -webkit-text-fill-color: transparent;
            }
          }
        }
      }
    }
    .categoryNumber {
      width: 100%;
      height: 0.46875rem /* 90/192 */;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      .cn-item {
        display: flex;
        align-items: center;
        justify-content: center;
        .cn-icon {
          width: 0.286458rem /* 55/192 */;
          height: 0.364583rem /* 70/192 */;
          img {
            height: 100%;
            width: 100%;
            object-fit: contain;
          }
        }
        .cn-text {
          height: 0.171875rem /* 33/192 */;
          display: flex;
          flex-flow: column;
          justify-content: space-evenly;
          align-items: center;
          font-size: 0.072917rem /* 14/192 */;
          color: #ffffff;
          .cnt-val {
            font-family: Source Han Sans CN-HEAVY;
            font-weight: bold;
          }
          .cnt-title {
            font-family: Source Han Sans CN;
            font-weight: 400;
          }
        }
      }
    }
    .focusDetails {
      height: calc(100% - 2.6875rem /* 516/192 */);
      width: 100%;
      position: relative;
      .focusDetailsContent {
        margin-top: 0.104167rem /* 20/192 */;
        height: calc(100% - 0.177083rem /* 34/192 */);
        overflow: auto;
        .fdc-item {
          @include positionCenter();
          .fdc-icon {
            height: 0.15625rem /* 30/192 */;
            width: 0.15625rem /* 30/192 */;
            img {
              width: 100%;
              height: 100%;
              object-fit: contain;
            }
          }
          .fdc-text {
            font-size: 0.072917rem /* 14/192 */;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #feffff;
            line-height: 0.114583rem /* 22/192 */;
          }
        }
      }
    }
    .focusDetails::after {
      content: '';
      height: 0.005208rem /* 1/192 */;
      width: 90%;
      position: absolute;
      margin: 0 auto;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(255, 231, 233, 0.24);
    }
    .warningWord {
      margin-top: 0.052083rem /* 10/192 */;
      height: 1.71875rem /* 330/192 */;
      width: 100%;
      .warningWordChart {
        width: 100%;
        height: calc(100% - 0.072917rem /* 14/192 */);
        display: flex;
      }
    }
  }
}
</style>