<template>
  <div class="inputs">
    <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;
}
</style>