<!--
  @description: 报表统计-采购计划累计信息
  @Modifier：肖文龙
  @routerPath:
  @date：  2021/01/29
-->
<template>
  <dl
    class="reportChart_crud"
    :style="{'height':height}"
  >
    <dt>
      {{ title }}
      <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 class="planGrandTotalInfoCurd_dd">
      <div class="planGrandTotalInfoCurd_dd-left">
        <!-- 统计分析-总汇组件 -->
        <statisticsCrud :list="crudData.crud" />
        <!-- 统计分析-总汇组件 -->
        <statisticsCrud :list="crudData.crud2" />
      </div>
      <div class="planGrandTotalInfoCurd_dd-right">
        <!--百分比图-完成计划比率 -->
        <gaugeChart :option-data="gaugeChartOption" :height="gaugeChart_h" />
        <!--百分比图-完成计划金额比率 -->
        <gaugeChart :option-data="gaugeChartOption2" :height="gaugeChart_h" />
      </div>
    </dd>
  </dl>
</template>

<script>
/* api */
import { getProcurementPlanYearTotalInfoNumber, exportProcurementPlanYearTotalInfoNumber } from '@api/statisticalAnalysis/reportChart.js'
/* 公共方法*/
import { download, addChineseUnit } from '@/assets/js/utils' // 为数字加上单位：万或亿
/* 组件 */
import statisticsCrud from './statisticsCrud.vue' // 统计分析-总汇组件图
import gaugeChart from './../../components/gaugeChart.vue' // 统计分析-百分比图
export default {
  name: 'PlanGrandTotalInfoCurd',
  components: {
    statisticsCrud, // 统计分析-总汇组件息
    gaugeChart
  },
  props: {
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      title: '本年累计采购计划详情', // 标题
      // 查询条件
      searchData: {
        xaxisType: 'thisYear', // 查询类型  thisYear：年 monthDay：月
        statisticalMonth: '' // 统计月份
      },
      // 总汇组件数据
      crudData: {
        crud: [],
        crud2: []
      },
      // 百分比图
      gaugeChart_h: '50%',
      // 百分比图-自定义参数-完成计划比率
      gaugeChartOption: {
        series: {
          radius: '80%'
        },
        value: '', // 占比
        yuanLineColor: '#6ae8ff'// 进度颜色
      },
      // 百分比图-自定义参数-完成计划金额比率
      gaugeChartOption2: {
        series: {
          radius: '80%'
        },
        value: '', // 占比
        yuanLineColor: '#feff00'// 进度颜色
      }
    }
  },
  methods: {
    /**
    * 年/月变更时
    *  @param {type} String  y 年 m 月
    */
    handChange(type) {
      if (type === 'y') {
        this.searchData.xaxisType = 'thisYear'
        this.title = '本年累计采购计划详情'
      }
      if (type === 'm') {
        this.searchData.xaxisType = 'monthDay'
        this.title = '本月采购信息统计'
      }
      // 获取数据
      this.initChart()
    },
    /**
     * 获取数据
     *  @param {searchData} Object 查询条件
    */
    initChart(searchData) {
      if (searchData) {
        this.searchData = {
          ...this.searchData,
          ...searchData
        }
      }
      const data = {
        ...this.searchData
      }
      getProcurementPlanYearTotalInfoNumber(data).then((res) => {
        this.loadCrudData(res.data)
        this.gaugeChartOption.value = Math.round(res.data.completedPlanNumberRate)// 完成计划比率
        this.gaugeChartOption2.value = Math.round(res.data.completedPlanAmountRate)// 完成计划金额比率
      })
    },
    // 统计汇总
    loadCrudData(data) {
      this.crudData.crud = [
        {
          name: '采购计划数量',
          value: addChineseUnit(data.purchasePlanNumber),
          suffix: '个',
          width: '50%',
          code: '00'
        },
        {
          name: '已执行计划数量',
          value: addChineseUnit(data.completedPlanNumber),
          suffix: '个',
          width: '50%',
          code: '00'
        }
      ]
      this.crudData.crud2 = [
        {
          name: '采购计划金额',
          value: addChineseUnit(data.purchasePlanAmount * 10000),
          suffix: '元',
          width: '50%',
          code: '00'
        },
        {
          name: '已执行计划金额',
          value: addChineseUnit(data.completedPlanAmount * 10000),
          suffix: '元',
          width: '50%',
          code: '00'
        }
      ]
    },
    // 下载
    dowloadClick() {
      const data = { ...this.searchData }
      exportProcurementPlanYearTotalInfoNumber(data).then(res => {
        download(res, this.title + '.xls')
      })
    }
  }
}
</script>
<style lang="less" scoped>
.planGrandTotalInfoCurd_dd {
  padding: 6% 0;
  .planGrandTotalInfoCurd_dd-left {
    box-sizing: border-box;
    width: 70%;
    float: left;
    height: 100%;
  }
  .planGrandTotalInfoCurd_dd-right{
    float: right;
    width: 30%;
    height: 100%;
    &>div{
      padding-top: 11px;
      box-sizing: border-box
    }
  }
}
</style>
