<template>
  <div>
    <el-dialog :title="title" :visible.sync="open" :close-on-click-modal="false" width="1200px" append-to-body destroy-on-close>
      <BaseSearch
        :defaultValue="queryParams"
        :queryOptions="queryOptions"
        @query="handleQuery"
      />

      <BaseTable
        v-loading="loading"
        :tableData="tableData"
        :tableOptions="tableOptions"
        @chooseChange="chooseChange"
      >
        <template v-for="item in tableSolts" :slot="item.prop" slot-scope="scope">
          <slot :name="item.prop" :row="scope.row" />
        </template>
      </BaseTable>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="pages.pageNum"
        :limit.sync="pages.pageSize"
        @pagination="getList"
      />

      <div slot="footer" class="dialog-footer">
        <el-button @click="open = false">取 消</el-button>
        <el-button type="primary" @click="chooseEnd">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import BaseSearch from '@/views/gateway/components/BaseSearch';
import BaseTable from '@/views/gateway/components/BaseTable';
export default {
  components: {
    BaseSearch,
    BaseTable,
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    queryParams: {
      type: Object,
      default: () => {
        return {}
      }
    },
    queryOptions: {
      type: Array,
      default: () => {
        return []
      }
    },
    tableOptions: {
      type: Array,
      default: () => {
        return []
      }
    },
    request: {
      type: Function,
    }
  },
  computed: {
    open: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    },
    tableSolts() {
      return this.tableOptions.filter((item) => item.type === 'slot');
    },
  },
  data() {
    return {
      loading: false,
      tableData: [],
      total: 0,
      pages: {
        pageNum: 1,
        pageSize: 10,
      },
      multipleSelection: []
    }
  },
  created() {
    this.getList();
    console.log(this.tableSolts)
  },
  methods: {
    async getList(param) {
      try {
        this.loading = true;
        const params = {
          ...this.queryParams,
          ...this.pages,
          ...param,
        }
        const { code, rows, total } = await this.request(params);
        if (code === 200) {
          this.tableData = rows;
          this.total = total;
        }
        this.loading = false;
      } catch (error) {
        this.loading = false;
      }

    },
    handleQuery(form) {
      console.log(form)
      this.getList(form);
    },
    chooseChange(rows) {
      this.multipleSelection = rows;
    },
    chooseEnd() {
      this.$emit('chooseEnd', this.multipleSelection);
      this.open = false;
    },
  }
}
</script>

<style lang="scss" scoped>

</style>