<template>
  <van-popup v-model="showPopup" position="bottom" round>
    <div class="personal-popup-con flex-default">
      <div class="popup-title">
        设置出生年月
        <m-icon
          icon="icon-close-square"
          className="close"
          @click="showPopup = false"
          :size="18"
        />
      </div>
      <div class="popup-con" style="height: 100%; padding: 10px 0 10px">
        <van-picker
          ref="birthdayPicker"
          item-height="40px"
          :columns="columns"
          @change="bindChange"
        />
      </div>
      <div class="popup-bottom flex-default">
        <van-button
          type="primary"
          style="width: 164px"
          class="normal"
          @click="showPopup = false"
          round
        >
          取 消
        </van-button>
        <van-button
          type="primary"
          style="width: 164px"
          @click="submitForm"
          round
        >
          确 定
        </van-button>
      </div>
    </div>
  </van-popup>
</template>

<script>
const date = new Date();
const years = [];
const year = date.getFullYear();
const months = [];
const month = date.getMonth() + 1;
const days = [];
const day = date.getDate();
for (let i = 1960; i <= date.getFullYear(); i++) {
  years.push(i);
}
for (let i = 1; i <= 12; i++) {
  months.push(i);
}
for (let i = 1; i <= 31; i++) {
  days.push(i);
}
export default {
  props: {
    value: Boolean,
    componentData: String,
  },
  data() {
    return {
      showPopup: false,
      years,
      year: 1996,
      months,
      month: 6,
      days,
      day: 28,
      columns: [
        {
          values: years,
          defaultIndex: 1,
        },
        {
          values: months,
          defaultIndex: 1,
        },
      ],
      initialList: [36, 5],
      pickerIndexList: [],
    };
  },
  mounted() {
    this.showPopup = this.value;
    if (this.value) {
      if (typeof this.componentData === "string") {
        let arr = this.componentData.split("-");
        this.year = parseInt(arr[0]);
        this.month = parseInt(arr[1]);
        // this.day=parseInt(arr[2])
        this.$nextTick(() => {
          this.$refs.birthdayPicker.setValues([this.year, this.month]);
        });
      }
    }
  },
  watch: {
    value(val) {
      this.showPopup = val;
      if (val) {
        if (typeof this.componentData === "string") {
          let arr = this.componentData.split("-");
          this.year = parseInt(arr[0]);
          this.month = parseInt(arr[1]);
          //   this.day = parseInt(arr[2]);
          this.$refs.birthdayPicker.setValues([this.year, this.month]);
        }
      }
    },
    showPopup(val) {
      this.$emit("input", val);
    },
  },
  methods: {
    bindChange(picker, value, index) {
      this.year = value[0];
      this.month = value[1];
    },
    submitForm() {
      const data = this.year + "-" + this.getValue(this.month);
      this.$emit("change", data);
      this.showPopup = false;
    },
    getValue(val) {
      let data = "0" + val;
      return data.substring(data.length - 2);
    },
  },
};
</script>

<style lang="less">
@import "../components/css/personal-popup.less";
</style>
