<template>
  <div>
    <el-form-item label="提示文字">
      <el-input size="small" v-model="placeholder[0]" @change="placeholderChange" placeholder="开始日期提示"/>
      <el-input size="small" v-model="placeholder[1]" @change="placeholderChange" placeholder="结束日期提示"/>
    </el-form-item>
    <el-form-item label="日期格式">
      <el-select size="small" v-model="value.format" filterable>
        <el-option value="yyyy" label="年"></el-option>
        <el-option value="yyyy-MM" label="年-月"></el-option>
        <el-option value="yyyy-MM-dd" label="年-月-日"></el-option>
        <el-option value="yyyy-MM-dd HH:mm" label="年-月-日 时:分"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="展示时长">
      <el-switch v-model="value.showLength"></el-switch>
    </el-form-item>
  </div>
</template>

<script>
export default {
  name: "DateTimeRangeConfig",
  components: {},
  props: {
    value: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      placeholder:[
        "开始时间","结束时间"
      ]
    }
  },
  created() {
    console.log("出发了",this.value.placeholder,!this.value.placeholder)
    if (undefined !== this.value.placeholder){
      this.placeholder = this.value.placeholder
    }else {
      this.$set(this.value,"placeholder",this.placeholder)
    }
  },
  methods: {
    placeholderChange(){
      this.value.placeholder = this.placeholder
    }
  }
}
</script>

<style scoped>

</style>
