<template>
  <transition
    appear
    name="animate__animated animate__move"
    enter-active-class="animate__zoomIn"
    leave-active-class="animate__zoomOut"
  >
    <div class="widget-ProjectIndexStatistic">
      <div class="boxpanel">
        <div class="statisticitem" v-for="item in dataList" :key="item.indexName">
          <div class="itemName">
            <div class="title">{{ item.indexName }}</div>
            <div class="img">
              <div class="num">{{ item.indexValue + item.unit }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script lang="ts">
import { getRequestResult } from '@/views/groupPage/apis'
import { setNullAndUndefinedEmpty } from '@/views/groupPage/util'
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
//参建单位模块
@Component({ name: 'ProjectIndexStatistic' })
export default class ProjectIndexStatistic extends Vue {
  dataList: Array<any> = [
    {
      title: '建设状态',
      num: '无'
    },
    {
      title: '总投资',
      num: '0'
    },
    {
      title: '开工时间',
      num: '0'
    },
    {
      title: '工期',
      num: '0'
    }
  ]
  mounted() {
    this.getPageData()
  }
  getPageData() {
    let data = { blockCode: 'ycepclist' }
    let projectCode = 'HB06'
    //获取全部数据
    getRequestResult(data).then((res: Array<any>) => {
      res = res.filter((item) => item.indexCode.indexOf(projectCode + '-') != -1)
      res = res.map((item) => {
        Object.keys(item).forEach((val) => (item[val] = item[val] || ''))
        return { ...item }
      })
      this.dataList = this.dataList.map((item, index) => {
        return res.find((e) => e.indexCode == projectCode + '-' + (index + 1))
      })
    })
  }
}
</script>

<style lang='scss' scoped>
.animate__zoomIn,
.animate__zoomOut {
  animation-duration: 3s; //动画持续时间
  animation-delay: 0s; //动画延迟时间
}
.widget-ProjectIndexStatistic {
  bottom: 0.052083rem /* 10/192 */;
  left: 50%;
  margin-left: -1.276042rem /* 245/192 */;
  height: 0.416667rem /* 80/192 */;
  width: 2.552083rem /* 490/192 */;
  overflow: hidden;
  position: absolute;
  font-family: Source Han Sans CN;
  .boxpanel {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    .statisticitem {
      width: 0.645833rem /* 124/192 */;
      height: 100%;
      display: flex;
      .itemName {
        height: 100%;
        width: 100%;
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        .title {
          text-align: center;
          font-size: 0.072917rem /* 14/192 */;
          font-weight: bold;
          color: rgb(43, 167, 255);
          // text-shadow: 0 0 10px rgba(43, 167, 255,0.3),0 0 20px rgba(43, 167, 255,0.3),0 0 30px rgba(43, 167, 255,0.3),0 0 40px rgba(43, 167, 255,0.3);
        }
        .img {
          height: 0.447917rem /* 86/192 */;
          width: 0.4375rem /* 84/192 */;
          background: url('~@/views/groupPage/images/模块图标/底座.png') no-repeat center center;
          background-size: 100% 100%;
          display: flex;
          justify-content: center;
          white-space: nowrap;
          .num {
            font-size: 0.09375rem /* 18/192 */;
            font-weight: bold;
            line-height: 0.244792rem /* 47/192 */;
            color: #0ea7ff;
            // text-shadow: 0px 2px 8px #031C2E;
            background: linear-gradient(0deg, #8ccfff 0%, #ffffff 100%);
            background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }
      }
    }
  }
}
</style>
