<template>
  <el-row v-show="show">
    <div
      :style="{ width: labelWidth + 'px' }"
      class="field-label-panel"
      :class="{ 'is-align-right': isAlignRight }"
    >
      <label class="search-field-label" v-if="currentLabel">{{ currentLabel }}：</label>
    </div>
    <div
      :style="{ width: `calc(100% - ${this.labelWidth + 30}px)` }"
      class="field-input-panel"
      :class="{ 'unset-width': isAlignRight }"
    >
      <ht-input
          v-if="type == 'text'"
          v-model="data"
          :placeholder="placeholder"
          :disabled="disabled"
          @keyup.enter.native="$emit('enter-search')"
      ></ht-input>
      <ht-date
          v-if="type == 'date'"
          v-model="data"
          :format="valueFormat"
          :value-format="valueFormat"
          :placeholder="placeholder"
          :default-time="defaultTime"
          :disabled="disabled"
          @keyup.enter.native="$emit('enter-search')"
      />
      <el-date-picker
        v-if="type == 'daterange'"
        size="small"
        v-model="data"
        type="daterange"
        :default-time="['00:00:00', '23:59:59']"
        :value-format="valueFormat"
        align="right"
        unlink-panels
        range-separator="-"
        :start-placeholder="$t('ht.common.startDate')"
        :end-placeholder="$t('ht.common.endDate')"
        :picker-options="pickerOptions"
        :disabled="disabled"
      ></el-date-picker>
      <el-date-picker
          v-if="type=='monthrange'"
          size="small"
          v-model="data"
          type="monthrange"
          :value-format="valueFormat"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
          :picker-options="pickerMonthOptions"
          :disabled="disabled"
      ></el-date-picker>
      <el-date-picker :disabled="disabled" v-if="type=='year'" size="small" v-model="data" type="year"></el-date-picker>
      <ht-select
          v-if="type=='select'"
          v-model="data"
          :appendDefault="appendDefault"
          :clearable="clearable"
          :filterable="filterable"
          :multiple="multiple"
          :placeholder="placeholder"
          :props="props"
          :options="myOptions"
          @change="change"
          :disabled="disabled"
      ></ht-select>
      <input v-if="type=='custom'" type="hidden" v-model="data"/>
      <slot name="custom"></slot>
    </div>
  </el-row>
</template>
<script>
export default {
  name: 'ht-table-search-field',
  props: {
    defaultValue: '',
    defaultTime: {
      type: String,
      default: '00:00:00'
    },
    isAlignRight: {
      type: Boolean,
      default: false
    },
    props: {
      type: Object,
      default: function () {
        return {
          key: 'key',
          value: 'value'
        }
      }
    },
    prop: {
      type: String,
      required: true
    },
    operation: {
      type: String,
      default: 'LIKE',
      validator: (value) =>
        [
          'EQUAL',
          'EQUAL_IGNORE_CASE',
          'LESS',
          'GREAT',
          'LESS_EQUAL',
          'GREAT_EQUAL',
          'NOT_EQUAL',
          'LIKE',
          'LEFT_LIKE',
          'RIGHT_LIKE',
          'IS_NULL',
          'NOTNULL',
          'IN',
          'BETWEEN'
        ].indexOf(value) != -1
    },
    relation: {
      type: String,
      default: 'AND',
      validator: (value) => ['AND', 'OR'].indexOf(value) != -1
    },
    label: String,
    labelWidth: Number,
    type: {
      type: String,
      default: 'text',
      validator: value =>
          [
            'text',
            'date',
            'daterange',
            'monthrange',
            'year',
            'select',
            'custom'
          ].indexOf(value) != -1
    },
    options: Array,
    placeholder: {
      type: String,
      default() {
        if (this.type == 'text') {
          return `${this.$t('ht.common.enter')}${this.label}`
        } else {
          return `请选择${this.label}`
        }
      }
    },
    valueFormat: {
      type: String,
      default: 'yyyy-MM-dd HH:mm:ss'
    },
    appendDefault: {
      type: Boolean,
      default: false
    },
    multiple: {
      type: Boolean,
      default: false
    },
    clearable: {
      type: Boolean,
      default: false
    },
    filterable: {
      type: Boolean,
      default: false
    },
    changeFun: {
      type: Function
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      currentLabel: this.label,
      show: true,
      data: null,
      monthdata: null,
      pickerOptions: {
        shortcuts: [
          {
            text: this.$t('ht.common.lastWeek'),
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: this.$t('ht.common.lastMonth'),
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: this.$t('ht.common.lastThreeMonths'),
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      pickerMonthOptions: {
        shortcuts: [
          {
            text: '本月',
            onClick(picker) {
              picker.$emit('pick', [new Date(), new Date()])
            }
          },
          {
            text: '今年至今',
            onClick(picker) {
              const end = new Date()
              const start = new Date(new Date().getFullYear(), 0)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近六个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setMonth(start.getMonth() - 6)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },
  methods: {
    changeShow(value) {
      this.show = value
      console.log('this.data1=', this.data)
      if (!value) {
        this.data = ''
      }
      console.log('this.data2=', this.data)
      this.emitValue(this.data)
    },
    change(data, selObj) {
      if (this.changeFun) {
        this.changeFun(data, selObj)
      }
    },
    changeValue(value) {
      this.data = value
      this.emitValue(value)
    },
    changeLabel(value) {
      this.currentLabel = value
    },
    changeOptions(opt) {
      this.inserDefault(opt)
      this.myOptions = opt
    },
    emitValue(newVal) {
      this.$emit(
          'input-change',
          { value: newVal, operation: this.operation, relation: this.relation },
          this.prop
      )
    },
    inserDefault(opt) {
      if (this.appendDefault && opt) {
        let key = this.props.key
        let value = this.props.value
        let rest = opt.some(x => x[value] === '' || x[key] === '请选择')
        if (!rest) {
          opt.unshift({ [key]: '请选择', [value]: '' })
        }
      }
    }
  },
  watch: {
    data: {
      handler: function (newVal) {
        this.emitValue(newVal)
      }
    }
  },
  computed: {
    myOptions: {
      get: function () {
        this.inserDefault(this.options)
        return this.options
      },
      set: function (val) {
        this.$emit('change-options', { obj: this, options: val })
      }
    }
  },
  mounted() {
    // 挂载完成后，将本实例注册到高级搜索面板对应的搜索条件列表中
    this.$emit('field-loaded', this)
    this.$nextTick(() => {
      if (this.defaultValue) {
        this.data = this.defaultValue
      }
    })
  }
}
</script>
<style lang="scss" scoped>
.field-label-panel,
.field-input-panel {
  display: inline-block;
}
.is-align-right {
  text-align: right;
  width: unset !important;
}
.unset-width {
  width: unset !important;
  max-width: unset !important;
  margin-right: 20px;
}
.field-input-panel {
  max-width: 500px;
}

.field-input-panel > .inputs {
  display: block;
}

.field-input-panel > .inputs >>> .el-input__inner {
  border-radius: 0;
}

.search-field-label {
  line-height: 32px;
}

>>> .el-date-editor.el-input {
  width: 100%;
}
/deep/ .el-date-editor--daterange {
  width: 100% !important;
}
</style>
