<template>
  <a-config-provider :locale="locale">
    <div class="table-setting">
      <v-search :search-options="searchOptions" @search="search" />
      <v-table
        :list="listOptions.list"
        :head="listOptions.head"
        @optionHandle="optionHandle"
        @changeModalConfig="changeModalConfig"
      />
      <v-page :current="pageOptions.page" :page-options="pageOptions" @pageSearch="pageSearch" />
      <v-modal
        :modal-visible="modalVisible"
        :modal-title="modalTitle"
        :modal-text="modalText"
        :modal-call-back="modalCallBack"
        @closeModal="closeModal"
      ></v-modal>
    </div>
  </a-config-provider>
</template>

<script>
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'

import Search from './components/Search.vue'
import Page from './components/Page.vue'
import Table from './components/Table.vue'
import Modal from './components/Modal.vue'
export default {
  name: 'GdyTable',
  components: {
    'v-search': Search,
    'v-page': Page,
    'v-table': Table,
    'v-modal': Modal
  },
  props: {
    // staticOptions: {
    //   type: Object,
    //   default: () => {
    //     return {}
    //   }
    // },
    searchOptions: {
      type: Array,
      default: () => []
    },
    pageOptions: {
      type: Object,
      default: () => {
        return {}
      }
    },
    listOptions: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      locale: zhCN,
      form: {},
      modalVisible: false,
      modalTitle: '',
      modalText: '',
      modalCallBack: null
    }
  },
  methods: {
    search(form) {
      this.form = form
      this.$emit('search', this.form, 1)
    },
    pageSearch(page) {
      this.$emit('search', this.form, page)
    },
    optionHandle(type, id, status) {
      this.$emit('optionHandle', type, id, status)
    },
    // modal框通用配置
    changeModalConfig(modalTitle, modalText, modalCallBack) {
      console.log(modalTitle, modalText, modalCallBack, 'modalTitle, modalText, modalCallBack')
      this.modalTitle = modalTitle
      this.modalText = modalText
      this.modalCallBack = modalCallBack
      this.modalVisible = true
    },
    // 重置modal框
    closeModal() {
      this.modalVisible = false
      this.modalTitle = ''
      this.modalText = ''
      this.modalCallBack = null
    }
  }
}
</script>

<style lang="less">
@import './style/index.less';
</style>

<style lang="less" scoped>
.table-setting {
  padding: 24px;
}
</style>
