<!--
 * @Author: micky
 * @Date: 2024-08-12 19:51:59
 * @LastEditors: micky
 * @LastEditTime: 2024-08-30 19:22:01
 * @FilePath: \chargingpile-uniapp\src\bundle\pages\client\confirm-price-repair.vue
-->
<template>
    <w-page-common btnText="确认报价" @submit="handleSubmit">
        <TCard>
            <view :style="wrapperStyle">
                <view class="c-input-field-item">
                    <text class="label">是否维修</text>
                    <u-switch
                        v-model="formData.isMaintain"
                        :activeValue="YesOrNoEnum.YES"
                        :inactiveValue="YesOrNoEnum.NO"
                    ></u-switch>
                </view>
                <template v-if="formData.isMaintain == YesOrNoEnum.NO">
                    <TTextareaField
                        label="拒绝维修理由"
                        v-model="formData.refuseMaintenanceCause"
                        placeholder="请输入拒绝维修理由"
                        :remarkStyle="{ padding: 0 }"
                        :required="true"
                    ></TTextareaField>
                </template>
            </view>
        </TCard>
        <TCard>
            <view class="c-form-item-wrapper py-[24rpx]">
                <view class="item">
                    <view>工单编号</view>
                    <view>{{ detail.orderNo }}</view>
                </view>
                <w-client-device-info :formData="detail" :needClient="false" />
                <view class="item">
                    <view>报价员</view>
                    <view>{{ detail.receiverName }}</view>
                </view>
                <view class="item">
                    <view>报价时间</view>
                    <view>{{ detail.quotationTime }}</view>
                </view>
                <view class="item">
                    <view>故障类型</view>
                    <view>{{ detail.faultName }}</view>
                </view>
                <view class="item">
                    <view>是否报废</view>
                    <view :style="{ color: yesOrNoColor[1^detail.scrapOrNot!] }">
                        {{ yesOrNoMap[detail.scrapOrNot!] || '--' }}
                    </view>
                </view>
            </view>
        </TCard>
        <TCard :cardStyle="{ marginTop: '15px', padding: '0 12px 12px' }">
            <view class="c-input-field-item">
                <text class="label">配件费用</text>
                <text class="text-[28rpx]">
                    总金额
                    <text class="text-error">￥{{ detail.actualAmount }}</text>
                </text>
            </view>
            <w-spareParts-list :datas="detail.sparePartList" />
        </TCard>
        <TCard :cardStyle="{ marginTop: '15px' }">
            <view class="c-form-item-wrapper py-[18rpx]">
                <view class="whole-row-label">维修前图片</view>
                <w-image-list class="flex-1" :imgStr="detail.preMaintenanceImg"></w-image-list>
                <view class="whole-row-label">故障点图片</view>
                <w-image-list class="flex-1" :imgStr="detail.faultPointImg"></w-image-list>
            </view>
        </TCard>
    </w-page-common>
</template>

<script setup lang="ts">
import { computed, ref, unref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { toast } from '@/utils/util'
import { apiRepairDetail } from '@/api/repair'
import { apiRepairConfirmPrice } from '@/api/client'
import { YesOrNoEnum, yesOrNoMap, yesOrNoColor } from '@/enums/businessEnums'

const detail = ref<Partial<RepairItem>>({})
const formData = ref({
    isMaintain: YesOrNoEnum.YES,
    refuseMaintenanceCause: '',
    id: ''
})
const wrapperStyle = computed(() => {
    return {
        padding: formData.value.isMaintain === YesOrNoEnum.YES ? '0 24rpx' : '0 24rpx 24rpx'
    }
})

const getDatas = async () => {
    detail.value = await apiRepairDetail({
        id: unref(formData).id
    })
}

const handleSubmit = async () => {
    if (unref(formData).isMaintain == YesOrNoEnum.NO && !unref(formData).refuseMaintenanceCause) {
        return toast('请填写拒绝维修原因')
    }
    await apiRepairConfirmPrice(unref(formData))
    toast('已确认服务报价')
    setTimeout(() => {
        uni.navigateBack()
    }, 300)
}
onLoad(option => {
    formData.value.id = option.id as string
    getDatas()
})
</script>
<style scoped lang="scss"></style>
