<template>
  <el-form :label-position="tPosition" :label-width="tWidth">
    <el-form-item :label="title">
      <el-date-picker
        v-model="fValue"
        type="date"
        placeholder="选择日期"
        :default-value="new Date(2021, 10, 1)"
        :readonly="readonly"
        v-if="!isRange"
        @change="onChange"
        @panel-change="panelChange(date, mode, view)"
      >
      </el-date-picker>
      <el-date-picker
        v-model="tValue"
        type="daterange"
        unlink-panels
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :default-value="[new Date(2021, 9, 1), new Date(2021, 10, 1)]"
        :readonly="readonly"
        v-if="isRange"
        @change="onChange"
        @panel-change="panelChange(date, mode, view)"
      >
      </el-date-picker>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  name: "datePicker",
  props: {
    /**
     * 默认日期
     */
    fValue: {
      type: Date
    },
    /**
     * 默认日期区间
     */
    tValue: {
      type: Array,
    },
    /**
     * 标题宽度
     */
    tWidth: {
      type: String,
      default: "80px",
    },
    /**
     * 标题位置
     * @type Enum
     * @options ["top","left","right"]
     */
    tPosition: {
      type: String,
      default: "left",
    },
    /**
     * 标题
     */
    title: {
      type: String,
      default: "标题:",
    },
    /**
     * 是否是区间
     */
    isRange: {
      type: Boolean,
      default: true,
    },
    /**
     * 是否只读
     */
    readonly: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  methods: {
    onChange(e){
      this.$emit("onChange",e)
      console.log("e,",e)
    },
    panelChange(d,m,v){
      this.$emit("panelChange",d,m,v)
      console.log("panelChange:",d,m,v)
    }
  },
};
</script>
<style scoped>
</style>