<!--
  @description: 采购计划统计-计划明细
  @Modifier：zhangyawen
  @routerPath:
  @date：  2021/04/21
-->
<template>
  <dl class="reportChart_crud" :style="{'height':height}">
    <dt>
      计划明细
      <!-- <p class="right">
        <span>
          <i class="iconfont icon-xiazai1" @click="dowloadClick" />
        </span>
      </p> -->
    </dt>
    <dd>
      <MyEcharts
        :id="'planDetailsChartComp'"
        class="echart-dom"
        :option="chartOption"
      />
    </dd>
  </dl>
</template>

<script>
/* api */
import { getPurchasePlanDetailBelongBkStatisticsList } from '@/api/procurement/statisticalManagement'
/* 公用方法*/
// import { download } from '@/assets/js/utils'// 常用方法
import { filterObj } from '@/assets/js/utils' // 过滤空的key
/* 組件 */
import MyEcharts from '@/components/common/echarts/myEcharts.vue'// 图表
export default {
  name: 'PlanDetailsChartComp',
  components: {
    MyEcharts// 图表
  },
  //   inject: ['chartData'],
  props: {
    height: {
      type: String,
      default: '100%'
    },
    chartData: {
      type: Object,
      default() {
        return {
          mainBg: 'rgba(11, 21, 74, 1)', // 背景色
          highlightBg: 'rgba(15, 28, 93, 1)', // 背景色-高亮
          borderColor: 'rgba(255,255,255,0.15)', // 边框颜色
          textColor: '#fff' // 文本颜色
        }
      }
    },
    searchData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      // 图表配置
      chartOption: {},
      dataZoom: [
        {
          start: 0, // 默认为0
          end: 100 - 1500 / 31, // 默认为100
          type: 'slider',
          show: true,
          xAxisIndex: [0],
          handleSize: 0, // 滑动条的 左右2个滑动条的大小
          height: 10, // 组件高度
          left: '5%', // 左边的距离
          right: '5%', // 右边的距离
          bottom: 10, // 右边的距离
          borderColor: '#000',
          fillerColor: '#269cdb',
          borderRadius: 5,
          backgroundColor: '#33384b', // 两边未选中的滑动条区域的颜色
          showDataShadow: false, // 是否显示数据阴影 默认auto
          showDetail: false, // 即拖拽时候是否显示详细数值信息 默认true
          realtime: true, // 是否实时更新
          filterMode: 'filter'
        },
        // 下面这个属性是里面拖到
        {
          type: 'inside',
          show: true,
          xAxisIndex: [0],
          start: 10, // 默认为1
          end: 100 - 1500 / 31// 默认为100
        }
      ],
      xData: [] // x轴数据
    }
  },
  watch: {
    xData(val) {
      val.length > 5 ? this.chartOption.dataZoom = this.dataZoom : ''
    }
  },
  created() {
    this.initChart(this.searchData)
  },
  methods: {
    // 下载导出
    dowloadClick() {
    //   exportBuyersCompleteProjectAmountAndNum(this.searchData).then(res => {
    //     download(res, '不同工业区当月招标采购完成项目数量和项目金额表.xls')
    //   })
    },
    /**
     * 获取数据
     *  @param {searchData} Object 查询条件
    */
    initChart(searchData) {
      delete searchData.timeDate
      const data = {
        ...filterObj(searchData)
      }
      getPurchasePlanDetailBelongBkStatisticsList(data).then(res => {
        this.init(res.data)
        // this.init([{ departName: '京能电力', completeNumber: 99, completeMoney: 999 }, { departName: '清洁能源', completeNumber: 999, completeMoney: 100 }, { departName: '北京热力', completeNumber: 132, completeMoney: 77 }, { departName: '名称额', completeNumber: 83, completeMoney: 9 }])
      })
    },
    /**
      * 渲染echarts
      * @param {fromData.departName} String 采购单位
      * @param {fromData.reportPlanNum} String 上报计划条目数
      * @param {fromData.reportPlanMoney} String 上报计划净预算
      * @param {fromData.planDetailPackNum} String 已归集条数
      * @param {fromData.planDetailPackMoney} String 已归集计划净预算
      */
    init(fromData) {
      const lineColor = ['#5bb1f0', '#00F298', '#0500F2', '#A6005A'] // 柱形图颜色
      // const yuanLineColor = '#f6d715' // 折线条颜色
      const borderColor = this.chartData.borderColor // 边框颜色
      const textColor = this.chartData.textColor // 文本颜色
      const departNameArr = [] // 采购单位
      const reportPlanNumArr = [] // 上报计划条目数
      const reportPlanMoneyArr = [] // 上报计划净预算
      const planDetailPackNumArr = [] // 已归集条数
      const planDetailPackMoneyArr = [] // 已归集计划净预算
      fromData.forEach(item => {
        departNameArr.push(item.departName)
        reportPlanNumArr.push(item.reportPlanNum)
        reportPlanMoneyArr.push(item.reportPlanMoney)
        planDetailPackNumArr.push(item.planDetailPackNum)
        planDetailPackMoneyArr.push(item.planDetailPackMoney)
      })
      this.xData = departNameArr
      /* ------------------------------------------------- */
      // fromData.departName = JSON.parse(fromData.departName) // 采购单位
      // fromData.completeNumber = JSON.parse(fromData.completeNumber).map(row => Number(row)) // 完成数量
      // fromData.completeMoney = JSON.parse(fromData.completeMoney).map(row => Number(row)) // 完成金额
      /* ----------------*/
      // 刻度值计算
      const maxY1 = parseInt((Math.max(...reportPlanNumArr) + 5000) / 2500) * 2500
      const maxY2 = parseInt((Math.max(...reportPlanMoneyArr) + 5000) / 2500) * 2500
      // 数据
      const data = [
        {
          yAxis: {
            name: '计划条目数(条)',
            max: maxY1,
            interval: Math.ceil(maxY1 / 5)
          },
          series: {
            name: '上报计划条目数',
            data: reportPlanNumArr
          }
        },
        {
          yAxis: {
            name: '预算金额(万元)',
            max: maxY2,
            interval: Math.ceil(maxY2 / 5)
          },
          series: {
            name: '上报计划净预算',
            data: reportPlanMoneyArr
          }
        }, {
          yAxis: {
            name: '计划条目数(条)',
            max: maxY1,
            interval: Math.ceil(maxY1 / 5)
          },
          series: {
            name: '已归集条数',
            data: planDetailPackNumArr
          }
        },
        {
          yAxis: {
            name: '预算金额(万元)',
            max: maxY2,
            interval: Math.ceil(maxY2 / 5)
          },
          series: {
            name: '已归集计划净预算',
            data: planDetailPackMoneyArr
          }
        }
      ]
      /* ------------------------------------------------- */
      this.chartOption = {
        // 提示框
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        grid: {
          // 距离 上右下左 的距离
          // top: '30px',
          right: '30px',
          bottom: '10px',
          left: '30px',
          // 是否包含文本
          containLabel: true,
          // 显示边框
          show: false
        },
        // 图例
        legend: {
          selectedMode: false, // 取消图例上的点击事件
          textStyle: {
            color: textColor // 图例文字颜色
          }
        },
        xAxis: [
          {
            // 使用类目，必须有data属性
            type: 'category',
            // 使用 data 中的数据设为刻度文字
            data: departNameArr,
            axisLine: {
              lineStyle: {
                opacity: 0 // 边框是否显引
              }
            },
            // 文字
            axisLabel: {
              interval: 0,
              rotate: 10,
              color: textColor
            }
          }
        ],
        yAxis: [
          {
            // 使用数据的值设为刻度文字
            type: 'value',
            min: 0,
            ...data[0].yAxis,
            nameTextStyle: {
              // 标题文字
              color: textColor
            },
            axisLine: {
              lineStyle: {
                opacity: 0// 边框是否显引
              }
            },
            splitLine: {
              lineStyle: {
                color: borderColor
              }
            },
            // 文字
            axisLabel: {
              color: textColor
            }
          },
          {
            type: 'value',
            min: 0,
            ...data[1].yAxis,
            axisLine: {
              lineStyle: {
                opacity: 0// 边框是否显引
              }
            },
            // 文字
            axisLabel: {
              color: textColor
            },
            nameTextStyle: {
              // 标题文字
              color: textColor
            },
            splitLine: {
              lineStyle: {
                color: borderColor
              }
            }
          }
        ],
        dataZoom: [// 给x轴设置滚动条
        ],
        series: [
          {
            ...data[0].series,
            type: 'bar',
            barWidth: '20rem', // 柱图宽度
            yAxisIndex: 0,
            smooth: true,
            // 柱子颜色
            itemStyle: {
              color: lineColor[0]
            }
          },
          {
            ...data[1].series,
            type: 'bar',
            yAxisIndex: 1,
            barWidth: '20rem', // 柱图宽度
            smooth: true,
            // 柱子颜色
            itemStyle: {
              color: lineColor[1]
            }
            // symbolSize: 0, // 点的大小
            // itemStyle: {
            //   normal: {
            //     color: yuanLineColor, // 线颜色
            //     lineStyle: {
            //       width: 2.5// 设置线条粗细
            //     }
            //   }
            // }
          }, {
            ...data[2].series,
            type: 'bar',
            barWidth: '20rem', // 柱图宽度
            yAxisIndex: 0,
            smooth: true,
            // 柱子颜色
            itemStyle: {
              color: lineColor[2]
            }
          }, {
            ...data[3].series,
            type: 'bar',
            barWidth: '20rem', // 柱图宽度
            yAxisIndex: 1,
            smooth: true,
            // 柱子颜色
            itemStyle: {
              color: lineColor[3]
            }
          }
        ]
      }
    }
  }
}
</script>
<style lang="less">
</style>
