<template>
  <div>
    <el-row style="width: 100%;text-align: right;margin-bottom: 3px">
      <el-button size="small"  type="primary" @click="getList" >查询</el-button>
      <el-button size="small"  type="success" @click="add" >新增</el-button>
      <el-button size="small"  type="danger" @click="remove" >删除</el-button>
      <el-button size="small"  type="success" @click="saveGxcd" >保存</el-button>
    </el-row>
    <el-row>
      <vxe-grid
        id="dhId"
        ref="xGridDh"
        border
        resizable
        keep-source
        :align="'center'"
        :height="height"
        :auto-resize="true"
        :columns="dhjhTableColumn"
        :data="dhjhList"
        :custom-config="{storage: true }"
        :edit-config="{
                trigger: 'click',
                mode: 'row',
                showStatus: true,
              }"
        :scroll-x="{enabled: true}"
        :scroll-y="{enabled: true}"
        highlight-current-row
        highlight-hover-row
        show-overflow
        show-header-overflow
      >
        <template #month_edit="{ row }">
          <vxe-input
            v-model="row.month"
            type="month"
            value-format="yyyy/MM"
            placeholder=""
            transfer
          ></vxe-input>
        </template>
        <template #allArriveData_edit="{ row }">
          <vxe-input
            v-model="row.allArriveData"
            type="date"
            value-format="yyyy/MM/dd"
            placeholder=""
            transfer
          ></vxe-input>
        </template>
      </vxe-grid>
    </el-row>
  </div>
</template>

<script>
import {getDhjhAll, saveDhjh, removeDhjh} from '@/api/jhzx/pc'
export default {
  name:'Dhjh',
  props:{
    height:{
      type:Number,
      default:700,
    }
  },
  data(){
    return {
      dhjhList:[],
      dhjhTableColumn:[
        { type: 'checkbox', width: 50 },
        { field: 'month', title: '月份', width: 150,
          editRender: { name: "input" },
          slots: { edit: "month_edit" },
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'index', title: '序号', width: 150,
          editRender: { name: "input" },
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'dcch', title: '船只', width: 150,
          editRender: { name: "input" },
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'pls', title: '批量范围', width: 150,
          editRender: { name: "input" },
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'tonnage', title: '吨位', width: 150,
          editRender: { name: "input" },
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'sumWeight', title: '累计重量', width: 150,
          editRender: { name: "input" },
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'allArriveData', title: '到齐日期', width: 150,
          editRender: { name: "input" },
          slots: { edit: "allArriveData_edit" },
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'remarks', title: '备注', width: 150,
          editRender: { name: "input" },
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
      ],
    }
  },
  created() {
    this.getList()
  },
  methods:{
    getList(){
      getDhjhAll().then((res) => {
        this.dhjhList = res.data
      })
    },
    add(){
      this.$refs.xGridDh.insertAt({},-1)
    },
    remove(){
      this.$refs.xGridDh.removeCheckboxRow()
    },
    async saveGxcd(){
      const {insertRecords, removeRecords, updateRecords} = this.$refs.xGridDh.getRecordset()
      if (insertRecords.length !== 0 ) {
        await saveDhjh(insertRecords).then(res => {
          this.getList()
        })
      }
      if (updateRecords.length !== 0) {
        await saveDhjh(updateRecords).then(res => {
          this.getList()
        })
      }
      if (removeRecords.length !== 0) {
        await removeDhjh(removeRecords).then(res => {
          this.getList()
        })
      }
    },
    //合并行  https://vxetable.cn/#/component/table/edit/insert
    //  const { row: newRow } = await $table.insertAt(record, row)
    // await $table.setEditCell(newRow, 'name')
    rowspanMethod({row, _rowIndex, column, visibleData}) {
      //不要忘记在vxe-grid上配置  :scroll-y="{enabled: false}" 防止下拉时样式变化
      // 需要合并的列字段
      let fields = ['month'];// 需要合并的列
      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};
          }
        }
      }
    },
  }

}
</script>
