<template>
  <div>
    <a-modal
      :title="title"
      :visible="visible"
      :width="width"
      :confirm-loading="vLoading"
      :cancel-text="cancelText"
      :ok-text="okText"
      :enlargeable="enlargeable"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <p-query-table
        ref="queryTable"
        :query-items="fromItem"
        :remotep="remote"
        :col-num="colNum"
        :colSpan="colSpan"
        :columns="tableColumns"
        :uniqueKey="uniqueKey"
        :remoteMethod="remoteMethod"
        :remoteUrl="remoteUrl"
        :autoLoad="autoLoad"
        :selectType="selectType"
        :hasExpandForm="hasExpandForm"
        @onSelectedChange="onSelectedChange"
      />
    </a-modal>
  </div>
</template>

<script>
// import { reload } from "../js/url.js";
import PQueryTable from '../../query-table/src/index.vue'
export default {
  name: 'PModalTable',
  components: { PQueryTable },
  model: {
    prop: 'visible',
    event: 'change',
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    // 提交调用的接口地址
    width: {
      // eslint-disable-next-line vue/require-prop-type-constructor
      type: Number | String,
      default: 800,
    },
    // eslint-disable-next-line vue/require-default-prop
    beforeSubmitFn: {
      type: Function,
      default: null,
    },
    okText: {
      type: String,
      default: '确认',
    },
    cancelText: {
      type: String,
      default: '取消',
    },
    // 是否全屏
    enlargeable: {
      type: Boolean,
      default: false,
    },
    // eslint-disable-next-line vue/require-default-prop
    fromItem: {
      type: Array,
      data() {
        return []
      },
    },
    colNum: {
      // eslint-disable-next-line vue/require-prop-type-constructor
      type: Number,
      default: 8,
    },
    colSpan: {
      type: Object,
      default() {
        return { label: 10, wrapper: 12 }
      },
    },
    tableColumns: {
      // 表格列配置
      type: Array,
      default() {
        return []
      },
    },
    uniqueKey: {
      // 唯一键
      type: String,
      default: '',
    },
    remoteMethod: {
      type: String,
      default: null,
    },
    remoteUrl: {
      type: String,
      default: null,
    },
    autoLoad: {
      // 初始自动加载数据
      type: Boolean,
      default: false,
    },
    selectType: {
      // 表格勾选类型
      type: Number,
      default: 2,
    },
    operators: {
      type: Array,
      default() {
        return []
      },
    },
    hasExpandForm: {
      // 是否显示展开和收起
      type: Boolean,
      default: true,
    },
    remote: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    return {
      vLoading: false, // 按钮的等待动画
      remoteParams: {},
      remoteData: {},
      tableData: null,
      selectedRows: [],
      selectedRowKeys: [],
    }
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    handleOk() {
      this.$emit('change', false)
      this.$emit('handleOk', this.selectedRows)
      // if (this.beforeSubmitFn) {
      //   this.verificationFun(this.beforeSubmitFn, values).then((res) => {
      //     this.remoteParams = res;
      //     this.reload();
      //   });
      // } else {
      //   this.remoteParams = values;
      //   this.reload();
      // }
    },
    verificationFun(beforeSubmitFn, values, callback) {
      return new Promise(async (resolve, reject) => {
        const res = await beforeSubmitFn(values)
        if (res) {
          resolve(res)
        } else {
          resolve(values)
        }
      })
    },
    onSelectedChange(data) {
      this.selectedRows = data.rows
    },
    handleCancel() {
      this.$emit('change', false)
      this.$emit('onCancel')
    },
    // 接口调用
    // reload,
  },
}
</script>

<style></style>
