<template>
    <w-page-common btnText="确认报价" @submit="handleSubmit">
        <TCard :cardStyle="cardStyle">
            <view class="c-input-field-item">
                <text class="label">是否维修</text>
                <u-switch
                    v-model="formData.isMaintain"
                    :activeValue="0"
                    :inactiveValue="1"
                ></u-switch>
            </view>
            <template v-if="formData.isMaintain == 1">
                <TTextareaField
                    label="拒绝维修理由"
                    v-model="formData.refuseMaintenanceCause"
                    placeholder="请输入拒绝维修理由"
                    :remarkStyle="{ padding: 0 }"
                    :required="true"
                ></TTextareaField>
            </template>
        </TCard>
        <TCard :cardStyle="{ marginTop: '20rpx' }">
            <view class="c-form-item-wrapper py-[24rpx]">
                <view class="item">
                    <view>工单编号</view>
                    <view>{{ detail.orderNo }}</view>
                </view>
                <view class="item">
                    <view>报修人</view>
                    <view>{{ detail.creatorName }}</view>
                </view>
                <view class="item">
                    <view>报修时间</view>
                    <view>{{ detail.createTime }}</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.receiverTime }}</view>
                </view>
            </view>
        </TCard>
        <TCard :cardStyle="{ marginTop: '20rpx', padding: '0 12px 12px' }">
            <view class="c-input-field-item">
                <text class="label">配件费用</text>
                <text class="text-sm">
                    总金额
                    <text class="text-error">￥{{ detail.actualAmount }}</text>
                </text>
            </view>
            <w-spareParts-list :datas="detail.sparePartList" />
        </TCard>
        <TCard :cardStyle="{ marginTop: '20rpx', padding: '12px' }">
            <view class="c-form-item-wrapper !px-0">
                <TTextareaField
                    label="故障描述"
                    v-model="detail.faultDescription"
                    placeholder="请输入故障描述"
                    :remarkStyle="{ padding: 0 }"
                    :disabled="true"
                ></TTextareaField>
                <view class="whole-row-label">故障图片</view>
                <w-image-list class="flex-1" :imgStr="detail.faultImg"></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 img from '@/static/images/pdf.png'
import { toast } from '@/utils/util'
import { apiOverhaulDetail } from '@/api/overhaul'
import { apiConfirmPrice } from '@/api/client'
import { WorkOrderTypeEnum } from '@/enums/businessEnums'

const detail = ref<any>({})
const formData = ref({
    isMaintain: 0,
    refuseMaintenanceCause: '',
    id: ''
})
const cardStyle = computed(() => ({
    marginTop: '20rpx',
    padding: formData.value.isMaintain == 0 ? '0 24rpx 0 24rpx' : '0 24rpx 24rpx'
}))
const getDetail = async () => {
    detail.value = await apiOverhaulDetail({
        id: unref(formData.value.id)
    })
}
const handleSubmit = async () => {
    if (unref(formData).isMaintain == 1 && !unref(formData).refuseMaintenanceCause) {
        return toast('请填写拒绝维修原因')
    }
    await apiConfirmPrice({
        ...unref(formData)
    })
    toast('已确认报价')
    setTimeout(() => {
        uni.navigateBack()
    }, 200)
}
onLoad(option => {
    formData.value.id = option.id as string
    getDetail()
})
</script>
<style scoped lang="scss"></style>
