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

<template>
    <view class="">
        <!-- 申请成功提示 -->
        <view class="mt-84rpx" v-if="tips">
            <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">请登录茶艺师端查看信息根据步骤进行操作，如有疑问请联系客服400-6245-123</view>
            </view>
            <view class="bg-white rounded-16rpx px-34rpx py-28rpx mx-78rpx mt-24rpx">
                <view class="font-bold text-28rpx leading-40rpx text-#303133">操作步骤</view>
                <view class="font-400 text-28rpx leading-42rpx text-#303133 mt-20rpx">
                    <view>1.关注【茶址】公众号</view>
                    <view>2.在左下角【茶址】 → 选择【茶艺师端】</view>
                    <view>3.用注册手机号+密码 登录</view>
                </view>
            </view>
        </view>

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

        <view class="mx-30rpx mt-38rpx">
            <!-- 营业执照 -->
            <view class="bg-white rounded-16rpx px-30rpx py-28rpx mt-20rpx">
                <view class="text-32rpx leading-44rpx text-#303133 mb-32rpx">营业执照</view>
                <view class="">
                    <wd-upload
                        :file-list="fileList" 
                        :limit="1"
                        image-mode="scaleToFill"
                        :action="action"
                        @change="TeaSpecialist.handleUploadFile">
                        <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="请填写姓名" ></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.born" :maxDate="Date.now()" :minDate="0" type="year-month" @confirm="TeaSpecialist.handleConfirmBornData"></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="请填写姓名"></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="请填写姓名"></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>
                <view>
                    <wd-textarea placeholder="你的茶艺兴趣爱好是什么？比如茶艺研究、品鉴、茶道美学……快来分享一下吧！" v-model="form.message" custom-class='!rounded-18rpx !border-2rpx !border-[#EFF0EF] !bg-[#F8F9FA]' custom-textarea-class='!bg-[#F8F9FA]' />
                </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-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">
                    <wd-upload
                        :file-list="fileList" 
                        :limit="1"
                        image-mode="scaleToFill"
                        :action="action"
                        @change="TeaSpecialist.handleUploadFile">
                        <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 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">
                    <view class="mr-16rpx">
                        <wd-upload
                            :file-list="fileList" 
                            :limit="1"
                            image-mode="scaleToFill"
                            :action="action"
                            @change="TeaSpecialist.handleUploadFile2">
                            <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>
                        <wd-upload
                            :file-list="fileList" 
                            :limit="1"
                            image-mode="scaleToFill"
                            :action="action"
                            @change="TeaSpecialist.handleUploadFile3">
                            <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="请填写手机号"></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">联系我们</view>
            <view class="w-330rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-#fff">提交申请</view>
        </view>
    </view>
</template>

<script lang="ts" setup>
    import { useColPickerData } from '@/hooks/useColPickerData'

	const OSS = inject('OSS')

    // 审核提示
    const tips = ref<boolean>(false)

    // 省市区数据
    const { colPickerData, findChildrenByCode } = useColPickerData()
    const value = ref<string[]>([])
    const area = ref<any[]>([
        colPickerData.map((item) => {
            return {
                value: item.value,
                label: item.text
            }
        })
    ])
    const columnChange = ({ selectedItem, resolve, finish }) => {
    const areaData = findChildrenByCode(colPickerData, selectedItem.value)
        if (areaData && areaData.length) {
            resolve(
                areaData.map((item) => {
                    return {
                    value: item.value,
                    label: item.text
                    }
                })
            )
        } else {
            finish()
        }
    }

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

    // 上传文件
	const fileList = ref<any[]>([]) // 本人照片
    const fileList2 = ref<any[]>([]) // 健康证
    const fileList3 = ref<any[]>([]) // 茶艺师资格证
	const action = 'https://www.mocky.io/v2/5cc8019d300000980a055e76' // 仅做测试使用，实际请换成真实上传接口

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

    // 表单
    const form = reactive<{
        settleIn: number,
        code: string,
        message: string,
        gender: string,
        born: string
    }>({
        settleIn: 1,
        code: '',
        message: '',
        gender: '',
        born: ''
    })

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

        // 选择年月日
        handleConfirmBornData: (date: {value: number}) => {
        const d = new Date(date.value)
            console.log("🚀 ~ d:", d)
            const year = d.getFullYear()
            const month = d.getMonth() + 1
            console.log(`${year}年${month}月`);
        },
            
        // 上传本人照片
        handleUploadFile: (event: any) => {
            fileList.value = event.fileList
        },

        // 上传健康证
        handleUploadFile2: (event: any) => {
            fileList2.value = event.fileList
        },

        // 上传茶艺师资格证
        handleUploadFile3: (event: any) => {
            fileList3.value = event.fileList
        },

        // 发送验证码
        handleCountDown: () => {
            startCountDown.value = true
            nextTick(() => {
                countDown.value?.start()

                // 发送验证码请求
            })
        },

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

        // 确认选择地址
        handleConfirmAddress: (selected) => {
            console.log("🚀 ~ selected:", selected)
        }
    }
</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;
            }
        }
    }
</style>
