<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%">
        <van-picker
          ref="genderPicker"
          item-height="40px"
          :columns="genderList"
          @change="bindChange"
        />

        <!-- <picker-view
          :value="initialList"
          @change="bindChange"
          class="picker-view"
        >
          <picker-view-column>
            <div
              class="item"
              :class="{ active: yuersex === item }"
              v-for="(item, index) in genderList"
              :key="index"
            >
              {{ item }}
            </div>
          </picker-view-column>
        </picker-view> -->
      </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>
export default {
  props: {
    value: Boolean,
    componentData: Number,
  },
  data() {
    return {
      showPopup: false,
      genderList: ["男", "女"],
      pickerIndex: 0,
      yuersex: "男",
    };
  },
  mounted() {
    this.showPopup = this.value;
    if (this.value) {
      if (typeof this.componentData === "number") {
        this.pickerIndex = [this.componentData - 1];
        this.$nextTick(() => {
          this.$refs.genderPicker.setIndexes([this.pickerIndex]);
        });
      }
    }
  },
  watch: {
    value(val) {
      this.showPopup = val;
      if (val) {
        if (typeof this.componentData === "number") {
          this.pickerIndex = [this.componentData - 1];
          this.$refs.genderPicker.setIndexes([this.pickerIndex]);
        }
      }
    },
    showPopup(val) {
      this.$emit("input", val);
    },
  },
  methods: {
    bindChange(picker, value, index) {
      this.pickerIndex = index;
      this.yuersex = value;
    },
    submitForm() {
      this.$emit("change", this.pickerIndex + 1);
      this.showPopup = false;
    },
  },
};
</script>

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