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

<script>
import BaseInputDate from "@/components/base/BaseInputDate";
import * as moment from "moment/moment";
export default {
  name: "TableCellBodyBirthday",
  components: { BaseInputDate },
  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>
<style lang="sass" scoped>
.input
  background-color: var(--default-white)
</style>
