<!-- @desc:查询条件设置  @auth:周兴  @time:2022/3/2 13:23 -->
<template>
  <!--  :style="{'min-width':(width ? width : '1300px')}"-->
  <div>
    <!--    <Spin fix v-if="spinShow">-->
    <!--      <template>-->
    <!--        加载查询条件中...-->
    <!--      </template>-->
    <!--    </Spin>-->
    <!--    <div class="split-class"></div>-->
    <Row style="display: flex;align-items: center;">
      <Col :flex="setFlag?'60px':'0'" v-if="setFlag">
        <Icon :type="'iconfont iconfont icon-' +  (!this.changeFlag?'you':'xia-')" class="change-icon"
              @click.stop="change()" v-if="setFlag"/>
        <Icon v-if="changeFlag && setFlag" type="iconfont iconfont icon-shezhi" class="set-icon"
              @click.stop="openModal()"/>
      </Col>
      <Col flex="auto">
        <div class="all-condition" v-if="!changeFlag && setFlag">
          <InputPop :placeholder="placeholderData"></InputPop>
        </div>
        <div class="content-class" ref="content" v-else>
          <Form ref="formData" :model="formData._value" label-position="top" inline :rules="rule">
            <!--            <Row v-for="(it,itIndex) in Math.ceil(searchCond.length/colCount + 0.000000001)" :key="itIndex">-->
            <Row>
              <Col :span="item.valueKind.indexOf('RANGE')>=0?2*spanData:spanData" class="Col"
                   :style="{ width: (item.valueKind.indexOf('RANGE')>=0 ? 'calc(' + 100/(24/(2*spanData)) + '% - 30px)' : ''),
                    maxWidth: (item.valueKind.indexOf('RANGE')>=0 ?  90/(24/(2*spanData)) + '%' : 90/(24/spanData) + '%')}"
                   v-for="(item,index) in searchCond "
                   :key="index">
                <!--          输入类型    -->
                <FormItem v-if="item.valueKind==='STR' " :prop="item.valueFormat.code" style="width:100% ;">
                  <Prepend :label="item.itemName" :required=item.required>
                    <InputPop v-model="formData._value[item.valueFormat.code]" :ref="item.valueFormat.code"
                              size="small"
                              clearable :placeholder="vm.$t('inputWords',{'search-name':item.itemName})"
                              @on-keydown="handleKeyDownSearch(Object.assign($event,{item:item}))">
                    </InputPop>
                  </Prepend>
                </FormItem>
                <!--          数字类型    -->
                <FormItem v-if="item.valueKind==='NUMBER' " :prop="item.valueFormat.code" style="width:100% ;">
                  <Prepend :label="item.itemName" :required=item.required>
                    <InputNumberPop v-model="formData._value[item.valueFormat.code]" :ref="item.valueFormat.code"
                                    size="small"
                                    clearable :placeholder="vm.$t('inputWords',{'search-name':item.itemName})">
                    </InputNumberPop>
                  </Prepend>
                </FormItem>
                <!--         Radio    -->
                <FormItem v-if="item.valueKind==='RADIO' " :prop="item.valueFormat.code" style="width:100% ;">
                  <Prepend :label="item.itemName" :required=item.required>
                    <DkRadio :ref="item.valueFormat.code" :options="item.valueFormat.data"
                             v-model="formData._value[item.valueFormat.code]"></DkRadio>
                  </Prepend>
                </FormItem>

                <!--       日期范围       -->
                <FormItem v-if="item.valueKind==='DATE_RANGE' " :prop="item.valueFormat.code" style="width:100% ;">
                  <Prepend :label="item.itemName" :required=item.required>
                    <DatePickerPop type="daterange" clearable size="small" :editable="true"
                                   :ref="item.valueFormat.code" transfer
                                   placement="bottom-end" @on-change="(val) => dateChange(item.valueFormat.code, val)"
                                   :placeholder="vm.$t('inputWords',{'search-name':item.itemName})"
                                   style="width:100%" :short-cut-flag="true"></DatePickerPop>
                  </Prepend>
                </FormItem>

                <!--       日时范围       -->
                <FormItem v-if="item.valueKind==='DATETIME_RANGE' " :prop="item.valueFormat.code" style="width:100% ;">
                  <Prepend :label="item.itemName" :required=item.required>
                    <DatePickerPop type="datetimerange" clearable size="small" :editable="true"
                                   :ref="item.valueFormat.code" transfer
                                   placement="bottom-end" @on-change="(val) => dateChange(item.valueFormat.code, val)"
                                   :placeholder="vm.$t('inputWords',{'search-name':item.itemName})"
                                   style="width:100%" :short-cut-flag="true"></DatePickerPop>
                  </Prepend>
                </FormItem>

                <!--       月份范围       -->
                <FormItem v-if="item.valueKind==='MONTH_RANGE' " :prop="item.valueFormat.code" style="width:100% ;">
                  <Prepend :label="item.itemName" :required=item.required>
                    <MonthRangePickerPop type="monthrange" clearable size="small" :editable="true"
                                         :ref="item.valueFormat.code" transfer
                                         placement="bottom-end"
                                         @on-change="(val) => dateChange(item.valueFormat.code, val)"
                                         :placeholder="vm.$t('inputWords',{'search-name':item.itemName})"
                                         style="width:100%" :short-cut-flag="true"></MonthRangePickerPop>
                  </Prepend>
                </FormItem>

                <!--       年份       -->
                <FormItem v-if="item.valueKind==='YEAR' " :prop="item.valueFormat.code" style="width:100% ;">
                  <Prepend :label="item.itemName" :required=item.required>
                    <DatePickerPop type="year" :ref="item.valueFormat.code" :clearable="item.clearable" size="small"
                                   v-model="formData._value[item.valueFormat.code]"
                                   transfer placement="bottom-end"
                                   :editable="true"
                                   @on-change="(val) => dateChangeSingle(item.valueFormat.code, val)"
                                   :placeholder="vm.$t('inputWords',{'search-name':item.itemName})"
                                   style="width:100%"></DatePickerPop>
                  </Prepend>
                </FormItem>

                <!--       月份      -->
                <FormItem v-if="item.valueKind==='MONTH' " :prop="item.valueFormat.code" style="width:100% ;">
                  <Prepend :label="item.itemName" :required=item.required>
                    <DatePickerPop type="month" clearable size="small" :editable="true"
                                   :ref="item.valueFormat.code" transfer
                                   v-model="formData._value[item.valueFormat.code]"
                                   placement="bottom-end"
                                   @on-change="(val) => dateChangeSingle(item.valueFormat.code, val)"
                                   :placeholder="vm.$t('inputWords',{'search-name':item.itemName})"
                                   style="width:100%" :short-cut-flag="true"></DatePickerPop>
                  </Prepend>
                </FormItem>

                <!--       多选       -->
                <FormItem v-if="item.valueKind=='M-CHOICE' " :prop="item.valueFormat.code" style="width:100% ;">
                  <Prepend :label="item.itemName" :required=item.required :prop="item.valueFormat.code">
                    <selectPop multiple :ref="item.valueFormat.code" v-model="formData._value[item.valueFormat.code]"
                               :placeholder="vm.$t('selectWords',{'search-name':item.itemName})"
                               :tree-flag="item.treeFlag"
                               :tree-strict="item.treeStrict"
                               :options="item.valueFormat.data"
                               :valueKey="item.valueFormat.valueKey"
                               :labelKey="item.valueFormat.labelKey"
                               :pop-type="item.valueFormat.popType">
                    </selectPop>
                  </Prepend>
                </FormItem>

                <!--       单选       -->
                <FormItem v-if="item.valueKind=='S-CHOICE' " :prop="item.valueFormat.code" style="width:100% ;">
                  <Prepend :label="item.itemName" :required=item.required :prop="item.valueFormat.code">
                    <selectPop :multiple="false" :ref="item.valueFormat.code"
                               v-model="formData._value[item.valueFormat.code]"
                               :placeholder="vm.$t('selectWords',{'search-name':item.itemName})"
                               :tree-flag="item.treeFlag"
                               :tree-strict="item.treeStrict"
                               :options="item.valueFormat.data"
                               :valueKey="item.valueFormat.valueKey"
                               :labelKey="item.valueFormat.labelKey"
                                @on-select="handleSelect">
                    </selectPop>
                  </Prepend>
                </FormItem>

                <!--       单选放大镜       -->
                <FormItem v-if="item.valueKind=='S-SEARCH' " :prop="item.valueFormat.code" style="width:100% ;">
                  <Prepend :label="item.itemName" :required=item.required :prop="item.valueFormat.code">
                    <SelectMagnifier v-model="formData._value[item.valueFormat.code]"
                                     :display-text="formData._value[item.valueFormat.code + '_Name']" :multiple="false"
                                     :type="item.magnifierType" :ref="item.valueFormat.code"
                                     :other-condition="item.otherCondition"
                                     :placeholder="vm.$t('selectWords',{'search-name':item.itemName?item.itemName:item.valueFormat.code})"
                                     @ok="selectMagnifierOk(Object.assign({field:item.valueFormat.field?item.valueFormat.field:item.valueFormat.code,multiple:false},{rows:$event}))"
                    ></SelectMagnifier>
                  </Prepend>
                </FormItem>

                <!--       多选放大镜       -->
                <FormItem v-if="item.valueKind=='M-SEARCH' " :prop="item.valueFormat.code" style="width:100% ;">
                  <Prepend :label="item.itemName" :required=item.required :prop="item.valueFormat.code">
                    <SelectMagnifier :display-text="formData._value[item.valueFormat.code + '_Name']"
                                     :multiple="true"
                                     v-model="formData._value[item.valueFormat.code]"
                                     :type="item.magnifierType" :ref="item.valueFormat.code"
                                     :other-condition="item.otherCondition"
                                     :placeholder="vm.$t('selectWords',{'search-name':item.itemName?item.itemName:item.valueFormat.code})"
                                     @ok="selectMagnifierOk(Object.assign({field:item.valueFormat.field?item.valueFormat.field:item.valueFormat.code,multiple:true},{rows:$event}))"
                    ></SelectMagnifier>
                  </Prepend>
                </FormItem>

                <!--       日期       -->
                <FormItem v-if="item.valueKind==='DATE' " :prop="item.valueFormat.code" style="width:100% ;">
                  <Prepend :label="item.itemName" :required=item.required>
                    <DatePickerPop type="date" :ref="item.valueFormat.code" :clearable="item.clearable" size="small"
                                   v-model="formData._value[item.valueFormat.code]"
                                   transfer placement="bottom-end"
                                   :editable="false"
                                   @on-change="(val) => dateChangeSingle(item.valueFormat.code, val)"
                                   :placeholder="vm.$t('inputWords',{'search-name':item.itemName})"
                                   style="width:100%"></DatePickerPop>
                  </Prepend>
                </FormItem>

                <!--       开关    -->
                <FormItem v-if="item.valueKind==='SWITCH' " :prop="item.valueFormat.code"
                          style="width:100% ;" class="switch-class">
                  <Prepend :label="item.itemName" :required=item.required>
                    <DkSwitch v-model="formData._value[item.valueFormat.code]" :ref="item.valueFormat.code" clearable
                              :placeholder="vm.$t('inputWords',{'search-name':item.itemName})"
                              @on-change="(val) => handleSwitchChange(item.valueFormat.code, val)">
                    </DkSwitch>
                  </Prepend>
                </FormItem>
              </Col>
            </Row>
          </Form>
        </div>
      </Col>
    </Row>

    <Modal
      footer-hide
      @on-visible-change="visibleChange"
      width="1100"
      v-model="showModal"
      title="查询条件设置">
      <div>
        <ButtonGroup>
          <Button @click="save">保存</Button>
          <Button @click="cancel">关闭</Button>
          <Button @click="saveAs">另存为</Button>
        </ButtonGroup>
      </div>
      <div style="width: 100%;display: flex;margin-top: 10px" class="demo-split">
        <Split v-model="split1" style="height: 100%;width: 96%;">
          <div slot="left" class="demo-split-pane">
            <div style="width: 100%;">
              <vxe-table
                @current-change="leftTableCurrentChangeEvent"
                size="mini"
                height="480"
                ref="tableLeftLeft"
                id="name"
                align="center"
                @radio-change="changeDefault"
                :row-config="{isCurrent: true, isHover: true}"
                :data="tableDataLeftLeft">
                <vxe-column type="seq" width="60"></vxe-column>
                <vxe-column field="type" title="类型">

                  <template #default="{ row }">
                    <span>{{ row.flgSoDefault ? '云' : '自有' }}</span>
                  </template>
                </vxe-column>
                <vxe-column field="name" title="方案名称">
                  <template #default="{ row }">
                    <span>{{ vm.$t(row.pquName) }}</span>
                  </template>
                </vxe-column>
                <vxe-column type="radio" width="60">
                </vxe-column>
              </vxe-table>
            </div>
          </div>
          <div slot="right" class="demo-split-pane">
            <div style="height: 480px">
              <Split v-model="split2">
                <div slot="left">
                  <div style="width: 99%;margin-right: 1%">
                    <vxe-table
                      size="mini"
                      height="480"
                      id="name"
                      ref="tableLeft"
                      align="center"
                      :data="sortData(tableDataLeft)">
                      <vxe-column type="seq" width="60"></vxe-column>
                      <vxe-column field="name" title="条件名称">
                        <template #default="{ row }">
                          <span>{{ row.itemName }}</span>
                        </template>
                      </vxe-column>
                      <vxe-column field="valueKind" title="类型"></vxe-column>
                      <vxe-column title="操作">
                        <template #default="{ row }">
                          <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
                            <Button class="add-btn" type="text" size="small" icon="md-add" @click="add(row)"></Button>
                          </div>
                        </template>
                      </vxe-column>
                    </vxe-table>
                  </div>
                </div>
                <div slot="right">
                  <div style="width: 99%;margin-left: 1%;">
                    <vxe-table
                      @current-change="currentChangeEvent"
                      size="mini"
                      height="480"
                      ref="tableRight"
                      id="name"
                      align="center"
                      :row-config="{isCurrent: true, isHover: true}"
                      :data="tableDataRight">
                      <vxe-column type="seq" width="60"></vxe-column>
                      <vxe-column field="name" title="条件名称">
                        <template #default="{ row }">
                          <span>{{ row.itemName }}</span>
                        </template>
                      </vxe-column>
                      <vxe-column field="valueKind" title="类型">
                        <template #default="{ row }">
                          <span>{{ row.valueKind }}</span>
                        </template>
                      </vxe-column>
                      <vxe-column title="操作">
                        <template #default="{ row }">
                          <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
                            <Button class="del-btn" type="text" size="small" icon="md-remove"
                                    @click="del(row)"></Button>
                          </div>
                        </template>
                      </vxe-column>
                    </vxe-table>
                  </div>
                </div>
              </Split>
            </div>
          </div>
        </Split>
        <div style="width: 4%;height: 480px;display: grid;align-items: end;">
          <div style="display: grid;justify-content: center;height: 200px;">
            <Button @click="sortTableRight(1)"
                    :disabled="currentRightRowIndex === null || currentRightRowIndex === undefined || currentRightRowIndex===0"
                    style="display: block;" icon="iconfont iconfont icon-quanbuxiangshang-"></Button>
            <Button @click="sortTableRight(2)"
                    :disabled="currentRightRowIndex === null || currentRightRowIndex === undefined || currentRightRowIndex===0"
                    style="display: block;" icon="iconfont iconfont icon-shang-"></Button>
            <Button @click="sortTableRight(3)"
                    :disabled="currentRightRowIndex === null || currentRightRowIndex === undefined || currentRightRowIndex === tableDataRight.length-1"
                    style="display: block;" icon="iconfont iconfont icon-xia-"></Button>
            <Button @click="sortTableRight(4)"
                    :disabled="currentRightRowIndex === null || currentRightRowIndex === undefined || currentRightRowIndex === tableDataRight.length-1"
                    style="display: block;" icon="iconfont iconfont icon-quanbuxiangxia-"></Button>
          </div>
        </div>
      </div>
    </Modal>

    <Modal
      width="400"
      :closable="false"
      title="另存为"
      v-model="showModalSaveAs">
      <div style="width: 100%;text-align: center;">
        <div style="display: flex;align-items: center;">
          <span class="required">方案名称</span>
          <Input style="width:200px;margin-left: 5px;" v-model="addFromData.pquName"/>
        </div>
        <div style="display: flex;align-items: center;">
          <Checkbox v-model="addFromData.flgDefault"/>
          <span style="margin-left: 5px;">默认</span>
        </div>
      </div>
      <div slot="footer">
        <Button type="primary" @click="SaveAsOkBtn">保存</Button>
        <Button @click="showModalSaveAs = false">取消</Button>
      </div>
    </Modal>
  </div>
</template>
<script>


export default {
  name: 'SearchCond',
  props: {
    value: {
      type: Object
    },
    rule: {
      type: Object
    },
    //是否显示设置
    setFlag: {
      type: Boolean,
      default: true
    },
    type: {
      type: String,
      default: null
    },
    //传入的查询条件（不走方案）
    searchContent: {
      type: Array,
    },
    // 根据传入的参数进行查询
    allConditonContent: {
      type: Array,
    },
    // 宽度
    width: {
      type: [Number, String]
    },
    // 列数
    colCount: {
      type: Number,
      default: 5
    },
    // 外部传入的查询条件
    otherCondition: {
      type: Object,
      default: null
    },
    defaultFormValue: {
      type: Object,
      default: null
    },
    // 自定义报表切换tab时不需要赋默认值
    customChangeFlag: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    searchCond(n, o) {
      if (n) {
        this.requiredColumns = n.filter(it => it.required);
      }
    },
    // value(val) {
    //   this.searchCond = val
    // },
    'formData._value':{
      handler:function(newVal){
        // console.log('newVale',newVal)
        this.$emit('input', {_value:newVal})
      },
    },
    //TODO 如何判断两个集合相同，现在这么做，还是不太好
    tableDataRight(n, o) {
      this.isChange = true
    },
    rule(val) {
      this.formRule = val
    },
    searchContent(n, o) {
      if (n) {
        this.setForm();   // 设置查询条件
      }
    },
  },
  data() {
    let self = this
    const vm = window.vm;
    return {
      vm: vm,
      isChange: false, // 是否改变
      spinShow: false,
      disableEdit: false,
      addFromData: {
        pquName: '',
        flgDefault: true
      },
      searchCond: [],
      spanData: 4,
      showModalSaveAs: false,
      tableDataLeftLeft: [],
      split1: 0.3,
      split2: 0.5,
      currentLeftRowIndex: null,
      currentRightRowIndex: null,
      sortSearchCond: [],
      tableDataLeft: [],
      tableDataRight: [],
      showModal: false,
      listLength: 0,
      newList: [],
      formData: self.value,
      // 第一个查询条件
      firstSearchCond: {},
      changeFlag: false,
      placeholderData: null,
      requiredColumns: [],  // 必须输入项目
    }
  },
  methods: {
    /**
     * @desc   : 执行开关事件
     * @author : 付斌
     * @date   : 2023-10-12 15:25
     */
    handleSwitchChange(code, e){
      this.$emit('on-switch-change',{code, e})
    },
    /**
     * @desc   : 下拉选择
     * @author : 周兴
     * @date   : 2023/10/12 13:09
     */
    handleSelect(val){
      this.$emit('on-choice-select',val)
    },
    /**
     * @desc   : 点击回车进行触发查询事件
     * @author : 周兴
     * @date   : 2023/5/15 16:20
     */
    handleKeyDownSearch(e) {
      // 是否开启回车查询
      if (e.key === 'Enter' && e.item && e.item.enterSearchFlag) {
        this.$emit('on-search')
      }
    },
    /**
     * @desc   : 改变下拉数据源的数据
     * @author : 周兴
     * @date   : 2023/3/29 13:09
     */
    changeOptions(code, data, defaultValue) {
      setTimeout(() => {
        // let filters = this.searchCond.filter(it=>it.itemCode == code);
        // console.log('dds',this.searchCond,filters,JSON.stringify(data))
        // if(filters && filters.length > 0){
        //   filters[0].valueFormat.data = data;
        // }
        if (this.$refs[code]) {
          this.$refs[code][0].optionsData = data
          // 设置默认值
          if (defaultValue) {
            this.$nextTick(() => {
              this.setDefault(code, defaultValue);
            })
          }
        }
      }, 200)
    },
    /**
     * @desc   : 改变图标
     * @author : 周兴
     * @date   : 2023/3/29 13:08
     */
    change() {
      // 如果没有设置，那么不切换图标
      if (this.setFlag) {
        this.changeFlag = !this.changeFlag;
      }
    },
    /**
     * @desc   : 设置默认值
     * @author : 周兴
     * @date   : 2023/2/17 15:49
     */
    setDefault(code, defaultValue, valueKind = null) {
      // 处理多选日期的显示
      if (valueKind && (valueKind == 'DATE_RANGE' || valueKind == 'DATETIME_RANGE')) {
        this.$nextTick(() => {
          if (defaultValue && this.$refs[code] && this.$refs[code].length > 0) {
            this.$refs[code][0].model = defaultValue
            this.dateChange(code, defaultValue);
          }
        })
      } else if (valueKind && valueKind == 'MONTH_RANGE') {
        this.$nextTick(() => {
          if (defaultValue && this.$refs[code] && this.$refs[code].length > 0) {
            this.$refs[code][0].model = defaultValue.join(this.$refs[code][0].separator)
            this.$refs[code][0].chooseDatas();
            this.dateChange(code, defaultValue);
          }
        })
      } else if (valueKind && valueKind == 'DATE') {
        this.$nextTick(() => {
          if (defaultValue && this.$refs[code] && this.$refs[code].length > 0) {
            this.$refs[code][0].model = defaultValue
            this.dateChangeSingle(code, defaultValue)
          }
        })
      } else if (valueKind && valueKind == 'MONTH') {
        this.$nextTick(() => {
          if (defaultValue && this.$refs[code] && this.$refs[code].length > 0) {
            this.$refs[code][0].model = defaultValue
            this.dateChangeSingle(code, defaultValue)
          }
        })
      } else if (valueKind && valueKind == 'S-SEARCH') { // 单选放大镜
        if (defaultValue && defaultValue.length > 0) {
          this.$set(this.formData._value, code, defaultValue[0])
          this.$set(this.formData._value, code + '_Name', defaultValue[1])
        }
      } else if (valueKind && valueKind == 'M-SEARCH') { // 多选放大镜
        if (defaultValue && defaultValue.length > 0) {
          this.$set(this.formData._value, code, [defaultValue[0]])
          this.$set(this.formData._value, code + '_Name', defaultValue[1])
        }
      } else if (valueKind && valueKind == 'M-CHOICE') { // 多选下拉
        if (defaultValue && !Array.isArray(defaultValue)) {
          this.$set(this.formData._value, code, [defaultValue])
        } else {
          this.$set(this.formData._value, code, defaultValue)
        }
      } else {
        this.$set(this.formData._value, code, defaultValue)
      }
      // 如果该默认值未设置，需要给searchCond设置上，以便清空条件时恢复
      if (this.searchCond) {
        let filters = this.searchCond.filter(it => it.valueFormat && it.valueFormat.code === code);
        if (filters && filters.length > 0) {
          this.$set(filters[0].valueFormat, 'default', defaultValue);
        }
      }
    },
    /**
     * @desc   : desc
     * @author : 周兴
     * @date   : 2022/3/22 10:01
     */
    dateChange(modelName, date) {
      if (date && date.length > 1) {
        this.$set(this.formData._value, modelName + 'Start', date[0])
        this.$set(this.formData._value, modelName + 'End', date[1])
      } else {
        this.$set(this.formData._value, modelName + 'Start', null)
        this.$set(this.formData._value, modelName + 'End', null)
      }
    },
    /**
     * @desc   : 给日期赋值
     * @author : 周兴
     * @date   : 2023/2/19 17:16
     */
    dateChangeSingle(modelName, date) {
      // console.log('ddd',date,typeof date)
      this.$nextTick(() => {
        if (date) {
          this.$set(this.formData._value, modelName, date)
        }
      })
    },
    /**
     * @desc   : 放大镜点击事件
     * @author : 周兴
     * @date   : 2023/2/15 15:12
     */
    selectMagnifierOk(e) {
      // let value = null;
      // console.log('ee', e)
      // // 多选
      // if (e.multiple) {
      //   if (e.rows) {
      //     value = e.rows.map(it => it[e.field])
      //   }
      //   this.$set(this.formData._value, e.field + 's', value)
      // } else { // 单选
      //   if (e.rows) {
      //     value = e.rows[0][e.field]
      //   }
      //
      //   this.$set(this.formData._value, e.field, value)
      // }
      this.$emit('selectMagnifierOk', e)
    },
    /**
     * @desc   : 保存方案
     * @author : 沈博
     * @date   : 2022/3/11 9:16
     */
    SaveAsOkBtn() {
      if (!this.addFromData.pquName) {
        this.$Message.warning(vm.$t('inputWords', {'search-name': vm.$t('scenario')}))
        return
      }
      let params = {}
      params.pquName = this.addFromData.pquName
      params.flgDefault = this.addFromData.flgDefault
      params.soId = this.$store.state.user.soId
      params.userId = this.$store.state.user.id
      params.pageCode = this.type
      params.flgSoDefault = false
      let queryItemPageUserList = [...this.tableDataRight]
      queryItemPageUserList.forEach((it, index) => it.displayNo = index + 1)
      params.queryItemPageUserList = [...queryItemPageUserList]
      //保存方案
      QueryPageUserService.insert(params).then(res => {
        if (res.code === 200) {
          //刷新查询条件
          if (this.addFromData.flgDefault) {
            this.setForm()
          }
          this.showModalSaveAs = false
          this.showModal = false
          this.$Message.success(vm.$t('I_002'))
        } else {
          this.$Message.warning(res.message)
        }
      })

    },
    /**
     * @desc   : modal变化事件
     * @author : 沈博
     * @date   : 2022/3/11 9:16
     */
    visibleChange(flag) {
      if (flag) {
        this.initFilter()
      }
    },
    /**
     * @desc   : 右侧排序事件
     * @author : 沈博
     * @date   : 2022/3/11 9:16
     */
    sortTableRight(type) {
      let arr = this.tableDataRight.filter((it, index) => {
        return index !== this.currentRightRowIndex
      })
      switch (type) {
        case 1:
          /* 最上 */
          arr.splice(0, 0, this.tableDataRight[this.currentRightRowIndex])
          this.currentRightRowIndex = 0
          break
        case 2:
          arr.splice(this.currentRightRowIndex - 1, 0, this.tableDataRight[this.currentRightRowIndex])
          this.currentRightRowIndex = this.currentRightRowIndex - 1
          break
        case 3:
          /* 下 */
          arr.splice(this.currentRightRowIndex + 1, 0, this.tableDataRight[this.currentRightRowIndex])
          this.currentRightRowIndex = this.currentRightRowIndex + 1
          break
        case 4:
          /* 最下 */
          arr.push(this.tableDataRight[this.currentRightRowIndex])
          this.currentRightRowIndex = this.tableDataRight.length - 1
          break
      }
      this.tableDataRight = [...arr]
    },
    /**
     * @desc   : 左侧表格当前行变化事件
     * @author : 沈博
     * @date   : 2022/3/11 9:17
     */
    leftTableCurrentChangeEvent({row, rowIndex}) {
      this.currentLeftRowIndex = rowIndex
      this.searchRight().then(() => {
        this.searchCenter()
      })
    },
    /**
     * @desc   : 右侧的表格当前行变化事件
     * @author : 沈博
     * @date   : 2022/3/11 9:17
     */
    currentChangeEvent({row, rowIndex}) {
      this.currentRightRowIndex = rowIndex
    },
    /**
     * @desc   : 通过已选查询条件设置最大查询条件
     * @author : 沈博
     * @date   : 2022/3/11 9:17
     */
    setLeftByRight() {
      this.tableDataLeft = this.tableDataLeft.filter(it => !this.tableDataRight.map(mapIt => mapIt.itemCode).includes(it.itemCode))
    },
    /**
     * @desc   : 查询当前方案下的查询条件
     * @author : 沈博
     * @date   : 2022/3/11 9:18
     */
    searchRight() {
      return new Promise(resolve => {
        QueryItemService.listByPquId({pquId: this.tableDataLeftLeft[this.currentLeftRowIndex].pquId}).then(res => {
          if (res.code === 200) {
            this.tableDataRight = res.data
            resolve()
          } else {
            this.$Message.warning(res.message)
          }
        })
      })
    },
    /**
     * @desc   : 另存为点击事件
     * @author : 沈博
     * @date   : 2022/3/11 9:18
     */
    saveAs() {
      this.showModalSaveAs = true
    },
    /**
     * @desc   : 保存点击事件
     * @author : 沈博
     * @date   : 2022/3/11 9:18
     */
    save() {
      //没有变化就不用保存
      if (!this.isChange) {
        return
      }
      let param = {
        pquId: this.tableDataLeftLeft[this.currentLeftRowIndex].pquId,
        queryItemPageUserList: []
      }
      this.tableDataRight.forEach((it, index) => {
        param.queryItemPageUserList.push({
          soId: this.$store.state.user.soId,
          pquId: this.tableDataLeftLeft[this.currentLeftRowIndex].pquId,
          itemCode: it.itemCode,
          userId: this.$store.state.user.id,
          pageCode: this.type,
          displayNo: index + 1,
          remarks: it.remarks
        })
      })
      /* 编辑方案明细表 */
      QueryItemPageUserService.update(param.pquId, param.queryItemPageUserList).then(res => {
        if (res.code === 200) {
          this.setForm()
        } else {
          this.$Message.warning(res.message)
        }
      })
      this.showModal = false
    },
    /**
     * @desc   : 关闭点击事件
     * @author : 沈博
     * @date   : 2022/3/11 9:18
     */
    cancel() {
      this.showModal = false
    },
    /**
     * @desc   : 修改默认方案
     * @author : 沈博
     * @date   : 2022/3/11 9:19
     */
    changeDefault({row}) {
      let params = {...row}
      params.userId = this.$store.state.user.id
      QueryPageUserService.updateDefault(params).then(res => {
        if (res.code === 200) {
          /* 前台先做一下修改组件 */
          this.searchLeft()
          /*重新设置页面查询条件*/
          this.setForm()
          this.$Message.success(vm.$t('I_002'))
        } else {
          this.$Message.warning(res.message)
        }
      })
    },
    /* 左边排序 */
    sortData(tableDataLeft) {
      let arr = []
      this.sortSearchCond.forEach(it => {
        let filterList = tableDataLeft.filter(it2 => {
          return it2.itemCode === it
        })
        if (filterList.length > 0) {
          arr.push(filterList[0])
        }
      })
      return arr
    },
    /**
     * @desc   : 添加查询条件
     * @author : 沈博
     * @date   : 2022/3/11 9:19
     */
    add(row) {
      this.tableDataRight.push(row)
      this.tableDataLeft = this.tableDataLeft.filter(it => {
        return it.itemCode !== row.itemCode
      })
    },
    /**
     * @desc   : 移除查询条件
     * @author : 沈博
     * @date   : 2022/3/11 9:19
     */
    del(row) {
      this.tableDataLeft.push(row)
      this.tableDataRight = this.tableDataRight.filter(it => {
        return it.itemCode !== row.itemCode
      })
    },
    /**
     * @desc   : 开启modal
     * @author : 沈博
     * @date   : 2022/3/11 9:19
     */
    openModal() {
      this.showModal = true
      this.$refs.tableLeft.loadData(this.sortData(this.tableDataLeft))
      this.$refs.tableRight.loadData(this.tableDataRight)
      this.$refs.tableLeftLeft.loadData(this.tableDataLeftLeft)
    },

    /* 查询左侧(方案) */
    searchLeft() {
      QueryPageUserService.listByJoin({
        userId: this.$store.state.user.id,
        soId: this.$store.state.user.soId,
        pageCode: this.type
      }).then(res => {
        if (res.code === 200) {
          this.tableDataLeftLeft = res.data
          this.tableDataLeftLeft.forEach((it, index) => {
            if (it.flgSoDefault) {
              this.$set(it, 'default', it.defUserIds.includes(this.$store.state.user.id))
            } else {
              this.$set(it, 'default', it.flgDefault)
            }
            setTimeout(() => {
              if (it.default) {
                this.leftTableCurrentChangeEvent({row: it, rowIndex: index})
                this.$refs['tableLeftLeft'].setRadioRow(it)
              }
            })
          })
        } else {
          this.$Message.warning(res.message)
        }
      })
    },
    /**
     * @desc   : 查询当前页全部查询条件
     * @author : 沈博
     * @date   : 2022/3/11 9:19
     */
    searchCenter() {
      // 查询当前页全部查询条件 todo
      QueryItemService.listByPageCode({pageCode: this.type}).then(res => {
        if (res.code === 200) {
          // console.log("QueryItemService.listByPageCode", res)
          this.tableDataLeft = res.data
          this.sortSearchCond = []
          this.tableDataLeft.forEach(it => {
            this.sortSearchCond.push(it.itemCode)
          })
          this.setLeftByRight()
        } else {
          this.$Message.warning(res.message)
        }
      })
    },
    /**
     * @desc   : 初始化modal
     * @author : 沈博
     * @date   : 2022/3/11 9:20
     */
    initFilter() {
      this.searchCenter()
      this.searchLeft()
    },
    /**
     * @desc   : 获取查询条件
     * @author : 沈博
     * @date   : 2022/3/11 9:20
     */
    getSearchData() {
      return this.formData._value
    },
    /**
     * @desc   : 聚焦
     * @author : 周兴
     * @date   : 2022/3/27 13:20
     */
    focus() {
      // 控制光标放到第一个元素上
      if (this.searchCond) {
        if (this.searchCond && this.searchCond.length > 0) {
          this.firstSearchCond = this.searchCond[0]
          // 文本
          if (this.firstSearchCond.valueKind === this.$config.docUserInput.str) {
            this.$nextTick(() => {
              if (this.$refs[this.firstSearchCond.valueFormat.code] && this.$refs[this.firstSearchCond.valueFormat.code].length > 0) {
                // this.$refs[this.firstSearchCond.valueFormat.code][0].$refs.input.focus()
                this.$refs[this.firstSearchCond.valueFormat.code][0].focus()
              }
            })
          }
          // 下拉 日期
          else if (this.firstSearchCond.valueKind === this.$config.docUserInput.mSearch
            || this.firstSearchCond.valueKind === this.$config.docUserInput.dateRange) {
            this.$nextTick(() => {
              if (this.$refs[this.firstSearchCond.valueFormat.code]) {
                this.$refs[this.firstSearchCond.valueFormat.code][0].isFocused = true
              }
            })
          }
        }
      }
    },
    /**
     * @desc   : 恢复默认值
     * @author : 周兴
     * @date   : 2022/5/25 15:22
     */
    clearCondition() {
      this.formData._value = {}
      this.searchCond.forEach(it => {
        //文本清空默认值，不知道为什么要这样，不这样还有可能会显示
        if (it.valueKind === 'STR' && this.$refs[it.valueFormat.code]) {
          this.$refs[it.valueFormat.code][0].value2 = null;
        }
        if (it.valueKind === 'DATE_RANGE' && this.$refs[it.valueFormat.code]) {
          this.$set(this.formData._value, it.valueFormat.code, null);
          this.$refs[it.valueFormat.code][0].clear()
          this.dateChange(it.valueFormat.code, null);
        }
        // 清除放大镜的值
        if (it.valueKind === 'S-SEARCH') {
          this.$emit('selectMagnifierOk', null)
        }
        //增加默认值
        if (it.valueFormat.default) {
          this.setDefault(it.valueFormat.code, it.valueFormat.default, it.valueKind)
        }
      })
      this.focus()// 光标放在第一个控件上
    },
    /**
     * @desc   : 设置查询条件
     * @author : 周兴
     * @date   : 2022/3/3 17:10
     */
    setForm() {
      // console.log('this', this.formData)
      this.$set(this.formData, '_value', {})
      if (this.defaultFormValue) {
        this.$set(this.formData, '_value', this.defaultFormValue)
      }
      if (this.setFlag) {
        // 查询数据库查询条件方案
        this.searchCond = [
          {
            itemCode: '名称-文本',
            itemName: '名称',
            valueFormat: {code: 'name'},
            valueKind: 'STR'
          },
          {
            itemCode: '编码-文本',
            itemName: '编码',
            valueFormat: {code: 'code'},
            valueKind: 'STR'
          },

        ]
        this.focus()// 光标放在第一个控件上
        this.searchCond.forEach(it => {
          // 如果是下拉菜单要获取数据
          if (it.valueKind === 'M-CHOICE' && it.valueFormat.type === 'active') {
            // console.log('@/api/'+it.valueFormat.api.service)
            let service = require('@/api/' + it.valueFormat.api.service).default
            let param = it.valueFormat.api.params
            param.soId = this.$store.state.user.soId
            // service[it.valueFormat.api.methods](param).then(res => {
            //   let data = { ...res }
            //   it.valueFormat.api.result.forEach(resultIt => {
            //     data = data[resultIt]
            //   })
            //   it.valueFormat.data = data
            // })
          }
        })
        // QueryItemService.listDefault({userId:this.$store.state.user.id,pageCode:this.type}).then(res=>{
        //   this.spinShow = false
        //   if(res.code === 200){
        //     this.searchCond = res.data
        //     this.focus()// 光标放在第一个控件上
        //     this.searchCond.forEach(it=>{
        //       // 如果是下拉菜单要获取数据
        //       if(it.valueKind === 'M-CHOICE' && it.valueFormat.type === 'active'){
        //         // console.log('@/api/'+it.valueFormat.api.service)
        //         let service = require('@/api/'+it.valueFormat.api.service).default
        //         let param = it.valueFormat.api.params
        //         param.soId = this.$store.state.user.soId
        //         service[it.valueFormat.api.methods](param).then(res=>{
        //           let data = {...res}
        //           it.valueFormat.api.result.forEach(resultIt=>{
        //             data = data[resultIt]
        //           })
        //           it.valueFormat.data = data
        //         })
        //       }
        //     })
        //   }
        // })
      } else {
        // console.log('t',this.searchCond)
        this.searchCond = this.searchContent
        // 设置label
        this.searchCond.forEach(it => {
          it.itemName = it.itemName ? it.itemName : it.itemCode
          it.itemName = vm.$t(it.itemName) || vm.$t(it.valueFormat.code)
          if (!it.valueFormat) {
            it.valueFormat = {code: it.itemCode}
          } else {
            it.valueFormat.code = it.valueFormat.code ? it.valueFormat.code : it.itemCode
          }
          // 类型如果是空，就默认是Str
          if (!it.valueKind) {
            it.valueKind = this.$config.docUserInput.str
          }
          //增加默认值 defaultFormValue 用于自定义报表切换
          if (!this.customChangeFlag && it.valueFormat.default) {
            this.setDefault(it.valueFormat.code, it.valueFormat.default, it.valueKind)
          }
          // this.formData._value[it.valueFormat.code] = it.valueFormat.default;
        })
        //console.log('tttt',this.searchCond)
        this.focus()// 光标放在第一个控件上
      }
      this.setSpanData();  // 设置span
    },
    /**
     * @desc   : 设置span
     * @author : 周兴
     * @date   : 2023/2/25 20:44
     */
    setSpanData() {
      // 如果少于一行，就向上取整
      if (this.searchCond.length < this.colCount) {
        this.spanData = Math.ceil(24 / this.colCount)
      } else {
        this.spanData = parseInt(24 / this.colCount + '')
      }
    }
  },
  activated() {
  },
  created() {
    // 设置查询条件
    this.setForm()
    //设置大查询条件的提示信息
    if (this.allConditonContent) {
      let placeholder = '';
      this.allConditonContent.forEach(it => {
        placeholder += vm.$t(it) + '/'
      })
      placeholder = vm.$t('inputWords', {'search-name': placeholder})
      this.placeholderData = placeholder;
    }
  }
}
</script>

<style scoped>

/deep/ .add-btn, /deep/ .del-btn {
  display: flex;
  justify-content: center;
  align-items: center;
}

/deep/ .add-btn > i, /deep/ .del-btn > i {
  font-size: 20px;
}

/deep/ .add-btn > i {
  color: #2d8cf0;
}

/deep/ .del-btn > i {
  color: red;
}

/deep/ .ivu-collapse-content-box {
  padding-top: 1px !important;
}

/deep/ .ivu-collapse-content {
  padding: 0 10px 3px 10px !important;
}


/deep/ .ivu-input-group-prepend {
  padding: 5px 7px;
  background-color: transparent;
  /*border-right: unset!important;*/
}

/deep/ .vxe-header--column {
  padding: 0 !important;
}

/deep/ .vxe-body--column {
  height: 12px !important;
  line-height: 12px !important;
}

/deep/ .el-tabs__item {
  height: 20px;
}


/deep/ .ivu-tabs-nav-container {
  height: 24px !important;
}

/deep/ .ivu-input-group {
  line-height: 8px !important;
}

.ivu-col-span-6 {
  display: block;
  flex: 0 0 calc(25% - 12px);
  max-width: calc(25% - 12px);
}


.Col {
  padding-right: 10px;
  margin-bottom: 2px !important;
}


.ivu-form-item {
  margin-bottom: 1px !important;
}

.ivu-form-item-error-tip {
  font-size: 12px !important;
}

/deep/ .ivu-select-default.ivu-select-multiple .ivu-select-selection {
  height: 32px;
}

.demo-split {
  height: 500px;
  border: 1px solid #dcdee2;
}

.demo-split-pane {
  padding: 10px;
}

.ivu-col-span-4 {
  max-width: 15% !important;
}

/deep/ .ivu-collapse-header {
  display: flex;
  align-items: center;
  height: 35px !important;
}

.required:before {
  content: '*';
  color: red;
}

.ivu-spin-fix {
  z-index: 11;
}

.all-condition {
  /*margin-top: 6px;*/
  /*margin-left: -12px !important;*/
  margin-bottom: 2px;
  width: 450px;
}

.change-icon {
  margin: 0 0 0 20px;
  font-size: 14px;
  cursor: pointer
}

.set-icon {
  margin-left: 10px;
  font-size: 14px;
  cursor: pointer;
}

.content-class {
  width: 100%;
}

/deep/ .ivu-row {
  /*flex-flow: unset !important;*/
  /*display: block !important;*/
}

.split-class {
  height: 2px;
  background: #E6ECF4;
  margin-bottom: 3px;
}

/deep/ .ivu-form-inline .ivu-input-group {
  top: 0px !important;
}


/*日期组件的图标被覆盖，z-index设置为2也是失效，所以设置为3*/
/deep/ .ivu-input-suffix {
  z-index: 3;
}

/deep/.switch-class .ivu-input-group-prepend{
  padding-top: 8px;
  border: none;
  background: transparent
}

/deep/ .ivu-input{
  /*border-left: unset!important;*/
  border-top-left-radius: 0!important;
  border-bottom-left-radius: 0!important;
}

/deep/ xm-select {
  /*border-left: unset!important;*/
  border-top-left-radius: 0!important;
  border-bottom-left-radius: 0!important;
}
</style>
