<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"
        :default-time="defaultTime"
        @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"
      ></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: {
    defaultTime: {
      type: String,
      default: "00:00:00",
    },
    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.$t("ht.common.enter")}${this.label}`;
      },
    },
    valueFormat: {
      type: String,
      default: "yyyy-MM-dd HH:mm:ss",
    },
  },
  data() {
    return {
      data: 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]);
            },
          },
        ],
      },
    };
  },
  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>
