<template>
  <transition
    appear
    name="animate__animated"
    enter-active-class="animate__zoomIn"
    leave-active-class="animate__zoomOut"
  >
    <div class="widget-IndexStatistic" v-if="show">
      <div class="boxpanel">
        <div class="statisticitem" :class="'statisticitem' + index" v-for="(item, index) in dataList" :key="item.name">
          <div class="itemName">{{ item.name }}</div>
          <div class="itemCount" :class="'itemCount' + index">{{ item.value + item.unit }}</div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import { getRequestResult } from '@/views/groupPage/apis'
import { setNullAndUndefinedEmpty } from '@/views/groupPage/util'
export default {
  name: 'IndexStatistic', //指标统计
  props: {
    show: {}
  },
  data() {
    return {
      dataList: [
        { name: '项目总数', value: 0, unit: '个' },
        { name: '总投资', value: 0, unit: '亿' },
        { name: 'EPC项目', value: 0, unit: '个' },
        { name: 'EPC投资', value: 0, unit: '亿' }
      ]
    }
  },
  computed: {
    setNoNull() {
      return setNullAndUndefinedEmpty
    },
    code() {
      return this.$store.state.bigScreen.groupCodeValue
    }
  },
  watch: {
    show: {
      handler(n, o) {}
    },
    code: {
      handler(n, o) {
        Object.assign(this.$data, this.$options.data())
        !n ? this.getPageData() : this.getBranchPageData()
      },
      immediate: true
    }
  },
  methods: {
    roundFun(value, n) {
      return Math.round(value * Math.pow(10, n)) / Math.pow(10, n)
    },
    getPageData() {
      let data = { blockCode: 'ycepclist' }
      //获取全部数据
      getRequestResult(data).then((res) => {
        res = res.map((item) => {
          return {
            ...item,
            indexValue:
              item.unit === '万元'
                ? this.roundFun(this.setNoNull(item.indexValue) / 10000, 2)
                : this.setNoNull(item.indexValue)
          }
        })
        this.dataList[0].value = res.filter((item) => item.indexCode === 'A1')[0].indexValue
        this.dataList[1].value = res.filter((item) => item.indexCode === 'A2')[0].indexValue
        this.dataList[2].value = res.filter((item) => item.indexCode === 'A3')[0].indexValue
        this.dataList[3].value = res.filter((item) => item.indexCode === 'A4')[0].indexValue
      })
    },
    getBranchPageData() {
      let data = { blockCode: 'ycepclist', 'paras[0].name': 'projectCode', 'paras[0].val': this.code }
      //获取全部数据
      getRequestResult(data).then((res) => {
        res = res.map((item) => {
          return {
            ...item,
            indexValue:
              item.unit === '万元'
                ? this.roundFun(this.setNoNull(item.indexValue) / 10000, 2)
                : this.setNoNull(item.indexValue)
          }
        })
        this.dataList[0].value = res.filter((item) => item.indexCode === this.code + '-1')[0].indexValue
        this.dataList[1].value = res.filter((item) => item.indexCode === this.code + '-2')[0].indexValue
        this.dataList[2].value = res.filter((item) => item.indexCode === this.code + '-3')[0].indexValue
        this.dataList[3].value = res.filter((item) => item.indexCode === this.code + '-4')[0].indexValue
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.animate__zoomIn,
.animate__zoomOut {
  animation-duration: 3s; //动画持续时间
  animation-delay: 0s; //动画延迟时间
}
.widget-IndexStatistic {
  top: 0.505208rem /* 97/192 */;
  left: 50%;
  margin-left: -2.34375rem /* 450/192 */;
  height: 0.3125rem /* 60/192 */;
  width: 4.6875rem /* 900/192 */;
  overflow: hidden;
  position: absolute;
  font-family: Source Han Sans CN-HEAVY;
  .boxpanel {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    .statisticitem {
      width: 22%;
      height: 100%;
      display: flex;
      border-top: 2px solid;
      justify-content: space-around;
      align-items: center;
      .itemName {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.083333rem /* 16/192 */;
        font-weight: bold;
        color: #feffff;
        background: linear-gradient(0deg, #9bd2fa 0%, #ffffff 100%);
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .itemCount {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 0.114583rem /* 22/192 */;
        font-size: 0.125rem /* 24/192 */;
        font-weight: bold;
        color: #2ba7ff;
      }
      .itemCount0 {
        background: linear-gradient(0deg, #028df0 0%, #00d8fa 100%);
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .itemCount1 {
        background: linear-gradient(0deg, #028df0 0%, #eadf60 100%);
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .itemCount2 {
        background: linear-gradient(0deg, #028df0 0%, #0de795 100%);
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .itemCount3 {
        background: linear-gradient(0deg, #028df0 0%, #e19aff 100%);
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
    .statisticitem0 {
      background: linear-gradient(180deg, rgba(43, 167, 255, 0.26) 0%, rgba(43, 167, 255, 0) 100%);
      border-image: linear-gradient(90deg, #0095ff, #00ddff) 1;
    }
    .statisticitem1 {
      background: linear-gradient(180deg, rgba(43, 167, 255, 0.26) 0%, rgba(43, 167, 255, 0) 100%);
      border-image: linear-gradient(90deg, #028df0, #e6d773) 1;
    }
    .statisticitem2 {
      background: linear-gradient(180deg, rgba(43, 167, 255, 0.26) 0%, rgba(43, 167, 255, 0) 100%);
      border-image: linear-gradient(90deg, #028df0, #0ad88b) 1;
    }
    .statisticitem3 {
      background: linear-gradient(180deg, rgba(43, 167, 255, 0.26) 0%, rgba(43, 167, 255, 0) 100%);
      border-image: linear-gradient(90deg, #028df0, #e19aff) 1;
    }
  }
}
</style>