<template>
  <el-dialog :width="width" :title="title" :visible.sync="dialogVisible" :before-close="close" :close-on-click-modal="false">
    <div class="warp-action">
      <el-button type="primary" plain size="mini" @click="hanleCheckCopy">复制内容到勾选订单</el-button>
      <el-button type="success" plain size="mini" @click="hanleCheckCopyAll">复制内容到所有订单</el-button>
    </div>
    <div class="heavyBilling-list">
      <div class="warp-left">{{ leftTitle }}</div>
      <div class="warp-right">
        <vxe-table
          ref="heavyBillingListRef"
          border
          show-overflow
          :data="newTableData"
          height="280px"
          :cell-style="{ height: '38px', padding: 0 }"
          :header-row-style="{ background: '#f2f6fc', borderRight: '1px solid #ccc' }"
          :column-config="{ resizable: true }"
          :edit-config="{ trigger: 'click', mode: 'cell' }"
          @checkbox-all="handleSelectionCheckbox"
          @checkbox-change="handleSelectionCheckbox"
        >
          <!-- key需唯一值 -->
          <vxe-column
            v-for="config in tableColumn"
            :key="config.key"
            :type="config.type"
            :field="config.field"
            :title="config.title"
            :width="config.width"
            :edit-render="config.editRender"
          >
            <template #edit="{ row }">
              <div v-if="config.field">
                <vxe-input v-model="row[config.field]" :name="config.field" type="text" />
              </div>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
    </div>
    <div class="heagyBilling-footer">
      <el-button
        size="mini"
        type="primary"
        @click="edit"
      >确定修改</el-button>
      <el-button size="mini" @click="close">取消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { deepClone } from '@/utils'

export default {
  name: 'HeavyBillingList',
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    width: {
      type: String,
      default: '800px'
    },
    leftTitle: {
      type: String,
      default: '仓库收货数据'
    },
    title: String,
    dialogVisible: {
      type: Boolean,
      default: false
    },
    tableColumn: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      newTableData: [],
      multipleSelection: [],
      currentInput: {
        value: '',
        field: ''
      }, //
      timerBlur: null
    }
  },
  watch: {
    tableData: {
      handler(newVal) {
        this.newTableData = deepClone(newVal)
        this.$nextTick(() => {
          this.$refs.heavyBillingListRef.$el.addEventListener('blur', this.defineBlur, true)
        })
      },
      deep: true
    }
  },
  beforeDestroy() {
    clearTimeout(this.timerBlur)
    this.timerBlur = null
    // 销毁
    if (this.$refs.heavyBillingListRef) this.$refs.heavyBillingListRef.$el.removeEventListener('blur', this.defineBlur)
  },
  methods: {
    edit() {
      this.$emit('edit', this.newTableData)
    },
    close() {
      this.multipleSelection = []
      this.newTableData = []
      this.$emit('close')
    },
    defineBlur(e) {
      clearTimeout(this.timerBlur)
      if (e.target) {
        this.currentInput.value = e.target.value// 输入框的内容
        this.currentInput.field = e.target.getAttribute('name')// 字段
      }
      this.timerBlur = setTimeout(() => {
        this.currentInput.value = ''
        this.currentInput.field = ''
      }, 500)
    },
    handleSelectionCheckbox() {
      const $table = this.$refs.heavyBillingListRef
      const selectRecords = $table.getCheckboxRecords()
      this.multipleSelection = selectRecords
    },
    // 复制内容到勾选框
    hanleCheckCopy() {
      const field = this.currentInput.field
      const value = this.currentInput.value
      if (!value) return
      if (this.multipleSelection.length > 0) {
        // id
        const IdList = this.multipleSelection.map(item => item.Id)
        this.newTableData = this.newTableData.map(item => {
          if (IdList.includes(item.Id)) {
            item[field] = value
          }
          return item
        })
      }
    },
    // 复制内容到全部
    hanleCheckCopyAll() {
      const value = this.currentInput.value
      if (!value) return
      let cloneCurrentInput = deepClone(this.currentInput)
      this.$confirm('是否复制内容到所有订单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.newTableData = this.newTableData.map((item) => {
            if (item) item[cloneCurrentInput.field] = cloneCurrentInput.value
            return item
          })
          cloneCurrentInput = null
        })
        .catch(() => {
          cloneCurrentInput = null
        })
    }
  }
}
</script>
<style lang="less" scoped>
.heavyBilling-list {
    display: flex;
    .warp-left {
      flex-basis: 130px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #f2f6fc;
      color: #737272;
      font-weight: bold;
      border: 1px solid #dfe6ec;
    }
    .warp-right {
      // flex: 1;
      width: calc(100% - 130px);
    }
}
.warp-action {
    text-align: right;
    margin-bottom: 6px;
}
.heagyBilling-footer {
    margin-top: 10px;
    text-align: right;
}
</style>
