<template>
  <div class="singDatePicker">
    <DatePicker
      :type="type"
      :placeholder="placeholder"
      :value="value"
      :options="options"
      @on-change="onChange"
    ></DatePicker>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Watch, Vue } from "vue-property-decorator";
import { DatePicker } from "@syman/ark-ui";
let that: any = {};
@Component({
  name: "singDatePicker",
  components: {
    DatePicker,
  },
})
export default class singDatePicker extends Vue {
  @Prop() private value!: string | number;
  @Prop() private index!: number;
  @Prop() private placeholder!: string;
  @Prop({ default: 'date' }) readonly type!: string
  // @Watch("index", { immediate: true, deep: true })
  // onDataChanged(val: any, oldVal: any) {
  //   // this.i = val
  // }
  private i = ''
  private updataValue = ''
  private options = {
    shortcuts: [
      {
        text: "清空",
        value() {
          return "";
        }
      },
      {
        text: "今天",
        value() {
          return new Date();
        }
      },
      {
        text: "确定",
        value() {
          return that.updataValue;
        }
      },
    ],
  };
  private onChange(v) {
    this.updataValue = v
    type IType = {
      data: string,
      index: number,
    }
    const data: IType = {
      data: v,
      index: this.index
    }
    this.$emit('updataData',data)
  }
  private created() {
    that = this;
  }
}
</script>
<style lang="less" scoped>
.singDatePicker {
  .ark-date-picker {
    /deep/ .ark-input-innerWrap {
      width: 30px;
      position: absolute;
      left:45%;
    }
  }
}
</style>