<template>
    <div class="app-container">
    <el-row :gutter="5">
    <el-col :span="22" :xs="24">
        <el-card>
          <div slot="header" class="clearfix">
            <span>综合查询</span>
          </div>
          <div>
              <el-form :rules="rules" ref="form" inline :model="form" label-width="110px" style="width:80%">
                <el-form-item label="请选择表名：" prop="tableName">
                  <el-select v-model="form.tableName" @change="getColumnsInfo" clearable filterable placeholder="请选择表名：">
                    <el-option
                      v-for="item in tables"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="单条件筛选：">
                  <el-select v-model="form.field" style="margin-right:3%;" clearable filterable placeholder="请选择单字段筛选的字段：">
                    <el-option
                      v-for="(index,item) in tmpfields"
                      :key="index"
                      :label="item"
                      :value="item">
                    </el-option>
                  </el-select>
                  <el-select v-model="form.logic" style="width:16%;margin-left:2%;margin-right:2%;" clearable filterable>
                    <el-option
                      v-for="item in logics"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                  <el-input placeholder="请填写单字段筛选值:" v-model="form.info1" style="width:40%"></el-input>
                </el-form-item>
                <el-form-item label="范围筛选：">
                  <el-input v-model="form.info2" style="width:23%;margin-right:2%;"></el-input><span style="margin-right:1%;font-weight:bold">≤</span>
                  <el-select v-model="form.field2" style="margin-right:2%;" clearable filterable placeholder="请选择范围筛选字段：">
                    <el-option
                      v-for="(index,item) in tmpfields"
                      :key="index"
                      :label="item"
                      :value="item">
                    </el-option>
                  </el-select>
                  <span style="margin-right:1%;font-weight:bold">≤</span><el-input v-model="form.info3" style="width:23%"></el-input>
                </el-form-item>
                <el-form-item style="width:40%">
                  <el-button type="primary" icon="el-icon-search" @click="search('form')" :loading="searchtnloading">&nbsp;查询&nbsp;</el-button>
                <el-button type="primary" icon="el-icon-document" @click="GetExport" :loading="exportBtnLoading">&nbsp;导出&nbsp;</el-button>
                <el-button type="primary" icon="el-icon-refresh-right" @click="resetForm" >&nbsp;重置&nbsp;</el-button>
                </el-form-item> 
              </el-form>
              <el-table
                :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                v-loading="loading"
                stripe
                border
                lazy
                style="width: 100%">
                <el-table-column 
                v-for="(index,item) in fileds"
                :key="index"
                :label="item"
                :prop="index"
                :show-overflow-tooltip="true">
                </el-table-column>
              </el-table>
              <div class="pagination"><el-pagination
                    @size-change="handleSizeChange"
                    @current-change="current_change"
                    :current-page="currentPage"
                    :page-sizes="pageSizes"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                  </el-pagination>
                </div>
          </div>
        </el-card>
    </el-col>
    </el-row>
    </div>
</template>
<script>
import { getColumns,gettableData,gettableData2,gettableData3 } from "@/api/comprehensive/search"
import { getNowDate } from "@/api/daily/daily";
export default {
  name: "weekSelect",
  data() {
    return {
      tables: [{
          value: 'b1',
          label: 'b1'
        },{
          value: 'b2',
          label: 'b2'
        },{
          value: 'b3',
          label: 'b3'
        },{
          value: 'b4',
          label: 'b4'
        },{
          value: 'b6',
          label: 'b6'
        },{
          value: 'b7',
          label: 'b7'
        },{
          value: 'b8',
          label: 'b8'
        },{
          value: 'b9',
          label: 'b9'
        },{
          value: 'b10',
          label: 'b10'
        },{
          value: 'b11',
          label: 'b11'
        },{
          value: 'b12',
          label: 'b12'
        },{
          value: 'b13',
          label: 'b13'
        },{
          value: 'b14',
          label: 'b14'
        },{
          value: 'b15',
          label: 'b15'
        },{
          value: 'b14c',
          label: 'b14c'
        },{
          value: 'b15c',
          label: 'b15c'
        },{
          value: 'b16',
          label: 'b16'
        },{
          value: 'b17',
          label: 'b17'
        },{
          value: 'b18',
          label: 'b18'
        },{
          value: 'b19',
          label: 'b19'
        },{
          value: 'balance_day',
          label: '每月支援日表'
        },{
          value: 'balance_piece',
          label: '每月支援计件表'
        },{
          value: 'cash_in',
          label: '到款'
        },{
          value: 'cash_out',
          label: '付款'
        }, {
          value: 'income',
          label: '每月收入表'
        },{
          value: 'invoice',
          label: '开票表'
        },{
          value: 'invoice_split',
          label: '开票拆分表'
        },{
          value: 'salary1',
          label: '工资1表'
        },{
          value: 'salary2',
          label: '工资2表'
        },{
          value: 'salary3',
          label: '工资3表'
        }],
        tmpfields:[],
        loading:false,
        searchtnloading:false,
        exportBtnLoading:false,
        currentPage:1,
        total:0,
        pagesize:5,
        pageSizes:[5,10,20,30,50],
        fileds:[],
        tmpcolumns:[],
        tmpprops:[],
        columns:[],
        props:[],
        logics:[
          {
            label:'=',
            value:'='
          },
          {
            label:'<',
            value:'小于'
          },{
            label:'>',
            value:'大于'
          },{
            label:'<=',
            value:'小于等于'
          },{
            label:'>=',
            value:'大于等于'
          },
          {
            label:'模糊搜索',
            value:'LIKE'
          }],
        ServerDate:"",
        loading:false,
        form:{
          tableName:'',
          field:'',
          field2:'',
          logic:'=',
          info1:"",
          info2:"",
          info3:""
        },
        querytableName:'',
        queryfield:'',
        queryfield2:'',
        querylogic:'=',
        queryinfo1:"",
        queryinfo2:"",
        queryinfo3:"",
        tableData:[],
        rules: {
          tableName: [
            { required: true, message: '请选择表名', trigger: 'change' }
          ]
        }
    }
},
created(){
    this.getNow();
},
methods:{
  current_change:function(currentPage){
    this.currentPage = currentPage;
  },
  handleSizeChange(val) {
    this.pagesize = Number(`${val}`);
  },
  getNow() {
    getNowDate().then(response =>{
      this.ServerDate = response.data;
    })
  },
  getColumnsInfo(){
    if(this.form.tableName.length != 0){
      getColumns(this.form.tableName).then(res => {
      this.form.field = "";
      this.form.field2 = "";
      this.form.logic = "=";
      //this.form.info1 = "";//2022-10-14 by Paul 单字段筛选的值
     // this.form.info2 = "";//2022-10-14 by Paul 范围筛选的右边界值
    //  this.form.info3 = "";//2022-10-14 by Paul 范围筛选的左边界值
      this.tmpfields = res.data;
      this.tmpcolumns = res.columns;
      this.tmpprops = res.props;
    })
    }
  },
  resetForm(){
    this.form.field = "";
    this.form.field2 = "";
    this.form.info1 = "";
    this.form.info2 = "";
    this.form.info3 = "";
  },
  search(formName){
    this.$refs[formName].validate((valid) => {
          if (valid) {
            if(this.form.field.length != 0 && this.form.info1.length === 0){
              this.$message({
                      showClose: true,
                      message: '请填写单字段筛选的值!',
                      type: 'error'
                });
                return false;
            }
            if(this.form.field.length === 0 && this.form.info1.length != 0){
              this.$message({
                      showClose: true,
                      message: '请填写需要单条件筛选的字段!',
                      type: 'error'
                });
                return false;
            }
            if(this.form.info2.length != 0 && this.form.info3.length === 0){
              this.$message({
                      showClose: true,
                      message: '请填写范围筛选的右边界值!',
                      type: 'error'
                });
                return false;
            }
            if(this.form.info2.length === 0 && this.form.info3.length != 0){
              this.$message({
                      showClose: true,
                      message: '请填写范围筛选的左边界值!',
                      type: 'error'
                });
                return false;
            }
            if(this.form.info2.length === 0 && this.form.info3.length === 0 && this.form.field2.length === 0 && this.form.field.length === 0 && this.form.info1.length ===0){
              this.$message({
                      showClose: true,
                      message: '请填写信息再查询!',
                      type: 'error'
                });
                return false;
            }
            if(this.form.info2.length != 0 && this.form.info3.length != 0 && this.form.field2.length === 0){
              this.$message({
                      showClose: true,
                      message: '请选择需要范围筛选的字段!',
                      type: 'error'
                });
                return false;
            }
            if(this.form.info2.length === 0 && this.form.info3.length === 0 && this.form.field2.length != 0){
              this.$message({
                      showClose: true,
                      message: '请选择需要范围筛选的左边界和右边界数值!',
                      type: 'error'
                });
                return false;
            }
            if(this.form.info2.length != 0 && this.form.info3.length === 0 && this.form.field2.length != 0){
              this.$message({
                      showClose: true,
                      message: '请选择需要范围筛选的右边界数值!',
                      type: 'error'
                });
                return false;
            }
            if(this.form.info2.length === 0 && this.form.info3.length != 0 && this.form.field2.length != 0){
              this.$message({
                      showClose: true,
                      message: '请选择需要范围筛选的左边界数值!',
                      type: 'error'
                });
                return false;
            }
            if(this.form.field.length != 0 && this.form.info1.length != 0 && this.form.field2.length === 0 && this.form.info2.length === 0 && this.form.info3.length === 0){
              this.searchtnloading = true;
              this.loading = true;
              this.fileds = this.tmpfields;
              this.querytableName = this.form.tableName;
              this.queryfield = this.form.field;
              this.querylogic = this.form.logic;
              this.queryinfo1 = this.form.info1.replaceAll('\/','-').replaceAll('\\','-');
              this.columns = this.tmpcolumns;
              this.props = this.tmpprops;
              gettableData(this.querytableName,this.queryfield,this.querylogic,this.queryinfo1).then(res => {
                this.loading = false;
                this.searchtnloading = false;
                this.tableData = res.data;
                this.total = this.tableData.length;
              })
            }
            if(this.form.field.length != 0 && this.form.info1.length != 0 && this.form.field2.length != 0 && this.form.info2.length != 0 && this.form.info3.length != 0){
              this.searchtnloading = true;
              this.loading = true;
              this.fileds = this.tmpfields;
              this.querytableName = this.form.tableName;
              this.queryfield = this.form.field;
              this.queryfield2 = this.form.field2;
              this.querylogic = this.form.logic;
              this.queryinfo1 = this.form.info1.replaceAll('\/','-').replaceAll('\\','-');
              this.queryinfo2 = this.form.info2.replaceAll('\/','-').replaceAll('\\','-');
              this.queryinfo3 = this.form.info3.replaceAll('\/','-').replaceAll('\\','-');
              this.columns = this.tmpcolumns;
              this.props = this.tmpprops;
              gettableData2(this.querytableName,this.queryfield,this.querylogic,this.queryinfo1,this.queryfield2,this.queryinfo2,this.queryinfo3).then(res => {
                this.loading = false;
                this.searchtnloading = false;
                this.tableData = res.data;
                this.total = this.tableData.length;
              })
            }
            if(this.form.field.length === 0 && this.form.info1.length === 0 && this.form.field2.length != 0 && this.form.info2.length != 0 && this.form.info3.length != 0){
              this.searchtnloading = true;
              this.loading = true;
              this.fileds = this.tmpfields;
              this.querytableName = this.form.tableName;
              this.queryfield2 = this.form.field2;
              this.queryinfo2 = this.form.info2.replaceAll('\/','-').replaceAll('\\','-');
              this.queryinfo3 = this.form.info3.replaceAll('\/','-').replaceAll('\\','-');
              this.columns = this.tmpcolumns;
              this.props = this.tmpprops;
              gettableData3(this.querytableName,this.queryfield2,this.queryinfo2,this.queryinfo3).then(res => {
                this.loading = false;
                this.searchtnloading = false;
                this.tableData = res.data;
                this.total = this.tableData.length;
              })
            }
          }else{
            return false;
          }
  })
},
  GetExport(){
    if(this.tableData.length == 0){
      this.$message({
                  showClose: true,
                  message: '查询数据为空，无法导出！',
                  type: 'error'
                });
        }else{
          this.exportBtnLoading = true;
          import('@/utils/Export2Excel').then(excel => {
          const tHeader = [this.columns]
          const filterVal = [this.props]
          const list = this.tableData;
          const data = this.formatJson(filterVal[0], list);
          excel.export_json_to_excel_sheet({
            headers: tHeader,
            datas: [data],
            sheetnames: [this.querytableName],
            multiHeader: [],
            autoWidth:false,
            filename: this.querytableName + "导出表_" +this.ServerDate,
          },this.$message({
                  showClose: true,
                  message: '导出成功！',
                  type: 'success'
                }))
        this.exportBtnLoading = false;
          // this.downloadLoading = false
        })
        }
  },
  formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
  }
}
}
</script>
<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.pagination{
  margin:20px auto;
  padding-left: 36%;
}
.selectTable{
  margin-bottom: 15px;
}
</style>