<template>
  <div class="mytable">
    <vxe-grid
      id="id4"
      ref="xGrid4"
      border
      resizable
      keep-source
      :align="'center'"
      :height="height"
      :auto-resize="true"
      :columns="tableColumn7"
      highlight-current-row
      :custom-config="{ storage: true }"
      :cell-style="cellStyle"
      highlight-hover-row
      show-overflow
      show-header-overflow
      :scroll-y="{enabled: true}"
    >
    </vxe-grid>
  </div>
</template>

<script>
export default {
  name:'Bcxq',
  props:{
    height:String,
    list:Array,
  },
  data(){
    return {
      tableColumn7: [
        {type: 'seq', width: 60, title: '序号', fixed: "left"},
        { field: '', title: '日期', width: 150,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: '', title: '垛位', width: 150,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: '', title: '船号', width: 150,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: '', title: '批量', width: 150,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: '', title: '数量', width: 150,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: '', title: '重量', width: 150,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: '', title: '订货清单号', width: 150,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: '', title: '订货数量', width: 150,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: '', title: '采购数量', width: 150,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: '', title: '到货数量', width: 150,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: '', title: '跨位', width: 150,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: '', title: '跨位需求数量', width: 150,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
      ],
    }
  },
  methods:{
    cellClickEvent_xb(row) {
      this.mxList = row.row.mxList
      this.dialogVisible1 = true
    },
    rowClassName({row, rowIndex}) {
      if (row.dcCh === '合计') {
        return {
          backgroundColor: 'lightblue',
          cursor: 'pointer'
        }
      }
      return null
    },
    //区分汇总数据
    cellStyle({row, column, rowIndex, columnIndex}) {
      let fields = ['tlt_zl', 'jsq_dz_pc', 'jsq_xz_pc', 'tzxqq', 'tlt_sl', 'hx_cd', 'qg_cd', 'gcxqq'];
      if (fields.includes(column.property)) {
        return {
          color: '#CC8B04',
          cursor: 'pointer'
        }
      }
    },
    rowspanMethod({row, _rowIndex, column, visibleData}) {
      //不要忘记在vxe-grid上配置  :scroll-y="{enabled: false}" 防止下拉时样式变化
      // 需要合并的列字段
      let fields = ['nf', 'yf', 'rq', 'tzxqq','kw','ch',];// 需要合并的列
      const cellValue = row[column.property];// 合并行的相同的唯一标识
      if (cellValue && fields.includes(column.property)) {
        const prevRow = visibleData[_rowIndex - 1];
        let nextRow = visibleData[_rowIndex + 1];
        if (prevRow && prevRow[column.property] === cellValue) {
          // 如果和第一行数据一样，就删除
          return {rowspan: 0, colspan: 0};
        } else {
          // 获取有机会数据是一样的
          let countRowspan = 1;
          while (nextRow && nextRow[column.property] === cellValue) {
            nextRow = visibleData[++countRowspan + _rowIndex];
          }
          if (countRowspan > 1) {
            return {rowspan: countRowspan, colspan: 1};
          }
        }
      }
    },
    // 全选
    selectAllEvent() {
      const records = this.$refs.xGrid.getCheckboxRecords();
      this.checkedList = records;
    },
    // 单选
    selectChangeEvent() {
      const records = this.$refs.xGrid.getCheckboxRecords();
      this.checkedList = records;
    },
    cellStyle2({row}) {
      if (this.gcrl.includes(row.jssj)) {
        return {
          color: 'red',
          cursor: 'pointer'
        }
      }
    },
  }
}
</script>
