<template>
  <el-date-picker
    class="ps-date-picker"
    v-model="inputValue"
    :value-format="valueFormat"
    :type="type"
    :placeholder="placeholder"
    :disabled="disabled"
    :id="id"
    v-bind="$attrs"
    @change="operaChange"
    ref="elementRef"
  >
  </el-date-picker>
</template>

<script>
export default {
  name: "PsDatePicker",
  props: {
    value: null,
    type: {
      type: String,
      default: "date",
    },
    placeholder: {
      type: String,
      default: null,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    valueFormat: {
      type: String,
      default: "yyyy-MM-dd",
    },
    id: { type: String, default: "" },
  },
  //处理v-model语法糖的emit事件
  model: {
    prop: "value",
    event: "handler",
  },
  watch: {
    value: {
      handler(val) {
        this.inputValue = val;
      },
      immediate: true,
    },
  },
  data() {
    return {
      inputValue: null,
    };
  },
  created() { },
  mounted() { },
  methods: {
    operaChange(val) {
      this.$emit("handler", val);
      this.$emit("change", val);
    },
    blur() {
      this.$refs.elementRef.blur();
    }
  },
};
</script>

<style></style>
