<template>
  <el-row>
    <div :style="{ width: labelWidth + 'px'}" class="field-label-panel" :class="{'is-align-right':isAlignRight}">
      <label class="search-field-label" v-if="label">{{label}}：</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"
        @keyup.enter.native="$emit('enter-search')"></ht-input>
      <ht-date v-if="type=='date'" v-model="data" :value-format="valueFormat" :placeholder="placeholder"
        @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="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
      </el-date-picker>
      <ht-select v-if="type=='select'" v-model="data" :placeholder="placeholder" :options="options"></ht-select>
    </div>
  </el-row>
</template>
<script>
export default {
  name: "ht-table-search-field",
  props: {
    isAlignRight:{
      type:Boolean,
      default:false
    },
    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", "select"].indexOf(value) != -1
    },
    options: Array,
    placeholder: {
      type: String,
      default() {
        return `请输入${this.label}`;
      }
    },
    valueFormat: {
      type: String,
      default: "yyyy-MM-dd HH:mm:ss"
    }
  },
  data() {
    return {
      data: null,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }
    };
  },
  watch: {
    data: {
      handler: function (newVal) {
        this.$emit(
          "input-change",
          { value: newVal, operation: this.operation, relation: this.relation },
          this.prop
        );
      }
    }
  },
  mounted() {
    // 挂载完成后，将本实例注册到高级搜索面板对应的搜索条件列表中
    this.$emit("field-loaded", this);
  }
};
</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>