<template>
  <div class="bg-box">
    <slot name="self-select-btn"></slot>
    <m-table
      :tableConfig="tableConfig"
      :tableHead="tableHead"
      :tableData="tableData"
      :pagination="params"
    />
  </div>
</template>

<script>
import mTable from './mTable.vue'
import cAction from '@action'

export default {
  name: 'mPage',
  components: { mTable },
  props: {
    /**
     * 控制列表的 一些属性
     * obj.border 边框存在
     * obj.size 控制table尺寸
     */
    tableConfig: { type: Object, require: true },
    /**
     * obj.prop 对应接口中的那个字段
     * obj.label 这一列的表头名称
     * obj.width 这一列的最小宽度
     * obj.fix 列过多，屏幕过窄时，这一列是否跟着滚动
     * obj.goObject 跳转到其他页面
     * obj.goObject.routerName 其他页面对应的routes中设置的name值
     */
    tableHead: { type: Array, require: true },
    /* 接口返回的数据值 */
    tableData: { type: Array, require: true },
    /**
     * obj.keywords 搜索时，对应关键字 字段
     * obj.curPage 显示到第几页
     * obj.pageSize 当前页显示最大条数
     * obj.total 数据总个数
     */
    params: { type: Object, require: true },
    /**
     * 这个参数很重要，他定义了 回调执行方式，传参方式，
     * obj.paramsFn 在调用接口前，对接口参数进行处理, 返回要传的参数对象
     * obj.nameAPI 对应的接口名
     * obj.actionClass 对应的action类
     * obj.nameExcel 对应的导出Excel接口名
     */
    objFn: { type: Object, require: true }
  },
  data () { return { isWatch: true } },
  methods: {
    getList () {
      const loading = this.$loading({ lock: true, text: '数据加载中，请稍后。。。', background: 'rgba(0, 0, 0, 0.7)' })
      const obj = this.objFn.paramsFn(this)
      while (this.tableData.length) {
        this.tableData.pop()
      }
      cAction[this.objFn.actionClass][this.objFn.nameAPI](obj)
        .then(data => {
          // this.tableData = []
          this.objFn.callback(this, data)
        }).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
    }
  },
  beforeMount () {
    this.getList()
  },
  watch: {
    /* 解决 赋值后 会多请求一次接口问题 */
    'params.total': {
      handler () {
        this.isWatch = false
      },
      immediate: true
    },
    params: {
      handler () {
        if (this.isWatch) {
          this.getList()
        } else {
          this.isWatch = true
        }
      },
      deep: true
    },
    'objFn.paramsFn': {
      handler () {
        this.getList()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.bg-box {
  background: #fff;
  overflow: hidden;
}
</style>
