<template>
    <view class="p-[20rpx] service">
        <!-- 师傅完成服务拍照上传 -->
        <view
            class="flex-1 p-[20rpx] bg-white card normal text-base flex flex-col gap-[12rpx] rounded-[12rpx]"
        >
            <text>上传服务照片</text>
            <TUploader
                mutiple
                :maxUpload="6"
                image-fit="aspectFill"
                v-model="formData.serviceImages"
                @set-value="setServiceImages"
                @remove="removeServiceImages"
            />
        </view>
        <view class="footer mt-[30rpx]">
            <button
                class="bg-primary text-lg text-white leading-[80rpx] h-[80rpx] rounded-full"
                @click="handleSubmit"
            >
                提交
            </button>
        </view>
    </view>
</template>

<script setup lang="ts">
import { apiServiceImages, apiStaffOrderDetail } from '@/api/order'
import { toast } from '@/utils/util'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import TUploader from './components/TUpload.vue'

const formData = ref({
    id: '',
    orderStatus: '',
    serviceImages: []
})
onLoad(option => {
    if (option.id) {
        formData.value.id = option.id
        initOrderDetail()
    }
})
const initOrderDetail = async () => {
    const result = await apiStaffOrderDetail({ id: formData.value.id })
    formData.value.orderStatus = result.orderStatus
    formData.value.serviceImages = result.serviceImages ?? []
}

const handleSubmit = async () => {
    const serviceImages = [...formData.value.serviceImages, ...tempFiles.value]
    if (!serviceImages.length) return toast('请上传服务图片')
    try {
        const data = {
            ...formData.value,
            serviceImages
        }
        await apiServiceImages(data)
        toast('提交成功')
        uni.navigateBack()
    } catch (error) {}
}
const tempFiles = ref([])
const setServiceImages = (path: string) => {
    tempFiles.value.push(path)
}
const removeServiceImages = (index: number) => {
    tempFiles.value.splice(index, 1)
}
</script>
<style scoped lang="scss">
.service {
    display: flex;
    flex-direction: column;
}
</style>
