<template>
  <div class="component-search-table">
    <div class="component-search-table-container">
      <div class="component-search-table-nav-title">{{ title }}</div>
      <div class="component-search-table-form">
        <el-form ref="formRef" :model="value" label-position="left" size="small">
          <el-row :gutter="12">
            <slot name="slot-form" />
            <el-col :span="6">
              <div class="component-search-table-btn-wrap">
                <el-button :loading="loading" type="primary" icon="el-icon-search" class="component-search-table-button" @click="handleSubmit()">查询</el-button>
                <el-button class="component-search-table-button clear" @click="handleReset"><i class="component-search-table-icon-clear" />清除</el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="component-search-table-table">
        <div class="component-search-table-action-bar">
          <div class="title">{{ title }}</div>
          <div class="action-bar">
            <slot name="slot-action-bar" />
          </div>
        </div>
        <slot name="slot-replace-table">
          <el-table ref="tableRender" :data="list">
            <slot name="slot-table" />
          </el-table>
          <el-pagination
            v-show="total > 0"
            :current-page="currPage"
            :page-sizes="[10, 20, 50]"
            :page-size="pageSize"
            :total="total"
            layout="total, prev, pager, next, sizes"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </slot>
      </div>
    </div>
  </div>
</template>

<script>
import './index.scss'

export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    value: {
      type: Object,
      default: () => ({})
    },
    // 是否立马请求接口
    immediately: {
      type: Boolean,
      default: true
    }
  },

  data() {
    return {
      loading: false,
      list: [],
      total: 0,
      currPage: 1,
      pageSize: 20
    }
  },

  mounted() {
    this.immediately && this.handleSubmit()
  },

  methods: {
    /**
     * 提交方法
     */
    async handleSubmit(currPage = 1) {
      try {
        await this.$refs.formRef.validate()
      } catch (error) {
        console.error('校验失败：', error)
        return
      }
      // 展示loading框
      this.loading = true
      this.currPage = currPage
      // 取出总书记，每页条数以及每页展示总数
      const { value, pageSize } = this
      // 3s后如果没请求到接口也取消回调
      const timer = setTimeout(() => {
        this.loading = false
      }, 3000)
      // 提交方法
      this.$emit(
        'submit',
        { ...value, currPage, pageSize },
        ({ list, totalCount }) => {
          clearTimeout(timer)
          this.loading = false
          this.list = list
          this.total = totalCount
        }
      )
    },

    /**
     * 每页展示条数改变方法
     * @param pageSize 当前每页展示条数
     */
    handleSizeChange(pageSize) {
      // 记录当前每页展示条数
      this.pageSize = pageSize
      // 开始提交
      this.handleSubmit()
    },

    /**
     * 页码变化方法
     * @param currPage 当前页码
     */
    handleCurrentChange(currPage) {
      this.handleSubmit(currPage)
    },

    /**
     * 点击重置方法
     */
    handleReset() {
      // 将数据浅拷贝
      const formData = { ...(this.value || {}) }
      // 将所有值清空
      Object.keys(formData).forEach(key => {
        // 如果当前是数组
        if (formData[key] instanceof Array) {
          formData[key] = []
        } else {
          formData[key] = ''
        }
      })
      // 开始双向绑定
      this.$emit('input', formData)
      // 重置数据
      this.$emit('reset')
    }
  }
}
</script>
