<template lang="pug">
  .flex.box-border.px-2.items-center.w-full.text-sm(
    :style="{ width : width + 'px'}"
  )
    span(v-if="!isOpenChange") {{ birthday }}
    base-input(
      :width="140"
      type="date",
      v-if="isOpenChange",
      @click.stop,
      v-model="value.age",
      outlined
    )
</template>

<script>
import BaseInput from "@/components/base/BaseInput";
import * as moment from "moment/moment";
export default {
  name: "TableCellBodyBirthday",
  components: { BaseInput },
  props: {
    value: Object,
    width: Number,
    isOpenChange: Boolean,
  },
  computed: {
    birthday() {
      return this.value.age
        ? moment(this.value.age)
            .format("YYYY-MM-DD")
            .split("-")
            .reverse()
            .join(".")
        : "";
    },
  },
};
</script>
