<template>
  <div class="honor-director">
    <!-- 顶部绿色背景 -->
    <div class="header">
      <div class="logo">
        <img src="@/static/ryds/4.png" alt="logo" />
      </div>
      <div class="title">荣誉董事</div>
    </div>

    <!-- 荣誉董事介绍卡片 -->
    <div class="honor-card">
      <div class="warpinfo">
        <div class="benefits">
          <div class="benefit-item">
            1、成为荣誉董事即可享受企业的荣誉称号和相关的宣传报道！—好的客户人员的服务标准！参与国家项目决策与战略制定促进项目创新和发展！
          </div>

          <div class="benefit-item">
            2、作为荣誉董事即可享受国家扶持项目的股息分红和股价增值带来的巨额收益！享受一切业务问题的加急办理！
          </div>

          <div class="benefit-item">
            3、按照国家项目规定成为荣誉董事！退休之后即可享受社会保障及公积金福利！另外还配套100平米面积的精装小区高品质一栋国产红旗汽车！
          </div>
        </div>
        <!-- <div class="apply-form">
          <van-field :readonly="isSubmit" v-model="formData.name" label="姓名" placeholder="请输入您的姓名" />
          <van-field :readonly="isSubmit" v-model="formData.age" label="年龄" type="number" placeholder="请输入您的年龄" />
        </div> -->
      </div>
      <div class="submit-btn">
        <van-button type="primary" block :loading="loading" @click="handleSubmit">
          {{ isSubmit ? '已成为荣誉董事' : '成为荣誉董事' }}
        </van-button>
      </div>
    </div>
    <img src="@/static/ryds/2.png" alt="invite" class="invite-img" />
    <!-- 邀请好友区域 -->
    <div class="invite-section">
      <div class="invite-list">
        <div class="invite-item">
          <span class="invite-count">邀请<span class="invite-count-num">10名</span>好友</span>
          <span class="invite-reward">即可获得邀请奖励<span class="invite-reward-num">10万元</span></span>
          <span class="invite-btn1" @click="handleInvite(1)">{{ !userInfo.sysUser.a1 ? '领取' : '已领取' }}</span>
        </div>
        <div class="invite-item">
          <span class="invite-count">邀请<span class="invite-count-num">30名</span>好友</span>
          <span class="invite-reward">即可获得邀请奖励<span class="invite-reward-num">38万元</span></span>
          <span class="invite-btn1" @click="handleInvite(2)">{{ !userInfo.sysUser.a2 ? '领取' : '已领取' }}</span>
        </div>
        <div class="invite-item">
          <span class="invite-count">邀请<span class="invite-count-num">80名</span>好友</span>
          <span class="invite-reward">即可获得邀请奖励<span class="invite-reward-num">108万元</span></span>
          <span class="invite-btn1" @click="handleInvite(3)">{{ !userInfo.sysUser.a3 ? '领取' : '已领取' }}</span>
        </div>
        <div class="invite-item">
          <span class="invite-count">邀请<span class="invite-count-num">100名</span>好友</span>
          <span class="invite-reward">即可获得邀请奖励<span class="invite-reward-num">328万元</span></span>
          <span class="invite-btn1" @click="handleInvite(4)">{{ !userInfo.sysUser.a4 ? '领取' : '已领取' }}</span>
        </div>
        <div class="invite-item">
          <span class="invite-count">邀请<span class="invite-count-num">500名</span>好友</span>
          <span class="invite-reward">即可获得邀请奖励<span class="invite-reward-num">1088万元</span> </span>
          <span class="invite-btn1" @click="handleInvite(5)">{{ !userInfo.sysUser.a5 ? '领取' : '已领取' }}</span>
        </div>
      </div>
    </div>
  </div>
  <pay-up ref="payUpRef" />
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import request from '@/utils/request'
import { useRouter } from 'vue-router'
import { isEealNameAuthentication } from '@/utils/userInfoCheck'
import payUp from '@/components/payUp.vue'
const router = useRouter()
const loading = ref(false)
const formData = reactive({
  name: '',
  age: ''
})
const payUpRef = ref<any>(null)
const isSubmit = ref(false)
const userInfo = ref(JSON.parse(sessionStorage.getItem('userInfo') || '{}'))
const handleSubmit = async () => {
  if(userInfo.value.sysUser.a8){
    showToast('已成为荣誉董事')
    return
  }
  // if (isSubmit.value) {
  //   showToast('等待开放')
  //   return
  // }
  // if (!formData.name) {
  //   showToast('请输入姓名')
  //   return
  // }
  // if (!formData.age) {
  //   showToast('请输入年龄')
  //   return
  // }
  // if (!userInfo.value.sysUser.identityId) {
  //   if (!isEealNameAuthentication()) {
  //   return
  // }
  //   return
  // }
  // if (userInfo.value.smCount < 5) {
  //   showToast('需要邀请5名好友才能成为荣誉董事')
  //   return
  // }
  if (!isSubmit.value) {
    payUpRef.value.open({
      amount: 200,
      payTitle: '成为荣誉董事',
      payType: 1,
      productId: '',
      needPassword: false
    })
  }
  return false
  try {
    loading.value = true
    let data = { a1: formData.name, a2: formData.age }
    const res = await request.post('/business/businessYw2/addByUser', data)
    if (res.code === 200) {
      showToast(res.message)
    } else {
      showToast(res.message)
    }
  } catch (error) {
    showToast(error.message || '申请失败，请稍后重试')
  } finally {
    loading.value = false
    getDs()
  }
}
const getDs = async () => {
  const res = await request.get('/business/businessYw2/getByUserOne')
  if (res.code == 200 && res.result?.a1) {
    formData.name = res.result.a1
    formData.age = res.result.a2
  }
}
getDs()
const getUserInfo = async () => {
  const res = await request.get('/business/businessWallet/getInfo')
  if (res.code == 200) {
    userInfo.value = res.result
    isSubmit.value = userInfo.value.sysUser.a8
  }
}
const handleInvite = async () => {
  if (!isEealNameAuthentication()) {
    return
  }
  const res = await request.post('/business/businessWallet/lqLjsm?type=uudi')
  if (res.code == 200) {
    showToast("领取成功")
    getUserInfo()
  }
}
getUserInfo()
</script>

<style lang="scss" scoped>
.honor-director {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 20px;
  background: url('@/static/cbg1.png') no-repeat center center;
  background-size: 100% 100%;
}

.header {
  background: url('@/static/kpsl/4.png') no-repeat center center;
  background-size: 100% 100%;
  color: #fff;
  line-height: 66px;
  position: relative;
  padding-bottom: 140px;

  .logo {
    position: absolute;
    left: 15px;
    top: 5px;
    width: 24px;
    height: 24px;

    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }

  .title {
    font-size: 14px;
    color: #000;
    text-align: center;
    font-weight: 700;
  }
}

.honor-card {
  position: relative;
  background: url('@/static/ryds/3.png') no-repeat center center;
  background-size: 100% 100%;
  margin: 15px;
  margin-top: -150px;
  padding: 10px 15px;
  border-radius: 8px;

  .warpinfo {
    margin-top: 90px;
    background: #e6f8dd;
    padding: 10px;
    border-radius: 6px;

    .benefits {
      margin-bottom: 10px;

      .benefit-item {
        margin-bottom: 5px;
        font-size: 12px;
        line-height: 1.5;
        font-weight: 500;
        color: #333;

        .sub-text {
          text-indent: 1em;
        }
      }
    }

    .apply-form {
      margin-bottom: 5px;
      background: #fff;
      border-radius: 6px;
      padding: 0 10px;

      :deep(.van-field) {
        padding: 10px 0;
      }
    }
  }

  .submit-btn {
    .van-button {
      width: 60%;
      height: 32px;
      border-radius: 18px;
      margin: 10px auto 0;
      font-size: 14px;
      font-weight: 700;
      background: #3b9257;
      border-color: #3b9257;
    }
  }

}

.invite-img {
  width: 50%;
  display: block;
  margin: 5px auto;
}

.invite-section {
  margin: 15px;
  padding: 10px 10px;
  background: #fff;
  border-radius: 6px;


  .invite-list {
    font-size: 12px;
    font-weight: 700;

    .invite-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 6px 0;

      &:last-child {
        border-bottom: none;
      }

      .invite-count {
        width: 96px;
        color: #333;
      }

      .invite-count-num {
        color: #ff6d0d;
      }

      .invite-reward {
        color: #333;
      }

      .invite-btn1 {
        width: 40px;
        height: 40px;
        background: #3b9257;
        border-radius: 50%;
        color: #fff;
        text-align: center;
        line-height: 40px;
      }

      .invite-reward-num {
        color: #ff6d0d;
      }
    }
  }
}

.invite-btn {
  margin-top: 20px;

  .van-button {
    width: 60%;
    height: 32px;
    border-radius: 18px;
    font-size: 14px;
    margin: 0 auto;
    font-weight: 700;
    background: #3b9257;
    border-color: #3b9257;
  }
}
</style>