<!--
 * @Author: ysh
 * @Date: 2024-10-17 10:40:13
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-10-18 14:55:46
-->
<template>
  <div style="width:100%;" v-loading="loading">
    <div class="titles">设备和车辆统计</div>
    <div class="warpper">
      <div class="left">
        <div class="left-top" id="deviceYearBar"></div>
        <div class="left-top" id="deviceStatusPie"></div>
      </div>
      <div class="middle">
        <div class="middle-chart" id="deviceApprovalBar"></div>
      </div>
      <div class="right">
        <div class="right-top" id="carYearBar"></div>
        <div class="right-top" id="carStatusPie" v-loading="dataLoading"></div>
      </div>
      <div class="right" v-loading="dataLoading">
        <div class="right-top" id="carApprovalBar"></div>
        <div class="right-top" id="carDayBar"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { ehcartsInit } from '@/utils/echarts'
import { getCarStatistic } from '@/api/oa/car/car';
import { getDeviceStatistic } from '@/api/oa/device/device';
let deviceYearChart, deviceStatusChart, deviceApprovalChart, carYearChart, carStatusChart, carApprovalChart, carDayChart
export default {
  props: {
    deviceData: {
      type: Object,
      require: true,
    },
    carData: {
      type: Object,
      require: true,
    }
  },
  watch: {
    carUsage(){
      this.initCarUsagePie()
    },
    carApproval(){
      this.initCarApprovalBar()
    },
    carDay(){
      this.initCarDayBar()
    }
  },
  data() {
    return {
      loading: true,
      deviceApproval: {},
      deviceStatus: {},
      deviceYear: {},
      carApproval: {},
      carStatus: {},
      carYear: {},
      carUsage: {},
      carDay: {},
      dataLoading:false,
    }
  },
  created() {
    this.loading = true;
    this.initDeviceDatas();
    this.initCarDatas();
    this.loading = false;
  },
  mounted() {
    this.initDeviceYearBar();
    this.initDeviceStatusPie();
    this.initDeviceApprovalBar();
    this.initCarYearBar();
    this.initCarUsagePie();
    this.initCarApprovalBar();
    this.initCarDayBar();
  },
  methods: {
    async initDeviceDatas() {
      if (Object.keys(this.deviceData).length !== 0) {
        this.deviceApproval = this.deviceData.approval;
        this.deviceStatus = this.deviceData.status[0];
        this.deviceYear = this.deviceData.year[0];
      }
    },
    async initCarDatas() {
      if (Object.keys(this.carData).length !== 0) {
        this.carApproval = this.carData.approval;
        this.carStatus = this.carData.status[0];
        this.carYear = this.carData.year[0];
        this.carUsage = this.carData.usage[0];
        this.carDay = this.carData.day;
      }
    },
    clickYear(charts) {
      let that = this;
      charts.on('click', function (event) {
        if (event) {
          that.activeYear = event.name;
          let year = event.name + '-01-01'
          if (event.name == "") {
            year = ''
          }
          that.dataLoading = true
          getCarStatistic({ applyDate: year }).then(res => {
            that.carApproval = res.data.approval;
            that.carUsage = res.data.usage[0];
            that.carDay = res.data.day;
            that.dataLoading = false
          })
        }
      })
    },
    initDeviceYearBar() {
      let option = {
        title: {
          text: '各年设备申领次数',
          subtext: ''
        },
        grid: {
          left: '1%',
          right: '1%',
          bottom: '0%',
          height: '60%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        xAxis: {
          name: '年',
          type: 'category',
          data: Object.keys(this.deviceYear),
        },
        yAxis: {
          type: 'value',
          name: '单位：次'
        },
        series: [
          {
            data: Object.values(this.deviceYear),
            type: 'bar',
            smooth: true,
            label: {
              show: true,
              position: 'top'
            },
            itemStyle:{
              color:'#3498DB'
            }
          }
        ]
      };
      let charts = ehcartsInit(deviceYearChart, 'deviceYearBar', option);
    },
    initDeviceStatusPie() {
      let option = {
        title: {
          text: '设备和车辆状态',
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          top: 'bottom'
        },
        series: [
          {
            name: '占比',
            type: 'pie',
            radius: '25%',
            center:['25%', '50%'],
            avoidLabelOverlap: false,
            data: Object.entries(this.deviceStatus).map(([key, value]) => {
              return { name: key, value: value }
            }),
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              alignTo: 'none',
              minMargin: 5,
              edgeDistance: 8,
              lineHeight: 15,
              rich: {
                time: {
                  fontSize: 10,
                  color: '#999'
                }
              }
            },
          },
          
          {
            name: '占比',
            type: 'pie',
            radius: '25%',
            center:['75%', '50%'],
            avoidLabelOverlap: false,
            data: Object.entries(this.carStatus).map(([key, value]) => {
              return { name: key, value: value }
            }),
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              alignTo: 'none',
              minMargin: 5,
              edgeDistance: 8,
              lineHeight: 15,
              rich: {
                time: {
                  fontSize: 10,
                  color: '#999'
                }
              }
            },
          },
        ]
      };
      ehcartsInit(deviceStatusChart, 'deviceStatusPie', option);
    },
    initDeviceApprovalBar() {
      let xData = this.deviceApproval.map(item => item.count)
      let yData = this.deviceApproval.map(item => item.name)
      let option = {
        title: {
          text: '各类设备申请次数榜'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        toolbox: {
          feature: {
            dataView: {
              show: true,
              optionToContent: function (opt) {
                var axisData = opt.yAxis[0].data;
                var series = opt.series;
                var table = '<table border="1" style="width:100%;text-align:center;border-collapse: collapse;"><tbody><tr>'
                  + '<td>设备名称</td>'
                  + '<td>数量</td>'
                  + '</tr>';
                for (var i = 0, l = axisData.length; i < l; i++) {
                  table += '<tr>'
                    + '<td>' + axisData[i] + '</td>'
                    + '<td>' + series[0].data[i] + '</td>'
                    + '</tr>';
                }
                table += '</tbody></table>';
                return table;
              }
            }
          }
        },
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 100,
            show: true,
            yAxisIndex: 0,
          }
        ],
        grid: {
          left: '3%',
          right: '8%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
        },
        yAxis: {
          type: 'category',
          data: yData.reverse(),
          axisLabel: {
            fontSize: 12,
            width: 120,
            overflow: 'truncate',
          }
        },
        series: [
          {
            type: 'bar',
            data: xData.reverse(),
          }
        ]
      };
      ehcartsInit(deviceApprovalChart, 'deviceApprovalBar', option);
    },
    initCarYearBar(){
      let option = {
        title: {
          text: '各年用车申请次数',
          subtext: ''
        },
        grid: {
          left: '1%',
          right: '1%',
          bottom: '0%',
          height: '60%',
          containLabel: true
        },
        // legend: {},
        graphic: [
          {
            type: 'text',
            name: '',
            right: '0',
            top: '20%',
            style: {
              text: '全部年份',
              fill: '#000', // 文本颜色  
              fontSize: 12, // 文本大小  
              fontWeight: '' // 文本粗细  
            }
          }
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        xAxis: {
          name: '年',
          type: 'category',
          data: Object.keys(this.carYear),
        },
        yAxis: {
          type: 'value',
          name: '单位：次'
        },
        series: [
          {
            data: Object.values(this.carYear),
            type: 'bar',
            smooth: true,
            label: {
              show: true,
              position: 'top'
            },
            itemStyle:{
              color:'#1ABC9C'
            }
          }
        ]
      };
      let charts = ehcartsInit(carYearChart, 'carYearBar', option);
      this.clickYear(charts)
    },
    initCarUsagePie(){
      let option = {
        title: {
          text: '车辆申请类型',
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          top: 'bottom'
        },
        series: [
          {
            name: '占比',
            type: 'pie',
            radius: '40%',
            // center:['75%', '50%'],
            avoidLabelOverlap: false,
            data: Object.entries(this.carUsage).map(([key, value]) => {
              return { name: key, value: value }
            }),
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              alignTo: 'none',
              minMargin: 5,
              edgeDistance: 8,
              lineHeight: 15,
              rich: {
                time: {
                  fontSize: 10,
                  color: '#999'
                }
              }
            },
          },
        ]
      };
      ehcartsInit(carStatusChart, 'carStatusPie', option);
    },
    initCarApprovalBar(){
      let xData = this.carApproval.map(item => item.count)
      let yData = this.carApproval.map(item => item.name)
      let option = {
        title: {
          text: '车辆使用次数榜'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        toolbox: {
          feature: {
            dataView: {
              show: true,
              optionToContent: function (opt) {
                var axisData = opt.yAxis[0].data;
                var series = opt.series;
                var table = '<table border="1" style="width:100%;text-align:center;border-collapse: collapse;"><tbody><tr>'
                  + '<td>车辆名称</td>'
                  + '<td>数量</td>'
                  + '</tr>';
                for (var i = 0, l = axisData.length; i < l; i++) {
                  table += '<tr>'
                    + '<td>' + axisData[i] + '</td>'
                    + '<td>' + series[0].data[i] + '</td>'
                    + '</tr>';
                }
                table += '</tbody></table>';
                return table;
              }
            }
          }
        },
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 100,
            show: true,
            yAxisIndex: 0,
          }
        ],
        grid: {
          left: '3%',
          right: '8%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
        },
        yAxis: {
          type: 'category',
          data: yData.reverse(),
          axisLabel: {
            fontSize: 12,
            width: 120,
            overflow: 'truncate',
          }
        },
        series: [
          {
            type: 'bar',
            data: xData.reverse(),
          }
        ]
      };
      ehcartsInit(carApprovalChart, 'carApprovalBar', option);
    },
    initCarDayBar(){
      let xData = this.carDay.map(item => item.count)
      let yData = this.carDay.map(item => item.name)
      let option = {
        title: {
          text: '车辆使用天数榜'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        toolbox: {
          feature: {
            dataView: {
              show: true,
              optionToContent: function (opt) {
                var axisData = opt.yAxis[0].data;
                var series = opt.series;
                var table = '<table border="1" style="width:100%;text-align:center;border-collapse: collapse;"><tbody><tr>'
                  + '<td>车辆名称</td>'
                  + '<td>数量</td>'
                  + '</tr>';
                for (var i = 0, l = axisData.length; i < l; i++) {
                  table += '<tr>'
                    + '<td>' + axisData[i] + '</td>'
                    + '<td>' + series[0].data[i] + '</td>'
                    + '</tr>';
                }
                table += '</tbody></table>';
                return table;
              }
            }
          }
        },
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 100,
            show: true,
            yAxisIndex: 0,
          }
        ],
        grid: {
          left: '3%',
          right: '8%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
        },
        yAxis: {
          type: 'category',
          data: yData.reverse(),
          axisLabel: {
            fontSize: 12,
            width: 120,
            overflow: 'truncate',
          }
        },
        series: [
          {
            type: 'bar',
            data: xData.reverse(),
          }
        ]
      };
      ehcartsInit(carDayChart, 'carDayBar', option);
    }
  },
}
</script>

<style lang="scss" scoped>
.titles {
  font-family: 'puhuiti';
  font-size: 16px;
  margin-bottom: 16px;
}

.warpper {
  width: 100%;
  height: 100%;
  display: flex;

  .left {
    flex: 1;

    .left-top {
      width: 100%;
      height: 300px;
      padding: 10px;
      border: 1px solid #ececec;
    }
  }

  .middle {
    flex: 1;

    .middle-chart {
      width: 100%;
      height: 600px;
      padding: 10px;
      border: 1px solid #ececec;
    }
  }

  .right {
    flex: 1;

    .right-top {
      width: 100%;
      height: 300px;
      padding: 10px;
      border: 1px solid #ececec;
    }
  }
}
</style>