<template>
  <p-card :title="title">
    <!-- 表单组件 -->
    <template slot="extra">
      <div>
        <p-button style="margin-right:8px" v-for="(item, i) in btnEventArray" :key="i" :type="item.type" @click="item.click" :icon="item.icon">{{ item.label }}</p-button>
      </div>
    </template>
    <searchForm
      ref="searchForm"
      v-on="$listeners"
      :setFormItems="formItems"
      :searchColNum="searchColNum"
      :isQuery="isQuery"
      :disabledArray="disabledArray"
      @handleSubmit="handleSubmit"
    >
    </searchForm>

    <!-- 表格组件 -->
    <tableList
      ref="table"
      :hasEditor="hasEditor"
      :columns="columns"
      :rowKey="rowKey"
      :rowSelectType="rowSelectType"
      :tableScroll="tableScroll"
      :rowCount="rowCount"
      :remoteUrl="remoteUrl"
      :remoteData="params"
      :remoteParams="params"
      :tableAutoLoad="tableAutoLoad"
      :tableBtnArray="tableBtnArray"
      :bordered="bordered"
      :size="tableSize"
      v-on="$listeners"
    >
    </tableList>
    <slot name="bottomComponets" />
  </p-card>
</template>

<script>
import tableList from './table/tableList.vue'
import searchForm from './form/searchForm.vue'
export default {
  name: '',
  components: { tableList, searchForm },
  props: {
    columns: {
      type: Array,
      default() {
        return []
      },
      require: true
    },
    formItems: {
      type: Array,
      default() {
        return []
      },
      require: true
    },
    remoteUrl: {
      type: String | Object,
      default: '',
      require: true
    },
    remoteParams: {
      type: Object,
      default() {
        return {}
      }
    },
    searchColNum: {
      type: Number,
      default: 3
    },
    tableScroll: {
      type: Object | Number,
      default() {
        return {
          x: true
        }
      }
    },
    formData: {
      type: Object,
      default() {
        return {}
      }
    },
    tableBtnArray: {
      type: Array,
      default() {
        return []
      }
    },
    btnEventArray: {
      type: Array,
      default() {
        return []
      }
    },
    title: {
      type: String,
      default: ''
    },
    tableSize: {
      type: String,
      default: 'default'
    },
    rowKey: {
      type: String,
      default: ''
    },
    bordered: {
      type: Boolean,
      default: true
    },
    tableAutoLoad: {
      type: Boolean,
      default: true
    },
    rowCount: {
      type: Boolean,
      default: true
    },
    rowSelectType: {
      type: Number,
      default: 2
    },
    disabledArray: {
      type: Array | Boolean,
      default() {
        return []
      }
    },
    isQuery: {
      type: Boolean,
      default: true
    },
    hasEditor: {
      type: Boolean,
      default: true
    },
    isSearcApi: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      params: {}
    }
  },
  created() {},
  mounted() {},
  computed: {},
  watch: {
    remoteParams: {
      handler(val) {
        this.params = val
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    clickRow(event, activeID, rowRecord) {
      this.$emit('clickRow', event, activeID, rowRecord)
    },
    handleSubmit(error, values) {
      // this.params = values
      let params = this.isSearcApi ? { params: values} : values
      this.$refs.table.reload({ params: params })
      this.$emit('handleSubmit', error, values)
    },
    formChange(name) {
      this.$emit('formChange', name)
    },
    tableReload(data) {
      this.$nextTick(() => {
        if (data) {
          this.$refs.table.reload(data)
        } else {
          const values = this.$refs.searchForm.$refs.formTarget.form.getFieldsValue()
          let params = this.isSearcApi ? { params: values} : values
          this.$refs.table.reload({ params: params })
        }
      })
    }
  }
}
</script>

<style></style>
