<!--
  @description: 报表统计-采购完成项目统计
  @Modifier：肖文龙
  @routerPath:
  @date：  2021/01/29
-->
<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="'completeProjectChart'"
        class="echart-dom"
        :option="chartOption"
      />
    </dd>
  </dl>
</template>

<script>
/* api */
import { getProcurementCompleteProjectInfoChart, exportProcurementCompleteProjectInfoChart } from '@api/statisticalAnalysis/reportChart.js'
import { getTime } from '@api/common/tools.js' // 获取服务器时间
/* 公用方法*/
import { download } from '@/assets/js/utils'// 常用方法
/* 組件 */
import MyEcharts from '@/components/common/echarts/myEcharts.vue'// 图表
export default {
  name: 'CompleteProjectChart',
  components: {
    MyEcharts// 图表
  },
  inject: ['chartData'],
  props: {
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      // 图表配置
      chartOption: {},
      // 查询条件
      searchData: {

      }
    }
  },
  methods: {
    // 获取当前时间
    async getCurrentTime() {
      let momentMonth = ''
      return await getTime().then((res) => {
        momentMonth = this.$Moment(res.data.time).format('MM')
        return {
          momentMonth
        }
      })
    },
    // 下载导出
    dowloadClick() {
      exportProcurementCompleteProjectInfoChart(this.searchData).then(res => {
        download(res, '招标采购月度完成项目数量和金额表.xls')
      })
    },
    /**
     * 获取数据
     *  @param {searchData} Object 查询条件
    */
    initChart(searchData) {
      this.searchData = searchData
      const data = {
        ...searchData
      }
      getProcurementCompleteProjectInfoChart(data).then(res => {
        this.init(res.data)
      })
    },
    /**
      * 渲染echarts
      * @param {fromData.xAxisValue} String 月份
      * @param {fromData.yProjectCompleteAmountValue} String 成交金额
      * @param {fromData.yProjectCompleteNumValue} String 项目数量
      */
    async init(fromData) {
      const lineColor = '#5bb1f0' // 柱形图颜色
      const yuanLineColor = '#f6d715' // 折线条颜色
      const borderColor = this.chartData.borderColor // 边框颜色
      const textColor = this.chartData.textColor // 文本颜色
      /* ------------------------------------------------- */
      fromData.xAxisValue = JSON.parse(fromData.xAxisValue) // 月份
      fromData.yProjectCompleteNumValue = JSON.parse(fromData.yProjectCompleteNumValue).map(row => Number(row)) // 项目数量
      fromData.yProjectCompleteAmountValue = JSON.parse(fromData.yProjectCompleteAmountValue).map(row => Number(row)) // 成交金额
      const { momentMonth } = await this.getCurrentTime()
      const spliceLen = fromData.yProjectCompleteAmountValue.length - momentMonth // 本年度剩余月份
      fromData.yProjectCompleteAmountValue.splice(momentMonth, spliceLen) // 裁剪未到的月份
      /* ----------------*/
      // const xAxisData = fromData.xAxisValue// 月份
      const xAxisData = [] // 月份
      fromData.xAxisValue.forEach((item, index) => {
        this.$set(xAxisData, index, item + '月')
      })
      // 刻度值计算
      const maxY1 = parseInt((Math.max(...fromData.yProjectCompleteNumValue) + 250) / 250) * 250
      const maxY2 = parseInt((Math.max(...fromData.yProjectCompleteAmountValue) + 50000) / 25000) * 25000
      // 数据
      const data = [
        {
          yAxis: {
            name: '项目数量（个）',
            max: maxY1,
            interval: Math.ceil(maxY1 / 5)
          },
          series: {
            name: '完成项目数量',
            data: fromData.yProjectCompleteNumValue
          }
        },
        {
          yAxis: {
            name: '金额（万元）',
            max: maxY2,
            interval: Math.ceil(maxY2 / 5)
          },
          series: {
            name: '完成金额',
            data: fromData.yProjectCompleteAmountValue
          }
        }
      ]
      /* ------------------------------------------------- */
      this.chartOption = {
        // 提示框
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        grid: {
          // 距离 上右下左 的距离
          // top: '30px',
          right: '10px',
          bottom: '10px',
          left: '20px',
          // 是否包含文本
          containLabel: true,
          // 显示边框
          show: false
        },
        // 图例
        legend: {
          selectedMode: false, // 取消图例上的点击事件
          textStyle: {
            color: textColor // 图例文字颜色
          }
        },
        xAxis: [
          {
            // 使用类目，必须有data属性
            type: 'category',
            // 使用 data 中的数据设为刻度文字
            data: xAxisData,
            axisLine: {
              lineStyle: {
                opacity: 0 // 边框是否显引
              }
            },
            // 文字
            axisLabel: {
              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
              }
            }
          }
        ],
        series: [
          {
            ...data[0].series,
            type: 'bar',
            barWidth: '20rem', // 柱图宽度
            yAxisIndex: 0,
            smooth: true,
            // 柱子颜色
            itemStyle: {
              color: lineColor
            }
          },
          {
            ...data[1].series,
            type: 'line',
            yAxisIndex: 1,
            symbolSize: 0, // 点的大小
            smooth: true,
            itemStyle: {
              // normal: {
              color: yuanLineColor, // 线颜色
              lineStyle: {
                width: 2.5// 设置线条粗细
              }
              // }
            }
          }
        ]
      }
    }
  }
}
</script>
<style lang="less" scoped>
</style>
