<template>
  <div class="app-berthBox">
    <div class="theme-card">
      <div class="title"><span>泊位</span></div>
      <div class="content">
        <div class="topBox eleVerHorCenter-flex">
          <span class="eleText">总计</span>
          <div class="eleMarginLeft" v-html="berthTotal"></div>
        </div>
        <div class="bottomBox eleVerHorCenter-flex">
          <div class="bottomBoxLeft"> <div class="berthPie"></div> </div>
          <div class="bottomBoxRight">
            <table class="havefreeTb">
              <tr><td> <div class="free">{{ free }}</div></td><td>  <div class="freeText">空余</div></td></tr>
              <tr><td> <div class="have">{{ have }}</div></td><td>  <div class="haveText">占有</div></td></tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import common from '../../api/common';
  import echarts from 'echarts'
  import { berthAddress, berthAddressDY } from '../../api/api'
  export default {
    name: "berth",
    data() {
      return {
        demo:'',//示例
        berthTotal:"",//泊位总数
        free:'',//空余
        have:'',//占有
        pieChart: {},
        name: '饼图',
        pieChartOption:{
          seriesData:[
            {name:"占有",value:''},
            {name:"空余",value:''}
          ]
        }
      }
    },
    mounted() {
      this.onLoad()
    },
    methods: {
      onLoad() {
        berthAddress({
          orgIds: this.GLOBAL.paramsvariables
        }).then((response)=>{
          let  data = response.data.data
          console.log(data)
          this.berthTotal = common.formatNumToStr(data.allBerthNum)
          this.free = data.freeBerthNum
          this.have = data.isOccupyBertnNum

          this.pieChartOption.seriesData[0].value = data.isOccupyBertnNum
          this.pieChartOption.seriesData[1].value = data.freeBerthNum
          let pieChartOption = this.pieChartOption
          //占有率
          this.pieChart=this.createPie(pieChartOption);
          window.addEventListener('resize', function() {
            this.pieChart.resize()
          }.bind(this));
        }).catch((response)=>{
          console.log(response);
        })


        this.$axios.all(
          [
            berthAddress({ orgIds: this.GLOBAL.paramsvariables}),
            berthAddressDY({ orgIds: this.GLOBAL.paramsvariables})
          ]
        )
        .then(this.$axios.spread((acctWX, acctDY) => {
          let WXdata = acctWX.data.data
          let DYdata = acctDY.data.data
          this.berthTotal = common.formatNumToStr(WXdata.allBerthNum+DYdata.allBerthNum)
          this.free = WXdata.freeBerthNum+DYdata.freeBerthNum
          this.have = WXdata.isOccupyBertnNum+DYdata.isOccupyBertnNum
          this.pieChartOption.seriesData[0].value = WXdata.isOccupyBertnNum+DYdata.isOccupyBertnNum
          this.pieChartOption.seriesData[1].value = WXdata.freeBerthNum+DYdata.freeBerthNum
          let pieChartOption = this.pieChartOption
          //占有率
          this.pieChart=this.createPie(pieChartOption);
          window.addEventListener('resize', function() {
            this.pieChart.resize()
          }.bind(this));

        }))

      },
      /*
       * 泊位占比
       * */
      createPie(pieChartOption){
        //debugger;
        let root=pieChartOption;
        let pieChart = echarts.init(document.querySelector('.app-berthBox .berthPie'));
        //占有率
        let zyPercent= (root.seriesData[0].value / (root.seriesData[0].value + root.seriesData[1].value));//注意顺序!!!
        console.log(zyPercent)
        let seriesData=root.seriesData;
        const option={
//          grid: {
//            top: '0%',left: '0%',
//            right: '0%',bottom: '0%'
//          },
          grid: {
            top: 13,left: 10,
            right: 10,bottom: 10,
            containLabel: true
          },
          title: { show:false },
          tooltip: {show:false},
          series: [{
            name: 'pie',type: 'pie',
            center: ['50%', '50%'],
            radius: ['75%', '90%'],
            hoverAnimation: false,
            color: ['#FFB704','#02ABFF'],//占有黄色
            label: {show:false},
            itemStyle: {
              normal: {
                label: {show: false},
                labelLine: {show: false},
                shadowBlur: 40,
                shadowColor: 'rgba(40, 40, 40,0.5)',
              }
            },
            data: seriesData
          },
          //内环
            {
              name: '', type: 'pie',
              clockWise: true,hoverAnimation: false,
              radius: ['90%', '90%'],
              label: { normal: { position: 'center' }},
              data: [{
                value: 0,
                label: {
                  normal: {
                    formatter: (zyPercent*100).toFixed(1) + '%',//小数点后一位
                    textStyle: {
                      color: '#fe8b53',
                      fontSize: 18,
                      fontWeight: 'normal'
                    }
                  }
                }
              }, {
                tooltip: {show: false},
                label: {
                  normal: {
                    formatter: '\n占有',
                    textStyle: {
                      color: '#bbeaf9',fontSize: 12
                    }
                  }
                }
              }]
            }
          ]
        };
        pieChart.setOption(option);
        return pieChart;
      }
    },

  }
</script>

<style scoped  lang="scss">
  .app-berthBox {
    width: 100%;
  .theme-card{
    height: 100%;
  }
  .berthPie{
    position: absolute;
    margin: 0 auto;
    top:0;
    bottom: 0;
    left:0;
    width: 100%;
    height: 100%;
  }
  .bottomBoxLeft,.bottomBoxRight{
    display: inline-block;
    width: 50%;
    height:100%;
    border:0px solid red;
    position: relative;
  }
  .havefreeTb{
    height:100%;width: 100%;
  }
  .havefreeTb td{
    text-align: center;
    vertical-align: middle;
  }
  .havefreeTb >tr> td:last-child{
    font-size: 12px;text-align: left;
  }
  /*空余*/
  .havefreeTb .free{
    background-image: -webkit-linear-gradient(bottom, #00CAFE, #2772F4);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    font-size: 24px;
  }
  /*占有*/
  .havefreeTb .have{
    background-image: -webkit-linear-gradient(bottom, #FFBA00, #FF8100);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    font-size: 24px;
  }
  .freeText,.haveText{
    margin-top:5px;
  }
  }
</style>
