<template>
  <div  class="box">
    <div class="tupian"></div>
    <div id="zz" style="width: 70%; height: 100%; "></div>
  </div>

</template>

<script>
    import { oldPersonVisitWay } from '../../api'

    export default {
        //巡防员巡防方式统计
        name: "PatrolmanPatrolModeCount",
        data() {
          return {
            dataArr: [],
            myChart: null
          }
        },
        methods: {
          async draw() {
              const result = await oldPersonVisitWay({}, 'POST');
              this.dataArr = result;

              const seriesArr = [];

              for(let i = 0; i < this.dataArr.length; i++) {
                  const d = this.dataArr[i];

                  const borderArr = new Array(this.dataArr.length).fill({});
                  borderArr[i] = { value: 269, symbolPosition: 'start' };

                  seriesArr.push({
                      type: 'pictorialBar',
                      symbol: `image://${require('../../assets/PatrolmanStatistics/border.png')}`,
                      symbolSize: [269, 32],
                      symbolOffset: [0, 0],
                      data: borderArr,
                      label: {
                          show: true,
                          position: 'right',
                          offset: [-120, -40],
                          color: '#71dbff',
                          fontSize: this.fontSize(0.2),
                          formatter: (params) => {
                              return `${ this.dataArr[this.dataArr.length - 1 - params.dataIndex].value }%`;
                          }
                      },
                      z: 1
                  });

                  const borderBgArr = new Array(this.dataArr.length).fill({});
                  borderBgArr[i] = { value: 251, symbolPosition: 'start' };

                  seriesArr.push({
                      type: 'pictorialBar',
                      symbol: `image://${require('../../assets/PatrolmanStatistics/border-bg.png')}`,
                      symbolSize: [251, 21],
                      symbolOffset: [10, 0],
                      data: borderBgArr,
                      label: {
                          show: true,
                          position: 'right',
                          offset: [-280, -40],
                          color: '#fff',
                          fontSize: this.fontSize(0.18),
                          formatter: (params) => {
                              return `${ this.dataArr[this.dataArr.length - 1 - params.dataIndex].label }`;
                          }
                      },
                      z: 2
                  });

                  const step = (Math.floor(d.value / 10) < 1 ? 1 : Math.floor(d.value / 10));
                  for(let j = 0; j < step; j++) {
                      const blockArr = new Array(this.dataArr.length).fill({});
                      blockArr[this.dataArr.length - 1 - i] = { value: 251, symbolPosition: 'start' };
                      seriesArr.push({
                          type: 'pictorialBar',
                          symbol: `image://${require('../../assets/PatrolmanStatistics/block-' + j + '.png')}`,
                          symbolSize: [20, 19],
                          symbolOffset: [10 + j * 25.6, 0],
                          data: blockArr,
                          z: 10
                      });
                  }

                  const kkArr = new Array(length).fill({});
                  kkArr[i] = { value: 300, symbolPosition: 'start' };
                  // seriesArr.push({
                  //     type: 'pictorialBar',
                  //     symbol: `image://${require('../../assets/PatrolmanStatistics/big-img-' + (this.dataArr.length - 1 - i) + '.png')}`,
                  //     symbolSize: [157, 134],
                  //     symbolOffset: [-140, -10],
                  //     data: kkArr,
                  //     z: 2
                  // });

              }

              if(this.myChart != null) {
                  this.myChart.clear();
              }

              this.myChart = this.$echarts.init(document.getElementById('zz'));
              this.myChart.setOption({
                  grid:{
                      left:"6%",
                      right:"2%",
                      top:"2%",
                      bottom:"2%",
                  },
                  xAxis: {
                      max: 300,
                      splitLine: {
                          show: false
                      },
                      axisLine: {
                          show: false
                      },
                      axisLabel: {
                          show: false
                      },
                      axisTick: {
                          show: false
                      }
                  },
                  yAxis: {
                      type: 'category',
                      splitLine: {
                          show: false
                      },
                      axisLine: {
                          show: false
                      },
                      axisLabel: {
                          show: false
                      },
                      axisTick: {
                          show: false
                      }
                  },
                  series: seriesArr
              });

          },
          fontSize(res) {
            let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
            if (!clientWidth) return;
            let fontSize = 100 * (clientWidth / 1920);
            return res * fontSize;

          }

        },
        mounted() {
          this.draw();
        }
    }
</script>

<style scoped>
  .box {
    width: 100%;
    height: 100%;
    display: flex;
  }
  .tupian {
    width: 40%;
    background: url("../../assets/PatrolmanStatistics/people.png") no-repeat ;
    background-size: 100% 100%;
    height: 100%;
  }
</style>
