<template>
  <p-table-edit-pro
    ref="easyTable"
    :rowSelectType="rowSelectType"
    :bordered="true"
    :pagination="false"
    :rowKey="String(rowKey)"
    :scroll="{ x: true }"
    :editor-row-table="!isView"
    :data-source="data"
    :columns="aColumns"
    :selectedRowKeys="selectedRowKeys"
    :loading="loading"
    @colSearch="clickRow"
    @clickRow="clickRowFun"
    @colChange="colChange"
    @selectChange="handleSelectChange"
  >
    <template :v-slot="operation" slot-scope="text, record">
      <span v-for="item of operations" :key="item.title" class="btn" @click="item.click(record)">
        {{ item.title }}
      </span>
    </template>
    <a slot="inStockStatus" slot-scope="text, record, index">
      <p-select
        default-value=""
        style="width: 120px"
        :remoteUrl="remoteUrl"
        :replaceFields="replaceFields"
        :autoLoad="false"
        @change="handleProvinceChange"
        :destroyOptions="true"
        :remoteBefore="remoteBefore"
      />
      <!-- :options="provinceDataObj[clickRowRecord]" -->
    </a>
  </p-table-edit-pro>
</template>

<script>
import clonedeep from 'lodash.clonedeep'
import { upcloud_base_strategy } from '@/config/serviceSettings'

export default {
  props: {
    isView: {
      type: Boolean,
      default: false,
    },
    columns: {
      type: Array,
    },
    rowKey: {
      type: String | Number,
    },
    rowSelectType: {
      type: Number,
      default: 2,
    },
    colChange: {
      type: Function,
    },
    operations: {
      type: Array,
    },
  },

  data() {
    return {
      aColumns: null,
      loading: false,
      data: [],
      replaceFields: {
        label: 'name',
        value: 'code',
      },
      remoteUrl: {
        url: upcloud_base_strategy + `/rule/move/v1/status`,
        method: 'get',
      },
      clickRowRecord: 0,
      selectedRowKeys: [],
      remoteParams: {},
    }
  },

  watch: {
    columns: {
      handler(val) {
        let cls = clonedeep(val)
        if (this.isView) {
          cls.pop()
        }
        if (Array.isArray(this.operations) && this.operations.length > 0) {
          cls.push({
            title: '操作',
            key: 'operation',
            fixed: 'right',
            width: 100,
            scopedSlots: { customRender: 'operation' },
          })
        }
        this.aColumns = cls
      },
      immediate: true,
    },
  },

  methods: {
    remoteBefore(event, data) {
      console.log(arguments, 'argumentsargumentsarguments')
      console.log(this.data, 'remoteBeforeremoteBeforeremoteBefore')
      console.log(this.clickRowRecord, 'clickRowRecordclickRowRecordclickRowRecord')
      data.params.moveRuleId = this.data[this.clickRowRecord - 1].moveRuleId
    },
    setItems(items) {
      let trans = this.columns.filter((t) => t.transValues)
      let a = null
      this.data = items.map((t) => {
        a = { ...t }
        trans.forEach((tt) => {
          if (tt.type === 'switch') {
            a[tt.key] = a[tt.key] == tt.transValues[0] ? true : false
          }
        })
        this.columns.forEach((col) => {
          if (Reflect.has(a, col.key)) return
          a[col.key] = null
        })
        return a
      })
    },
    clickRow(row) {
      this.clickRowRecord = Number(row.index) + 1
      // 获取当前编辑行数据
    },
    handleProvinceChange(value, name, options) {
      console.log(arguments, 'argumentsarguments')
      this.data[this.clickRowRecord - 1].inStockStatusName = name
      this.data[this.clickRowRecord - 1].inStockStatus = value
    },
    clickRowFun(event, selectedRowKeys, record) {
      // 点击当前行
      // debugger
      // this.$refs.easyTable.getCurrentRow()
    },
    sss() {
      console.log(this.$refs.easyTable, '')
      this.$refs.easyTable.getCurrentRow()
      console.log(
        this.$refs.easyTable.getCurrentRow(),
        'this.$refs.easyTable.getCurrentRow()this.$refs.easyTable.getCurrentRow()'
      )
    },
    addItem() {
      let item = {}
      this.columns.forEach((tt) => {
        if (tt.hidden) item[tt.key] = 'aaa' + Math.floor(Math.random() * 1000)
        else {
          if (tt.type == 'switch') {
            item[tt.key] = tt.value
          }
          if (tt.type == 'select') {
            item[tt.key] = null
          } else {
            item[tt.key] = ''
          }
          if (tt.key == 'reason') {
            item[tt.key] = '库内调整'
          }
        }
      })
      this.data.push(item)
    },

    delItems() {
      // 删除附表所有信息
      this.data = []
      this.selectedRowKeys = []
    },

    delSelectedItems() {
      let list = this.data.filter((t) => !this.selectedRowKeys.some((k) => t[this.rowKey] == k))
      this.data = list
      this.selectedRowKeys = []
    },

    validateFields(fn) {
      fn(null, this.getListData())
    },

    getListData(isSelected) {
      let rowKey = this.columns[0].key
      let trans = this.columns.filter((t) => t.transValues)
      let a = null
      let isSuccess = true
      this.$refs.easyTable.validateFields(function (error, values, selectData) {
        if (error) {
          isSuccess = false
          return
        }
      })
      if (!isSuccess) {
        return false
      }
      let list = this.data
      // 过滤勾选项
      // console.log(this.selectedRowKeys, rowKey, list)
      if (isSelected) {
        list = list.filter((tt) => this.selectedRowKeys.some((k) => tt[this.rowKey] == k))
      }
      return list.map((t) => {
        a = { ...t }
        if (a['quantityMode'] == '1') {
          // 整件
          a['oddPieceQuantity'] = 0
        } else if (a['quantityMode'] == '2') {
          // 零散
          a['quantity'] = 0
        }
        if (typeof a[rowKey] === 'string' && a[rowKey].indexOf('aaa') === 0) {
          a[rowKey] = null
        }
        trans.forEach((tt) => {
          if (tt.type === 'switch') {
            a[tt.key] = a[tt.key] ? tt.transValues[0] : tt.transValues[1]
          }
        })
        Object.keys(a).forEach((k) => {
          if (!this.columns.some((c) => c.key === k)) {
            delete a[k]
          }
        })
        return a
      })
    },

    handleSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
    },
  },
}
</script>

<style scoped>
.rightItem {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
.extra-text {
  float: left;
  font-size: 14px;
  color: #333;
}
.extra-text > span {
  display: inline-block;
  margin-right: 30px;
  line-height: 30px;
}
.btn {
  color: #2b80ff;
  margin-right: 10px;
  cursor: pointer;
}
.btn:hover {
  text-decoration: underline;
}
</style>
