<template>
  <div class="card-apply">
    <!-- 顶部绿色背景 -->
    <div class="header">
      <div class="logo">
        <img src="@/static/ryds/4.png" alt="logo" />
      </div>
      <div class="title">卡片申领</div>
    </div>
    <!-- 卡片展示区域 -->
    <div class="card-preview">
      <div class="card-title">经济发展专项卡</div>
      <div class="card-image">
        <img src="@/static/kpsl/2.png" alt="经济发展专项卡">
      </div>

      <!-- 自定义表单 -->
      <div class="form-wrapper">
        <div class="form-item">
          <div class="label">姓名</div>
          <input type="text" v-model="formData.a2" placeholder="请输入您的姓名" class="input" />
        </div>
        <div class="form-item">
          <div class="label">年龄</div>
          <input type="number" v-model="formData.a3" placeholder="请输入您的年龄" class="input" />
        </div>
        <div class="form-item">
          <div class="label">卡内财产</div>
          <input type="text" v-model="formData.a4" readonly class="input" value="630万人民币" />
        </div>
      </div>
    </div>

    <!-- 底部按钮区域 -->
    <div class="bottom-buttons">
      <div class="btn" @click="handleSubmit">
        申领
      </div>
      <div class="btn btn1" @click="handleOtherApply">
        替他人申领
      </div>
    </div>

    <!-- 进度查询链接 -->
    <div class="progress-link" @click="handleCheckProgress">
      卡片进度查询
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import request from '@/utils/request'
import { isEealNameAuthentication } from "@/utils/userInfoCheck";
const router = useRouter()
const loading = ref(false)

const formData = reactive({
  a1: '', // 默认自己申请
  a2: '', // 姓名
  a3: '', // 年龄
  a4: '630万人民币', // 卡内财产
  a5: '', // 审核状态默认1
})

const handleSubmit = async () => {
  if (!formData.a2) {
    showToast('请输入姓名')
    return
  }
  if (!formData.a3) {
    showToast('请输入年龄')
    return
  }
  if (!isEealNameAuthentication()) {
    return
  }
  try {
    loading.value = true
    const data ={...formData}
    formData.a1 = '1'
    delete data.a4
    delete data.a5
    const res = await request.post('/business/businessYw1/add', data)
    if (res.code === 200) {
      showDialog({
        title: '申请成功',
        message: '您的卡片申请已提交，请等待审核',
      }).then(() => {
        router.push('/kpsl/cardsl')
      })
    } else {
      showToast(res.message || '申请失败')
    }
  } catch (error) {
    showToast(error.message || '申请失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

const handleOtherApply = () => {
  formData.a1 = '2'
  handleSubmit()
}

const handleCheckProgress = () => {
  if (!isEealNameAuthentication()) {
    return
  }
  router.push('/kpsl/cardsl')
}
</script>

<style lang="scss" scoped>

.card-apply {
  height: 100%;
  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;
  }
}

.card-preview {
  position: relative;
  margin: 15px;
  margin-top: -140px;
  background: #fff;
  padding: 10px;
  border-radius: 6px;
  box-sizing: border-box;
  margin-bottom: 10px;

  .card-title {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    text-align: center;
    margin-bottom: 10px;
  }

  .card-image {
    width: 100%;
    height: 200px;
    background: #f0f0f0;
    border-radius: 10px;
    overflow: hidden;

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

.form-wrapper {
  background: #fff;
  border-radius: 8px;
  margin-top: 15px;
  .form-item {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border: 1px solid #bcbcbc;
    border-radius: 6px;
    margin-bottom: 4px;
    .label {
      width: 70px;
      font-size: 14px;
      color: #333;
      font-weight: 500;
    }

    .input {
      flex: 1;
      border: none;
      outline: none;
      text-align: right;
      font-size: 14px;
      color: #666;
      background: transparent;
      padding-right: 5px;

      &::placeholder {
        color: #999;
      }

      &[readonly] {
        color: #333;
      }
    }
  }
}

.bottom-buttons {
  padding: 5px 15px 0;
  display: flex;
  justify-content: space-between;

  .btn {
    width: calc(50% - 5px);
    height: 44px;
    line-height: 44px;
    border-radius: 22px;
    font-size: 16px;
    text-align: center;
    background: #3b9257;
    color: #fff;
    font-weight: 700;
  }

  .btn1 {
    background: #fff;
    color: #3b9257;
    border: 1px solid #3b9257;
  }
}

.progress-link {
  text-align: center;
  color: #007B5F;
  font-size: 14px;
  padding: 15px 0;
  font-weight: 700;
}
</style>