<template>
  <!-- 客户统计图 内部  报表 订单统计  -->
  <div id="customerChart" :style="{ width: '100%', height: '500px' }"></div>
</template>

<script>
import * as echarts from 'echarts'
import { cusChart } from '@api/reportForms/order-statistics.js'

export default {
  name: 'CustomerChart', // 客户统计图
  data() {
    return {
      queryParam: {
        vendorType: '内部'
        // department: '',
        // endYearMonth: '',
        // startYearMonth: ''
        // cvenAbbName: ''供应商
      },
      // newData: {
      ccusNameArr: [],
      iquantityArr: [],
      inatMoneyArr: []
      // }
    }
  },

  mounted() {
    // this.getCusChartData()
  },
  created() {
    // 初次加载当月
    this.firstCusData()
  },

  methods: {
    // 初次加载
    firstCusData() {
      this.$nextTick(() => {
        // let nowDate = new Date()
        // let date = {
        //   year: nowDate.getFullYear(),
        //   month: nowDate.getMonth() + 1
        // }
        // if (date.month >= 1 && date.month <= 9) {
        //   date.month = '0' + date.month
        // }
        // var time = date.year + '-' + date.month

        // this.queryParam.startYearMonth = time
        // this.queryParam.endYearMonth = time
        // this.queryParam.vendorType = '内部'
        cusChart(this.queryParam).then(res => {
          if (res.result) {
            // console.log('部门统计图数据', res.result)
            res.result.forEach(item => {
              this.ccusNameArr.push(item.ccusName)
              this.iquantityArr.push(item.iquantity)
              this.inatMoneyArr.push(item.inatMoney)
            })
            this.$emit('option-ccusName',this.ccusNameArr)
            // console.log('部门三数组', this.ccusNameArr, this.iquantityArr, this.inatMoneyArr)
          }

          //2、后图
          this.$nextTick(() => {
            this.initEcharts()
          })
        })
      })
    },

    // 1、查询 重置方法  先获取 chart 数据
    getCusChartData() {
      this.queryParam.vendorType = '内部'
      cusChart(this.queryParam).then(res => {
        if (res.success) {
          // console.log('客户统计图数据', res.result)
          res.result.forEach(item => {
            this.ccusNameArr.push(item.ccusName)
            this.iquantityArr.push(item.iquantity)
            this.inatMoneyArr.push(item.inatMoney)
          })
          // console.log('三数组', this.ccusNameArr, this.iquantityArr, this.inatMoneyArr)
        }

        //2、后图
        this.$nextTick(() => {
          this.initEcharts()
        })
      })
    },

    initEcharts() {
      const myChart = echarts.init(document.getElementById('customerChart')) //dark

      const option = {
        title: {
          bpttom: '20',
          text: '客户统计表',
          textStyle: {
            fontSize: 18,
            color: '#5470c6'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          },
          textStyle: {
            fontSize: 18
          }
        },
        legend: {
          textStyle: {
            fontSize: 16,
            color: '#5470c6'
          },
          data: [
            '实际数量',
            '本币金额'
          ]
        },
        grid: {
          show: true, //是否显示直角坐标系网格。[ default: false ]
          left: '6%', // 组件离容器左侧的距离。
          right: '6%',
          borderColor: 'none', //网格的边框颜色
          bottom: '20%' //
        },

        xAxis: {
          type: 'category',
          axisLabel: {
            interval: 0, //控制X轴刻度全部显示
            rotate: 45 //倾斜角度
          },

          axisPointer: {
            type: 'shadow'
          },
          data: this.ccusNameArr
        },
        yAxis: [
          {
            type: 'value',
            name: '实际数量',
            // min: 0,
            // max: 100000,
            // interval: 10000,
            axisLabel: {
              // formatter: '{value} ml'
            }
          },
          {
            type: 'value',
            name: '本币金额',
            // min: 0,
            // max: 1200000,
            // interval: 200000,
            axisLabel: {
              // formatter: '{value} °C'
            }
          }
        ],
        series: [
          {
            name: '实际数量',
            type: 'bar',
            itemStyle : { normal: {label : {show: true}}},
            // tooltip: {
            //   valueFormatter: function(value) {
            //     // return value + ' ml';
            //   }
            // },
            // 折现部门渐变色
            // areaStyle: {
            //   normal: {
            //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //       { offset: 0, color: 'rgba(216, 61, 65,0.5)' },
            //       { offset: 0.5, color: 'rgba(216, 61, 65,0.2)' },
            //       { offset: 1, color: 'rgba(216, 61, 65,0.08)' }
            //     ])
            //   }
            // },
            barWidth: '30%',
            
            data: this.iquantityArr
          },
          {
            name: '本币金额',
            type: 'line',
            itemStyle : { normal: {label : {show: true}}},
            tooltip: {
              // valueFormatter: function(value) {
              //   // return value + ' ml'
              // }
            },
            yAxisIndex: 1,
            data: this.inatMoneyArr
          }
        ]
      }
      // 渲染
      myChart.setOption(option)
      // myChart.showLoading({
      //   text: '暂无数据',
      //   showSpinner: false, // 隐藏加载中的转圈动图
      //   textColor: '#9d9d9d',
      //   maskColor: 'rgba(255, 255, 255, 0.8)',
      //   fontSize: '25px',
      //   fontWeight: 'bold',
      //   fontFamily: 'Microsoft YaHei'
      // })

      window.addEventListener('resize', () => {
        if (myChart) {
          myChart.resize()
        }
      })
    }

    // watch: {
    //   // 3、监听数据变化
    //   newData: {
    //     deep: true,
    //     handler() {
    //       //  数据变化，执行
    //       const { ccusNameArr, iquantityArr, inatMoneyArr } = this.newData
    //       this.initEcharts(ccusNameArr, iquantityArr, inatMoneyArr)
    //       console.log('监听 外部客户 数据变化')
    //     }
    //   }
    // }
  }
}
</script>

<style lang="less" scoped>
@import '~@assets/less/common.less';
@import '~@assets/less/overwriter.less';
/deep/ .ant-table-thead > tr > th {
  text-align: center;
  // font-weight: 700;
}

/deep/ .ant-table-tbody {
  text-align: center;
}

// /deep/ th.replacecolor {
//   background-color: #ccc;
// }

/deep/ .ant-table-footer .ant-table.body {
  // overflow: hidden !important;
}
/deep/ .ant-table.ant-table-bordered .ant-table-footer {
  border: none;
  padding: 0;
}
</style>
