<template>
  <div class="Mdr-container-component">
    <cr-button class="Mdrc-component-button" @click="showPicker">
      选择出生年份
    </cr-button>
    <cr-popup v-model="showPopup" position="bottom">
      <cr-picker
        ref="picker"
        show-toolbar
        :columns="ageScope"
        @confirm="onConfirm"
        @cancel="showPopup = false"
      />
    </cr-popup>
  </div>
</template>
<script>
import male from "@/assets/images/user/male@2x.png";
import female from "@/assets/images/user/female@2x.png";

const ageScope = new Array(120)
  .fill(0)
  .map((v, index) => 1901 + index + "年")
  .sort((a, b) => (a === b ? 0 : a < b ? 1 : -1));

const dataList = [
  {
    image: male,
    value: "male"
  },
  {
    image: female,
    value: "female"
  }
];

export default {
  name: "Age",
  props: {},
  data() {
    return {
      showPopup: false,
      dataList,
      ageScope,
      refreshed: false
    };
  },
  methods: {
    showPicker() {
      this.showPopup = true;
      if (!this.refreshed) {
        this.$refs.picker.refreshColumns();
        this.refreshed = true;
      }
    },
    onCancel() {
      this.showPopup = false;
    },
    onConfirm(picker, res) {
      this.showPopup = false;
      this.$emit("select", res[0]);
    }
  }
};
</script>
<style lang="less" src="../index.less" scoped></style>
