<template>
  <div class="mu-searchHigh" :style="{'max-height': currentConfig.maxheight + 'px', width: currentConfig.width + 'px'}">
    <span @click="show">{{ currentConfig.name }}</span>
    <div v-if="currentConfig.showStatus">
      <div class="search-group" v-for="(list, index) in listConfig" :key="index">
        <mu-row class="search-text pdl10 pdr12">
          <mu-col :config="{span: 6}"><i class="icon-folder-b"></i>查询组{{index + 1}}</mu-col>
          <mu-col :config="{span: 6}" class="template-icon"><i @click="delSearch(index)" class="icon-delete icon-blue"></i><i class="icon-plus icon-blue" @click="addItem(index)"></i></mu-col>
        </mu-row>
        <mu-row class="pdl10 pdr15" v-for="(item, dex) in list.items" :key="dex">
          <mu-col :config="{span: 11}">
            <search-item 
                :config="currentConfig" 
                :value="item.value"
                @selectChange = "(val, inx, i) => selectUpdata(val, index, dex)"
                @nextSelectChange = "(val, type, inx, i) => nextSelectUpdata(val, type, index, dex)"
                @equalSelectChange = "(val, inx, i) => equalSelectUpdata(val, index, dex)"
                >
            </search-item>
          </mu-col>
          <mu-col :config="{span: 1}">
            <i @click="delItem(index, dex)" class="icon-delete icon-blue pdr15"></i>
          </mu-col>
        </mu-row>
        <mu-row class="group-or-and pdl10 pdr15">
          <mu-col :config="{span: 3}">查询逻辑</mu-col>
          <mu-col :config="{span: 9}">
            <mu-radio v-model="list.status" :config="{ tip: 'tips', options: [{value: true, label: '与'},{value: false, label: '或'} ]}"></mu-radio>
          </mu-col>
        </mu-row>
        <mu-row class="bottom-or-and" v-if="listConfig.length-1 > index">
          <mu-col>
            <mu-radio v-model="list.groupStatus" :config="{ tip: 'tips', options: [{value: true, label: '与'},{value: false, label: '或'} ]}"></mu-radio>
          </mu-col>
        </mu-row>
      </div>
      <div class="search-bottom">
        <mu-row>
          <mu-col>
            <i class="icon-plus icon-blue"></i>
            <span class="icon-blue" @click="addSearch">添加查询组</span>
          </mu-col>
        </mu-row>
        <div class="search-btns">
          <span class="close icon-blue" v-if="!currentConfig.close" @click="hide">关闭</span>
          <div class="btns">
            <el-button type="" size="mini" @click="clear">清空</el-button>
            <el-button type="primary" size="mini" @click="search">查询</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import { Component, Prop, Vue, Watch, Emit } from 'vue-property-decorator';
  // import SearchItem from "src/components/Form/Field/SearchItem.vue";
  import util from '../../../common/utils/util'

  type Size = 'small' | 'medium' | 'large';

  interface InputConfig { 
    // name: string,
    size?: Size,
    type: string,
    name: string,
    placeholder?: string,
    width: number,
    showStatus: boolean,
    close: boolean,
    maxheight: number,
    items: any[]
  }

  @Component({
    name: 'mcSearchHigh',
    // components: { SearchItem }
  })

  export default class extends Vue {
    // @Prop({ default: () => [] }) private value!: any;
    @Prop({ default: () => [] }) private config!: InputConfig;
    // private currentValue: string = this.value || '';
    // private showStatus: boolean = false;
    private defaultConfig: any = {
      showStatus: false
    };
    private listConfig:any = [
      {
        items: [
          {
            value: ['', '', ''],
            type: ''
          }
        ],
        status: false,
        groupStatus: false
      }
    ]

    // 合并默认数据
    get currentConfig() {
      const result = this.config;
      Object.keys(this.defaultConfig).forEach((key: string) => {
        if (this.config[key] === undefined) result[key] = this.defaultConfig[key];
      });
      return result;
    }

    // 添加item数据
    addItem(index: number): void {
      this.listConfig[index].items.push({value: ['', '', ''], type: ''})
    }

    delItem(index: number, dex: number): void {
      this.listConfig[index].items.splice(dex, 1)
    }

    // 添加查询组
    addSearch() {
      this.listConfig.push({
        items: [
          {
            value: ['', '', ''],
            type: ''
          }
        ],
        status: false,
        groupStatus: false
      })
    }

    delSearch(index: number) {
      this.listConfig.splice(index, 1)
    }

    // 子组件第一个select更新的值
    selectUpdata(val: any, index: number, dex: number) {
      // 子组件第一个select 切换，先清空 searchItem 的 select内容，在给第一个赋值
      const clearValue = {
          value: ['', '', ''],
          type: ''        
      }
      this.listConfig[index].items.splice(dex, 1, clearValue)
      // 子组件 emit 给父组件的val {type, value}
      this.updataValue(...arguments, 0)
    }
    // 子组件第二个select更新的值 
    nextSelectUpdata (val: any, type: string, index: number, dex: number) {
      const types = ['inputNumber', 'datePicker', 'timePicker'];
      const typeIndex = types.includes(val.type) ? 2 : 1;
      this.updataValue(val.value, index, dex, typeIndex)
    }
    equalSelectUpdata (val: any, index: number, dex: number) {
      this.updataValue(...arguments, 1)
    }
    // 更新items => value对应的值
    updataValue (val?: any, index?: number, dex?: number, i?: number) {
      if (val instanceof Object && val['type']) {
        this.listConfig[index].items[dex].value[i] = val.value;
        this.listConfig[index].items[dex].type = val.type;
      } else {
        this.listConfig[index].items[dex].value[i] = val;
      }
    }

    hide () {
      this.currentConfig.showStatus = false;
    }

    show () {
      this.currentConfig.showStatus = true;
    }
    // 清空查询组 输入的条件
    clear () {
      this.listConfig.forEach((v: any, i: number) => {
        const newObj = {
          items: [],
          status: false,
          groupStatus: false
        }
        v.items.forEach((o: any, index: number) => {
          const tempItem = {
            value: ['', '', ''],
            type: ''
          }
          v.items.splice(index, 1, tempItem)
        })
        newObj.items = v.items;
        this.listConfig.splice(i, 1, newObj)
      })
    }
    getThan (v: any) {
      let value;
      switch (v) {
        case 0 : value = 'gtr'; break;
        case 1 : value = 'geq'; break;
        case 2 : value = 'equ'; break;
        case 3 : value = 'lss'; break;
        case 4 : value = 'leq'; break;
        case 5 : value = 'neq'; break;
        default : value = '';
      }
      return value
    }
    getDateType(v: number) {
      // 获取到对应select的dateType
      return this.currentConfig.items[v].dataType ? this.currentConfig.items[v].dataType : '';
    }
    search () {
      // 最后查询的方法
      // 生成一个 数组数据
      const groupArray = [];
      this.listConfig.forEach((v) => {
        const group = {
          "groupId": util.generateUUID(),
          "gr": v.groupStatus ? "and" : "or",
          "data": []
        }
        v.items.forEach(o => {
          const t = ['inputNumber', 'datePicker', 'timePicker'].includes(o.type);
          console.log(o.value)
          const value = {
            "dataId": util.generateUUID(),
            "key": o.value[0],
            "status": t ? this.getThan(o.value[1]) : '',
            "dataType": this.getDateType(o.value[0]),
            "value": t ? o.value[2] : o.value[1],
            "dr": v.status ? "and" : "or"
          }
          group.data.push(value)
        })
        groupArray.push(group)
      })
      console.log(groupArray)
    }
  }
</script>

<style lang="scss" scoped>
.mu-searchHigh {
  overflow-y: auto;
  overflow-x: hidden;
  .icon-folder-b {
    color: #cccccc;
    margin-right: 4px;
  }
  .icon-blue {
    color: #1878C9;
  }
  .search-group {
    width: 100%;
    // padding: 5px 15px 10px 10px;
    overflow: hidden;
    background:rgba(244,241,239,1);
  }
  .pdl10{
    padding-left: 10px;
  }
  .pdr12 {
    padding-right: 12px;
  }
  .pdr15{
    padding-right: 15px;
  }
  .el-row {
    margin: 10px 0;
    &.search-text {
      margin: 10px 0 15px;
    }
    &.bottom-or-and {
      padding: 10px 0;
      margin-bottom: 0;
      background: #fff;
      .el-col {
        padding: 0 30%!important;
      }
    }
  }
  .template-icon {
    overflow: hidden;
    i {
      float: right;
      &.icon-plus {
        margin-right: 10px;
      }
    }
  }
  .search-bottom {
    margin-top: 15px;
    .el-row {
      align-items:center;
    }
    .search-btns {
      margin-top: 10px;
      padding-right: 35px;
      overflow: hidden;
      .close {
        float: left;
      }
      .btns {
        float: right;
      }
    }
  }
}
</style>
<style lang="scss">
    .group-or-and {
      .mu-radio {
        margin-right: 10px;
      }
    }
</style>
