<template>
    <el-date-picker
        v-model="value"
        @change="onChange"
        :format="formatEl"
        :type="properties.type"
        :disabled="properties.disabled"
        :editable="properties.editable"
        :placeholder="properties.placeholder"
        :clearable="properties.clearable"
    />
</template>

<script>
import DateUtil from "../../../util/pattern/date";
import StringUtil from "../../../../util/pattern/string";
import mixin from "./mixin";
    export default {
        name: "datePicker",
        mixins: [mixin],
        data() {
            return {
                data: {},
                value: "",
                formatEl: null,
                properties: {}
            };
        },
        created() {
            this.initProperties({
                placeholder: '请选择',
                format: 'YYYY-MM-DD',
                editable:true,
                disabled: false,
                type: "date",
            });
            this.formatEl = StringUtil.replace(this.properties.format || "YYYY-MM-DD",{
                "Y":"y",
                "M":"M",
                "D":"d",
                "H":"H",
            });
        },
        methods: {
            init(value) {
                this.value = value;
            },
            onChange() {
                let model = this.value ? DateUtil.dateFmt(this.properties.format, this.value) : null;
                this.$emit("update:model", model);
                this.$emit("change", model)
            }
        }
    };
</script>
