<template>
  <div>
    <span>
      <template
        v-if="prop.type == timeType.date || prop.type == timeType.datetime"
      >
        <el-date-picker
          v-model="attributeValue.value"
          :type="dateType"
          :placeholder="placeholder"
        >
        </el-date-picker>
      </template>
      <template v-if="prop.type == timeType.time">
        <el-time-picker
          v-model="attributeValue.value"
          :is-range="timerType"
          :placeholder="placeholder"
        >
        </el-time-picker>
      </template>
    </span>
  </div>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { Prop, Watch } from "vue-property-decorator";
import { Attribute } from "@/model/Element";
import { AttributeValue } from "@/model/Attribute";
import { timeType } from "@/enums/uilibrary";
import SwtionElement from "@/plugins/element";
import SwtionAttribute from "@/plugins/attribute";
@Options({})
export default class scInput extends Vue {
  @Prop({
    default: new AttributeValue(),
  })
  public attributeValue?: any;
  @Prop({
    default: "0",
    type: String,
  })
  public elementId!: string;
  @Prop({
    default: "self",
    type: String,
  })
  public type!: keyof Attribute;
  @Prop({
    default: "请选择时间",
    type: String,
  })
  public placeholder?: string;
  public timeType = timeType;
  public swtionEle = new SwtionElement();
  public swtionAttr = new SwtionAttribute();
  public prop: any;
  public dateType = "";
  public timerType = false;
  created() {
    this.initCtrl();
  }
  public initCtrl() {
    let node = this.swtionEle.findTreeNode(this.elementId);
    let attributeList = node.attribute[this.type];
    this.prop = this.swtionAttr.findAttributeValueById(
      this.attributeValue ? this.attributeValue.id : "0",
      attributeList
    ).prop;

    this.checkCtrl();
  }
  public checkCtrl() {
    if (this.attributeValue) {
      switch (this.prop.type) {
        case timeType.date:
          if (this.prop.range) {
            this.dateType = "daterange";
          } else {
            this.dateType = "date";
          }
          break;
        case timeType.datetime:
          if (this.prop.range) {
            this.dateType = "datetimerange";
          } else {
            this.dateType = "datetime";
          }
          break;
        case timeType.time:
          this.timerType = this.prop.range;
      }
    }
  }
  @Watch("attributeValue.prop.range", { deep: true, immediate: true })
  changeRange() {
    this.initCtrl();
  }
}
</script>
