<template>
  <div class="boxs">
    <el-table :data="data" border height="700">
      <!-- <el-table-column
        v-for="(item,key) in columns"
        :label="item.label"
        :prop="item.field"
        :key="'c'+key"
        /> -->
      <slot />
      <el-table-column
        label="操作"
      >
        <template slot-scope="props">
          <el-button
            v-for="(item,key) in componentOptions"
            :key="'w'+key"
            :type="item.btnType"
            size="mini"
            @click=" confirmFrom(item,props.row)"
          >
            {{ item.label }}
          </el-button>
          <el-button
            v-for="(item,key) in confirmOptions"
            :key="'ww'+key"
            :type="item.btnType"
            size="mini"
            @click="confirmData(item,props.row)"
          >
            {{ item.label }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      v-for="(item,key) in componentOptions"
      :key="'d'+key"
      :visible.sync="item.show"
      :title="item.label"
      @opened="tahtInitDialog"
    >
      <slot :name="item.label" />
    </el-dialog>
  </div>
</template>
<script>
import { de } from 'date-fns/locale'
import { EventBus } from './basetableEvent'
export default {
  name: 'Basetable',
  props: {
    api:
        {
          type: Function,
          required: true
        },
    initDialog: {
      type: Function
    },
    searchDto: {
      type: Object,
      default: function() {
        return {
          PageIndex: 1,
          PageSizes: [20, 50, 100, 200],
          PageSize: 20
        }
      }
    },
    searchQuery:
        {
          type: Object
        },
    componentOptions: {
      type: Array,
      default: () => []
    },
    confirmOptions: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      data: [],
      total: 0,
      option: {},
      operationRow: {}
    }
  },
  created() {
    this.seracrh()
  },
  mounted() {
    EventBus.$on('reloadPager', () => {
      this.$nextTick(() => {
        this.seracrh()
        if (this.option && this.option.show) { this.option.show = false }
      })
    })
  },
  methods: {
    // 搜索方法
    seracrh(index) {
      if (index && index > 0) { this.searchDto.PageIndex = index }
      if (!this.searchDto.PageIndex) { this.searchDto.PageIndex = 1 }
      if (!this.searchDto.PageSize) { this.searchDto.PageSize = 20 }
      if (!this.searchDto.PageSizes) { this.searchDto.PageSizes = [20, 50, 100, 200] }
      if (this.searchQuery) {
        for (var item in this.searchQuery) {
          this.searchDto[item] = searchQuery[item]
        }
      }
      this.api(this.searchDto).then(res => {
        this.data = res.Result
        this.total = res.TotalCount
      })
    },
    confirmData(option, row) {
      this.$confirm(option.confirmContent, option.label).then(response => {
        option.confirmApi(row).then(res => {
          this.seracrh()
        })
      })
    },
    confirmFrom(option, row) {
      option.show = true
      this.option = option
      this.operationRow = JSON.parse(JSON.stringify(row))
    },
    tahtInitDialog() {
      if (this.initDialog) {
        this.initDialog(this.option, this.operationRow, this.$parent)
      }
    }
  }
}
</script>
<style scoped>
    .boxs{margin-top:10px;}
</style>
