<!--
  @description: 报表统计-各工业区本年度招标采购累计完成情况
  @Modifier：杨胜国
  @routerPath:
  @date：  2021/03/06
-->
<template>
  <dl
    class="reportChart_crud"
  >
    <dt>
      各工业区本年度招标采购累计完成情况
      <p class="right">
        <el-date-picker
          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"
          style="margin-right:2.5rem"
          placeholder="请选择月份"
          @change="handChange"
        />
        <i class="iconfont icon-xiazai1" @click="dowloadClick" />
      </p>
    </dt>
    <dd>
      <tableChart
        :height="height"
        class="echart-dom"
        :option="option"
      />
      <variousCumulativeCompletionDialog ref="detail" />
    </dd>
  </dl>
</template>

<script>
/* api */
import { listBidAndPurchaseByBuyers, exportBidAndPurchaseByBuyers } from '@api/statisticalAnalysis/reportChart.js'
/* 公用方法*/
import { download } from '@/assets/js/utils'// 常用方法
/* 組件 */
import tableChart from './../../components/tableChart'// table列表渲染组件
import variousCumulativeCompletionDialog from './variousCumulativeCompletion-dialog'// 更多明细
export default {
  name: 'VariousCumulativeCompletion',
  components: {
    tableChart, // table列表渲染组件
    variousCumulativeCompletionDialog// 更多明细
  },
  props: {
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      // 查询条件
      searchData: {
        statisticalMonth: '' // 统计月份
      },
      option: {
      // 标题
        thead: [
          { lable: '内部企业名称', prop: 'buyerName', align: 'left' },
          {
            lable: '招标项目数（个）', prop: 'bidCount', align: 'center', // tenderType 00采购 01招标'
            handle: {
              click: this.bidMore
            }
          },
          { lable: '招标金额（万元）', prop: 'bidMoney', align: 'center' },
          { lable: '非招采购金额（万元）', prop: 'purchaseMoney', align: 'center' },
          { lable: '非招采购项目（个）', prop: 'purchaseCount', align: 'center', // tenderType 00采购 01招标'
            handle: {
              click: this.paramsMore
            }
          },
          { lable: '总采购数量（个）', prop: 'totalCount', align: 'center' },
          { lable: '总成交金额（万元）', prop: 'totalMoney', align: 'center' }
        ],
        // 渲染数据
        data: []
      }
    }
  },
  methods: {
    // 下载导出
    dowloadClick() {
      exportBidAndPurchaseByBuyers(this.searchData).then(res => {
        download(res, '各工业区本年度招标采购累计完成情况表.xls')
      })
    },
    /**
    * 月变更时
    */
    handChange(val) {
      if (this.searchData.statisticalMonth) {
        this.searchData.statisticalMonth = this.$Moment(val).format(this.momentYearMonth)
      }
      // this.searchData.statisticalMonth = this.$Moment(this.currentTimeFn()).format(this.momentYearMonth)
      // 获取数据
      this.initChart()
    },
    /**
     * 获取数据
     *  @param {searchData} Object 查询条件
    */
    initChart(searchData) {
      this.option.data = []
      if (searchData) {
        this.searchData = {
          pageNo: 1,
          pageSize: 100,
          ...this.searchData,
          ...searchData,
          statisticalMonth: ''
        }
      }
      const data = {
        pageNo: 1,
        pageSize: 100,
        ...this.searchData
      }
      listBidAndPurchaseByBuyers(data).then(res => {
        const dataSum = {
          buyerName: '合计',
          bidCount: 0, // 招标项目数（个）
          bidMoney: 0, // 招标金额（万元）
          purchaseCount: 0, // 非招采购项目（个）
          purchaseMoney: 0, // 非招金额
          totalCount: 0, // 总采购数量（个）
          totalMoney: 0// 总成交金额（万元）
        }
        res.data.records.forEach(item => {
          dataSum.bidCount += Number(item.bidCount)
          dataSum.bidMoney += Number(item.bidMoney)
          dataSum.purchaseCount += Number(item.purchaseCount)
          dataSum.totalCount += Number(item.totalCount)
          dataSum.purchaseMoney += Number(item.purchaseMoney)
          dataSum.totalMoney += Number(item.totalMoney)
        })
        // 处理数据 数字类型是以64位的IEEE 754格式存储的。 保留两位小数
        if (!isNaN(parseFloat(dataSum.totalMoney))) {
          dataSum.totalMoney = dataSum.totalMoney.toFixed(2)
        }
        if (!isNaN(parseFloat(dataSum.purchaseMoney))) {
          dataSum.purchaseMoney = dataSum.purchaseMoney.toFixed(2)
        }
        if (!isNaN(parseFloat(dataSum.bidMoney))) {
          dataSum.bidMoney = dataSum.bidMoney.toFixed(2)
        }
        this.option.data.push(...res.data.records, dataSum)
      })
    },
    // 处理数据 数字类型是以64位的IEEE 754格式存储的。 保留两位小数
    toDecimal(x) {
      var val = Number(x)
      if (!isNaN(parseFloat(val))) {
        val = val.toFixed(2)
      }
      return val
    },
    // 更多
    bidMore(row, rowIndex, lable) {
      const data = {
        ...this.searchData
      }
      const type = '01'
      this.$refs.detail.open(data, row.row, type)
    },
    // 非招采购项目更多
    paramsMore(row, rowIndex, lable) {
      const data = {
        ...this.searchData
      }
      const type = '00'
      this.$refs.detail.open(data, row.row, type)
    }
  }
}
</script>
<style lang="less" scoped>
</style>
