<template>
  <div class="proj-info-page">
    <div class="inner-tit">
      <img src="../../assets/img/lef-badge.png" alt="">
      工程信息
    </div>
    <div class="proj-infos">
      <div
        class="info-lef"
        style="cursor: pointer;"
        @click="toggleDialog(9)"
      >
        <div class="lef-upper">{{ projData.projectTotal }}</div>
        <div class="lef-lower">工程总数</div>
      </div>
      <div class="info-rig">
        <div class="bars">
          <img src="../../assets/img/proj-spin.png" alt="">
          <div
            style="cursor: pointer"
            @click="toggleDialog(10)"
          >
            <span style="font-size: 22px; color: #1791C7">{{ projData.projectPowerTotal }}</span>
            <div id="change-bar" style="height: 40px"></div>
            <span>变电工程数</span>
          </div>
        </div>
        <div class="bars">
          <img src="../../assets/img/proj-spin.png" alt="">
          <div
            style="cursor: pointer"
            @click="toggleDialog(11)"
          >
            <span style="font-size: 22px; color: #1791C7">{{ projData.projectLineTotal }}</span>
            <div id="line-bar" style="height: 40px"></div>
            <span>线路工程数</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import {
  queryProjInfoApi
} from '@/api/home/home'
export default {
  name: 'projInfoPage',
  components: {

  },
  data() {
    return {
      projData: {
        projectLineTotal: 0,
        projectPowerTotal: 0,
        projectTotal: 0
      }
    }
  },
  created() {
  },
  mounted() {
    this.getProjData()
    // this.getProjBar()
  },
  destroyed() {

  },
  methods: {
    toggleDialog(v) {
      this.$emit('openDialog', { order: v })
    },
    async getProjData() {
      
      let res = await queryProjInfoApi()
      this.projData = res.data
      this.getProjBar()
    },
    getProjBar() {
      let changeBarOpt = {
        backgroundColor: 'transparent',
        grid: {
          top: 0,
          left: '10%',
          right: '10%',
          bottom: 20,
          containLabel: true,
        },
        xAxis: {
          type: 'value',
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          max: this.projData.projectTotal,
        },
        yAxis: {
          type: 'category',
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
        },
        series: [
          {
            type: 'bar',
            itemStyle: {
              normal: {
                color: "#5EA3E1",
                opacity: 0.7,
                barBorderRadius: 4,
              },
            },
            label:{
              show:true,
              formatter:'',
              backgroundColor:'#fff',
              width:10,
              height:10,
              position:'right',
              offset:[-7,0],
              borderWidth:5,
              borderColor:'rgba(255,255,255,0.2)',
              borderRadius:5,
              shadowColor:'#fff',
              shadowBlur:20
            },
            showBackground: true,
            silent: true,
            barWidth: 5,
            barGap: '-100%', // Make series be overlap
            data: [this.projData.projectPowerTotal],
          },
        ],
      }
      let lineBarOpt = {
        backgroundColor: 'transparent',
        grid: {
          top: 0,
          left: '10%',
          right: '10%',
          bottom: 20,
          containLabel: true,
        },
        xAxis: {
          type: 'value',
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          max: this.projData.projectTotal,
        },
        yAxis: {
          type: 'category',
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
        },
        series: [
          {
            type: 'bar',
            itemStyle: {
              normal: {
                color: "#5EA3E1",
                opacity: 0.7,
                barBorderRadius: 4,
              },
            },
            label:{
              show:true,
              formatter:'',
              backgroundColor:'#fff',
              width:10,
              height:10,
              position:'right',
              offset:[-7,0],
              borderWidth:5,
              borderColor:'rgba(255,255,255,0.2)',
              borderRadius:5,
              shadowColor:'#fff',
              shadowBlur:20
            },
            showBackground: true,
            silent: true,
            barWidth: 5,
            barGap: '-100%', // Make series be overlap
            data: [this.projData.projectLineTotal],
          },
        ],
      }
      let changeBar = echarts.init(document.querySelector('#change-bar'));
      let lineBar = echarts.init(document.querySelector('#line-bar'));
      changeBar.setOption(changeBarOpt)
      lineBar.setOption(lineBarOpt)
    }
  }
}
</script>

<style lang="scss" scoped>

@font-face {
  font-family: 'YouShe';
  src: url("../../assets/iconfont/YouSheBiaoTiHei.ttf");
}

.proj-info-page {

  height: 100%;
  background-color: #F3F7FF;
  box-sizing: border-box;
  padding: 15px 20px;
  border-radius: 5px;
  border: 1px solid #EFF2FC;
  box-shadow: 2px 2px 2px #D9E0F3;

  .inner-tit{

    width: 100%;
    box-sizing: border-box;
    padding: 10px 20px;
    background-color: #EFF4FE;
    display: flex;
    align-items: center;
    color: #000;
    font-size: 20px;
    font-family: 'YouShe', sans-serif;
    box-shadow: -3px -3px 2px #CBDCF6,
    2px 2px 2px #F8F9FE,
    -2px -2px 2px #CBDCF6,
    2px 2px 2px #F8F9FE;
    margin-bottom: 15px;

    img{

      margin-right: 10px;

    }

  }

  .proj-infos{

    width: 100%;
    height: 200px;
    display: flex;

    .info-lef{

      width: 50%;
      height: 100%;
      box-sizing: border-box;
      padding: 15px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;

      .lef-upper{

        width: 100%;
        height: 85%;
        display: flex;
        justify-content: center;
        background: url("../../assets/img/proj-base.png") no-repeat;
        background-size: 100% 100%;
        font-size: 80px;
        font-weight: bold;
        color: #3D78D3;

      }

      .lef-lower{

        color: #000;
        font-size: 20px;
        font-weight: bold;

      }

    }

    .info-rig{

      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .bars{

        width: 100%;
        height: 45%;
        display: flex;
        color: #000;
        font-size: 18px;

        img{

          width: 5%;
          height: 100%;

        }

        div{

          flex: 1;
          box-sizing: border-box;
          padding-left: 10px;
          display: flex;
          flex-direction: column;
          justify-content: space-around;

        }

      }

    }

  }

}
</style>
