<template>
  <transition
    appear
    name="animate__animated animate__move"
    enter-active-class="animate__slideInLeft"
    leave-active-class="animate__slideOutLeft"
  >
    <div class="widget-QualityEvaluationNew">
      <div class="head">
        <div class="title">
          <div class="icon"></div>
          <span class="site-info">质量验评情况</span>
        </div>
      </div>
      <div class="content-info">
        <!---->
        <div class="EngineeringQuantity">
          <div class="title">
            <div class="icon"></div>
            <span class="item-name">质量验评状态工程数量统计</span>
          </div>
          <div class="EngineeringQuantityContent">
            <div class="eqsc-item" v-for="item in engineeringQuantityList" :key="item.type">
              <div class="ei-left">
                <span>{{ item.type }}</span>
                <span>{{ item.num }}<i>个</i></span>
              </div>
              <div class="ei-right">
                <div class="er-item" v-for="citem in item.children" :key="citem.state">
                  <span
                    >{{ citem.state }}：<i>{{ citem.num }}</i></span
                  >
                  <div class="progress">
                    <div class="base-back">
                      <div class="progress-back" :style="{ width: citem.percent + '%' }"></div>
                      <div class="progress-pointer" :style="{ left: citem.percent + '%' }"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!---->
        <div class="CompleteStatistical">
          <div class="title">
            <div class="icon"></div>
            <span class="item-name">完成检验批数量统计</span>
          </div>
          <div class="completeContent">
            <ComQulityPieChartVue :chartData="completeChartData" />
          </div>
        </div>
        <!---->
        <div class="FunctionStatistical">
          <div class="title">
            <div class="icon"></div>
            <span class="item-name">功能性试验数量统计</span>
          </div>
          <div class="functionContent">
            <ComQulityPieChartVue :chartData="functionChartData" />
          </div>
        </div>
        <!---->
        <div class="TrendStatistical">
          <div class="title">
            <div class="icon"></div>
            <span class="item-name">近6个月评定、验收趋势统计</span>
          </div>
          <div class="lengthChartContent">
            <DesignAndConsChart :chartData="chartData" />
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
import ComQulityPieChartVue from '@/views/groupPage/components/PieChart/ComQulityPieChart.vue'
import DesignAndConsChart from '../../../components/ComprehensiveChart/designAndConsChart.vue'
import { getEpcCheckScaleData, getEpcProjectLevelList, getEpcQbsBychecktimeData } from '../../../apis'
import { roundFun } from '@/views/groupPage/util'
//质量验评情况
@Component({
  name: 'QualityEvaluationNew',
  components: { ComQulityPieChartVue, DesignAndConsChart }
})
export default class QualityEvaluationNew extends Vue {
  @Prop({ type: Object, default: () => {} }) dataInfo!: any
  chartData = {}

  completeChartData = []

  functionChartData = []

  engineeringQuantityList = []

  get projectCode() {
    return this.$store.state.bigScreen.currentProjectCode
  }
  @Watch('dataInfo')
  onChangMehod() {
    // this.getPageData()
  }
  mounted() {
    this.getPageData()
  }
  getPageData() {
    // console.log('传递信息', this.dataInfo)
    this.getListData()
    this.getPieData()
    this.getLineData()
  }
  //质量验评情况数据
  async getListData() {
    const res = await getEpcProjectLevelList({ code: this.projectCode })
    let { code, result } = res
    if (code != 1 || result.length == 0) return
    let list = []
    result = result.filter((i) => i.type == '分部工程' || i.type == '分项工程')
    result.forEach((item) => {
      let target = list.find((i) => i.type == item.type)
      if (!target) {
        list.push({ type: item.type, num: +item.value, children: [{ state: item.state, num: item.value }] })
      } else {
        target.num += +item.value
        target.children.push({ state: item.state, num: item.value })
      }
    })
    list.map((i) => {
      i.children = i.children.map((e) => {
        return { ...e, percent: roundFun(e.num / i.num, 2) * 100 }
      })
      return { ...i }
    })
    this.engineeringQuantityList = list
  }
  //完成检验批数量统计&&功能性试验数量统计数据
  async getPieData() {
    const res = await getEpcCheckScaleData({ code: this.projectCode })
    let { code, result } = res
    if (code != 1 || result.length == 0) return
    this.completeChartData = result.filter((item) => item.type == '检验批')
    this.functionChartData = result.filter((item) => item.type == '功能性试验')
  }
  //近6个月评定、验收趋势统计
  async getLineData() {
    const res = await getEpcQbsBychecktimeData({ code: this.projectCode })
    let { code, result } = res
    if (code != 1 || !result) return
    const { legendData, seriesDatas, xaxis } = result
    this.chartData = {
      legendData: legendData,
      xData: xaxis,
      spvData: seriesDatas.find((i) => i.name == '新增验收').seriesData || [],
      consData: seriesDatas.find((i) => i.name == '新增评定').seriesData || [],
      yAxisName: '单位：个',
      seriesName: legendData
    }
  }
}
</script>

<style lang="scss" scoped>
.animate__slideInLeft,
.animate__slideOutLeft {
  animation-duration: 3s; //动画持续时间
  animation-delay: 0s; //动画延迟时间
}
.widget-QualityEvaluationNew {
  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;
      }
    }
    .EngineeringQuantity {
      margin-top: 0.104167rem /* 20/192 */;
      width: 100%;
      height: 0.989583rem /* 190/192 */;
      display: flex;
      flex-flow: column;
      font-size: 0.072917rem /* 14/192 */;
      font-weight: 400;
      color: #84bde5;
      .EngineeringQuantityContent {
        margin-top: 0.052083rem /* 10/192 */;
        height: calc(100% - 0.125rem /* 24/192 */);
        width: 100%;
        display: flex;
        flex-flow: column;
        justify-content: space-around;
        .eqsc-item {
          height: 0.416667rem /* 80/192 */;
          width: 100%;
          display: flex;
        }
        .ei-left {
          height: 100%;
          width: 0.416667rem /* 80/192 */;
          background: rgba(6, 34, 57, 0.8);
          display: flex;
          flex-flow: column;
          align-items: center;
          justify-content: center;
          span {
            width: 100%;
            height: 50%;
            // padding: 0.052083rem /* 10/192 */;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          & span:first-of-type {
            color: rgba(132, 189, 229, 0.99);
          }
          & span:last-of-type {
            font-size: 0.09375rem /* 18/192 */;
            font-family: Agency FB;
            font-weight: bold;
            color: rgba(255, 255, 255, 0.99);
            i {
              font-family: Source Han Sans CN-MEDIUM;
              font-size: 0.083333rem /* 16/192 */;
            }
          }
        }
        .ei-right {
          height: 100%;
          width: calc(100% - 0.416667rem /* 80/192 */);
          background: rgba(6, 34, 57, 0.56);
          display: flex;
          .er-item {
            height: 100%;
            width: 33%;
            display: flex;
            flex-flow: column;
            span,
            .progress {
              width: 100%;
              height: 50%;
              display: flex;
              justify-content: center;
              align-items: center;
            }
            & span:first-of-type {
              font-size: 0.0625rem /* 12/192 */;
              color: #84bde5;
              i {
                font-size: 0.072917rem /* 14/192 */;
                font-weight: 500;
                color: #feffff;
              }
            }
            .base-back {
              margin: 0 0.078125rem /* 15/192 */;
              width: 100%;
              height: 0.03125rem;
              background: #0c304e;
              border-radius: 3px;
              position: relative;
              .progress-back {
                height: 100%;
                // width: 30%;
                background: linear-gradient(90deg, #5932ea, #07d4d2);
                border-radius: 3px;
              }
              .progress-pointer {
                // left: 30%;
                margin-left: -0.036458rem /* 7/192 */;
                bottom: 0.052083rem /* 10/192 */;
                position: absolute;
                clip-path: polygon(100% 0, 0 0, 50% 100%);
                width: 0.072917rem /* 14/192 */;
                height: 0.052083rem /* 10/192 */;
                background: linear-gradient(0deg, #ffe87a, #f9b228);
              }
            }
          }
        }
      }
    }
    .CompleteStatistical {
      margin-top: 0.104167rem /* 20/192 */;
      width: 100%;
      height: 0.833333rem /* 160/192 */;
      .completeContent {
        height: calc(100% - 0.125rem /* 24/192 */);
        width: 100%;
      }
    }
    .FunctionStatistical {
      margin-top: 0.104167rem /* 20/192 */;
      width: 100%;
      height: 0.833333rem /* 160/192 */;
      .functionContent {
        height: calc(100% - 0.125rem /* 24/192 */);
        width: 100%;
      }
    }
    .TrendStatistical {
      margin-top: 0.104167rem /* 20/192 */;
      width: 100%;
      height: calc(100% - 3.072917rem /* 590/192 */);
      .lengthChartContent {
        height: calc(100% - 0.125rem /* 24/192 */);
        width: 100%;
      }
    }
  }
}
</style>