<template>
  <div>
    <p-grid-form ref="form" style="margin-bottom: 20px" :span="6" :label-col="{ span: 4 }" :items="searchFormItems" />
    <p-table
      ref="table"
      :row-key="tableRowKey"
      :bordered="true"
      :autoLoad="tableAutoLoad"
      :filterDropdownColum="false"
      :colorTransformRow="false"
      :columns="tableColumns"
      dragle
      auto-width
      :data-source.sync="data"
      :rowSelectType="rowSelectType"
      :hasRowSelectCheck="true"
      :selectedRowKeys.sync="selectedRowKeys"
      :remoteUrl="tableRemoteUrl"
      :remoteData="remoteParams"
      :remoteParams="remoteParams"
      :doneBefore="tableDoneBefore"
      @selectChange="
        (selectedRowKeys, selectedRows) => {
          selectChange && selectChange(selectedRowKeys, selectedRows)
        }
      "
    >
      <template v-if="tableColSlots.length > 0" v-slot:[tableColSlots[0]]="text, record">
        <slot :name="tableColSlots[0]" :text="text" :record="record"></slot>
      </template>

      <template v-if="tableColSlots.length > 1" v-slot:[(tableColSlots[1])]="text, record">
        <slot :name="tableColSlots[1]" :text="text" :record="record"></slot>
      </template>

      <template v-if="tableColSlots.length > 2" v-slot:[tableColSlots[2]]="text, record">
        <slot :name="tableColSlots[2]" :text="text" :record="record"></slot>
      </template>

      <template v-if="tableColSlots.length > 3" v-slot:[tableColSlots[3]]="text, record">
        <slot :name="tableColSlots[3]" :text="text" :record="record"></slot>
      </template>

      <template v-if="tableColSlots.length > 4" v-slot:[tableColSlots[4]]="text, record">
        <slot :name="tableColSlots[4]" :text="text" :record="record"></slot>
      </template>

      <template v-if="tableColSlots.length > 5" v-slot:[tableColSlots[5]]="text, record">
        <slot :name="tableColSlots[5]" :text="text" :record="record"></slot>
      </template>

      <template v-if="tableColSlots.length > 6" v-slot:[tableColSlots[6]]="text, record">
        <slot :name="tableColSlots[6]" :text="text" :record="record"></slot>
      </template>

      <template v-if="tableColSlots.length > 7" v-slot:[tableColSlots[7]]="text, record">
        <slot :name="tableColSlots[7]" :text="text" :record="record"></slot>
      </template>

      <template v-if="tableOperators.length > 0" v-slot:operator="text, record">
        <template v-for="(item, i) of tableOperators">
          <a-divider v-if="i > 0" :key="item.label" type="vertical" />
          <span :key="i" class="table-operator" @click="item.click(record)">{{ $lang(item.label) }}</span>
        </template>
      </template>
    </p-table>
  </div>
</template>

<script>
export default {
  props: {
    searchItems: {
      type: Array,
      default: null,
    },
    tableRowKey: {
      type: String,
      default: '',
    },
    tableColumns: {
      type: Array,
      default: [],
    },
    tableRemoteUrl: {
      type: String | Object | Function,
      default: '',
    },
    tableRemoteParams: {
      type: Object,
      default: null,
    },
    tableOperators: {
      type: Array,
      default: [],
    },
    tableAutoLoad: {
      type: Boolean,
      default: true,
    },
    tableDoneBefore: {
      type: Function,
      default: null,
    },
    rowSelectType: {
      type: Number,
      default: 2,
    },
    selectChange: {
      type: Function,
      default: null,
    },
  },

  watch: {
    tableColumns: {
      handler(tableColumns) {
        if (!Array.isArray(tableColumns)) return
        this.tableColSlots = tableColumns.filter((t) => t.scopedSlots).map((t) => t.scopedSlots.customRender)
      },
      immediate: true,
    },
    tableRemoteParams: {
      handler(tableRemoteParams) {
        this.remoteParams = { ...this.remoteParams, ...tableRemoteParams }
      },
      immediate: true,
    },
    searchItems: {
      handler(searchItems) {
        // searchItems
        let n = searchItems.filter(t => !t.hidden).length % this.searchColNum;
        let span = 24 / this.searchColNum;
        this.searchFormItems = [
          ...searchItems.map(t => ({ ...t, span: span })),
          {
            type: 'buttonGroup',
            span: 24 - n * span,
            style: n ? {} : { textAlign: 'right' },
            options: [
              {
                value: this.$lang('查询'),
                icon: 'search',
                btnType: 'primary',
                style: 'margin-right:10px;margin-left:20px',
                on: {
                  click: (event, form) => {
                    form.validateFields((err, value) => {
                      if (err) {
                        return;
                      }
                      let p = {...value};
                      Object.keys(p).forEach((k) => {
                        if (typeof p[k] === 'string' && !p[k]) p[k] = null
                      })
                      this.remoteParams = { ...this.tableRemoteParams, ...p }
                    })
                  },
                },
              },
              {
                value: this.$lang('重置'),
                name: 'ccz',
                icon: 'redo',
                on: {
                  click: (event, form) => {
                    form.resetFields()
                    // let p = form.getForm().getFieldsValue()
                    // Object.keys(p).forEach((k) => {
                    //   if (typeof p[k] === 'string' && !p[k]) p[k] = null
                    // })
                    // this.remoteParams = { ...p, ...this.tableRemoteParams }
                  },
                },
              },
            ],
          },
        ]
      },
      immediate: true,
    },
  },

  data() {
    return {
      tableColSlots: [],
      searchFormItems: [],
      remoteParams: {},
      data: null,
      selectedRowKeys: [],
    }
  },

  methods: {
    reload() {
      this.$refs.table.reload()
    },

    getSelectedItem() {
      return this.data.filter((tt) => this.selectedRowKeys.some((t) => t == tt[this.tableRowKey]))
    },
  },
}
</script>

<style scoped>
.box-p20-bg {
  padding: 20px;
  margin-bottom: 20px;
  background: #fff;
}
.table-operator {
  color: #2b80ff;
  cursor: pointer;
}
.table-operator:hover {
  text-decoration: underline;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>