<!--
  @description: 报表统计-本年完成项目数量和金额
  @Modifier：肖文龙
  @routerPath:
  @date：  2021/01/28
-->
<template>
  <dl
    class="reportChart_crud"
    :style="{'height':height}"
  >
    <dt>
      {{ title }}
      <!--statisticalMonth 是否有值 有值时则为查询的月份  为空时则是查询的年 -->
      <el-date-picker
        v-show="searchData.statisticalMonth"
        v-model="searchData.statisticalMonth"
        :value-format="elValueYearMonth"
        class="el-date-picker-month-input"
        popper-class="el-date-picker-month el-date-picker_header_none"
        type="month"
        placeholder="请选择月份"
        @change="monthChange"
      />
      <p class="right">
        <span style="margin-right:10px">
          <i class="iconfont icon-xiazai1" @click="dowloadClick" />
        </span>
        <span @click="handChange('y')">年</span>
        <span class="lin not-select">｜</span>
        <span @click="handChange('m')">月</span>
      </p>
    </dt>
    <dd>
      <MyEcharts
        :id="'yearCompleteProjectChart'"
        class="echart-dom"
        :option="chartOption"
      />
    </dd>
  </dl>
</template>

<script>
/* api */
import { getCompleteProjectInfoChart, exportCompletionProjectInfoMoneyAndNumList } from '@api/statisticalAnalysis/reportChart.js'
import { getTime } from '@api/common/tools.js' // 获取服务器时间
/* 組件 */
import MyEcharts from '@/components/common/echarts/myEcharts.vue'// 图表
/* 公用方法*/
import { download } from '@/assets/js/utils'// 常用方法
export default {
  name: 'YearCompleteProjectChart',
  components: {
    MyEcharts// 图表
  },
  inject: ['chartData'],
  props: {
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      title: '本年完成项目数量和金额', // 标题 本年完成项目数量和金额 本月完成项目数量和金额
      // 查询条件
      searchData: {
        xaxisType: 'thisYear', // 查询类型  thisYear：年 monthDay：月
        statisticalMonth: '' // 统计月份
      },
      // 图表配置
      chartOption: {},
      type: 'y' // 类型
    }
  },
  methods: {
    // 获取当前时间
    async getCurrentTime() {
      let momentMonth = ''
      return await getTime().then((res) => {
        momentMonth = this.$Moment(res.data.time).format('MM')
        return {
          momentMonth
        }
      })
    },
    /**
    * 年/月变更时
    *  @param {type} String  y 年 m 月
    */
    handChange(type) {
      if (type === 'y') {
        this.searchData.xaxisType = 'thisYear'
        this.searchData.statisticalMonth = ''
        this.title = '本年完成项目数量和金额'
        this.type = 'y'
      }
      if (type === 'm') {
        this.searchData.xaxisType = 'monthDay'
        this.searchData.statisticalMonth = this.$Moment(this.currentTimeFn()).format(this.momentYearMonth)
        this.title = '本月完成项目数量和金额'
        this.type = 'm'
      }
      // 获取数据
      this.initChart()
    },
    // 下载导出
    dowloadClick() {
      exportCompletionProjectInfoMoneyAndNumList(this.searchData).then(res => {
        download(res, this.title + this.searchData.statisticalMonth + '.xls')
      })
    },
    /**
    * 选择月
    */
    monthChange(val) {
      this.searchData.statisticalMonth = this.$Moment(val).format(this.momentYearMonth)
      // 获取数据
      this.initChart()
    },
    /**
     * 获取数据
     *  @param {searchData} Object 查询条件
    */
    initChart(searchData) {
      if (searchData) {
        this.searchData = {
          ...this.searchData,
          ...searchData
        }
      }
      const data = {
        ...this.searchData
      }
      getCompleteProjectInfoChart(data).then(res => {
        this.init(res.data)
      })
    },
    /**
      * 渲染echarts
      * @param {fromData.xAxisValue} Array
      * @param {fromData.yProjectMoneyValue} Array
      * @param {fromData.yProjectNumValue} Array
      */
    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.yProjectNumValue = JSON.parse(fromData.yProjectNumValue).map(row => Number(row))
      fromData.yProjectMoneyValue = JSON.parse(fromData.yProjectMoneyValue).map(row => Number(row))
      const { momentMonth } = await this.getCurrentTime()
      const spliceLen = fromData.yProjectMoneyValue.length - momentMonth // 本年度剩余月份
      fromData.yProjectMoneyValue.splice(momentMonth, spliceLen) // 裁剪未到的月份
      /* ----------------*/
      // const xAxisData = fromData.xAxisValue// 月份/日
      const xAxisData = [] // 月份/日
      if (this.type === 'y') {
        fromData.xAxisValue.forEach((item, index) => {
          this.$set(xAxisData, index, item + '月')
        })
      } else if (this.type === 'm') {
        fromData.xAxisValue.forEach((item, index) => {
          this.$set(xAxisData, index, item + '日')
        })
      }
      // 刻度值计算
      const maxY1 = parseInt((Math.max(...fromData.yProjectNumValue) + 500) / 500) * 500
      const maxY2 = parseInt((Math.max(...fromData.yProjectMoneyValue) + 50000) / 25000) * 25000
      // 数据
      const data = [
        {
          yAxis: {
            name: '项目数量（个）',
            max: maxY1,
            interval: Math.ceil(maxY1 / 5)
          },
          series: {
            name: '项目数量',
            data: fromData.yProjectNumValue
          }
        },
        {
          yAxis: {
            name: '金额（万元）',
            max: maxY2,
            interval: Math.ceil(maxY2 / 5)
          },
          series: {
            name: '金额',
            data: fromData.yProjectMoneyValue
          }
        }
      ]
      /* ------------------------------------------------- */
      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: 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: '14rem', // 柱图宽度
            yAxisIndex: 0,
            smooth: true,
            // 柱子颜色
            itemStyle: {
              color: lineColor
            }
          },
          {
            ...data[1].series,
            type: 'line',
            yAxisIndex: 1,
            symbolSize: 0, // 点的大小
            smooth: true,
            itemStyle: {
              color: yuanLineColor, // 线颜色
              lineStyle: {
                width: 2.5// 设置线条粗细
              }
            }
          }
        ]
      }
    }
  }
}
</script>
<style lang="less" scoped>
</style>
