<template>
  <div :class="['inputs', inputWriteable ? '' : 'width_auto']" class='ht-component'>
    <el-date-picker
      v-if="inputWriteable"
      :size="size"
      v-validate="inputValidate"
      :name="inputName"
      v-model="inputVal"
      :model-expression="modelExpression"
      :type="type"
      :format="dateFormat"
      :clearable="clearable"
      :value-format="dateValueFormat"
      :placeholder="
        placeholder ? placeholder : type == 'date' ? '选择日期' : '选择日期时间'
      "
      :disabled="disabled"
      :readonly="readonly"
      :default-time="defaultTime"
    />
    <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-date",
  props: {
    currentDate: String, //当前时间
    validate: [String, Object],
    value: String,
    name: String,
    defaultTime: {
      type: String,
      default: "00:00:00"
    },
    permission: {
      type: String,
      default: "w",
      validator: function(value) {
        return ["b", "w", "r", "n"].indexOf(value) !== -1;
      }
    },
    size: {
      type: String,
      default: "small"
    },
    showDate: {
      type: Boolean,
      default: false
    },
    day: Number,
    format: {
      type: String,
      default: "yyyy-MM-dd HH:mm:ss"
    },
    valueFormat: {
      type: String,
      default: ""
    },
    placeholder: String,
    readonly: {
      type: Boolean,
      default: false
    },
    clearable: {
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    modelExpression: {
      type: String,
      default: ""
    }
  },
  components: {
    HtFieldTail
  },
  watch: {
    currentDate: function(newVal, oldVal) {
      this.getDate(true);
    }
  },
  data() {
    return {
      type: "datetime",
      inputName: null,
      writeable: true,
      valFormat: ""
    };
  },
  computed: {
    dateFormat: function() {
      // 通过日期格式来判断控件类型：日期、日期时间
      if (/^\w{4}-\w{1,2}-\w{1,2}$/.test(this.format)) {
        this.type = "date";
      }
      return this.format ? this.format : this.valueFormat;
    },
    dateValueFormat: function() {
      // 通过日期格式来判断控件类型：日期、日期时间
      if (/^\w{4}-\w{1,2}-\w{1,2}$/.test(this.format)) {
        this.type = "date";
      }
      return this.valueFormat ? this.valueFormat : this.format;
    },
    inputVal: {
      get: function() {
        // 只读情况
        if (!this.inputWriteable) {
          let date = this.value;
          if (this.value && this.value.constructor == String) {
            let showV = this.value.replace(/\-/g, "/");
            return new Date(showV).format(this.dateFormat);
          }
          return date && date.constructor == Date
            ? date.format(this.dateFormat)
            : date;
        }
        return this.value;
      },
      set: function(val) {
        if (val && val.constructor == Date) {
          this.$emit("input", val.format(this.valFormat));
        } else {
          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);
    }
  },
  methods: {
    getDate(flag) {
      this.valFormat = this.valueFormat ? this.valueFormat : this.format;
      this.valFormat = this.valFormat
        ? this.valFormat.replace("HH", "hh")
        : "yyyy-MM-dd hh:mm:ss";
      //是否显示当前日期
      if ((!this.value || flag) && this.showDate) {
        let curDate = null;
        //判断是否传入当前时间
        if (this.currentDate) {
          curDate = new Date(this.currentDate);
        } else {
          curDate = new Date();
        }
        if (this.day) {
          //是否指定了相隔的天数
          curDate = new Date(
            curDate.getTime() + this.day * 24 * 60 * 60 * 1000
          );
        }
        this.inputVal = curDate.format(this.valFormat);
      }
    }
  },
  created() {
    this.inputName = this.name ? this.name : utils.getName();
    this.$validator = this.$root.$validator;
    this.getDate(false);
  }
};
</script>
<style lang="scss" scoped>
div[aria-invalid="true"] >>> .el-input__inner,
div[aria-invalid="true"] >>> .el-input__inner:focus {
  border-color: #f56c6c;
}
.width_auto {
  width: auto !important;
}
</style>
