<template>
  <div class="table_total">
    <div class="table_header">
      <!-- <p>单表</p>
      <el-divider></el-divider> -->
      <div class="table_headerBtun" v-if="queryData.buttonList">
        <el-button type="primary" plain @click="headerBtn(item)" v-for="(item,index) in queryData.buttonList.split('')" :key="index">{{item | btnConversion}}</el-button>
      </div>
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" >
        <dynamic-form :ref="item.columnName" :config="queryParams" @inputs = "changeFn" :formConfig="item" v-for="(item,index) in queryData.queryList" :key='index' />
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 内容 -->
    <div class="table_nav">
      <el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column :label="item.columnComment" align="center" :prop="item.columnName" v-for="(item,index) in queryData.tableHeadList" :key="index"/>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNo"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>

</template>

<script>
  import {
    getTableQuery,
    getQueryList,
    addbjectSave,
    getByTableName,
    getObject
  } from '@/api/system/table.js'
  export default {
    name: "index",
    data() {
      return {
        open: false,
        // 遮罩层
        loading: true,
        total: 0,
        // 岗位表格数据
        postList: [],
        // 显示搜索条件
        showSearch: true,
        activeNames: ['1'],
        title: '单表1',
        queryData: {},
        form: {
          table: 'obj_test',
          objId: -1,
          fixedData: {}
        },
        // 查询参数
        queryParams: {
          table: 'obj_test',
          pageNo: 1,
          isUi:false,
          pageSize: 10,
          orderBy: 'create_time desc',
          fixedData: {}
        }
      };
    },
    filters:{
      btnConversion(val) {
        switch(val){
          case 'A':
          return '新增';
          case 'M':
          return '修改';
          case 'D':
          return '删除';
          case 'Q':
          return '查询';
          case 'S':
          return '提交';
          case 'U':
          return '反提交';
          case 'I':
          return '导入';
          case 'E':
          return '导出';
        }
      }
    },
    mounted() {
      this.init();
      this.getList();
    },
    methods: {
      headerBtn(item) {
        switch(item) {
          case 'A': {
            this.$router.push('/system/table')
            return
          }
          case 'M': {
            return
          }
          case 'D': {
            return
          }
          case 'Q': {
            return
          }
          case 'S': {
            return
          }
          case 'U': {
            return
          }
          case 'E': {
            return
          }
        }
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length!=1
        this.multiple = !selection.length
      },
      changeFn(obj) {
        for(let key in obj){
          this.queryParams.fixedData[key] = obj[key]
        }
      },
      // 表单重置
      reset() {
        this.form = {
          table: 'obj_test',
          objId: '',
          fixedData: {},
        };
        this.resetForm("form");
      },
      resetQuery() {

      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.grabFn(this.queryData.queryList,this.queryParams.fixedData)
        this.getList();
      },
      // 抓取参数
      grabFn(arr,parForm) {
        for(let item of arr){
          if(item.htmlType == 'checkbox' || item.htmlType == 'imageUpload' || item.htmlType == 'fileUpload'){
            if(this.$refs[item.columnName][0].config.length){
              console.log(this.$refs[item.columnName][0].config)
              parForm[item.columnName] = this.$refs[item.columnName][0].config
            }
          } else{
            console.log(this.$refs[item.columnName][0].config[item.columnName])
            parForm[item.columnName] = this.$refs[item.columnName][0].config[item.columnName]
          }
        }
      },
      getList() {
        getQueryList(this.queryParams).then(response => {
          this.postList = response.data.rows;
          this.total = response.data.total;
          this.loading = false;
        });
      },
      init() {
        getTableQuery({
          table: 'obj_test',
        }).then(res => {
          let data = res.data
          this.queryData = data
        })
      },
      handleChange(val) {
        console.log(val);
      }
    },
  };
</script>


<style lang="scss">
  .table_header {
    .el-divider--horizontal {
      margin-top: 16px;
    }
    .table_headerBtun{
      margin-bottom: 20px;
    }
  }

  .table_nav {
    .el-collapse-item__wrap {
      border-bottom: 0;
    }

    .el-collapse-item__header {
      border-bottom: 0;
      font-size: 15px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #3C8DBC;
      line-height: 36px;
    }

    .el-form-item__content {
      width: 55%;
    }

    .el-collapse {
      border-top: 0;
    }
  }
</style>



<style scoped lang="scss">
  .app-main {
    // background-color: #eef0ff !important;
  }

  .table_total {
    background-color: #eef0ff;
    min-height: calc(100vh - 94px);
    padding: 20px;

    // 头部
    .table_header {
      background-color: #fff;
      border-radius: 6px;
      padding: 23px 23px 0px;
      margin-bottom: 20px;

      p {
        font-size: 15px;
        font-weight: bold;
        color: #3C8DBC;
        line-height: 36px;
      }

      p::before {
        content: "";
        display: block;
        width: 18px;
        height: 8px;
        background: #3C8DBC;
        border-radius: 3px;

      }
    }

    // 内容
    .table_nav {
      background-color: #fff;
      border-radius: 6px;
      padding: 23px;
    }
  }

  p {
    margin: 0;

  }
</style>
