<template>
  <transition
    appear
    name="animate__animated animate__move"
    enter-active-class="animate__slideInLeft"
    leave-active-class="animate__slideOutLeft"
  >
    <div class="widget-StatisticalProgress">
      <div class="head">
        <div class="title">
          <div class="icon"></div>
          <span class="site-info">进度统计</span>
        </div>
      </div>
      <div class="content-info">
        <!---->
        <div class="categoryPecent">
          <div class="arrow-left"><i class="el-icon-caret-left"></i></div>
          <div class="categoryContent">
            <div
              class="categoryItem"
              v-for="item in categoryList"
              :key="item.name"
              :class="{ activeItem: currentActive == item.name }"
              @click="currentActive = item.name"
            >
              <div class="categoryValue">
                <span>{{ item.value }}</span>
              </div>
              <div class="categoryName">{{ item.name }}</div>
            </div>
          </div>
          <div class="arrow-right"><i class="el-icon-caret-right"></i></div>
        </div>
        <!---->
        <div class="chartPercent">
          <div class="chartRegion">
            <ComProgressPercentChart :value="percent" />
          </div>
          <div class="valueRegion">
            <div class="valueItem" v-for="item of valueRegionList" :key="item.title">
              <div class="value">{{ item.value }}</div>
              <div class="title">{{ item.title }}</div>
            </div>
          </div>
        </div>
        <!---->
        <div class="bottom2Content">
          <!---->
          <div class="buildAndDesign">
            <div class="title">
              <div class="icon"></div>
              <span class="item-name">管网设计入库、扫码施工统计</span>
            </div>
            <div class="buildAndDesignContent">
              <div class="BDC-item" v-for="item of buildAndDesignList" :key="item.title">
                <ComProgressBarChart :title="item.title" :chartData="item.data" />
              </div>
            </div>
          </div>
          <!---->
          <div class="buildAndDesignLength">
            <div class="title">
              <div class="icon"></div>
              <span class="item-name">管网扫码施工长度统计</span>
            </div>
            <div class="lengthChartContent">
              <DesignAndConsChart :chartData="lengthChartData" />
            </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 ComProgressBarChart from '../../../components/BarChart/ComProgressBarChart.vue'
import DesignAndConsChart from '../../../components/ComprehensiveChart/designAndConsChart.vue'
import { getRequestResult } from '../../../apis'
import { roundFun } from '../../../util'
//进度统计
@Component({
  name: 'StatisticalProgress',
  components: { ComProgressPercentChart, ComProgressBarChart, DesignAndConsChart }
})
export default class StatisticalProgress extends Vue {
  categoryList = []
  currentActive = ''
  get staticticalInfo() {
    return this.$store.state.bigScreen.statisticalAnalysisInfo
  }
  get projectCode() {
    return this.$store.state.bigScreen.currentProjectCode
  }
  @Watch('staticticalInfo')
  onChangeMethod(val) {
    this.assembleData(val)
  }
  @Watch('projectCode', { immediate: true })
  onChangMehod() {
    this.getPageData().catch((err) => {
      console.log(err)
    })
  }
  percent = 0
  valueRegionList = []
  buildAndDesignList = []
  lengthChartData = {}
  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 }
    })
    let index = [45, 46, 47],
      temp = []
    index.forEach((item) => {
      let s = res.find((e) => e.indexCode == projectCode + '-' + item)
      temp.push({ name: s.indexName, value: s.indexValue + s.unit })
    })
    this.currentActive = temp[0].name
    this.categoryList = temp
  }
  assembleData(result) {
    const { numberBefore, numberAfter, rate } = result.builtCount[0]
    this.valueRegionList = [
      { title: '扫码施工(公里)', value: numberBefore },
      { title: '设计入库(公里)', value: numberAfter }
    ]
    this.percent = Number((numberBefore / numberAfter).toFixed(2)) * 100
    //
    this.buildAndDesignList = []
    result.pipeDesignAndScan.forEach((item) => {
      this.buildAndDesignList.unshift({
        title: item.pipeCategory,
        data: [
          { name: '设计入库', finishAmout: roundFun(item.designLengthTotal, 2) },
          { name: '扫码施工', finishAmout: roundFun(item.scanTotal, 2) }
        ]
      })
    })
    //
    const { legend, series, xAxis } = result.monthCountEcharts
    this.lengthChartData = {
      legendData: legend,
      xData: xAxis.map((i) => {
        return this.dateFormat(i)
      }),
      consData: series[0].data.map((i) => roundFun(i, 2)),
      spvData: series[1].data.map((i) => roundFun(i, 2)),
      yAxisName: '单位：km'
    }
  }
  dateFormat(string: String) {
    let date = string.substr(4, 2) + '月'
    if (date[0] == '0') date = date.slice(1)
    return date
  }
}
</script>

<style lang="scss" scoped>
.animate__slideInLeft,
.animate__slideOutLeft {
  animation-duration: 3s; //动画持续时间
  animation-delay: 0s; //动画延迟时间
}
.widget-StatisticalProgress {
  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(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.24) 100%);
    // background: linear-gradient(0deg, rgba(14, 167, 255, 0.16) 0%, rgba(14, 167, 255, 0.02) 100%);
    .categoryPecent {
      margin-top: 0.104167rem /* 20/192 */;
      width: 100%;
      height: 0.348958rem /* 67/192 */;
      @include positionCenter();
      justify-content: space-between;
      .arrow-left,
      .arrow-right {
        height: 100%;
        width: 0.15625rem /* 30/192 */;
        @include positionCenter();
        justify-content: center;
        background: #062239;
        color: #2ba7ff;
        font-size: 0.09375rem /* 18/192 */;
        cursor: pointer;
      }
      .categoryContent {
        height: 100%;
        width: calc(100% - 0.416667rem /* 80/192 */);
        @include positionCenter();
        justify-content: space-between;
        .categoryItem {
          height: 100%;
          width: 0.520833rem /* 100/192 */;
          background: #062239;
          display: flex;
          flex-flow: column;
          justify-content: center;
          .categoryValue,
          .categoryName {
            @include positionCenter();
            justify-content: center;
            flex: 1;
          }
          .categoryValue {
            span {
              display: inline-block;
              font-size: 0.083333rem /* 16/192 */;
              font-weight: bold;
              color: #ffffff;
            }
          }
          .categoryName {
            font-size: 0.072917rem /* 14/192 */;
            font-weight: 400;
            color: #84bde5;
          }
        }
        .activeItem {
          border-bottom: 3px solid;
          border-image: linear-gradient(90deg, #00cdec, #f7de51) 30 30;
          .categoryValue {
            span {
              color: #ffffff;
              background: linear-gradient(0deg, #11f7ff 0%, #ffe76e 100%);
              background-clip: text;
              -webkit-text-fill-color: transparent;
            }
          }
        }
      }
    }
    .chartPercent {
      margin-top: 0.104167rem /* 20/192 */;
      width: 100%;
      height: 0.520833rem /* 100/192 */;
      background: rgba(6, 34, 57, 0.8);
      display: flex;
      .chartRegion {
        width: 0.625rem /* 120/192 */;
        height: 100%;
      }
      .valueRegion {
        width: calc(100% - 0.625rem /* 120/192 */);
        height: 100%;
        @include positionCenter();
        justify-content: center;
        .valueItem {
          height: 60%;
          width: 50%;
          display: flex;
          justify-content: center;
          flex-flow: column;
          .value,
          .title {
            @include positionCenter();
            justify-content: center;
            flex: 1;
          }
          .value {
            font-size: 0.083333rem /* 16/192 */;
            font-weight: 500;
            color: #ffffff;
          }
          .title {
            font-size: 0.072917rem /* 14/192 */;
            font-weight: 400;
            color: #84bde5;
          }
        }
      }
    }
    .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;
      }
    }
    .bottom2Content {
      height: calc(100% - 1.234375rem /* 237/192 */);
      width: 100%;
      background: linear-gradient(0deg, rgba(14, 167, 255, 0.16) 0%, rgba(14, 167, 255, 0) 100%);

      .buildAndDesign {
        margin-top: 0.15625rem /* 30/192 */;
        width: 100%;
        // height: 1.822917rem /* 350/192 */;
        height: calc(100% - 1.510417rem /* 290/192 */);
        .buildAndDesignContent {
          width: 100%;
          height: calc(100% - 0.072917rem /* 14/192 */);
          .BDC-item {
            margin: 0.052083rem /* 10/192 */;
            height: 23%;
            width: 95%;
          }
        }
      }
      .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>