<template>
  <div class="inputs ht-component">
    <el-time-picker
      :arrow-control="arrowControl"
      v-model="inputVal"
      :model-expression="modelExpression"
      :name="inputName"
      v-validate="inputValidate"
      v-if="inputWriteable"
      :picker-options="pickerOptions"
      :disabled="disabled"
      :readonly="readonly"
      :editable="editable"
      :clearable="clearable"
      :size="size"
      :start-placeholder="startPlaceholder"
      :end-placeholder="endPlaceholder"
      :is-range="isRange"
      :range-separator="rangeSeparator"
      :value-format="valueFormat"
      :default-value="defaultValue"
      :placeholder="placeholder? placeholder:'任意时间点'"
    ></el-time-picker>
    <ht-field-tail :writeable.sync="writeable" :fieldName="inputName" :readonly="!inputWriteable" :inputValue="formatInputVal" />
  </div>
</template>
<script>
import utils from "@/utils.js";
import HtFieldTail from "@/components/HtFieldTail.vue";

export default {
  name: "ht-time-select",
  props: {
    validate: [String, Object],
    value: String,
    name: String,
    permission: {
      type: String,
      default: "w",
      validator: function(value) {
        return ["b", "w", "r", "n"].indexOf(value) !== -1;
      }
    },
    size: {
      type: String,
      default: "small"
    },
    pickerOptions: {
      type: Object,
      default() {
        return {
          start: "00:00",
          step: "00:15",
          end: "23:59"
        };
      }
    },
    placeholder: String,
    readonly: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    clearable: {
      type: Boolean,
      default: true
    },
    editable: {
      type: Boolean,
      default: true
    },
    defaultValue: {
      type: [String, Date]
    },
    valueFormat: {
      type: String,
      default: "yyyy-MM-dd HH:mm:ss"
    },
    rangeSeparator: {
      type: String,
      default: "-"
    },
    pickerOptions: {
      type: Object,
      default() {
        return {};
      }
    },
    arrowControl: {
      type: Boolean,
      default: false
    },
    isRange: {
      type: Boolean,
      default: false
    },
    endPlaceholder: {
      type: String
    },
    startPlaceholder: {
      type: String
    },
    modelExpression:{
      type: String,
      default: ""
    }
  },
  components: {
    HtFieldTail
  },
  data() {
    return {
      inputName: null,
	  writeable: true,
    };
  },
  computed: {
    formatInputVal: {
      get: function() {
        if (this.value && this.value.constructor == String) {
          return this.value.split(" ")[1];
        }
        if (this.value && this.value.constructor == Date) {
          return this.value.format("yyyy-MM-dd HH:mm:ss").split(" ")[1];
        }
      }
    },
    inputVal: {
      get: function() {
        return this.value;
      },
      set: function(val) {
        this.$emit("input", val);
      }
    },
    inputWriteable: function() {
      return this.writeable ? utils.getWriteable(this.permission):this.writeable;
    },
    inputValidate: function() {
      return utils.addRequiredOrNot(this.permission, this.validate, this);
    }
  },
  created() {
    this.inputName = this.name ? this.name : utils.getName();
    this.$validator = this.$root.$validator;
  }
};
</script>
<style lang="scss" scoped>
div[aria-invalid='true'] >>> .el-input__inner, div[aria-invalid='true'] >>> .el-input__inner:focus {
  border-color: #f56c6c;
}
</style>