<!--
  @description: 报表统计-价格库统计-物料价格及采购量对比new
  @Modifier：郝定康/杨胜国
  @routerPath:
  @date：  2021-03-08 18:19:37
-->
<template>
  <dl
    :style="{'height':height}"
    class="reportChart_crud planMoneyComparisonNumber"
  >
    <dt>
      物料价格及采购量对比
      <p class="right">
        <el-button type="primary" style="margin-top:10px;" round @click="exportChange">
          导 出
        </el-button>
      </p>
    </dt>
    <dd>
      <el-scrollbar class="planMoneyComparisonNumber_scrollbar">
        <doubleTableChart
          :height="height"
          class="echart-dom"
          :option="option"
          :table-data="tableData"
        />
      </el-scrollbar>
    </dd>
  </dl>
</template>

<script>
/* api */
import { listMaterialAndPurchaseComparisonInfoPages, exportMaterialAndPurchaseComparisonInfoPages } from '@api/statisticalAnalysis/reportChart.js'
/* 公用方法*/
import { download } from '@/assets/js/utils'// 过滤空的key
/* 組件 */
import doubleTableChart from './../../components/doubleTableChart'// table列表渲染组件
export default {
  name: 'PriceAndProcVolumeContrast',
  components: {
    doubleTableChart // table列表渲染组件
  },
  props: {
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      // 查询条件
      searchData: {
      },
      tableData: [],
      option: {
        showIndexTOP: false, // Top排名
        stripe: true, // 斑马纹
        showIndex: true, // 是否展示序号 默认 展示
        // 标题
        thead: [
          { lable: '工业区名称', prop: 'industrialAreaName', align: 'left' },
          { lable: '价格（元）', prop: 'materialPrice', align: 'center' },
          { lable: '采购计划量（件）', prop: 'plannedPurchaseNumber', align: 'center' },
          { lable: '完成采购量（件）', prop: 'completePurchaseNumber', align: 'center' },
          { lable: '计划采购金额（元）', prop: 'plannedPurchaseAmount', align: 'center' },
          { lable: '完成采购金额（元）', prop: 'completePurchaseAmount', align: 'center' },
          { lable: '完成率（%）', prop: 'completeRate', align: 'center' }
        ],
        // 渲染数据
        data: []
      }
    }
  },
  methods: {
    /**
     * 获取数据
     *  @param {searchData} Object 查询条件
    */
    initChart(searchData) {
      this.option.data = []
      if (searchData) {
        this.searchData = {
          ...this.searchData,
          ...searchData
        }
      }
      const data = {
        ...this.searchData
      }
      // data.orgCode = '91420200673675854Y,91510184202629034N'
      // data.purchaseName = '废钢'
      // data.orgId = '18065c6c3e1511eb97d1b8599faecb14,1806640a3e1511eb97d1b8599faecb14'
      listMaterialAndPurchaseComparisonInfoPages(data).then(res => {
        const fromData = JSON.parse(res.data.date)[0]
        const tableData = []
        // 处理数据
        for (const key in fromData) {
          const itemData = {
            name: key,
            dataList: fromData[key]
          }
          tableData.push(itemData)
        }
        this.tableData = tableData
      })
    },
    // 导出
    exportChange() {
      const data = this.searchData
      exportMaterialAndPurchaseComparisonInfoPages(data).then(res => {
        download(res, '物料价格及采购量对比.xls')
      })
    }
  }
}
</script>
<style lang="less" scoped>
// 引入变量
@import "./../../reportChart.public.less";
// 私有样式
.planMoneyComparisonNumber{
  .planMoneyComparisonNumber_scrollbar {
    height: 100vh;
    width: 100%;
    border:@main-border;
    height: calc(100% - .625rem - 2.5rem);
  }
}
</style>
