<template>
  <!-- 完善信息 -->
  <u-popup
    v-model="showPopup"
    mode="center"
    border-radius="16"
    closeable
    close-icon-color="#999999"
    close-icon-pos="top-right"
  >
    <view class="perfect-info-popup">
      <view class="perfect-info-title">提示</view>
      <view class="perfect-info-content">
        <view class="perfect-info-content-text">请完善个人信息，便于老师更准确的回答</view>
      </view>
      <view class="perfect-info-button">
        <u-button class="confirm-button" type="primary" @click="toPerfectInfo"
          >去完善</u-button
        >
        <u-button class="cancel-button" type="default" @click="closePopup"
          >下次再说</u-button
        >
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  name: "PerfectInfo",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      showPopup: false,
    };
  },
  watch: {
    show: {
      handler(newVal) {
        this.showPopup = newVal;
      },
      immediate: true,
    },
    showPopup(val) {
      if (val !== this.show) {
        this.$emit("update:show", val);
      }
    },
  },
  methods: {
    closePopup() {
      this.showPopup = false;
      this.$emit("update:show", false);
    },
    toPerfectInfo() {
      this.showPopup = false;
      this.$emit("update:show", false);
      this.$router.push("/pages/home/userInfo/index");
    },
  },
};
</script>

<style lang="scss" scoped>
.perfect-info-popup {
  width: 600rpx;
  padding: 60rpx 0;
  border-radius: 16rpx;
  background-image: url("/static/common/images/images_bg_dialog.png");
  background-repeat: no-repeat;
  background-size: 630rpx 100rpx;
  background-position: -20rpx 0;

  .perfect-info-title {
    text-align: center;
    font-family: DouyinSans;
    font-weight: bold;
    font-size: 40rpx;
    color: #477bfb;
    margin-bottom: 40rpx;
  }

  .perfect-info-content {
    margin-bottom: 100rpx;
    text-align: center;
    font-family: PingFang SC;
    font-size: 28rpx;
    color: #333333;

    &-text {
      padding: 0 40rpx;
    }
  }

  .perfect-info-button {
    padding: 0 40rpx;

    .confirm-button {
      background-color: #477BFB;
      border-radius: 16rpx;
      margin-bottom: 32rpx;
    }

    .cancel-button {
      border-radius: 16rpx;
    }
  }
}
</style>
