<template>
  <div>
    <a-card :title="tableTitle">
      <template v-slot:extra>
        <div style="display: flex;">
          <i v-show="isShowBtn">
            <p-button v-show="isHideSearch" @click="showSearch">{{ $lang('显示') }}</p-button>
            <p-button v-show="!isHideSearch" @click="hideSearch">{{ $lang('隐藏') }}</p-button>
            <a-divider type="vertical" />
          </i>        <template v-for="(item, i) of tableExtraBtns">

            <span :key="item.label" v-if="item.vaction" v-action:[item.vaction]>
              <a-divider v-if="i > 0"  type="vertical" />
            <p-button    type="primary" @click="item.click">{{ $lang(item.label) }}</p-button>
            </span>
            
            <span :key="item.label" v-else>
              <div v-if="item.el === 'upload'">
                <a-divider type="vertical" />
                <p-upload
                  name="file"
                  :multiple="false"
                  :showUploadList="false"
                  :headers="headers"
                  :action="item.action"
                  @change="item.handleChange"
                >
                  <p-button type="primary"> <p-icon type="upload" /> {{item.label || '导入'}} </p-button>
                </p-upload>
              </div>
              <div v-else>
                <a-divider v-if="i > 0"  type="vertical" />
                <p-button   type="primary" @click="item.click">{{ $lang(item.label) }}</p-button>
              </div>
            </span>
            <!-- <a-divider v-if="i > 0" :key="item.label" type="vertical" /> -->
            <!-- <p-button :key="i" v-if="item.vaction" v-action:[item.vaction] type="primary" @click="item.click">{{ $lang(item.label) }}</p-button> -->
            <!-- <p-button :key="i" v-else type="primary" @click="item.click">{{ $lang(item.label) }}</p-button> -->
          </template>
          <template v-if="tableUploadBtns">
            <a-divider type="vertical" />
            <p-upload
              name="file"
              :multiple="false"
              :showUploadList="false"
              :headers="headers"
              :action="tableUploadBtns.action"
              @change="tableUploadBtns.handleChange"
            >
              <p-button type="primary"> <p-icon type="upload" /> {{tableUploadBtns.label||'导入'}} </p-button>
            </p-upload>
          </template>
        </div>
      </template>
      <!-- <transition name="fade"> -->
      <p-grid-form
        v-show="!isHideSearch"
        ref="form"
        style="margin-bottom: 20px"
        :span="8"
        :label-col="{ span: 4 }"
        :items="searchFormItems"
      />
      <!-- </transition> -->
      <p-table
        ref="table"
        :row-key="tableRowKey"
        :bordered="true"
        :autoLoad="false"
        :filterDropdownColum="false"
        :colorTransformRow="false"
        :scroll="{ x: true }"
        :columns="tableColumns"
        dragle
        auto-width
        :data-source.sync="data"
        :selectedRowKeys.sync="selectedRowKeys"
        :remoteUrl="tableRemoteUrl"
        :remoteData="remoteParams"
        :remoteParams="remoteParams"
      >
        <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 of tableOperators">
            <span :key="item.label" v-if="item.vaction" v-action:[item.vaction] class="table-operator" @click="item.click(record)">{{ $lang(item.label) }}</span>
            <span :key="item.label" v-else class="table-operator" @click="item.click(record)">{{ $lang(item.label) }}</span>
            <!-- <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>
    </a-card>
  </div>
</template>

<script>
import { setCargoOwner } from '@/views/kzyWMS/utils/setCargoOwner'
const token = sessionStorage.getItem("token");
export default {
  props: {
    searchItems: {
      type: Array,
      default: null,
    },
    searchColNum: {
      type: Number,
      default: 3,
    },
    tableTitle: {
      type: String,
      default: '',
    },
    tableExtraBtns: {
      type: Array,
      default: null,
    },
    tableRowKey: {
      type: String,
      default: '',
    },
    tableColumns: {
      type: Array,
      default: [],
    },
    tableRemoteUrl: {
      type: String | Object | Function,
      default: '',
    },
    callback: {
      type: String | Object | Function,
      default: '',
    },
    tableRemoteParams: {
      type: Object,
      default: null,
    },
    tableOperators: {
      type: Array,
      default: [],
    },
    tableAutoLoad: {
      type: Boolean,
      default: true,
    },
    isShowBtn: {
      type: Boolean,
      default: true,
    },
    tableUploadBtns: {
      type: Object,
      default: null,
    },
  },
    mixins:[setCargoOwner],
  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
                      })
                      if (this.callback) {
                        this.remoteParams = {...this.callback(this.tableRemoteParams, p)}
                        // this.$refs.table.reload()
                      } else {
                        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: [],

      isHideSearch: false,
      headers: {
        Authorization: `Bearer ${token}`,
      },
    }
  },

  mounted(){
    setTimeout(()=>{
      if (this.tableAutoLoad) {
        this.$refs.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
          })
          if (this.callback) {
            this.remoteParams = this.callback(this.tableRemoteParams, p)
            // this.$refs.table.reload()
          } else {
            this.remoteParams = { ...this.tableRemoteParams, ...p }
          }
        })
      }
    }, 400)
  },

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

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

    hideSearch() {
      this.isHideSearch = true
    },

    showSearch() {
      this.isHideSearch = false
    },
  },
}
</script>

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