<template>
  <transition
    appear
    name="animate__animated"
    enter-active-class="animate__slideInUp"
    leave-active-class="animate__slideOutDown"
  >
    <div class="widget-ProjectStatistic">
      <div class="content-info">
        <div class="info-item" v-for="(item, index) of prjList" :key="item.name">
          <el-checkbox v-model="item.status"></el-checkbox>
          <div class="icon" :class="'icon' + index"></div>
          <div class="name">{{ item.name }}：</div>
          <div class="num">{{ item.num }}个</div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import Vue from 'vue'
import { getRequestResult, getEpcProjectList } from '@/views/groupPage/apis'
export default {
  name: 'ProjectStatistic', //项目信息统计
  data() {
    return {
      prjList: [],
      prjInfo: null
    }
  },
  mounted() {
    // this.prjList.forEach((item, index) => {
    //   Vue.set(item, 'status', '')
    // })
    this.getPageData()
  },
  watch: {
    prjList: {
      handler(val, o) {
        if (!this.prjInfo) return
        let data = [],
          result = []
        let all = false
        val.forEach((item) => {
          data = []
          if (item.name == '建管项目') {
            if (item.status) {
              data = this.prjInfo.filter((item) => item.manage_type === '0')
            }
          }
          if (item.name == 'EPC项目') {
            if (item.status) {
              data = [...data, ...this.prjInfo.filter((item) => item.manage_type === '1' || item.manage_type === '2')]
            }
          }
          if (item.name == '暂停项目') {
            if (item.status) {
              let zt = this.prjInfo.filter((item) => new RegExp('暂停').test(item.project_phase))
              zt.forEach((c) => {
                // if (data.findIndex((item) => item.prjName == c.prjName) == -1) {
                data.push(c)
                // }
              })
            }
          }
          if (item.name == '未移交项目') {
            if (item.status) {
              data = [...data, ...this.prjInfo.filter((item) => new RegExp('未移交').test(item.project_phase))]
            }
          }
          result = [...result, ...data]
        })
        this.$store.state.bigScreen.groupProject = result
      },
      deep: true
    },
    groupName() {
      this.getPageData()
    }
  },
  computed: {
    setNoNull() {
      return this.$listeners.setNullAndUndefinedEmpty
    },
    groupName() {
      return this.$store.state.bigScreen.groupName
    },
    code() {
      return this.$store.state.bigScreen.groupCodeValue
    }
  },
  methods: {
    roundFun(value, n) {
      return Math.round(value * Math.pow(10, n)) / Math.pow(10, n)
    },
    async getPageData() {
      // let data = { blockCode: 'ycepclist' }
      //获取全部数据
      // getRequestResult(data)
      // .then((res) => {
      // this.prjList = [
      //   { name: '建管项目', num: res.filter((item) => item.indexCode === 'A1')[0].indexValue, status: true },
      //   { name: 'EPC项目', num: res.filter((item) => item.indexCode === 'A3')[0].indexValue, status: true },
      //   { name: '暂停项目', num: res.filter((item) => item.indexCode === 'A35')[0].indexValue, status: true }
      // ]
      // })
      // .then(() => {
      // let data = { blockCode: 'prjInfo' }
      // getRequestResult(data).then((res) => {
      //   this.prjInfo = res.map((item) => {
      //     Object.keys(item).forEach((val) => (item[val] = item[val] || '/'))
      //     return { ...item }
      //   })
      //   // if (this.groupName === this.code) this.prjInfo = this.prjInfo.filter((item) => item.branch == this.groupName)
      //   if (this.groupName !== '三峡发展') this.prjInfo = this.prjInfo.filter((item) => item.branch == this.groupName)
      //   this.prjList = [
      //     { name: '建管项目', num: this.prjInfo.filter((item) => item.type !== '未移交').length, status: true },
      //     { name: 'EPC项目', num: this.prjInfo.filter((item) => item.type === '建管/EPC').length, status: false },
      //     { name: '暂停项目', num: this.prjInfo.filter((item) => item.stage === '暂停阶段').length, status: false },
      //     { name: '未移交项目', num: this.prjInfo.filter((item) => item.type === '未移交').length, status: false }
      //   ]
      //   // this.$store.state.bigScreen.groupProject = this.prjInfo
      // })
      // })

      //获取项目数据
      let res = await getEpcProjectList()
      this.prjInfo = res.result.map((item) => {
        Object.keys(item).forEach((val) => (item[val] = item[val] || '/'))
        return { ...item }
      })
      if (this.groupName !== '三峡发展')
        this.prjInfo = this.prjInfo.filter((item) => item.son_company_name == this.groupName)
      this.prjInfo = this.prjInfo.map((i) => {
        return { ...i, contract_ppp_money: i.contract_ppp_money / Math.pow(10, 8) }
      })
      //1:建管项目，1：建管/EPC，2：建管/EPC联合牵头模式
      this.prjList = [
        { name: '建管项目', num: this.prjInfo.filter((item) => item.manage_type === '0').length, status: true },
        {
          name: 'EPC项目',
          num: this.prjInfo.filter((item) => item.manage_type === '1' || item.manage_type === '2').length,
          status: true
        },
        {
          name: '暂停项目',
          num: this.prjInfo.filter((item) => new RegExp('暂停').test(item.project_phase)).length,
          status: false
        },
        {
          name: '未移交项目',
          num: this.prjInfo.filter((item) => new RegExp('未移交').test(item.project_phase)).length,
          status: false
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.animate__slideInUp,
.animate__slideOutDown {
  animation-duration: 3s; //动画持续时间
  animation-delay: 0s; //动画延迟时间
}
.widget-ProjectStatistic {
  z-index: 2;
  margin-left: 2.34375rem /* 450/192 */;
  bottom: 0.104167rem /* 20/192 */;
  height: 0.104167rem /* 20/192 */;
  width: 5.302083rem /* 1018/192 */;
  overflow: hidden;
  position: absolute;

  .content-info {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
    .info-item {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 20%;
      & > * {
        margin-right: 0.026042rem /* 5/192 */;
      }
      .icon {
        height: 0.052083rem /* 10/192 */;
        width: 0.052083rem /* 10/192 */;
        border-radius: 50%;
      }
      .icon0 {
        background: #e3b434;
      }
      .icon1 {
        background: #00c98f;
      }
      .icon2 {
        background: #ffffff;
      }
      .icon3 {
        background: #ff4040;
      }
      .name {
        font-family: Source Han Sans CN;
        font-size: 0.072917rem /* 14/192 */;
        font-weight: 400;
        color: #99c3f0;
      }
      .num {
        font-family: Source Han Sans CN-HEAVY;
        font-size: 0.072917rem /* 14/192 */;
        font-weight: bold;
        color: rgba(255, 255, 255, 1);
      }
    }
  }
}
</style>>
