<!--
  @description: 报表统计-table列表渲染组件-双表头
  @Modifier：杨胜国
  @routerPath:
  @date：  2021/03/12
-->
<template>
  <div class="reportChart_tableChart-view">
    <div
      class="reportChart_tableChart_content doubleTable"
      :style="{height:scrollbar_height}"
    >
      <!-- v-loading="loading" -->
      <el-table
        ref="pbTable"
        element-loading-background="rgba(0, 0, 0, 0.3)"
        :data="reviewList"
      >
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="60"
        />
        <el-table-column
          prop="industrialAreaName"
          align="center"
          label="工业区名称"
          min-width="240"
        />
        <el-table-column
          v-for="(item,ind) in headerData"
          :key="item.uuid"
          align="center"
        >
          <template slot="header">
            <span>
              {{ item.name }}
            </span>
          </template>
          <template>
            <el-table-column
              align="center"
              min-width="120"
              label="价格（元）"
            >
              <template slot-scope="scope">
                <div v-if="scope.row.offerData[ind]">
                  {{ scope.row.offerData[ind].materialPrice }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              min-width="120"
              label="采购数量（件）"
            >
              <template slot-scope="scope">
                <div v-if="scope.row.offerData[ind]">
                  {{ scope.row.offerData[ind].completePurchaseNumber }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              min-width="120"
              label="采购金额（元）"
            >
              <template slot-scope="scope">
                <div v-if="scope.row.offerData[ind]">
                  {{ scope.row.offerData[ind].completePurchaseAmount }}
                </div>
              </template>
            </el-table-column>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { randomData } from '@assets/js/utils'// 常用方法
export default {
  name: 'DoubleTableChart',
  filters: {
    // 过滤文字 进行生省略封装
    handlePropValue: function(value, prop) {
      const str = String(value[prop])
      return str.substr(0, 6) + '...' + str.substr(str.length - 5, str.length)
    }
  },
  props: {
    height: {
      type: String,
      default: ''
    },
    // 参数值
    option: {
      type: Object,
      default: () => {}
    },
    // 表格渲染数据
    tableData: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      scrollbar_height: '', // 滚动条高度
      footer_show: false, // 是否展示底部 true：展示 false：不展示
      // 表头数据列表
      headerData: [],
      // 渲染列表数据
      reviewList: [],
      optionData: {
        stripe: false, // 是否为斑马纹（隔行变色）
        showIndexTOP: true, // 是否TOP排序 默认是TOP排序
        showIndex: true, // 是否展示序号 默认 展示
        // 表头
        thead: [
        ],
        data: [] // 数据
      }
    }
  },
  watch: {
    // 监听数值变化
    'option.data'(val) {
      // 更新数据
      this.optionData.data = val
    },
    tableData: {
      handler(newVal, oldVal) {
        this.initData()// 初始化数据
      },
      deep: true // 对象内部属性的监听，关键。
    }
  },
  mounted() {
    this.initData() // 初始化数据
  },
  methods: {
    // 获取对象类型
    getDataType(o) {
      if (typeof o === 'object') {
        if (typeof o.length === 'number') {
          return 'Array'
        } else {
          return 'Object'
        }
      } else {
        return 'param is no object type'
      }
    },
    // 初始化数据
    initData() {
      //  置空渲染数据
      this.headerData = []// 表头数据列表
      this.reviewList = []// 渲染列表数据
      this.optionData = {
        ...this.optionData,
        ...this.option
      }
      // 滚动条高度
      if (this.height) {
        // 判断类型是否正确
        if (
          this.getDataType(this.optionData.footer) === 'Object' ||
          (this.getDataType(this.optionData.footer) === 'Array' &&
            this.optionData.footer.length > 0)
        ) {
          this.scrollbar_height = 'calc(' + this.height + ' - 40px)'
          this.footer_show = true
        } else {
          this.scrollbar_height = this.height
        }
      }
      // 处理表格数据 组装头部和表格
      // console.log(this.tableData)
      const tableData = [...this.tableData]
      const reviewList = []// 列表信息
      const headerData = []// 表头数据
      // 遍历 表头数据
      tableData.forEach((reviewData, reviewIndex) => {
        // 遍历列表row信息
        const { dataList } = reviewData
        let dataOption = {}
        const offerArr = [] // 表格循环的数据
        dataList.forEach((rowData, rowIndex) => {
          // 表格展示数据
          offerArr.push({
            materialPrice: rowData.materialPrice, // 价格（元）
            plannedPurchaseNumber: rowData.plannedPurchaseNumber, // 采购计划量（件）
            completePurchaseNumber: rowData.completePurchaseNumber, // 完成采购量（件）
            plannedPurchaseAmount: rowData.plannedPurchaseAmount, // 计划采购金额（元）
            completePurchaseAmount: rowData.completePurchaseAmount, // 完成采购金额（元）
            completeRate: rowData.completeRate, // 完成率（%）
            industrialAreaName: rowData.industrialAreaName, // 工业区名称
            itemName: rowData.itemName
          })
          dataOption = {
            industrialAreaName: reviewData.name,
            offerData: offerArr
          }
          dataOption.offerData
          // 只取第一个的数据下的 物料名称
          if (headerData.length < dataList.length) {
            headerData.push({
              name: rowData.itemName,
              indexOpt: rowIndex,
              uuid: randomData()
            })
            // this.$set(this.headerData, rowIndex, {
            //   name: rowData.itemName,
            //   indexOpt: rowIndex
            // })
          }
        })
        reviewList.push(dataOption)
        // this.$set(reviewList, reviewIndex, dataOption)
      })
      //  渲染数据
      // this.$set(this.headerData, [0], headerData)
      this.headerData = headerData// 表头数据列表
      this.reviewList = reviewList// 渲染列表数据
    }
  }
}
</script>
<style lang="less" scoped>
// 引入变量
@import "./../reportChart.public.less";
// 序号名次排列颜色
@serial_one: #6068e6; //第一
@serial_two: #f37b5d; //第二
@serial_three: #09c86f; //第三
@serial_rests: #c8c8d1; //其他
// 新增颜色
@tipColor: #99AAC7; /* 提示字体颜色 */
@bgcell: #182b63;
@bgysg:#0f1d5d;
@bgysgSpr:#072f63;
@bgtheader:#0f1d5d;
@borderColor: rgba(255, 255, 255, 0.1); /* 常规边框颜色 */
@bgGrid: #2D3552; /* 数据网格背景 */

/deep/.doubleTable{
  .el-table {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    thead {
      color: @tipColor;
      font-weight: normal;
    }
  }
  .el-table, .el-table__expanded-cell {
    background-color: @bgysg;
    ;
  }
  .el-table--border::after, .el-table--group::after, .el-table::before {
    background-color: @borderColor;
  }
  .el-table th, .el-table tr {
    background-color: @bgysg;
  }
  .el-table th{
    background-color: @bgtheader;
    color:#fff;
    font-size: 14px;
    font-weight: bolder;
  }

  .el-table td, .el-table th.is-leaf {
    border-bottom: 1px solid @borderColor;
  }
  .el-table--small th {
    padding: 6px 0;
  }
  .el-table--small td {
    padding: 8px 0;
  }
  .el-table .cell {
    line-height: 18px;
  }
  .el-table .cell, .el-table th div, .el-table--border td:first-child .cell, .el-table--border th:first-child .cell {
    padding-left: 8px;
  }
  .el-table .cell, .el-table th div {
    padding-right: 8px;
  }
  .el-table__body tr:hover > td {
    background-color: @bgysg !important;
  }
  // 斑马条 - 背景
  .el-table--striped .el-table__body tr.el-table__row--striped td {
    background: @bgysgSpr;
  }
  // border table
  .el-table--border, .el-table--group {
    border: 1px solid @borderColor;
  }
  .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
    border-right: 1px solid @borderColor;
  }
  // 固定列
  .el-table__body tr.hover-row.current-row>td, .el-table__body tr.hover-row.el-table__row--striped.current-row>td, .el-table__body tr.hover-row.el-table__row--striped>td, .el-table__body tr.hover-row>td {
    background-color: @bgysg!important;
  }
  .el-table__fixed-right::before, .el-table__fixed::before {
    background-color: @borderColor;
  }
  .el-table--border th.gutter:last-of-type {
    border-color: @borderColor;
  }
  .el-table__fixed-right-patch {
    background-color: @bgGrid;
  }
  .el-table--border th, .el-table__fixed-right-patch {
    border-color: @borderColor;
  }
  .el-table .el-table__body-wrapper .el-table__empty-block {
    min-height: 40px;
    border-bottom: none;
  }
}
// .reportChart_tableChart-view {
//   .reportChart_tableChart {
//     width: 100%;
//     font-size: 0.875rem;
// }
</style>
