<template>
  <div class="inputs">
    <el-time-select
      v-model="inputVal"
      :model-expression="modelExpression"
      :name="inputName"
      v-validate="inputValidate"
      v-if="inputWriteable"
      :clearable="clearable"
      :picker-options="pickerOptions"
      :placeholder="placeholder? placeholder:'选择时间'"
      :disabled="disabled"
      :readonly="readonly"
      :size="size"
    ></el-time-select>
    <ht-field-tail :writeable.sync="writeable" :fieldName="inputName" :readonly="!inputWriteable" :inputValue="inputVal" />
  </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"
        };
      }
    },
    clearable: {
      type: Boolean,
      default: true
    },
    placeholder: String,
    readonly: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    modelExpression:{
      type: String,
      default: ""
    }
  },
  components: {
    HtFieldTail
  },
  data() {
    return {
      inputName: null,
      writeable: true,
    };
  },
  computed: {
    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>