<template>
  <transition
    appear
    name="animate__animated animate__move"
    enter-active-class="animate__slideInLeft"
    leave-active-class="animate__slideOutLeft"
  >
    <div class="widget-QualityEvaluation">
      <div class="head">
        <div class="title">
          <div class="icon"></div>
          <span class="site-info">质量验评情况</span>
        </div>
      </div>
      <div class="content-info">
        <!---->
        <div class="qualifiedPercent">
          <div class="chartContent">
            <div class="chart"><ComProgressPercentChart :value="rateOfPass" /></div>
            <div class="chart-title">一次检验合格率</div>
          </div>
          <div class="staContent">
            <div class="sta-item" v-for="item of staList" :key="item.name">
              <div class="sta-value">{{ item.value }}个</div>
              <div class="sta-name">{{ item.name }}</div>
            </div>
          </div>
        </div>
        <!---->
        <div class="numberStatistical">
          <div class="title">
            <div class="icon"></div>
            <span class="item-name">分部工程完成检验批数量统计</span>
          </div>
          <div class="partitionedProject">
            <div class="partial-item" v-for="(item, index) of partialList" :key="item.name">
              <div class="partial-title">
                <div class="partial-number">
                  <span class="num">{{ index + 1 }}</span>
                </div>
                <div class="partial-name">{{ item.name }}</div>
              </div>
              <div class="partial-percent">
                <div class="percentBar" :style="{ width: item.percent + '%' }"></div>
                <div class="percentNum">{{ item.num }}个</div>
              </div>
              <div class="partial-child">
                <div class="pc-item" v-for="c of item.child" :key="c.name">
                  <div class="pci-name">{{ c.name }}</div>
                  <div class="pci-bar" :title="c.per">
                    <div class="perval" :style="{ width: c.per + '%' }"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!---->
          <div class="buildAndDesignLength">
            <div class="title">
              <div class="icon"></div>
              <span class="item-name">数量统计</span>
            </div>
            <div class="lengthChartContent">
              <DesignAndConsChart :chartData="chartData" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
import ComProgressPercentChart from '../../../components/PieChart/ComProgressPercentChart.vue'
import DesignAndConsChart from '../../../components/ComprehensiveChart/designAndConsChart.vue'
import { getRequestResult } from '../../../apis'
//质量验评情况
@Component({
  name: 'QualityEvaluation',
  components: { ComProgressPercentChart, DesignAndConsChart }
})
export default class QualityEvaluation extends Vue {
  @Prop({ type: Object, default: () => {} }) dataInfo!: any
  rateOfPass = 0
  staList = []
  partialList = []
  chartData = {}
  get projectCode() {
    return this.$store.state.bigScreen.currentProjectCode
  }
  @Watch('dataInfo')
  onChangMehod() {
    this.getPageData()
  }
  async getPageData() {
    let data = { blockCode: 'ycepclist' }
    let projectCode = this.projectCode
    //获取全部数据
    const result = await getRequestResult(data)
    let res = (result as any).filter((item) => item.indexCode.indexOf(projectCode + '-') != -1)
    res = res.map((item) => {
      Object.keys(item).forEach((val) => (item[val] = item[val] || ''))
      return { ...item }
    })
    this.rateOfPass = Number(res.find((e) => e.indexCode == projectCode + '-' + 84).indexValue)
    this.staList = [
      { name: '分项工程验收', value: res.find((e) => e.indexCode == projectCode + '-' + 80).indexValue },
      { name: '分部工程验收', value: res.find((e) => e.indexCode == projectCode + '-' + 81).indexValue },
      { name: '申请检验批', value: res.find((e) => e.indexCode == projectCode + '-' + 82).indexValue },
      { name: '完成检验批', value: res.find((e) => e.indexCode == projectCode + '-' + 83).indexValue }
    ]

    let arr85 = [],
      arr86 = [],
      arr87 = [],
      arr88 = []
    res.forEach((item) => {
      if (new RegExp(projectCode + '-' + 85 + '-').test(item.indexCode)) {
        arr85.push({ name: item.indexName, per: item.indexValue })
      }
      if (new RegExp(projectCode + '-' + 86 + '-').test(item.indexCode)) {
        arr86.push({ name: item.indexName, per: item.indexValue })
      }
      if (new RegExp(projectCode + '-' + 87 + '-').test(item.indexCode)) {
        arr87.push({ name: item.indexName, per: item.indexValue })
      }
      if (new RegExp(projectCode + '-' + 88 + '-').test(item.indexCode)) {
        arr88.push({ name: item.indexName, per: item.indexValue })
      }
    })

    this.partialList = [
      {
        name: res.find((e) => e.indexCode == projectCode + '-' + 85).indexName,
        num: res.find((e) => e.indexCode == projectCode + '-' + 85).indexValue,
        percent: 80,
        child: arr85
      },
      {
        name: res.find((e) => e.indexCode == projectCode + '-' + 86).indexName,
        num: res.find((e) => e.indexCode == projectCode + '-' + 86).indexValue,
        percent: 80,
        child: arr86
      },
      {
        name: res.find((e) => e.indexCode == projectCode + '-' + 87).indexName,
        num: res.find((e) => e.indexCode == projectCode + '-' + 87).indexValue,
        percent: 80,
        child: arr87
      },
      {
        name: res.find((e) => e.indexCode == projectCode + '-' + 88).indexName,
        num: res.find((e) => e.indexCode == projectCode + '-' + 88).indexValue,
        percent: 80,
        child: arr88
      }
    ]
    let con = Array.from({ length: 12 }, (value, key) => key * 2 + 89),
      conArr = [],
      spvArr = []
    con.forEach((item) => {
      conArr.push(res.find((e) => e.indexCode == projectCode + '-' + item).indexValue)
      let num = item + 1
      spvArr.push(res.find((e) => e.indexCode == projectCode + '-' + num).indexValue)
    })
    this.chartData = {
      legendData: ['监理', '施工'],
      xData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      consData: conArr,
      spvData: spvArr,
      yAxisName: '单位：个'
    }
    // if (!this.dataInfo) return
    // const {
    //   acceptance_first_rate,
    //   sub_project_acceptance_num,
    //   division_acceptance_num,
    //   acceptance_num,
    //   acceptance_first_num
    // } = this.dataInfo || {}
    // this.rateOfPass = acceptance_first_rate
    // this.staList = [
    //   { name: '分项工程验收', value: sub_project_acceptance_num },
    //   { name: '分部工程验收', value: division_acceptance_num },
    //   { name: '检验批合格数量', value: acceptance_first_num },
    //   { name: '检验批验收数量', value: acceptance_num }
    // ]
  }
}
</script>

<style lang="scss" scoped>
.animate__slideInLeft,
.animate__slideOutLeft {
  animation-duration: 3s; //动画持续时间
  animation-delay: 0s; //动画延迟时间
}
.widget-QualityEvaluation {
  z-index: 2;
  //position
  top: 0.505208rem /* 97/192 */;
  margin-left: $size20 /* 20/192 */;
  position: absolute;
  //size
  height: calc(100% - 0.557292rem /* 107/192 */);
  width: 2.083333rem /* 400/192 */;
  .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;
      }
    }
  }
  @mixin positionCenter() {
    display: flex;
    align-items: center;
  }
  .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;
      }
    }
    .qualifiedPercent {
      margin-top: 0.104167rem /* 20/192 */;
      width: 100%;
      height: 0.729167rem /* 140/192 */;
      display: flex;
      justify-content: space-between;
      font-size: 0.072917rem /* 14/192 */;
      font-weight: 400;
      color: #84bde5;
      .chartContent {
        width: 0.677083rem /* 130/192 */;
        height: 100%;
        background: rgba(6, 34, 57, 0.9);
        display: flex;
        flex-flow: column;
        justify-content: center;
        .chart {
          height: 0.572917rem /* 110/192 */;
          width: 100%;
        }
        .chart-title {
          text-align: center;
        }
      }
      .staContent {
        height: 100%;
        width: calc(100% - 0.697917rem /* 134/192 */);
        background: rgba(6, 34, 57, 0.9);
        display: grid;
        grid-template-columns: 1fr 1fr; //有几列
        grid-template-rows: 50% 50%; //有几行
        .sta-item {
          display: flex;
          flex-flow: column;
          align-items: center;
          justify-content: space-evenly;
          .sta-value {
            font-size: 0.083333rem /* 16/192 */;
            font-weight: 500;
            color: #ffffff;
          }
        }
      }
    }
    .numberStatistical {
      margin-top: 0.104167rem /* 20/192 */;
      width: 100%;
      height: calc(100% - 0.9375rem /* 180/192 */);
      font-family: Source Han Sans CN;
      .partitionedProject {
        width: calc(100% - 0.052083rem /* 10/192 */);
        height: calc(100% - 1.614583rem /* 310/192 */);
        margin-left: 0.052083rem /* 10/192 */;
        overflow: auto;
        .partial-item {
          width: 100%;
          margin: 0.052083rem /* 10/192 */ 0;
          .partial-title,
          .partial-percent,
          .partial-child {
            margin: 0.052083rem /* 10/192 */ 0;
          }
          .partial-title {
            display: flex;
            align-items: center;
            .partial-number {
              width: 0.104167rem /* 20/192 */;
              height: 0.104167rem /* 20/192 */;
              background: rgba(43, 167, 255, 0.3);
              border-radius: 50%;
              text-align: center;
              line-height: 0.104167rem /* 20/192 */;
              .num {
                font-size: 0.09375rem /* 18/192 */;
                font-family: YouSheBiaoTiHei;
                font-weight: 400;
                color: #1c9af6;
                display: block;
                background: linear-gradient(68deg, #1ea2ff 0%, #f9d880 100%);
                background-clip: text;
                -webkit-text-fill-color: transparent;
              }
            }
            .partial-name {
              margin-left: 0.026042rem /* 5/192 */;
              font-size: 0.072917rem /* 14/192 */;
              font-weight: 500;
              color: #2ba7ff;
            }
          }
          .partial-percent {
            width: 100%;
            display: flex;
            align-items: center;
            .percentBar {
              height: 0.041667rem /* 8/192 */;
              background: #d3af40;
              border-radius: 4px;
              margin-right: 0.041667rem /* 8/192 */;
            }
            .percentNum {
              font-size: 0.072917rem /* 14/192 */;
              font-weight: 500;
              color: #feffff;
              white-space: nowrap;
            }
          }
          .partial-child {
            width: 100%;
            .pc-item {
              display: flex;
              align-items: center;
              padding: 0 0.052083rem /* 10/192 */ 0.052083rem /* 10/192 */;
              .pci-name {
                // width: 0.46875rem /* 90/192 */;
                margin-right: 0.052083rem /* 10/192 */;
                font-size: 0.072917rem /* 14/192 */;
                font-weight: 400;
                color: #feffff;
                white-space: nowrap;
                max-width: 0.520833rem /* 100/192 */;
              }
              .pci-bar {
                width: calc(100% - 0.520833rem /* 100/192 */);
                height: 0.03125rem /* 6/192 */;
                .perval {
                  height: 100%;
                  background: linear-gradient(-90deg, #05cfe1, #0a89ff);
                  border-radius: 0.015625rem /* 3/192 */;
                }
              }
            }
          }
        }
      }
      .buildAndDesignLength {
        margin-top: 0.15625rem /* 30/192 */;
        width: 100%;
        height: 1.354167rem /* 260/192 */;
        .lengthChartContent {
          height: calc(100% - 0.072917rem /* 14/192 */);
          overflow: hidden;
        }
      }
    }
  }
}
</style>