<template>
  <div class="customCondition-container">
    <el-select :clearable="true" @clear="clearSel" filterable placeholder="请选择条件" v-model="formcustomCondition">
      <el-option :key="item.id" :label="item.queryName" :value="item.queryName"
        @click="formCustomChange(item.queryName, item.id)" class="f_12" v-for="item in getCustomerItem.customCondition">
      </el-option>
    </el-select>
    <el-input :disabled="isDisabled" @input="iptChange" placeholder="请输入搜索关键词" v-if="showInput" v-model="iptVal" />
    <el-select :disabled="isDisabled" @clear="lastClearSel" clearable filterable placeholder="请选择搜索关键词" v-model="val"
      v-show="showSelect">
      <el-option :key="item.id" :label="item.name" :value="item.id" @click="selChange(item.name, item.id)"
        v-for="item in childSelect"></el-option>
    </el-select>
    <div class="input-number-box" v-show="showNumber">
      <!-- <el-input :disabled="isDisabled" @input="numStVal" @keyup="statusProving" maxlength="12" placeholder="起始值"
        size="mini" v-model="numStatus" /> -->
      <el-input :disabled="isDisabled" @input="numStVal" @blur="stIpt" maxlength="15" placeholder="起始值" size="mini"
        v-model="numStatus" />
      <span>-</span>
      <!-- <el-input :disabled="isDisabled" @blur="lastIpt" @input="numEnVal" @keyup="endProving" maxlength="15"
        placeholder="结束值" size="mini" v-model="numEnd" /> -->
      <el-input :disabled="isDisabled" @blur="lastIpt" @input="numEnVal" maxlength="15" placeholder="结束值" size="mini"
        v-model="numEnd" />
    </div>
  </div>
</template>
<script>
import { numberRexgu } from '@/utils/takeMethods.js'
export default {
  props: {
    getCustomerItem: Object,
    reset: Boolean
  },
  data () {
    return {
      formcustomCondition: '',
      val: '',
      iptVal: '',
      dateVal: '',
      numStatus: '',
      numEnd: '',
      showInput: true,
      showSelect: false,
      showNumber: false,
      isDisabled: true,
      childSelect: [],
      currSelect: {},
      backResult: {
        currVal: '',
        outResult: {}
      }
    }
  },
  methods: {
    // statusProving () {
    //   this.numStatus = this.numStatus.replace(/[^.\d]/g, '')
    //   this.numStatus = this.numStatus.replace('.', '')
    // },
    endProving () {
      this.numEnd = this.numEnd.replace(/[^.\d]/g, '')
      this.numEnd = this.numEnd.replace('.', '')
    },
    clearSel (value) {
      if (value == undefined) {
        this.val = ''
        this.iptVal = ''
        this.numStatus = ''
        this.numEnd = ''
        this.isDisabled = true
        this.backResult.currVal = value
        this.$emit('result', this.backResult)
      }
    },
    formCustomChange (name, id) {
      this.backResult.outResult = {}
      this.isDisabled = false
      this.val = ''
      this.iptVal = ''
      this.numStatus = ''
      this.numEnd = ''
      this.childSelect = []
      this.backResult.currVal = name
      this.$emit('result', this.backResult)
      this.getCustomerItem.customCondition.forEach(element => {
        if (name == element.queryName) {
          if (element.inputType == 1) {
            this.dateVal = ''
            this.showInput = true
            this.showSelect = false
            this.showNumber = false
            this.currSelect = element
          } else if (element.inputType == 2) {
            this.currSelect = element
            this.dateVal = ''
            this.showInput = false
            this.showSelect = true
            this.showNumber = false
            if (element.queryName == '关闭状态') {
              this.childSelect = this.getCustomerItem.cloStatus
            } else if (element.queryName == '是否211' || element.queryName == '是否是211型号') {
              // this.childSelect = this.getCustomerItem.is211
              this.childSelect = [{ id: false, name: '否' }, { id: true, name: '是' }]
            } else if (element.queryName == '仓库') {
              this.childSelect = this.getCustomerItem.warehouse
            } else if (element.queryName == '是否赠品' || element.queryName == '是否是赠品') {
              // this.childSelect = this.getCustomerItem.isFree
              this.childSelect = [{ id: false, name: '否' }, { id: true, name: '是' }]
            } else if (element.queryName == '收款条件' || element.queryName == '付款条件') {
              this.childSelect = this.getCustomerItem.reccondition
            } else if (element.queryName == '仓位' || element.queryName == '子仓库') {
              this.childSelect = this.getCustomerItem.childWarehouse
            } else if (element.queryName == '供应链' || element.queryName == '东莞/深圳') {
              this.childSelect = this.getCustomerItem.supplyChainType
            } else if (element.queryName == '供应组织') {
              this.childSelect = this.getCustomerItem.supplys
            } else if (element.queryName == '结算组织') {
              this.childSelect = this.getCustomerItem.settleOrg
            } else if (element.queryName == '结算币别') {
              this.childSelect = this.getCustomerItem.dcurrency
            } else if (element.queryName == '结算方式') {
              this.childSelect = this.getCustomerItem.settleType
            } else if (element.queryName == '跟单员') {
              this.childSelect = this.getCustomerItem.orgAllPerson
            } else if (element.queryName == '默认供应商') {
              this.childSelect = this.getCustomerItem.suppliers
            } else if (element.queryName == '销售员') {
              this.childSelect = this.getCustomerItem.salePersons ? this.getCustomerItem.salePersons : this.getCustomerItem.orgAllPerson
            } else if (element.queryName == '退货类型') {
              this.childSelect = this.getCustomerItem.returnTypes
            } else if (element.queryName == '销售部门') {
              this.childSelect = this.getCustomerItem.saleDept
            } else if (element.queryName == '单据状态') {
              this.childSelect = this.getCustomerItem.documentStatus
            } else if (element.queryName == '库存部门') {
              this.childSelect = this.getCustomerItem.stockDept
            } else if (element.queryName == '收料组织') {
              this.childSelect = this.getCustomerItem.receivingOrg
            } else if (element.queryName == '采购组织') {
              this.childSelect = this.getCustomerItem.purchaseOrg
            } else if (element.queryName == '采购部门') {
              this.childSelect = this.getCustomerItem.purchaseDept
            } else if (element.queryName == '收料部门') {
              this.childSelect = this.getCustomerItem.receivingDept
            } else if (element.queryName == '采购员') {
              this.childSelect = this.getCustomerItem.purchasePerson
            } else if (element.queryName == '仓管员') {
              this.childSelect = this.getCustomerItem.followPersons ? this.getCustomerItem.followPersons : this.getCustomerItem.orgAllPerson
            } else if (element.queryName == '退料组织') {
              this.childSelect = this.getCustomerItem.returnMaterialOrg
            } else if (element.queryName == '退料部门') {
              this.childSelect = this.getCustomerItem.returnMaterialDept
            } else if (element.queryName == '退料方式') {
              this.childSelect = this.getCustomerItem.returnMaterial
            } else if (element.queryName == '补料方式') {
              this.childSelect = this.getCustomerItem.replenishment
            } else if (element.queryName == '单据类型') {
              this.childSelect = this.getCustomerItem.billType
            } else if (element.queryName == '物料属性') {
              this.childSelect = this.getCustomerItem.MaterialProperty
            } else if (element.queryName == '产品定位') {
              this.childSelect = this.getCustomerItem.productLocation
            } else if (element.queryName == '生命周期') {
              this.childSelect = this.getCustomerItem.lifeCycle
            } else if (element.queryName == '安规') {
              this.childSelect = this.getCustomerItem.safety
            } else if (element.queryName == '品牌类型') {
              this.childSelect = this.getCustomerItem.brand
            } else if (element.queryName == '禁用状态') {
              this.childSelect = this.getCustomerItem.isDisable
            } else if (element.queryName == '销售组织') {
              this.childSelect = this.getCustomerItem.saleOrgs
            } else if (element.queryName == '供应商') {
              this.childSelect = this.getCustomerItem.supplier
            } else if (element.queryName == '数据来源') {
              this.childSelect = this.getCustomerItem.dataSourceTypes
            } else if (element.queryName == '单位' || element.queryName == '子单位') {
              this.childSelect = this.getCustomerItem.unitlist
            } else if (element.queryName == '存货类别') {
              this.childSelect = this.getCustomerItem.InventoryType
            }
          } else if (element.inputType == 3) {
            this.val = ''
            this.iptVal = ''
            this.showInput = false
            this.showSelect = false
            this.showNumber = true
            this.currSelect = element
          }
        }
      })
    },
    iptChange (val) {
      console.log('切换的输入框', this.currSelect)
      this.dateVal = ''
      this.val = ''
      this.backResult.outResult = {}
      if (val == '') {
        this.iptVal = ''
        delete this.backResult.outResult[`${this.currSelect.queryField}`]
        this.$emit('result', this.backResult)
      } else {
        this.backResult.outResult[`${this.currSelect.queryField}`] = val
        this.$emit('result', this.backResult)
      }
    },
    selChange (name, id) {
      this.dateVal = ''
      this.backResult.outResult = {}
      this.childSelect.forEach(element => {
        if (element.name == name) {
          this.backResult.outResult[`${this.currSelect.queryField}`] = element.id
        }
      })
      this.$emit('result', this.backResult)
    },
    lastClearSel (value) {
      delete this.backResult.outResult[`${this.currSelect.queryField}`]
      this.$emit('result', this.backResult)
    },
    numStVal (val) {
      this.numStatus = numberRexgu(val)
      this.val = ''
      this.dateVal = ''
      if (this.numStatus == '' && this.numEnd == '') {
        this.backResult.outResult = {}
      }
      if (this.numStatus) {
        this.dateVal = this.numStatus + '|' + this.numEnd
        this.backResult.outResult[`${this.currSelect.queryField}`] = this.dateVal
        this.$emit('result', this.backResult)
      }else{
        this.numStatus = ''
        if (this.numEnd) {
          this.dateVal = this.numStatus + '|' + this.numEnd
          this.backResult.outResult[`${this.currSelect.queryField}`] = this.dateVal
          this.$emit('result', this.backResult)
        } else {
          this.dateVal = ''
          this.dateVal = this.numStatus + '|' + this.numEnd
          this.backResult.outResult[`${this.currSelect.queryField}`] = this.dateVal
          this.$emit('result', this.backResult)
        }
      }
    },
    numEnVal (val) {
      this.numEnd = numberRexgu(val)
      this.val = ''
      this.dateVal = ''
      if (this.numStatus == '' && this.numEnd == '') {
        this.backResult.outResult = {}
      }

      if (this.numEnd) {
        this.dateVal = this.numStatus + '|' + this.numEnd
        this.backResult.outResult[`${this.currSelect.queryField}`] = this.dateVal
        this.$emit('result', this.backResult)
      } else {
        this.numEnd = ''
        if (this.numStatus || this.numStatus == 0) {
          this.dateVal = this.numStatus + '|' + this.numEnd
          this.backResult.outResult[`${this.currSelect.queryField}`] = this.dateVal
          this.$emit('result', this.backResult)
        } else {
          this.dateVal = ''
          this.dateVal = this.numStatus + '|' + this.numEnd
          this.backResult.outResult[`${this.currSelect.queryField}`] = this.dateVal
          this.$emit('result', this.backResult)
        }
      }
    },
    lastIpt () {
      if (this.numEnd) {
        this.numEnd = this.numEnd * 1
      }
    },
    stIpt () {
      if (this.numStatus) {
        this.numStatus = this.numStatus * 1
      }
    }
  },
  watch: {
    reset: function (val) {
      if (val) {
        this.formcustomCondition = ''
        this.iptVal = ''
        this.val = ''
        this.numStatus = ''
        this.numEnd = ''
        this.isDisabled = true
        this.showInput = true
        this.showSelect = false
        this.showNumber = false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.customCondition-container {
  display: flex;
  justify-content: center;
  align-items: center;

  .input-number-box {
    display: flex;
    justify-content: center;
    align-items: center !important;

    span {
      margin: 0 4px;
    }
  }
}

::v-deep(.el-select) {
  // width: 172px!important;
  margin-top: 1px !important;
  margin-right: 10px;
}

::v-deep(.el-autocomplete) {
  width: 100% !important;
}

::v-deep(.el-input__inner) {
  height: 28px !important;
  line-height: 28px !important;
}
</style>