<template>
  <view class="">
    <up-popup
      :show="show"
      bgColor="transparent"
      :safeAreaInsetBottom="false"
      :closeOnClickOverlay="false"
      @close="close"
      mode="center"
    >
      <view class="box">
        <view class="u-flex top justify-between u-p-32">
          <text class="title">绑定上级</text>
          <up-icon name="close" @click="close"></up-icon>
        </view>
        <view class="info">
          <view class="u-flex u-col-center">
            <view class="color-333 small-title">上级邀请码</view>
            <view class="u-m-l-32 u-flex-1 border">
              <input placeholder="请输入上级邀请码" v-model="code" />
            </view>
          </view>

          <view class="u-m-t-32 u-flex u-col-center" style="gap: 54rpx">
            <view class="cancel" @click="close">取消</view>
            <view class="confirm" @click="confirm">确认</view>
          </view>
        </view>
      </view>
    </up-popup>
  </view>
</template>
  
  <script setup>
import { ref } from "vue";

const show = defineModel({
  type: Boolean,
  default: false,
});
const code = ref("");
const emits = defineEmits(["cancel", "confirm"]);
function close() {
  show.value = false;
  emits("cancel");
}
function confirm() {
  if (code.value == "") {
    uni.showToast({
      title: "请输入上级邀请码",
      icon: "none",
    });
    return;
  }
  show.value = false;
  emits("confirm", code.value);
}
</script>
  <style lang="scss" scoped>
.border {
  border: 2rpx solid #d9d9d9;
  padding: 18rpx;
  border-radius: 4rpx;
}
.box {
  width: 586rpx;
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  .title {
    color: #000000;
    font-size: 32rpx;
    font-weight: 700;
  }
  .top {
    border-bottom: 2rpx solid #ededed;
  }
  .info {
    padding: 32rpx 40rpx 40rpx 40rpx;
    font-size: 28rpx;
  }
  .small-title {
    min-width: 84rpx;
    text-align: right;
  }
}

.cancel {
  padding: 14rpx 76rpx;
  border-radius: 36rpx;
  border: 2rpx solid #e8ad7b;
  color: #e8ad7b;
  font-size: 32rpx;
  font-weight: 400;
  white-space: nowrap;
  line-height: 48rpx;
}
.confirm {
  padding: 14rpx 76rpx;
  border-radius: 36rpx;
  background-color: #e8ad7b;
  border: 2rpx solid #e8ad7b;
  color: #fff;
  font-size: 32rpx;
  font-weight: 400;
  line-height: 48rpx;
  white-space: nowrap;
}
</style>
  