<style>
.eagle-scheme {
  padding: 0px;
}
.eagle-scheme__card {
  border: 1px solid #F5F5F5;
  border-radius: 2px;
  background-color: #fff;
  padding: 10px;
  transition: all .3s ease;
  margin-bottom: 10px;
}
.eagle-scheme__card  .eagle-search {
  padding-top: 20px;
  padding-bottom: 10px;
}
.eagle-scheme__action {
  padding-bottom: 10px;
}
.eagle-scheme__table .eagle-scheme__table-operation {
  display: flex;
  align-items: center;
}
.eagle-scheme__table .eagle-scheme__table-btn:not(:first-child) {
  padding-left: 10px;
  margin-left: 0px;
}
.eagle-scheme__pagination {
  text-align: right;
  padding-top: 10px;
}
</style>

<template>
  <div class="eagle-scheme">
    <div class="eagle-scheme__card">
      <eagle-search :list="_searchList" v-model="searchModel" @search="handleQuery">
        <template v-for="item in _searchList">
          <slot v-if="$scopedSlots[`search-${item.key}`] || $slots[`search-${item.key}`]" :name="`search-${item.key}`" :slot="item.key" :model="searchModel"></slot>
        </template>
      </eagle-search>
    </div>
    <div class="eagle-scheme__action">
      <el-button type="primary" size="small" @click="showDialog">新增</el-button>
    </div>
    <div class="eagle-scheme__table">
      <eagle-table :list="_tableList" :tableProps="tableProps" :value="tableData">
        <template v-if="$scopedSlots['table-append'] || $slots['table-append']">
          <slot name="table-append" slot="$append"></slot>
        </template>
        <template v-if="$scopedSlots['table-operation'] || $slots['table-operation']">
          <slot name="table-operation" slot="$operation"></slot>
        </template>
        <el-table-column v-else slot="$operation" prop="$operation" label="操作" min-width="140" fixed="right">
          <div class="eagle-scheme__table-operation">
            <slot v-if="$scopedSlots['table-operation-btn'] || $slots['table-operation-btn']" name="table-operation-btn"></slot>
            <el-button class="eagle-scheme__table-btn" type="text" icon="el-icon-view" title="查看"></el-button>
            <el-button class="eagle-scheme__table-btn" type="text" icon="el-icon-edit" title="编辑" @click="showDialog"></el-button>
            <eagle-confirm class="eagle-scheme__table-btn" title="是否删除？">
              <el-button type="text" icon="el-icon-delete" title="删除"></el-button>
            </eagle-confirm>
            <slot v-if="$scopedSlots['table-operation-btn-append'] || $slots['table-operation-btn-append']" name="table-operation-btn-append"></slot>
          </div>
        </el-table-column>
      </eagle-table>
      <div class="eagle-scheme__pagination">
        <el-pagination size="small" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
          :page-size="pageSize" :total="totalCount" v-bind="paginationProps"></el-pagination>
      </div>
    </div>
    <el-dialog :title="dialogProps.title || '标题'" :visible.sync="dialogVisible" v-bind="dialogProps">
      <eagle-form :list="_formList" v-model="formModel" :formProps="formProps" :span="12" @submit="handleSubmit" @cancel="handleCancel">
        <template v-for="key in formGroupSlotsKeys">
          <slot v-if="$scopedSlots[`form-${key}`] || $slots[`form-${key}`]" :name="`form-${key}`" :slot="key" :model="formModel"></slot>
        </template>
        <template v-for="item in _formList">
          <slot v-if="$scopedSlots[`form-item-${item.key}`] || $slots[`form-item-${item.key}`]" :name="`form-item-${item.key}`" :slot="`item-${item.key}`" :model="formModel"></slot>
        </template>
      </eagle-form>
    </el-dialog>
  </div>
</template>

<script>
import { generateListSpace } from './parser';

export default {
  name: 'Scheme',
  props: {
    // 配置列表
    list: Array,
    // 搜索表单配置
    searchList: Array,
    // 表单配置
    formList: Array,
    // 表格配置
    tableList: Array,
    // 表格参数
    tableProps: {
      type: Object,
      default() {
        return { size: 'small', border: true }
      }
    },
    // 表单参数
    formProps: {
      type: Object,
      default() {
        return { size: 'small', 'label-width': '90px' }
      }
    },
    // 分页参数
    paginationProps: {
      type: Object,
      default() {
        return { 'page-sizes': [10, 20, 50], layout: 'total, sizes, prev, pager, next, jumper' }
      }
    },
    // 弹出框参数
    dialogProps: {
      type: Object,
      default() {
        return { width: '65%' }
      }
    }
  },
  data() {
    return {
      // 搜索表单配置
      _searchList: [],
      // 搜索表单值
      searchModel: {},
      // 表单配置
      _formList: [],
      // 表单值
      formModel: {},
      // 表格配置
      _tableList: [],
      // 当前页
      currentPage: 1,
      // 每页最大数据量
      pageSize: 10,
      // 数据总量
      totalCount: 0,
      // 弹出框状态
      dialogVisible: false,
      // 表格数据
      tableData: [
        { name: '赵伯', code: 'U00001', type: 'admin', sort: 0, status: 'active' },
        { name: '钱仲', code: 'U00002', type: 'user', sort: 1, status: 'active' },
        { name: '孙叔', code: 'U00003', type: 'user', sort: 2, status: 'active' },
        { name: '李季', code: 'U00004', type: 'user', sort: 3, status: 'active' },
        { name: '赵伯', code: 'U00001', type: 'admin', sort: 0, status: 'active' },
        { name: '钱仲', code: 'U00002', type: 'user', sort: 1, status: 'active' },
        { name: '孙叔', code: 'U00003', type: 'user', sort: 2, status: 'active' },
        { name: '李季', code: 'U00004', type: 'user', sort: 3, status: 'active' },
        { name: '赵伯', code: 'U00001', type: 'admin', sort: 0, status: 'active' },
        { name: '钱仲', code: 'U00002', type: 'user', sort: 1, status: 'active' },
        { name: '孙叔', code: 'U00003', type: 'user', sort: 2, status: 'active' },
        { name: '李季', code: 'U00004', type: 'user', sort: 3, status: 'active' },
        { name: '赵伯', code: 'U00001', type: 'admin', sort: 0, status: 'active' },
        { name: '钱仲', code: 'U00002', type: 'user', sort: 1, status: 'active' },
        { name: '孙叔', code: 'U00003', type: 'user', sort: 2, status: 'active' },
        { name: '李季', code: 'U00004', type: 'user', sort: 3, status: 'active' },
      ]
    };
  },
  created() {
    if (this.list instanceof Array) { // 如果有总配置列表，则根据总配置列表生成作用域数据
      const { search = [], form = [], table = [] } = generateListSpace(this.list);
      this._searchList = search;
      this._formList = form;
      this._tableList = table;
    } else { // 没有总配置列表时，单独传入作用域列表
      this._searchList = this.searchList || [];
      this._formList = this.formList || [];
      this._tableList = this.tableList || [];
    }
    this.totalCount = this.tableData.length;
  },
  mounted() {
    console.log(this.$scopedSlots);
    console.log(this.$slots);
    console.log(this.formGroupSlotsKeys);
    console.log(this.formGroupSlotsKeys);
  },
  computed: {
    formGroupSlotsKeys() {
      const keys = [...Object.keys(this.$scopedSlots), ...Object.keys(this.$slots)];
      console.log(keys);
      return keys.filter(key => key.indexOf('form-group') > -1).map(key => key.substr(5));
      // return this.$scopedSlots.filter(item => item.);
      // $scopedSlots[`form-group-${item.key}`] || $slots[`form-group-${item.key}`]
    }
  },
  methods: {
    // 查询数据
    handleQuery(param) {
      console.log({
        param,
        searchModel: this.searchModel,
        currentPage: this.currentPage,
        pageSize: this.pageSize
      });
    },
    // 改变每页总数大小
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.handleQuery();
    },
    // 改变当前页数
    handleCurrentChange(val) {
      this.currentPage = val;
      this.handleQuery();
    },
    // 表单提交
    handleSubmit(param) {
      console.log({
        param,
      });
    },
    // 表单取消
    handleCancel() {
      this.formModel = {};
      this.hideDialog();
    },
    // 显示弹出框
    showDialog() {
      this.dialogVisible = true;
    },
    // 隐藏弹出框
    hideDialog() {
      this.dialogVisible = false;
    },
  }
};
</script>