<template>
  <div class="flex-container">
    <div class="table-page-search-wrapper">
      <!-- 搜索区域 -->
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :md="8" :sm="12">
            <a-form-item  label="表名">
              <a-select placeholder="请选择报表" v-model="queryParam.table" :disabled="disabled">
                <a-select-option value="">请选择</a-select-option>
                <a-select-option
                  :key="item.table_name"
                  :value="item.table_name"
                  v-for="item in tablelist"
                >
                  {{ item.table_name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <span class="table-page-search-submitButtons ws-btn-row">
              <a-button @click="search" type="primary">查询</a-button>
              <a-button @click="saveClick" type="primary">保存</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <s-table
      :columns="columns"
      :data="rowdata"
      bordered
      ref="table"
      size="small"
      class="flex-filling"
      :showPagination="false"
      rowKey="COLUMN_NAME"
    >
    <template v-for="col in ['COLUMN_NAME', 'DATA_TYPE','TITLE']" :slot="col" slot-scope="text,record,index">
      <div :key="col">
        <a-input
          style="margin: -5px 0"
          v-model="valuelist[index][col]"
        />
      </div>
    </template>
      <template  v-for="col2 in ['SEARCH_TYPE','ORDERARR']" :slot="col2" slot-scope="text, record, index">
        <div :key="col2">
          <a-select defaultValue="" style="margin: -5px 0" v-model="valuelist[index][col2]">
            <template v-if="col2 === 'SEARCH_TYPE'">
              <a-select-option value="">无需查询</a-select-option>
              <a-select-option value="input">输入框</a-select-option>
<!--              <a-select-option value="select">下拉框</a-select-option>
              <a-select-option value="date">日期</a-select-option>
              <a-select-option value="month">月份</a-select-option>-->
            </template>
            <template v-else-if="col2 === 'ORDERARR' ">
              <a-select-option value="">不排序</a-select-option>
              <a-select-option value="ASC">升序</a-select-option>
              <a-select-option value="DESC">降序</a-select-option>
            </template>
          </a-select>
        </div>
      </template>
      <template v-for="col3 in ['SHOW','HEJI','GROUP']" :slot="col3" slot-scope="text, record, index">
        <div :key="col3" v-if="col3 != 'HEJI' || (whitelist.indexOf(record.DATA_TYPE)!=-1)">
          <a-switch checkedChildren="开" unCheckedChildren="关"  v-model="valuelist[index][col3]"/>
        </div>
      </template>
    </s-table>
    <meun-report-modal ref="model1" @ok="save()"></meun-report-modal>

  </div>
</template>

<script>

import {reportGetTable, reportGetColmun, saveReportConfigure,updateReportConfigure,getReportData,excuteSql} from '@/api/system'
import STable from '@/components/table'
import {validatenull} from '@/utils/validate'
import meunReportModal from "./modal/meunReportModal";

export default {
  name: "reportManage",
  components:{
    meunReportModal,
    STable
  },
  data() {
    return {
      disabled:false,
      tablelist: [],
      tableName:"",
      queryParam:{
        table:""
      },
      whitelist:['TINYINT','SMALLINT','MEDIUMINT','INT','BIGINT','FLOAT','DOUBLE'],
      valuelist:[],
      columns:[
        {dataIndex:"COLUMN_NAME",title:"字段名称",scopedSlots: { customRender: 'COLUMN_NAME' }},
        {dataIndex:"DATA_TYPE",title:"字段类型"},
        //{dataIndex:"TITLE",title:"标题",scopedSlots: { customRender: 'TITLE' }},
        {key:"SEARCH_TYPE",title:"查询类型",scopedSlots: { customRender: 'SEARCH_TYPE' }},
        {key:"SHOW",title:"是否展示",scopedSlots: { customRender: 'SHOW' }},
        {key:"HEJI",title:"是否合计",scopedSlots: { customRender: 'HEJI' }},
        {key:"GROUP",title:"是否分组",scopedSlots: { customRender: 'GROUP' }},
        {key:"ORDERARR",title:"排序",scopedSlots: { customRender: 'ORDERARR' }}
      ],
      rowdata:() =>{
        return  reportGetColmun({table:this.queryParam.table}).then(res =>{

          let data = {}
          if (res.state !== 'success') {
            data = {
              data: []
            }
          } else {
            let datalist = new Array();
            res.data.forEach(item =>{
              let obj = {
                COLUMN_NAME:item.COLUMN_NAME,
                //DATA_TYPE:item.DATA_TYPE,
                //TITLE:"",
                SEARCH_TYPE:"",
                SHOW:true,
                HEJI:false,
                GROUP:false,
                ORDERARR:""
              };
              datalist.push(obj)

            });
            this.valuelist = datalist;
            data = {
              data: res.data
            }
          }
          return new Promise(resolve => {

            if(this.$route.params.type === "edit"){
              let id = this.$route.params.id
              getReportData(id).then(res2 =>{
                let data2 = res2.data;
                let columnsJson = this.toJSON(data2.columnsJson);
                let groupJson = this.toJSON(data2.groupJson);
                let orderJson = this.toJSON(data2.orderJson);
                let searchJson = this.toJSON(data2.searchJson);
                let statisticsJson = this.toJSON(data2.statisticsJson);
                this.valuelist.forEach(item =>{
                  if(columnsJson!=null&&columnsJson.includes(item.COLUMN_NAME)){
                    item.SHOW  = true;
                  }else{
                    item.SHOW  = false;
                  }
                  if(statisticsJson!=null&&statisticsJson.includes(item.COLUMN_NAME)){
                    item.HEJI  = true;
                  }else{
                    item.HEJI  = false;
                  }
                  if(groupJson!=null&&groupJson.includes(item.COLUMN_NAME)){
                    item.GROUP  = true;
                  }else{
                    item.GROUP  = false;
                  }

                  if(orderJson!=null){
                    let mode = "";
                    orderJson.forEach(item2 =>{
                      if(item2.name == item.COLUMN_NAME){
                        mode = item2.mode;
                      }
                    })
                    item.ORDERARR = mode;
                  }
                  if(searchJson!=null){
                    let SEARCH_TYPE = "";
                    searchJson.forEach(item2 =>{
                      if(item2.name == item.COLUMN_NAME){
                        SEARCH_TYPE = item2.type;
                      }
                    })
                    item.SEARCH_TYPE = SEARCH_TYPE;
                  }

                })
                resolve(data)
              })
            }else{
              resolve(data)
            }
          })
        }).then(data =>{
          return data;
        })
      }
    }
  },
  methods:{
    search(){
      this.tableName = this.queryParam.table;
      this.$refs.table.refresh({search: true})
    },
    toJSON(value){
      if(validatenull(validatenull)){
        return value;
      }else{
        return JSON.parse(value);
      }
    },
    saveClick(){

      if(this.$route.params.type == "add"){

        if(validatenull(this.tableName)){
          this.$notification.warning({message:"必须先选择表！"})
          return;
        }
        this.$refs.model1.showModal("add");
      }else{
        this.save(true);
      }

    },
    save(isEdit){
      let that = this;
      if(validatenull(this.tableName)){
        this.$notification.warning({message:"必须先选择表！"})
        return;
      }
      let params = { "columnsArr":[], "groupArr":[], "orderArr":[], "searchArr":[], "statisticsArr":[], "paging":true, "tableName":""};
      params.tableName = this.tableName;
      this.valuelist.forEach( item =>{
        if(item.SHOW){
          params.columnsArr.push(item.COLUMN_NAME);
        }
        if(item.GROUP){
          params.groupArr.push(item.COLUMN_NAME);
        }
        if(!validatenull(item.ORDERARR)){
          params.orderArr.push({
            "name":item.COLUMN_NAME,
            "mode":item.ORDERARR
          })
        }
        if(!validatenull(item.SEARCH_TYPE)){
          params.searchArr.push({
            "name":item.COLUMN_NAME,
            "type":item.SEARCH_TYPE
          })
        }
        if(item.HEJI){
          params.statisticsArr.push(item.COLUMN_NAME)
        }
      })
      if(isEdit){
        params["id"] = this.$route.params.id;
        updateReportConfigure(params).then(() =>{
          that.$notification.success({message:"保存成功！"})

        })
        return;
      }
      saveReportConfigure(params).then(res =>{
        if(res.state === "success"){
          let id = res.data;
          getReportData(id).then(res2 =>{
            let json = res2.data;
           /* json.columnsJson = that.toJSON(json.columnsJson);
            json.searchJson = that.toJSON(json.searchJson);
            json.orderJson = that.toJSON(json.orderJson);
            json.groupJson = that.toJSON(json.groupJson);
            json.statisticsJson = that.toJSON(json.statisticsJson);*/
            json.columnsArr = that.toJSON(json.columnsJson);
            json.searchArr = that.toJSON(json.searchJson);
            json.orderArr = that.toJSON(json.orderJson);
            json.groupArr = that.toJSON(json.groupJson);
            json.statisticsArr = that.toJSON(json.statisticsJson);
            excuteSql(json).then(() =>{
                that.$notification.success({message:"保存成功！"})
            })

          })


        }
      })
    }
  },
  watch:{
    '$route':function (data) {
      if(data.params.type == "edit"){
        this.queryParam.table = data.params.tableName;
        this.tableName = data.params.tableName;
        this.disabled = true;
      }else{
        this.queryParam.table = ""
        this.tableName = "";
        this.disabled = false;
      }
      this.$refs.table.refresh({search: true});
    }
  },
  mounted() {
    reportGetTable().then(res => {
      this.tablelist = res.data;
      if(this.$route.params.type == "edit"){
        this.queryParam.table = this.$route.params.tableName;
        this.tableName = this.$route.params.tableName;
        this.disabled = true;
        this.$refs.table.refresh({search: true});
      }else{
        this.disabled = false;
      }
    })
  }
}
</script>

<style scoped>

</style>
