<route lang="jsonc" type="page">{
    "needLogin": true,
    "layout": "default",
    "style": {
        "navigationStyle": "custom"
    }
}</route>

<template>
    <view>
        <view>
            <wd-navbar safeAreaInsetTop :bordered="false" custom-style="background-color: #F6F7F8 !important;">
                <template #left>
                    <view class="flex items-center" @click="router.switchTab('/pages/my/my')">
                        <view class="mt-4rpx">
                            <wd-icon name="thin-arrow-left" size="30rpx" color="#121212"></wd-icon>
                        </view>
                        <view class="text-[#303133] text-36rpx ml-24rpx leading-48rpx">申请茶艺师</view>
                    </view>
                </template>
            </wd-navbar>

            <!-- <navbar title="申请茶艺师" custom-class='!bg-[#F6F7F8]'></navbar> -->
        </view>

        <!-- 待审核 -->
        <view class="mt-84rpx" v-if="status === 0">
            <view class="flex justify-center items-center">
                <wd-img width="300rpx" height="278rpx" :src="`${OSS}images/settle_in/settle_in_image2.png`" />
            </view>
            <view class="mt-60rpx text-center">
                <view class="text-36rpx leading-50rpx text-#303133">您的信息已成功提交</view>
                <view class="font-400 text-26rpx leading-42rpx text-#9CA3AF mt-20rpx mx-102rpx">目前正在审核中，请您耐心等待</view>
            </view>
        </view>

        <!-- 申请成功提示 -->
        <view class="mt-84rpx" v-if="status === 1">
            <view class="flex justify-center items-center">
                <wd-img width="300rpx" height="278rpx" :src="`${OSS}images/settle_in/settle_in_image1.png`" />
            </view>
            <view class="mt-60rpx text-center">
                <view class="text-36rpx leading-50rpx text-#303133">申请茶艺师成功</view>
                <view class="font-400 text-26rpx leading-42rpx text-#9CA3AF mt-28rpx mx-102rpx">
                    请登录【茶址茶艺师】小程序查看信息进行操作，如有疑问请联系平台
                </view>
            </view>
        </view>

        <template v-if="status >= 2">
            <view class="mx-30rpx mt-38rpx">
                <!-- 照片信息 -->
                <view class="bg-white rounded-16rpx px-30rpx py-28rpx mt-20rpx">
                    <view class="flex items-center">
                        <view class="text-32rpx leading-44rpx text-#303133 mr-10rpx">照片信息</view>
                        <view class="flex items-center">
                            <wd-img width="16rpx" height="16rpx" :src="`${OSS}icon/icon_validate.png`"></wd-img>
                        </view>
                    </view>
                    <view class="mt-32rpx">
                        <wd-upload :header="{ 'token': token }" v-model:file-list="fileList2" :limit="1"
                            image-mode="scaleToFill" :action="action">
                            <view
                                class="border-2rpx border-dashed border-[#E5E5E5] w-184rpx h-184rpx flex flex-col items-center justify-center rounded-16rpx">
                                <view class="">
                                    <wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_upload.png`"
                                        mode="aspectFill" />
                                </view>
                                <view class="font-400 text-26rpx leading-36rpx text-#303133">本人头像</view>
                            </view>
                        </wd-upload>
                    </view>
                </view>
                
                <!-- 基本信息 -->
                <view class="bg-white rounded-16rpx px-30rpx pt-28rpx mt-20rpx">
                    <view class="text-32rpx leading-44rpx text-#303133 mb-32rpx flex items-center">
                        <view class="mr-10rpx">基本信息</view>
                        <view class="flex items-center">
                            <wd-img width="16rpx" height="16rpx" :src="`${OSS}icon/icon_validate.png`"></wd-img>
                        </view>
                    </view>
                    <view>
                        <view>
                            <view class="text-26rpx leading-32rpx text-#606266">姓名</view>
                            <view class="mt-20rpx border-b border-b-solid border-b-[#F6F7F8] pb-20rpx">
                                <wd-input no-border placeholder="请填写真实姓名" v-model="form.username"></wd-input>
                            </view>
                        </view>

                        <view class="mt-22rpx">
                            <view class="text-26rpx leading-32rpx text-#606266">性别</view>
                            <view
                                class="mt-20rpx border-b border-b-solid border-b-[#F6F7F8] pb-20rpx tea-specialist-cell">
                                <wd-picker placeholder="请选择性别" :columns="genderColumns" v-model="form.gender"
                                    @confirm="TeaSpecialist.handleConfirmGender" />
                            </view>
                        </view>

                        <view class="mt-22rpx">
                            <view class="text-26rpx leading-32rpx text-#606266">出生年月</view>
                            <view
                                class="mt-20rpx border-b border-b-solid border-b-[#F6F7F8] pb-20rpx tea-specialist-cell">
                                <wd-datetime-picker placeholder="请选择出生年月" v-model="form.both"
                                    :minDate="new Date(1970, 0, 1).getTime()" :maxDate="new Date().getTime()"
                                    type="date" @confirm="TeaSpecialist.handleConfirmBoth"></wd-datetime-picker>
                            </view>
                        </view>

                        <view
                            class="mt-22rpx flex items-center justify-between border-b border-b-solid border-b-[#F6F7F8] pb-20rpx">
                            <view class="mr-166rpx">
                                <view class="text-26rpx leading-32rpx text-#606266">身高</view>
                                <view class="mt-20rpx  flex items-center">
                                    <wd-input no-border placeholder="请填写身高" v-model="form.height"></wd-input>
                                    <view class="text-30rpx leading-32rpx text-#606266">cm</view>
                                </view>
                            </view>

                            <view class="">
                                <view class="text-26rpx leading-32rpx text-#606266">体重</view>
                                <view class="mt-20rpx  flex items-center">
                                    <wd-input no-border placeholder="请填写体重" v-model="form.weight"></wd-input>
                                    <view class="text-30rpx leading-32rpx text-#606266">kg</view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>

                <!-- 专属圈子 -->
                <view class="bg-white rounded-16rpx px-30rpx py-32rpx mt-20rpx">
                    <view class="text-32rpx leading-44rpx text-#303133 mb-32rpx flex items-center">
                        专属圈子
                        <view class="flex items-center">
                            <wd-img width="16rpx" height="16rpx" :src="`${OSS}icon/icon_validate.png`"></wd-img>
                        </view>
                        <text class="text-[#818CA9] ml-10rpx text-20rpx mt-4rpx">最多可选6个</text>
                    </view>
                    <view>
                        <view class="flex items-center flex-wrap">
                            <view v-for="item in exclusiveCirclesLabel" :key="item.id" class="tea-tag" :style="selectedTags.includes(item.id) ? 'background:#4C9F44;color:#fff;' : 'background:#F3F3F3;color:#818CA9;'
                                " @click="TeaSpecialist.handleTagClick(item.id)">
                                {{ item.label_name }}
                            </view>
                        </view>
                    </view>
                </view>

                <!-- 服务区域 -->
                <view class="bg-white rounded-16rpx px-30rpx py-32rpx mt-20rpx flex items-center">
                    <view class="flex items-center">
                        <view class="text-32rpx leading-44rpx text-#303133 mr-10rpx">服务区域</view>
                        <view class="flex items-center">
                            <wd-img width="16rpx" height="16rpx" :src="`${OSS}icon/icon_validate.png`"></wd-img>
                        </view>
                    </view>
                    <view class="flex-1 ml-80rpx">
                        <wd-picker :columns="openCityList" label-key="name" value-key="id" v-model="form.city_id"
                            use-default-slot @confirm="TeaSpecialist.handleConfirmAddress">
                            <view class="flex items-center">
                                <wd-input readonly v-model="city" size="large" placeholder="请选择地区" no-border
                                    placeholderStyle="font-size: 30rpx; line-height: 42rpx; color: #c9c9c9;"></wd-input>
                                <wd-icon name="chevron-right" size="32rpx" color="#909399"></wd-icon>
                            </view>
                        </wd-picker>
                        <!-- <wd-col-picker v-model="value" :columns="area" :column-change="columnChange" @confirm="TeaSpecialist.handleConfirmAddress" placeholder="请选择省市区"></wd-col-picker> -->
                    </view>
                </view>

                <!-- 身份证 -->
                <view class="bg-white rounded-16rpx px-30rpx py-28rpx mt-20rpx">
                    <view class="flex items-center">
                        <view class="text-32rpx leading-44rpx text-#303133 mr-10rpx">身份证</view>
                        <view class="flex items-center">
                            <wd-img width="16rpx" height="16rpx" :src="`${OSS}icon/icon_validate.png`"></wd-img>
                        </view>
                    </view>
                    <view class="mt-32rpx flex items-center gap-16rpx">
                        <wd-upload
                            :header="{'token': token}"
                            v-model:file-list="frontCard"
                            :limit="1"
                            image-mode="scaleToFill"
                            :action="action">
                            <view class="border-2rpx border-dashed border-[#E5E5E5] w-184rpx h-184rpx flex flex-col items-center justify-center rounded-16rpx">
                                <view>
                                    <wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_upload.png`" mode="aspectFill" />
                                </view>
                                <view class="font-400 text-26rpx leading-36rpx text-#303133">身份证正面</view>
                            </view>
                        </wd-upload>

                        <wd-upload
                            :header="{'token': token}"
                            v-model:file-list="backCard"
                            :limit="1"
                            image-mode="scaleToFill"
                            :action="action">
                            <view class="border-2rpx border-dashed border-[#E5E5E5] w-184rpx h-184rpx flex flex-col items-center justify-center rounded-16rpx">
                                <view>
                                    <wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_upload.png`" mode="aspectFill" />
                                </view>
                                <view class="font-400 text-26rpx leading-36rpx text-#303133">身份证反面</view>
                            </view>
                        </wd-upload>
                    </view>
                </view>


                <!-- 茶艺师资格证书 -->
                <view class="bg-white rounded-16rpx px-30rpx py-28rpx mt-20rpx">
                    <view class="flex items-center">
                        <view class="text-32rpx leading-44rpx text-#303133 mr-10rpx">茶艺师资格证书</view>
                        <view class="flex items-center">
                            <wd-img width="16rpx" height="16rpx" :src="`${OSS}icon/icon_validate.png`"></wd-img>
                        </view>
                    </view>
                    <view class="mt-32rpx flex items-center">
                        <wd-upload
                            :header="{'token': token}"
                            v-model:file-list="fileList"
                            :limit="1"
                            image-mode="scaleToFill"
                            :action="action">
                            <view class="border-2rpx border-dashed border-[#E5E5E5] w-184rpx h-184rpx flex flex-col items-center justify-center rounded-16rpx">
                                <view>
                                    <wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_upload.png`" mode="aspectFill" />
                                </view>
                                <view class="font-400 text-26rpx leading-36rpx text-#303133">资格证书</view>
                            </view>
                        </wd-upload>
                    </view>
                </view>

                <!-- 个人照片 -->
                <view class="bg-white rounded-16rpx px-30rpx py-28rpx mt-20rpx">
                    <view class="flex items-center">
                        <view class="text-32rpx leading-44rpx text-#303133 mr-10rpx">个人照片</view>
                    </view>

                    <view class="mt-32rpx">
                        <wd-upload :header="{ 'token': token }" v-model:file-list="fileList4" :limit="9" multiple
                            image-mode="scaleToFill" :action="action">
                            <view
                                class="border-2rpx border-dashed border-[#E5E5E5] w-184rpx h-184rpx flex flex-col items-center justify-center rounded-16rpx">
                                <view class="">
                                    <wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_upload.png`"
                                        mode="aspectFill" />
                                </view>
                                <view class="flex items-center">
                                    <view class="font-400 text-26rpx leading-36rpx text-#303133">个人照片</view>
                                </view>
                            </view>
                        </wd-upload>
                    </view>
                </view>

                <!-- 健康证书信息 -->
                <view class="bg-white rounded-16rpx px-30rpx py-28rpx mt-20rpx">
                    <view class="flex items-center">
                        <view class="text-32rpx leading-44rpx text-#303133 mr-10rpx">健康证</view>
                    </view>
                    <view class="mt-32rpx flex items-center">
                        <view class="mr-16rpx">
                            <wd-upload :header="{ 'token': token }" v-model:file-list="fileList3" :limit="1"
                                image-mode="scaleToFill" :action="action">
                                <view
                                    class="border-2rpx border-dashed border-[#E5E5E5] w-184rpx h-184rpx flex flex-col items-center justify-center rounded-16rpx">
                                    <view class="">
                                        <wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_upload.png`"
                                            mode="aspectFill" />
                                    </view>
                                    <view class="font-400 text-26rpx leading-36rpx text-#303133">健康证</view>
                                </view>
                            </wd-upload>
                        </view>
                    </view>
                </view>

                <!-- 联系方式 -->
                <view class="bg-white rounded-16rpx px-30rpx py-32rpx mt-20rpx">
                    <view class="flex items-center">
                        <view class="text-32rpx leading-44rpx text-#303133 mr-10rpx">联系方式</view>
                        <view class="flex items-center">
                            <wd-img width="16rpx" height="16rpx" :src="`${OSS}icon/icon_validate.png`"></wd-img>
                        </view>
                    </view>

                    <view class="mt-22rpx">
                        <view class="text-26rpx leading-32rpx text-#606266">手机号</view>
                        <view class="mt-20rpx border-b border-b-solid border-b-[#F6F7F8] pb-20rpx">
                            <wd-input no-border placeholder="请填写手机号" v-model="form.mobile"></wd-input>
                        </view>
                    </view>

                    <view class="mt-22rpx">
                        <view class="text-26rpx leading-32rpx text-#606266">验证码</view>
                        <view class="mt-20rpx pb-20rpx">
                            <wd-input type="text" placeholder="请填写手机验证码" v-model="form.code" inputmode="numeric"
                                no-border>
                                <template #suffix>
                                    <view class="flex items-center mr-34rpx">
                                        <view class="flex items-center">
                                            <view class="text-[#4C9F44] text-28rpx font-400 leading-40rpx"
                                                v-if="!startCountDown" @click="TeaSpecialist.handleCountDown">发送验证码
                                            </view>
                                            <view
                                                class="!text-[#C9C9C9] text-28rpx font-400 leading-40rpx flex items-center"
                                                v-if="startCountDown">
                                                <wd-count-down ref="countDown" :time="countDownTime" millisecond
                                                    :auto-start="false" format="ss"
                                                    custom-class="!text-[#C9C9C9] !text-32rpx"
                                                    @finish="TeaSpecialist.handleFinishCountDown"></wd-count-down>
                                                <view> S后重发</view>
                                            </view>
                                        </view>
                                    </view>
                                </template>
                            </wd-input>
                        </view>
                    </view>
                </view>
            </view>

            <view class="text-26rpx leading-32rpx text-#606266 mt-24rpx mx-60rpx">
                *提交表单申请，工作人员将在3个工作日内与您电话联系，如需及时了解，请直接电话咨询，我们将在第一时间解答
            </view>

            <view
                class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center text-[#303133] mt-112rpx pb-66rpx">
                <view class="w-330rpx h-90rpx bg-[#FFFFFF] rounded-8rpx mr-30rpx"
                    @click="router.navigateTo('/bundle/contact/contact')">联系我们</view>
                <view class="w-330rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-#fff" @click="TeaSpecialist.handleSubmit">
                    提交申请</view>
            </view>
        </template>

    </view>
</template>

<script lang="ts" setup>
import { router, removeImageUrlPrefix, strToParams } from '@/utils/tools'
import { getOpenCityList } from '@/api/tea-room'
import { useToast } from 'wot-design-uni'
import { getVerificationCode, addTeaSpecialist, getTeaSpecialistStatus } from '@/api/user'
import { getExclusiveCirclesLabel } from '@/api/tea-specialist'
import { SMS_ENUM } from '@/enum/sms'
import { mobile } from '@/utils/test'

const OSS = inject('OSS')
const token = ref<string>('') // 用户token
const toast = useToast()

// 已开通城市列表
const openCityList = ref<Array<any>>([])
const city = ref<string>('')

// 性别
const genderColumns = ['女', '男']

// 上传文件
const fileList = ref<any[]>([]) // 资格证
const fileList2 = ref<any[]>([]) // 照片信息
const fileList3 = ref<any[]>([]) // 个人展示
const fileList4 = ref<any[]>([]) // 健康证
const frontCard = ref<any[]>([]) // 身份证正面
const backCard  = ref<any[]>([]) // 身份证反面
const action = import.meta.env.VITE_UPLOAD_BASEURL

// 验证码倒计时
const countDownTime = ref<number>(1 * 60 * 1000)  // 60s倒计时
const startCountDown = ref<boolean>(false) // 是否开始倒计时
const countDown = ref<any>(null) // 倒计时组件


// 表单
const form = ref<{
    license_img: string // 营业执照
    username: string // 茶艺师名字
    gender: number // 茶艺师性别(1男 2女)
    both: number | string // 出生年月
    height: string // 身高
    weight: string // 体重
    city_id: number // 城市ID
    avatar: string // 头像
    mobile: string // 联系电话
    code: string // 验证码
    health_certificate?: string // 健康证
    information?: string // 个人展示
    image?: string // 个人展示
    front_card?: string // 身份证正面
    back_card?: string // 身份证反面
    broker_user_id?: number // 经纪人ID（可选，扫码绑定经纪人时携带）
    label_id?: string // 专属圈子标签ID，逗号分隔
}>({
    license_img: '', // 营业执照
    username: '', // 茶艺师名字
    gender: 2, // 茶艺师性别(1男 2女)
    both: '', // 出生年月
    height: '', // 身高
    weight: '', // 体重
    city_id: 0, // 城市ID
    avatar: '', // 头像
    mobile: '', // 联系电话
    code: '', // 验证码
    health_certificate: '', // 健康证
    information: '', // 个人展示(2026-04-07暂时废弃)
    image: '',  // 本人照片
    front_card: '', // 身份证正面
    back_card: '', // 身份证反面
    broker_user_id: 0, // 经纪人ID（可选，扫码绑定经纪人时携带）
    label_id: '' // 专属圈子标签ID，逗号分隔
})
const both = ref<string>('1998-12-21')

// 审核状态
const status = ref<number>(3) // 0待审核 1审核成功 2审核失败 3未提交数据

// 专属圈子标签
const selectedTags = ref<number[]>([])
const exclusiveCirclesLabel = ref<Array<any>>([])

onLoad(async (args) => {
    // 默认出生年月为1998年12月21日
    form.value.both = new Date(1998, 11, 21).getTime()

    // 处理扫码携带的参数(茶艺师绑定经纪人)
    const scene = args?.scene
    if (scene) {
        form.value.broker_user_id = strToParams(decodeURIComponent(args.scene))?.brokerid
    }

    TeaSpecialist.handleInit()
})

onShow(async () => {
    token.value = uni.getStorageSync('token')
    if (token.value) {
        const res = await getTeaSpecialistStatus()
        status.value = res.status
    } else {
        console.log("🚀 ~ token.value:", token.value)
        router.navigateTo('/pages/login/login')
    }
})

const TeaSpecialist = {
    /**
     * 初始化
     */
    handleInit: async () => {
        const res = await getOpenCityList()
        openCityList.value = res.list

        const label = await getExclusiveCirclesLabel()
        exclusiveCirclesLabel.value = label
    },

    // 标签点击事件
    handleTagClick(id: number) {
        const idx = selectedTags.value.indexOf(id)
        if (idx > -1) {
            selectedTags.value.splice(idx, 1)
        } else {
            if (selectedTags.value.length < 6) {
                selectedTags.value.push(id)
            } else {
                toast.show('最多只能选择6个圈子')
            }
        }
    },

    // 选择性别
    handleConfirmGender: (gender: string) => {
        console.log("🚀 ~ gender:", gender)
    },

    // 发送验证码
    handleCountDown: async () => {
        if (!mobile(form.value.mobile)) {
            toast.show('请检查手机号码')
            return false
        }

        await getVerificationCode({ scene: SMS_ENUM.BANK, mobile: String(form.value.mobile) })

        startCountDown.value = true
        setTimeout(() => {
            countDown.value.start()
        }, 100)
    },

    // 验证码倒计时结束
    handleFinishCountDown: () => {
        startCountDown.value = false
    },

    /**
     * 确认选择地址
     */
    handleConfirmAddress: (item) => {
        city.value = item.selectedItems.name
    },

    /**
     * 
     */
    handleConfirmBoth({ value }: any) {
        const d = new Date(value)
        const year = d.getFullYear()
        const month = d.getMonth() + 1
        const day = d.getDate()
        const date = `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`
        both.value = date
    },

    /**
     * 提交申请
     */
    handleSubmit: async () => {
        if (fileList2.value.length == 0) {
            toast.show('请上传本人头像')
            return false
        }

        if (!form.value.username) {
            toast.show('请输入姓名')
            return false
        }     
        
        if (!form.value.username) {
            toast.show('请输入姓名')
            return false
        }

        if (!form.value.both) {
            toast.show('请选择出生年月')
            return false
        }

        if (!form.value.height) {
            toast.show('请输入身高')
            return false
        }

        if (!form.value.weight) {
            toast.show('请输入体重')
            return false
        }

        // 专属圈子校验
        if (selectedTags.value.length === 0) {
            toast.show('请至少选择一个专属圈子')
            return false
        }

        if (selectedTags.value.length > 6) {
            toast.show('最多只能选择6个专属圈子')
            return false
        }

        // 身份证正面和反面校验
        if (frontCard.value.length === 0) {
            toast.show('请上传身份证正面照片')
            return false
        }

        if (!form.value.city_id) {
            toast.show('请选择服务区域')
            return false
        }

        if (backCard.value.length === 0) {
            toast.show('请上传身份证反面照片')
            return false
        }

        if (fileList.value.length == 0) {
            toast.show('请上传茶艺师资格证书')
            return false
        }

        // if (fileList4.value.length == 0) {
        //     toast.show('请至少上传一张个人展示照片')
        //     return false
        // }

        if (!mobile(form.value.mobile)) {
            toast.show('请检查手机号码')
            return false
        }

        if (!form.value.code) {
            toast.show('请输入验证码')
            return false
        }

        form.value.label_id = selectedTags.value.join(',') // 专属圈子标签ID，逗号分隔
        form.value.license_img = fileList.value.length > 0 ? removeImageUrlPrefix(fileList.value)[0] : '' // 茶艺师资格证书
        form.value.avatar = fileList2.value.length > 0 ? removeImageUrlPrefix(fileList2.value)[0] : '' // 个人照片
        form.value.health_certificate = fileList3.value.length > 0 ? removeImageUrlPrefix(fileList3.value)[0] : '' // 健康证
        form.value.image = fileList4.value.length > 0 ? removeImageUrlPrefix(fileList4.value) : '' // 个人展示
        form.value.image = Array.isArray(form.value.image) ? form.value.image.join(',') : form.value.image
        form.value.front_card = frontCard.value.length > 0 ? removeImageUrlPrefix(frontCard.value)[0] : '' // 身份证正面
        form.value.back_card = backCard.value.length > 0 ? removeImageUrlPrefix(backCard.value)[0] : '' // 身份证反面

        let data = form.value
        data.both = both.value
        console.log("🚀 ~ form.value:", form.value)
        
        return
        toast.loading({
            loadingType: 'ring',
            loadingColor: '#4C9F44',
            msg: '提交中...'
        })
        try {
            toast.close()
            await addTeaSpecialist(data)
            status.value = 0 // 提交成功，变更状态为待审核

            setTimeout(() => {
                toast.success('提交成功')
            }, 100)
        } catch (e) {
            toast.close()
            return
        }
    }
}
</script>

<style lang="scss">
page {
    background: $cz-page-background;
}

.tea-specialist-cell {
    :deep() {
        .wd-cell {
            padding-left: 0 !important;
        }

        .wd-cell__wrapper {
            padding-top: 0 !important;
            padding-bottom: 0 !important;
        }
    }
}

.tea-tag {
    padding: 0 8rpx;
    border-radius: 4rpx;
    margin-right: 16rpx;
    margin-bottom: 16rpx;
    font-size: 24rpx;
    line-height: 44rpx;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-block;
}
</style>
