<route lang="json5">
{
  style: {
    navigationBarTitleText: '优惠劵申请',
  },
}
</route>

<template>
  <view class="bg-white min-h-screen px-4 py-4">
    <view class="space-y-4">
      <!-- 销售点选择 -->
      <view class="form-item">
        <text class="form-label">销售点</text>
        <wd-select-picker
          label=""
          v-model="formData.location"
          :columns="locationOptions"
          @change="handleChange"
        ></wd-select-picker>
      </view>

      <!-- 用户名称 -->
      <view class="form-item">
        <text class="form-label">用户名称</text>
        <wd-input v-model="formData.name" placeholder="请输入用户名称" />
      </view>

      <!-- 用户类型 -->
      <view class="form-item">
        <text class="form-label">用户类型</text>
        <wd-radio-group v-model="formData.type" shape="button">
          <wd-radio value="personal">个人</wd-radio>
          <wd-radio value="enterprise">企业</wd-radio>
        </wd-radio-group>
      </view>

      <!-- 证件号码 -->
      <view class="form-item">
        <text class="form-label">{{ formData.type === 'personal' ? '身份证号' : '纳税号' }}</text>
        <wd-input
          v-model="formData.id_card_number"
          :placeholder="`请输入${formData.type === 'personal' ? '身份证号' : '纳税号'}`"
        />
      </view>

      <!-- 开户银行名 -->
      <view class="form-item">
        <text class="form-label">开户银行名</text>
        <wd-input v-model="formData.bank_name" placeholder="请输入开户银行名" />
      </view>

      <!-- 开户银行账号 -->
      <view class="form-item">
        <text class="form-label">开户银行账号</text>
        <wd-input v-model="formData.bank_number" type="number" placeholder="请输入开户银行账号" />
      </view>

      <!-- 用户手机号 -->
      <view class="form-item">
        <text class="form-label">用户手机号</text>
        <wd-input v-model="formData.phone" type="number" placeholder="请输入用户手机号" />
      </view>

      <!-- 用户邮箱 -->
      <view class="form-item">
        <text class="form-label">用户邮箱</text>
        <wd-input v-model="formData.email" type="email" placeholder="请输入用户邮箱" />
      </view>

      <!-- 用户地址 -->
      <view class="form-item">
        <text class="form-label">用户地址</text>
        <wd-input v-model="formData.address" type="textarea" placeholder="请输入用户地址" />
      </view>

      <!-- 用户联系手机号 -->
      <view class="form-item">
        <text class="form-label">用户联系手机号</text>
        <wd-input
          v-model="formData.contact_phone"
          type="number"
          placeholder="请输入用户联系手机号"
        />
      </view>

      <!-- 用户联系邮箱 -->
      <view class="form-item">
        <text class="form-label">用户联系邮箱</text>
        <wd-input v-model="formData.contact_email" type="email" placeholder="请输入用户联系邮箱" />
      </view>

      <!-- 用户联系地址 -->
      <view class="form-item">
        <text class="form-label">用户联系地址</text>
        <wd-input
          v-model="formData.contact_address"
          type="textarea"
          placeholder="请输入用户联系地址"
        />
      </view>

      <!-- 提交按钮 -->
      <view class="mt-8 pb-8">
        <wd-button type="success" block @tap="handleSubmit">提交申请</wd-button>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const formData = ref({
  name: '',
  type: 'personal',
  nature: 'user',
  superiorid: '',
  id_card_number: '',
  bank_name: '',
  bank_number: '',
  phone: '',
  email: '',
  address: '',
  contact_phone: '',
  contact_email: '',
  contact_address: '',
})

// const locationOptions = ref([
//   { label: '达川区农机服务站', value: '1' },
//   { label: '达州市达区农机站', value: '2' },
//   { label: '达州市宣汉县农机推广中心', value: '3' },
// ])
const locationOptions = ref<Record<string, any>>([
  {
    value: '101',
    label: '达川区农机服务站',
  },
  {
    value: '102',
    label: '达州市达区农机站',
  },
  {
    value: '103',
    label: '达州市宣汉县农机推广中心',
  },
])

// 提交表单
function handleSubmit() {
  // 表单验证
  if (!formData.value.name) {
    return uni.showToast({ title: '请输入用户名称', icon: 'none' })
  }
  if (!formData.value.id_card_number) {
    return uni.showToast({
      title: formData.value.type === 'personal' ? '请输入身份证号' : '请输入纳税号',
      icon: 'none',
    })
  }
  if (!formData.value.bank_name) {
    return uni.showToast({ title: '请输入开户银行名', icon: 'none' })
  }
  if (!formData.value.bank_number) {
    return uni.showToast({ title: '请输入开户银行账号', icon: 'none' })
  }
  if (!formData.value.phone) {
    return uni.showToast({ title: '请输入用户手机号', icon: 'none' })
  }
  if (!formData.value.email) {
    return uni.showToast({ title: '请输入用户邮箱', icon: 'none' })
  }
  if (!formData.value.address) {
    return uni.showToast({ title: '请输入用户地址', icon: 'none' })
  }

  // TODO: 调用提交接口
  uni.showToast({
    title: '提交成功',
    icon: 'success',
  })

  // 延迟返回上一页
  setTimeout(() => {
    uni.navigateBack()
  }, 1500)
}
</script>

<style lang="scss" scoped>
.form-item {
  @apply mb-6;
  .form-label {
    @apply block text-gray-700 mb-2 text-base;
  }
}
</style>
