<template>
  <div class="mytable">
    <vxe-grid
      id="id3"
      ref="xGrid3"
      border
      resizable
      keep-source
      :align="'center'"
      :height="height"
      :auto-resize="true"
      :columns="tableColumn3"
      highlight-current-row
      :data="list"
      :custom-config="{ storage: true }"
      :span-method="rowspanMethod"
      :scroll-y="{enabled: true}"
      highlight-hover-row
      show-overflow
      show-header-overflow
      @cell-dblclick="cellClickEvent_xb"
    >
    </vxe-grid>
  </div>
</template>

<script>
export default {
  name:'Kwxx',
  props:{
    height:String,
    list:Array,
  },
  data(){
    return {
      tableColumn3: [
        {type: 'seq', width: 60, title: '序号', fixed: "left"},
        {
          field: 'yf', title: '月份', width: 120,
          filters: [{
            data: {
              checks: [],
              sVal: '',
              sMenu: '',
              fType1: '',
              fVal1: '',
              fMode: 'and',
              fType2: '',
              fVal2: ''
            }
          }],
          filterRender: {name: 'FilterCombination',},
        },
        {
          field: 'kw', title: '跨位', width: 120, formatter: ['dictFormat', 'QGKW'],
          filters: [{
            data: {
              checks: [],
              sVal: '',
              sMenu: '',
              fType1: '',
              fVal1: '',
              fMode: 'and',
              fType2: '',
              fVal2: ''
            }
          }],
          filterRender: {name: 'FilterCombination',},
        },
        {
          field: 'ch', title: '船号', width: 120,
          filters: [{
            data: {
              checks: [],
              sVal: '',
              sMenu: '',
              fType1: '',
              fVal1: '',
              fMode: 'and',
              fType2: '',
              fVal2: ''
            }
          }],
          filterRender: {name: 'FilterCombination',},
        },
        {
          field: 'pl', title: '批量', width: 120,
          filters: [{
            data: {
              checks: [],
              sVal: '',
              sMenu: '',
              fType1: '',
              fVal1: '',
              fMode: 'and',
              fType2: '',
              fVal2: ''
            }
          }],
          filterRender: {name: 'FilterCombination',},
        },
        {
          field: 'fd', title: '分段', width: 120,
          filters: [{
            data: {
              checks: [],
              sVal: '',
              sMenu: '',
              fType1: '',
              fVal1: '',
              fMode: 'and',
              fType2: '',
              fVal2: ''
            }
          }],
          filterRender: {name: 'FilterCombination',},
        },
        {
          field: 'bs', title: '板数', width: 120,
          filters: [{
            data: {
              checks: [],
              sVal: '',
              sMenu: '',
              fType1: '',
              fVal1: '',
              fMode: 'and',
              fType2: '',
              fVal2: ''
            }
          }],
          filterRender: {name: 'FilterCombination',},
        },
        {
          field: 'dhqd', title: '订货清单号', width: 120,
          filters: [{
            data: {
              checks: [],
              sVal: '',
              sMenu: '',
              fType1: '',
              fVal1: '',
              fMode: 'and',
              fType2: '',
              fVal2: ''
            }
          }],
          filterRender: {name: 'FilterCombination',},
        },
        {
          field: 'lhsl', title: '到货数量', width: 120,
          filters: [{
            data: {
              checks: [],
              sVal: '',
              sMenu: '',
              fType1: '',
              fVal1: '',
              fMode: 'and',
              fType2: '',
              fVal2: ''
            }
          }],
          filterRender: {name: 'FilterCombination',},
        },
        {
          field: 'dhsl', title: '订货数量', width: 120,
          filters: [{
            data: {
              checks: [],
              sVal: '',
              sMenu: '',
              fType1: '',
              fVal1: '',
              fMode: 'and',
              fType2: '',
              fVal2: ''
            }
          }],
          filterRender: {name: 'FilterCombination',},
        },
        {
          field: 'blgs', title: '备料总工时', width: 120,
          filters: [{
            data: {
              checks: [],
              sVal: '',
              sMenu: '',
              fType1: '',
              fVal1: '',
              fMode: 'and',
              fType2: '',
              fVal2: ''
            }
          }],
          filterRender: {name: 'FilterCombination',},
        },
        {
          field: 'pwgs', title: '抛丸总工时', width: 120,
          filters: [{
            data: {
              checks: [],
              sVal: '',
              sMenu: '',
              fType1: '',
              fVal1: '',
              fMode: 'and',
              fType2: '',
              fVal2: ''
            }
          }],
          filterRender: {name: 'FilterCombination',},
        },
        {
          field: 'llgs', title: '理料总工时', width: 120,
          filters: [{
            data: {
              checks: [],
              sVal: '',
              sMenu: '',
              fType1: '',
              fVal1: '',
              fMode: 'and',
              fType2: '',
              fVal2: ''
            }
          }],
          filterRender: {name: 'FilterCombination',},
        },
        {
          field: 'hxgs', title: '划线总工时', width: 120,
          filters: [{
            data: {
              checks: [],
              sVal: '',
              sMenu: '',
              fType1: '',
              fVal1: '',
              fMode: 'and',
              fType2: '',
              fVal2: ''
            }
          }],
          filterRender: {name: 'FilterCombination',},
        },
        {
          field: 'qggs', title: '切割总工时', width: 120,
          filters: [{
            data: {
              checks: [],
              sVal: '',
              sMenu: '',
              fType1: '',
              fVal1: '',
              fMode: 'and',
              fType2: '',
              fVal2: ''
            }
          }],
          filterRender: {name: 'FilterCombination',},
        },
        {
          field: 'pkgs', title: '坡口总工时', width: 120,
          filters: [{
            data: {
              checks: [],
              sVal: '',
              sMenu: '',
              fType1: '',
              fVal1: '',
              fMode: 'and',
              fType2: '',
              fVal2: ''
            }
          }],
          filterRender: {name: 'FilterCombination',},
        },
        {
          field: 'dmgs', title: '打磨总工时', width: 120,
          filters: [{
            data: {
              checks: [],
              sVal: '',
              sMenu: '',
              fType1: '',
              fVal1: '',
              fMode: 'and',
              fType2: '',
              fVal2: ''
            }
          }],
          filterRender: {name: 'FilterCombination',},
        },
        {
          field: 'qjggs', title: '曲加工总工时', width: 120,
          filters: [{
            data: {
              checks: [],
              sVal: '',
              sMenu: '',
              fType1: '',
              fVal1: '',
              fMode: 'and',
              fType2: '',
              fVal2: ''
            }
          }],
          filterRender: {name: 'FilterCombination',},
        },
        {
          field: 'zpgs', title: '装配总工时', width: 120,
          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>
