<template>
  <div v-loading.fullscreen.lock="fullscreenLoading" element-loading-spinner="page-loading" class="app-container component-search-table">
    <div class="component-search-table-container">
      <FormRender
        ref="formRenderRef"
        v-model="formData"
        :schema="formSchema"
        :config="{ labelWidth: '75px', size: 'small', gutter: 20 }"
        class="component-search-table-form"
        @submit="formData => handleSubmit(formData)"
      />
      <template slot="header">
        <slot name="slot-operation-extend" />
      </template>
      <TableRender
        :schema="tableSchema"
        :data="list"
        :pagination="pagination"
        class="component-search-table-table"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
        <template v-for="name in slotRender" v-slot:[name]="scope">
          <slot :name="name" v-bind="scope" />
        </template>
      </TableRender>
    </div>
  </div>
</template>

<script>
import FormRender from '@/components/FormRender/col'
import TableRender from '@/components/TableRender'
import Hooks, { BEFORE_REQUEST } from './hooks'
import './index.scss'

export default {
  name: 'SearchTable',
  components: { FormRender, TableRender },
  props: {
    // 表单渲染schema
    formSchema: {
      type: Object,
      default: () => ({})
    },
    // 表单配置
    formConfig: {
      type: Object,
      default: () => ({})
    },
    // 表格渲染schema
    tableSchema: {
      type: Array,
      default: () => ({})
    },
    // 分页配置
    paginationConfig: {
      type: Object,
      default: () => ({
        pageSizes: [10, 20, 50],
        layout: 'total, prev, pager, next, sizes'
      })
    },
    // 是否立即执行
    immediately: {
      type: Boolean,
      default: true
    },
    // 表单的值
    value: {
      type: Object,
      default: () => ({})
    },
    listName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      fullscreenLoading: false,
      list: [],
      formData: {
        ...this.value
      },
      pagination: {
        total: 0,
        currentPage: 1,
        pageSize: 10
      }
    }
  },
  computed: {
    title() {
      if (this.listName) {
        return this.listName
      }
      return this.$route.meta && this.$route.meta.title || ''
    },
    /**
     * 需要渲染的slot
     */
    slotRender() {
      return this.tableSchema ? this.tableSchema.filter(schema => schema.slotRender).map(schema => schema.slotRender) : []
    }
  },
  mounted() {
    // 如果配置了立即执行，则页面渲染后立即执行submit方法
    this.$nextTick(async() => {
      // 如果是需要立即请求接口
      if (this.immediately) {
        await this.handleSubmit(this.formData)
      }
    })
  },
  methods: {
    /**
     * 校验方法
     */
    refresh() {
      // 开始校验
      this.handleSubmit(this.formData, this.pagination.currentPage)
    },

    /**
     * 点击了提交方法
     */
    handleSubmit(formData = {}, currentPage = 1) {
      // 接口请求的入参
      const requestParams = {
        // 表单输入的数据
        ...formData,
        // 当前页码
        currentPage,
        // 每页数量
        pageSize: this.pagination.pageSize
      }
      // 接口请求前处理数据
      Hooks.tap(BEFORE_REQUEST, requestParams)
      // 全局锁定
      this.fullscreenLoading = true
      // 记录当前页码
      this.pagination.currentPage = currentPage
      // 开始提交
      this.$emit('submit', requestParams, (list, total) => {
        // 记录当前页码
        this.list = list
        // 记录当前总页码
        this.pagination.total = total
        // 取消页面锁定状态
        this.fullscreenLoading = false
      })
    },

    /**
     * 监听大小变化
     * @param pageSize 页码大小
     */
    handleSizeChange(pageSize) {
      // 记录当前页码大小
      this.pagination.pageSize = pageSize
      // 开始校验输入数据
      this.handleSubmit(this.formData)
    },

    /**
     * 当前页码发生变化
     */
    handleCurrentChange(currentPage) {
      // 校验表单输入的数据
      this.handleSubmit(this.formData, currentPage)
    }
  }
}
</script>
