<template>
    <w-page-common>
        <view class="step">
            <view class="first">
                <text class="text-white">01.录入模块信息</text>
                <image :src="step1Img" alt="" />
            </view>
            <view class="second">
                <text :class="currentStep == 2 ? 'text-white' : ''">02.填写信息</text>
                <image :src="currentStep == 2 ? step1ImgActive : step2Img" alt="" />
            </view>
        </view>
        <template v-if="currentStep == 1">
            <TCard :cardStyle="{ marginTop: '15px' }">
                <view class="c-form-item-wrapper pb-3">
                    <w-client-device-info :formData="detail" />
                    <view class="item">
                        <view>送修人</view>
                        <view>{{ detail?.receiverName }}</view>
                    </view>
                </view>
            </TCard>
            <TCard :cardStyle="{ marginTop: '15px', paddingBottom: '12px' }" title="模块录入">
                <view class="c-input-field-item !justify-start px-3">
                    <view class="label required">模块代码：</view>
                    <view v-if="formData.moduleNo">{{ formData.moduleNo }}</view>
                    <view
                        class="!text-primary"
                        @click="scan"
                        :class="formData.moduleNo ? 'ml-2' : ''"
                    >
                        {{ formData.moduleNo ? '重新扫描' : '去扫描' }}
                    </view>
                </view>
                <view class="c-input-field-item px-3">
                    <view class="label required">品牌：</view>
                    <u-input
                        placeholder="请输入品牌"
                        border="bottom"
                        class="flex-1"
                        v-model="formData.brand"
                    ></u-input>
                </view>
            </TCard>
            <TCard :cardStyle="{ marginTop: '15px' }">
                <view class="c-form-item-wrapper">
                    <view class="whole-row-label required">模块整体图片</view>
                    <u-upload
                        :fileList="fileList['moduleWhole']"
                        name="moduleWhole"
                        :maxCount="9"
                        @beforeRead="beforeRead"
                        @afterRead="afterRead"
                        @delete="deletePic"
                        :width="80"
                        :height="80"
                        multiple
                    ></u-upload>
                </view>
            </TCard>
        </template>
        <template v-else>
            <TCard :cardStyle="{ marginTop: '15px', padding: '0 12px' }">
                <view class="c-input-field-item with-border">
                    <view class="label required">优先级</view>
                    <w-dict-select
                        v-model="formData.priority"
                        :options="optionsMap.priorityOptions"
                    ></w-dict-select>
                </view>
                <view class="c-input-field-item with-border">
                    <view class="label required">物流方式</view>
                    <w-dict-select
                        v-model="formData.logisticsMode"
                        :options="optionsMap.deliveryOptions"
                    ></w-dict-select>
                </view>
                <template v-if="formData.logisticsMode == 0">
                    <view class="c-input-field-item with-border">
                        <view class="label required">物流公司</view>
                        <u-input
                            placeholder="请输入物流公司"
                            border="none"
                            inputAlign="right"
                            v-model="formData.expressName"
                        ></u-input>
                    </view>
                    <view class="c-input-field-item with-border">
                        <view class="label required">快递单号</view>
                        <u-input
                            placeholder="请输入快递单号"
                            border="none"
                            inputAlign="right"
                            v-model="formData.expressNo"
                        ></u-input>
                    </view>
                </template>
            </TCard>
            <TCard>
                <view class="c-form-item-wrapper">
                    <view class="c-input-field-item with-border">
                        <view class="label required">维修后是否回寄</view>
                        <u-switch
                            v-model="formData.isReturn"
                            :activeValue="YesOrNoEnum.YES"
                            :inactiveValue="YesOrNoEnum.NO"
                        ></u-switch>
                    </view>
                    <view class="c-input-field-item" v-if="formData.isReturn == YesOrNoEnum.YES">
                        <view class="label required">回寄地址</view>
                        <view
                            class="flex flex-1 items-center ml-4 justify-end"
                            @click="handleAddress"
                        >
                            <view v-if="!showInfo.address" class="text-[#ACACAF]">
                                请选择收件地址
                            </view>
                            <view v-else>{{ showInfo.address }}</view>
                            <TIcon name="icon-right" :size="24" color="#7C7E82" />
                        </view>
                    </view>
                    <view class="c-input-field-item" v-if="showInfo.contact">
                        <view class="label">收件人</view>
                        <view class="flex">{{ showInfo.contact }}</view>
                    </view>
                    <view class="c-input-field-item" v-if="showInfo.mobile">
                        <view class="label">联系电话</view>
                        <view class="flex">{{ showInfo.mobile }}</view>
                    </view>
                </view>
            </TCard>
            <TCard :cardStyle="{ marginTop: '15px', padding: '12px 0' }">
                <view class="c-form-item-wrapper">
                    <TTextareaField
                        label="故障描述"
                        v-model="formData.faultDescription"
                        placeholder="请输入故障描述"
                        :remarkStyle="{ padding: 0 }"
                        :required="true"
                    ></TTextareaField>
                    <TTextareaField
                        label="备注"
                        v-model="formData.remark"
                        placeholder="请输入备注，选填"
                        :remarkStyle="{ padding: 0 }"
                    ></TTextareaField>
                </view>
            </TCard>
        </template>
        <template #btn>
            <view class="page-common-footer">
                <u-button
                    text="下一步"
                    color="#2759FF"
                    shape="circle"
                    @click="toNextStep"
                    v-if="currentStep == 1"
                    class="w-[90%]"
                ></u-button>
                <template v-if="currentStep == 2">
                    <u-button
                        text="上一步"
                        shape="circle"
                        @click="currentStep = 1"
                        class="w-[45%] mr-2"
                    ></u-button>
                    <u-button
                        text="提交"
                        color="#2759FF"
                        shape="circle"
                        @click="handleSubmit"
                        class="w-[45%]"
                    ></u-button>
                </template>
            </view>
        </template>
    </w-page-common>
</template>

<script setup lang="ts">
import { ref, unref } from 'vue'
import step1Img from '@/static/images/step1.png'
import step2Img from '@/static/images/step2.png'
import step1ImgActive from '@/static/images/step2-active.png'
import { onLoad } from '@dcloudio/uni-app'
import { optionsMap } from '@/config/options'
import { YesOrNoEnum, DeliveryMethodEnum } from '@/enums/businessEnums'
import { apiModuleReturn, apiOverhaulDetail } from '@/api/overhaul'
import { toast } from '@/utils/util'
import { useUploadValidate } from '@/hooks/useUploadValidate'

const currentStep = ref(1)
const detail = ref({})
const formData = ref({
    priority: 1,
    logisticsMode: 0,
    isReturn: 1,
    remark: '',
    faultDescription: '',
    expressName: '',
    expressNo: '',
    addressId: '',
    moduleNo: '',
    brand: '',
    id: ''
})

const showInfo = ref({
    address: '',
    mobile: '',
    contact: ''
})

const { fileList, beforeRead, afterRead, deletePic, handleUploadFile, btnDisabled } =
    useUploadValidate()

const scan = () => {
    uni.navigateTo({
        url: `/bundle/pages/scan/scan?type=2&id=${unref(formData).id}`
    })
}
// 下一步
const toNextStep = () => {
    const form = unref(formData)
    if (!form.moduleNo || !form.brand) {
        return toast('请填写完整的模块信息')
    } else if (unref(fileList)?.moduleWhole?.length === 0) {
        return toast('请选择模块整体图片')
    }
    currentStep.value = 2
}
const handleAddress = () => {
    uni.navigateTo({
        url: '/bundle/pages/user_address/index?type=true'
    })
}
const handleSubmit = async () => {
    const form = unref(formData)
    if (
        form.logisticsMode == DeliveryMethodEnum.LOGISTICS &&
        (!form.expressName || !form.expressNo)
    )
        return toast('请填写完整的快递信息')
    if (form.isReturn == YesOrNoEnum.YES && !form.addressId) return toast('请选择回寄地址')
    if (!form.faultDescription) return toast('请填写故障描述')

    handleUploadFile(async files => {
        await apiModuleReturn({
            ...unref(formData),
            moduleImg: unref(files)?.moduleWhole.toString()
        }).finally(() => {
            btnDisabled.value = false
        })
        toast('返修成功')
        setTimeout(() => {
            uni.navigateBack()
        }, 300)
    })
}

const getDetail = async () => {
    const res = await apiOverhaulDetail({ id: unref(formData).id })
    detail.value = res
}

onLoad(option => {
    formData.value.moduleNo = option.code as string
    formData.value.id = option.id as string
    fileList.value.moduleWhole = []
    getDetail()
    uni.$on('address', data => {
        formData.value.addressId = data.id
        showInfo.value.address = `${data.province}${data.city}${data.district}${data.address}`
        showInfo.value.mobile = data.mobile
        showInfo.value.contact = data.contact
    })
})
</script>
<style scoped lang="scss">
.step {
    @apply flex;
    .first,
    .second {
        @apply w-[50%] relative h-[40px] leading-[40px] text-center;
        image {
            @apply absolute left-0 top-0 w-full h-full z-0;
        }
        text {
            @apply relative z-10;
        }
    }
}
</style>
