<template>
  <div class="time-picker-prop">
    <FormItem label="默认值" v-if="info.form.formType==='time'">
      <Input v-model="info.defaultValue" placeholder="请输入默认值" :disabled="!info.isNew" />
    </FormItem>
    <FormItem label="默认值" v-else>
      <Input
        v-model="info.defaultValue[0]"
        placeholder="开始时间"
        style="width:45%;marginRight:10px"
        :disabled="!info.isNew" />
      <Input
        v-model="info.defaultValue[1]"
        placeholder="结束时间"
        style="width:45%"
        :disabled="!info.isNew" />
    </FormItem>
    <FormItem label="占位提示">
      <Input v-model="info.form.placeholder" placeholder="请输入占位提示" />
    </FormItem>
    <!-- <FormItem label="类型选择">
      <RadioGroup v-model="info.form.formType" type="button" button-style="solid">
        <Radio label="time"></Radio>
        <Radio label="timerange"></Radio>
      </RadioGroup>
    </FormItem> -->
    <FormItem label="时间格式">
      <Input v-model="info.form.format" placeholder="如:HH:mm:ss" />
    </FormItem>
    <FormItem label="时间间隔">
      <Input v-model="info.form.steps" placeholder="如:[1, 15]" />
    </FormItem>
    <FormItem label="分割">
      <Input v-model="info.form.separator" placeholder="如:'-'" />
    </FormItem>
    <FormItem label="能否清空">
      <i-switch v-model="info.form.clearable" />
    </FormItem>
  </div>
</template>
<script>
const DEFAULT_LIST = [
  { key: 'formType', default: 'time' },
  { key: 'format', default: 'HH:mm:ss' },
]

export default {
  name: 'TimePickerProp',
  props: {
    info: Object,
  },
  watch: {
    'info.form': {
      handler() {
        const { form } = this.info
        if (Object.keys(form).length) { return }
        for (const val of DEFAULT_LIST) {
          if (!form[val.key] && form[val.key] !== 0) {
            this.$set(form, val.key, val.default)
          }
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    for (const val of DEFAULT_LIST) {
      if (!this.info.form[val.key] && this.info.form[val.key] !== 0) {
        this.$set(this.info.form, val.key, val.default)
      }
    }
  },
}
</script>