<template>
  <div class="ultraman_wrap_bg">
    <div class="ultraman_page_logo">
      <img src="@/static/home/logo.png" alt="" />
    </div>

    <div class="ultraman_title_label">
      <img :src="productInfo.image" alt="" />
      <p>{{ productInfo.description }}</p>
    </div>

    <div class="ultraman_main">
      <div class="ultraman_teble_blk">
        <div class="ultraman_teble_icon"></div>
        <div class="ultraman_teble_title">资料填写</div>
      </div>

      <div class="ultraman_form_item">
        <div class="ultraman_form_label">购置人：</div>
        <div class="ultraman_input_blk">
          <input type="text" v-model="formData.name" placeholder="请输入本人姓名" />
        </div>
      </div>

      <div class="ultraman_form_item">
        <div class="ultraman_form_label">身份证号码：</div>
        <div class="ultraman_input_blk">
          <input type="text" v-model="formData.idCard" placeholder="请输入身份证号码" />
        </div>
      </div>

      <div class="ultraman_form_item2">
        <div class="ultraman_form_label">验收货地址：</div>
        <div class="ultraman_input_blk2">
          <textarea class="ultraman_table_textarea" v-model="formData.address" rows="3"
            placeholder="请详细填写地址（省、市、县、镇）"></textarea>
        </div>
      </div>
    </div>

    <div class="ultraman_register_btn">
      <button @click="handleSubmit">确认购置</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import request from "@/utils/request";
import Honqi from "@/static/xbgz/hongqi.png";
import Fangzi from "@/static/xbgz/fangzi.png";
import Piao from "@/static/xbgz/piao.png";
const router = useRouter();
const route = useRoute();
const type = route.query.type || "";
// 产品信息配置
const productConfigs = {
  '14': {
    name: '红旗H9',
    description: '1500习币可购置红旗H9',
    image: Honqi,
    price: 1500
  },
  '16': {
    name: '雄安新区142平方商品房',
    description: '3500习币可购置雄安新区142平方商品房',
    image: Fangzi,
    price: 3500
  },
  '17': {
    name: '支票现金',
    description: '6000习币可购置支票现金金额：200万元',
    image: Piao,
    price: 6000
  }
}

const productInfo = ref({
  image: '',
  description: '',
  name: ''
})

// 根据类型设置产品信息
const setProductInfo = () => {
  const config = productConfigs[type as keyof typeof productConfigs]
  if (config) {
    productInfo.value = config
  }
}

// 在组件挂载时设置产品信息
onMounted(() => {
  setProductInfo()
})

const formData = reactive({
  a2: '', // 唯一标识
  a3: '', // 创建用户姓名
  a4: '', // 创建用户手机号
  a5: '', // 金额
  a6: '', // 产品名称
  a7: type, // 产品编号
  a8: '', // 购置人
  a9: '', // 身份证
  a10: '', // 地址
})

const validateForm = () => {
  if (!formData.name) {
    showFailToast("请输入姓名");
    return false;
  }
  if (
    !/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(
      formData.idCard
    )
  ) {
    showFailToast("请输入正确的身份证号码");
    return false;
  }
  if (!formData.address) {
    showFailToast("请输入收货地址");
    return false;
  }
  return true;
};
const userInfo = ref(JSON.parse(sessionStorage.getItem('userInfo') || '{}'))

const handleSubmit = async () => {
  if (!validateForm()) return;
  if (userInfo.value.extend1 != 3) {
    showFailToast("请先完成开户操作");
    setTimeout(() => {
      router.replace("/xbxz");
    }, 2000);
    return;
  }
  if (!userInfo.value.q5 || userInfo.value.q5 < productInfo.value.price) {
    showFailToast("习币不足");
    return;
  }
  try {
    formData.a3 = userInfo.value.nickName
    formData.a4 = userInfo.value.phonenumber
    formData.a5 = productInfo.value.price
    formData.a8 = formData.name
    formData.a9 = formData.idCard
    formData.a10 = formData.address
    formData.a6 = productInfo.value.name
    const res = await request.post("/yw2/add", formData);
    console.log(res);
    if (res.code === 200) {
      showSuccessToast("购置成功");
      setTimeout(() => {
        router.replace("/xbgz");
      }, 1000);
    } else {
      showFailToast(res.msg || "购置失败");
    }
  } catch (error) {
    console.error("购置失败:", error);
    showFailToast(error.msg || "购置失败，请重试");
  }
};
</script>

<style lang="scss" scoped>
.ultraman_wrap_bg {
  min-height: 100vh;
  background: url("@/static/home/beijing.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding-bottom: 20px;
}

.ultraman_page_logo {
  width: 40%;
  margin: 0 auto;
  padding: 20px 0;

  img {
    width: 100%;
  }
}

.ultraman_title_label {
  text-align: center;
  margin: 0 auto;
  width: 88%;
  background: #d33934;
  border-radius: 10px;

  img {
    width: 100%;
    border-radius: 10px;
  }

  p {
    text-align: center;
    color: #fff;
    font-size: 14px;
    letter-spacing: 1px;
    padding: 12px 0;
  }
}

.ultraman_main {
  width: 88%;
  margin: 20px auto;
  background: #fff;
  border-radius: 10px;
  padding: 20px;
}

.ultraman_teble_blk {
  display: flex;
  align-items: center;
  margin-bottom: 20px;

  .ultraman_teble_icon {
    width: 4px;
    height: 16px;
    background: #b23b38;
    margin-right: 8px;
    border-radius: 2px;
  }

  .ultraman_teble_title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
  }
}

.ultraman_form_item,
.ultraman_form_item2 {
  margin-bottom: 20px;
}

.ultraman_form_label {
  font-size: 14px;
  color: #333;
  margin-bottom: 8px;
}

.ultraman_input_blk,
.ultraman_input_blk2 {

  input,
  textarea {
    display: inline-block;
    width: 90%;
    border: 1px solid #eee;
    border-radius: 5px;
    padding: 10px;
    font-size: 14px;

    &::placeholder {
      color: #999;
    }
  }

  textarea {
    resize: none;
    height: 80px;
  }
}

.ultraman_register_btn {
  width: 88%;
  margin: 0 auto;

  button {
    width: 100%;
    height: 44px;
    background: #b23b38;
    color: #fff;
    border: none;
    border-radius: 22px;
    font-size: 16px;

    &:active {
      opacity: 0.8;
    }
  }
}
</style>