<template>
  <div class="el-manager-ui" v-loading="loading">
    <div v-if="title" class="el-manager-ui__title el-manager-ui__border">
      {{title}}
      <div class="el-manager-ui__title--tabList">
        <slot name="tabList"></slot>
      </div>
      <i v-if="showClose" class="el-icon-close close" @click="$router.go(-1)"></i>
    </div>
    <div v-if="showQuery" class="el-manager-ui__search_form el-manager-ui__border">
      <el-form
        ref="form"
        :label-position="labelPosition"
        :model="queryModel"
        :label-width="labelWidth + 'px'"
        :rules="rules"
      >
        <div class="el-manager-ui__searchHeader">
          <span>查询条件</span>
          <div class="el-manager-ui__searchHeader--btns">
            <!-- 展开收起按钮 -->
            <el-button
              v-if="Object.keys(queryItems).length > spreadThreshold"
              :icon="collapseVisible?'el-icon-caret-top':'el-icon-caret-bottom'"
              @click="collapseVisible=!collapseVisible"
            >{{collapseVisible?'收起':'展开'}}</el-button>
            <!-- 查询按钮 -->
            <el-button 
              icon="el-icon-search"
              v-if="showQueryBtn"
              @click="$emit('searchClick')">查询
            </el-button>
            <!-- 重置按钮 -->
            <el-button 
              icon="el-icon-refresh-left"
              @click="resetForm">重置
            </el-button>
          </div>
        </div>
        <div class="el-manager-ui__searchBox">
          <form-ui-items 
            :queryItems="queryDefaultItems"
            :queryModel="queryModel">
            <template :slot="slotItem.key" v-for="(slotItem,index) in queryDefaultSlotItems">
              <slot :name="slotItem.key"></slot>
            </template>
          </form-ui-items>
          <!-- 超过阈值的条件进行隐藏 -->
          <template v-if="queryItems.length > spreadThreshold ">
            <el-collapse-transition>
              <div v-show="collapseVisible">
                <form-ui-items 
                  :queryItems="querySpreadItems"
                  :queryModel="queryModel">
                  <template :slot="slotItem.key" v-for="(slotItem,index) in querySpreadSlotItems">
                    <slot :name="slotItem.key"></slot>
                  </template>
                </form-ui-items>
              </div>
            </el-collapse-transition>
          </template>
        </div>
      </el-form>
    </div>
    <div class="el-manager-ui__tableInfo el-manager-ui__border">
      <el-row class="el-manager-ui__tableBox">
        <div class="el-manager-ui__tableBox--tableTabs" v-if="showTableTools">
            <slot name="tableTools"></slot>
        </div>
        <div>
          <el-table 
            :data="tableData"
            border
            stripe
            :header-cell-style="{fontSize:'13px'}"
            @selection-change="(val)=>$emit('selection-change',val)"
          >
            <template v-for="(item,index) in columnItems">
              <template v-if="item.render">
                <el-table-column
                  :key="index"
                  :prop="item.prop || ''"
                  :label="item.label || ''"
                  :width="item.width ? item.width + 'px' : ''"
                  :fixed="item.fixed || false"
                  align="center"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">
                    <slot :name="item._key" :scope="scope"></slot>
                  </template>
                </el-table-column>
              </template>
              <template v-else>
                <el-table-column
                  :key="index"
                  :type="item.type || ''"
                  :prop="item.prop || ''"
                  :label="item.label || ''"
                  :width="item.width ? item.width + 'px' : ''"
                  :fixed="item.fixed || false"
                  :align="item.type == 'selection' ? '' : 'center'"
                  show-overflow-tooltip
                ></el-table-column>
              </template>
            </template>
          </el-table>
        </div>
        <el-pagination v-if="showPagination"
          @current-change="handleCurrentChange"
          :current-page="pagination.current"
          @size-change="handleSizeChange"
          :page-sizes="[10, 50, 100]"
          :page-size="pagination.size"
          layout="total,sizes, prev, pager, next,jumper"
          :total="pagination.total"
        ></el-pagination>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ManagerUi',
  componentName: 'ManagerUi',
  provide() {
    return {
      formUi: this
    };
  },
  data() {
    return {
      collapseVisible: false,
      height: 0,
      rowHeight: 55
    };
  },
  created() {
    // 若页面带默认查询条件，如果查询条件被隐藏了，则自动展开

    let num = [];
    for (let key in this.queryModel) {
      if (
        this.queryModel[key] !== '' &&
        this.queryModel[key] !== [] &&
        this.queryModel[key] !== null
      ) {
        num.push(key);
      }
    }
    let nowkey = 0;
    num.map(item => {
      this.queryItems.map((res, index) => {
        if (item === res.key) {//eslint-disable-line
          if (index > nowkey) {
            nowkey = index;
          }
        }
      });
    });
    if (nowkey > this.spreadThreshold - 1) {
      this.collapseVisible = true;
    }

    setTimeout(() => {
      this.queryItems.map(item => {
        if (this.$route.params[item.key]) {
          if (item.type === 'treeSelect') {
            this.$refs[item.ref][0].setCheckedKeys([
              this.$route.params[item.key]
            ]);
          }
        }
      });
    }, null);
  },
  props: {
    rules: {
      // 表单校验规则
      type: Object,
      default: () => {}
    },
    showClose: {
      type: Boolean,
      default: false
    },
    showTableTools: {
      type: Boolean,
      default: false
    },
    loading: {
      // 全局loading
      type: Boolean,
      default: false
    },
    title: {
      // 标题
      tyle: String,
      default: ''
    },
    // -------搜索相关配置--------
    labelPosition: {
      // 表单域标签的位置
      type: String,
      default: 'right'
    },
    labelWidth: {
      // 表单域标签的宽度
      type: Number,
      default: 130
    },
    showQuery: {
      // 是否有查询框
      type: Boolean,
      default: true
    },
    showPagination: {
      // 是否有查询框
      type: Boolean,
      default: true
    },
    queryModel: {
      // 查询表单对应的数据
      type: Object,
      default: () => {}
    },
    spreadThreshold: {
      type: Number,
      default: 4
    },
    queryItems: {
      // 查询表单渲染数据
      type: Array,
      default: () => []
    },
    showQueryBtn: {
      // 查询的按钮控制
      type: Boolean,
      default: true
    },
    // 查询所需要的一些数据----------------------
    staticData: {
      // 查询所需要的一些数据
      type: Object,
      default: () => {}
    },
    // table相关数据
    columnItems: {
      type: Array,
      default: () => []
    },
    tableData: {
      type: Array,
      default: () => []
    },
    pagination: {
      type: Object,
      default: () => {
        return {
          current: 1,
          size: 10,
          total: 0
        };
      }
    }
  },
  computed: {
    queryDefaultItems() {
      return this.queryItems.filter((item, index) => index <= this.spreadThreshold - 1);
    },
    querySpreadItems() {
      return this.queryItems.filter((item, index) => index > this.spreadThreshold - 1);
    },
    queryDefaultSlotItems() {
      return this.queryDefaultItems.filter((item, index) => item.type === 'slot');
    },
    querySpreadSlotItems() {
      return this.querySpreadItems.filter((item, index) => item.type === 'slot');
    }
  },
  mounted() {
    this.height = 500; // 动态设置高度
  },
  methods: {
    // 分页当前页改变时触发函数
    handleCurrentChange: function(currentPage) {
      this.pagination.current = currentPage;
      this.$emit('search');
    },
    // 分页每页显示数目改变时触发函数
    handleSizeChange: function(size) {
      this.pagination.size = size;
      this.$emit('search');
    },
    // 查询重置
    resetForm() {
      this.queryItems.map(item => {
        if (item.type === 'treeSelect') {
          this.$refs[item.ref][0].setCheckedKeys([]); // 取消勾选节点
        }
      });
      this.$refs.form.resetFields();
      this.$emit('resetForm');
    },
    // validate methods
    validate(callback) {
      let flag = null;
      this.$refs['form'].validate(valid => {
        if (valid) {
          flag = true;
        } else {
          flag = false;
        }
      });
      callback.call(this, flag);
    },
    clearForm() {
      this.$refs['form'].resetFields();
    }
  }
};
</script>