<!--
  @description: 报表统计-项目采购方式
  @Modifier：肖文龙
  @routerPath:
  @date：  2021/01/28
-->
<template>
  <dl
    class="reportChart_crud"
    :style="{'height':height}"
  >
    <dt>
      本年不同采购方式项目数量情况
      <p class="right">
        <span style="margin-right:10px">
          <i class="iconfont icon-xiazai1" @click="dowloadClick" />
        </span>
        <span @click="openDialog">更多明细</span>
      </p>
    </dt>
    <dd>
      <MyEcharts
        :id="'projectProcMethodChart'"
        class="echart-dom"
        :option="chartOption"
      />
      <!-- 报表统计-平台运营情况-项目采购情况列表详情 -->
      <projectProcMethodList ref="tenderDetail" />
    </dd>
  </dl>
</template>

<script>
/* api */
import { getProcurementMethodInfoChart, exportProcurementMethodInfoChart } from '@api/statisticalAnalysis/reportChart.js'
/* 公用方法*/
import { filterDictText, download } from '@/assets/js/utils'// 常用方法
/* 混入 */
import { reportChartGroupMixin } from './../../mixins/reportChartGroup.js'
/* 組件 */
import MyEcharts from '@/components/common/echarts/myEcharts.vue'// 图表
import projectProcMethodList from './projectProcMethodList-dialog.vue' // 报表统计-平台运营情况-项目采购情况列表详情
export default {
  name: 'YearCumulativeChart',
  components: {
    MyEcharts, // 图表
    projectProcMethodList// 报表统计-平台运营情况-项目采购情况列表详情
  },
  inject: ['chartData'],
  props: {
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      /* 字典信息-start */
      ...reportChartGroupMixin,
      /* 字典信息-end */
      // 查询条件
      searchData: {
      },
      // 图表配置
      chartOption: {}
    }
  },
  methods: {
    // 更多明细弹框
    openDialog() {
      this.$refs.tenderDetail.open(this.searchData)
    },
    // 下载导出
    dowloadClick() {
      exportProcurementMethodInfoChart(this.searchData).then(res => {
        download(res, '项目采购方式.xls')
      })
    },
    /**
     * 获取数据
     *  @param {searchData} Object 查询条件
    */
    initChart(searchData) {
      if (searchData) {
        this.searchData = {
          ...this.searchData,
          ...searchData
        }
      }
      const data = {
        ...this.searchData
      }
      getProcurementMethodInfoChart(data).then(res => {
        this.init(res.data)
      })
    },
    /**
      * 渲染echarts
      * @param {fromData.xAxisValue} String 招标方式
      * @param {fromData.yEndProjectNumValue} String 已完成项目
      * @param {fromData.yInProgressProjectNumValue} String 进行中项目
      * @param {fromData.yStopProjectNumValue} String 已终止项目
      */
    init(fromData) {
      const lineColor = [' rgba(255, 221, 0, 1)', 'rgba(0, 169, 242, 1)', 'rgba(215, 215, 215, 1)'] // 柱形图颜色
      const borderColor = this.chartData.borderColor // 边框颜色
      const textColor = this.chartData.textColor // 文本颜色
      /* ------------------------------------------------- */
      fromData.xAxisValue = JSON.parse(fromData.xAxisValue)// 招标方式
      fromData.yEndProjectNumValue = JSON.parse(fromData.yEndProjectNumValue).map(row => Number(row))// 已完成项目
      fromData.yInProgressProjectNumValue = JSON.parse(fromData.yInProgressProjectNumValue).map(row => Number(row)) // 进行中项目
      fromData.yStopProjectNumValue = JSON.parse(fromData.yStopProjectNumValue).map(row => Number(row)) // 已终止项目
      /* ----------------*/
      const data = {
        title: {
          subtext: '项目数量（个）'
        },
        xAxisData: {
          // max: maxY,
          // interval: Math.ceil(maxY / 5),
          data: fromData.xAxisValue.map((row, index) => {
            return filterDictText(this.bidAndprocForMethod, row)
          })
        },
        seriesData: [
          {
            name: '已完成',
            lineColor: lineColor[0],
            data: fromData.yEndProjectNumValue
          },
          {
            name: '进行中',
            lineColor: lineColor[1],
            data: fromData.yInProgressProjectNumValue
          },
          {
            name: '已终止',
            lineColor: lineColor[2],
            data: fromData.yStopProjectNumValue
          }
        ]
      }
      /* ------------------------------------------------- */
      this.chartOption = {
        title: {
          subtext: data.title.subtext,
          subtextStyle: { // 对应样式
            color: textColor
          }
        },
        // 提示框
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        // 图例
        legend: {
          selectedMode: false, // 取消图例上的点击事件
          textStyle: {
            color: textColor // 图例文字颜色
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          min: 0,
          ... data.xAxisData,
          axisLabel: {
            color: textColor
          },
          axisLine: {
            lineStyle: {
              opacity: 0// 边框是否显引
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: textColor
          },
          axisLine: {
            lineStyle: {
              opacity: 0// 左边框是否显引
            }
          },
          splitLine: {
            lineStyle: {
              color: borderColor
            }
          }
        },
        series: data.seriesData.map(row => {
          return {
            name: row.name,
            type: 'bar',
            stack: '总量',
            label: {
              show: false,
              position: 'insideRight'
            },
            barWidth: '14rem', // 柱图宽度
            itemStyle: {
              // normal: {
              // label: {
              //   show: false
              // },
              color: row.lineColor,
              borderColor: row.lineColor // 柱条边线
              // }
            },
            data: row.data
          }
        })
      }
    }
  }
}
</script>
<style lang="less" scoped>
</style>
