<!--
 * @Author: micky
 * @Date: 2024-09-08 19:23:35
 * @LastEditors: micky
 * @LastEditTime: 2024-11-22 17:25:36
 * @FilePath: \chargingpile-uniapp\src\bundle\pages\repair\step\step-check.vue
-->
<template>
    <w-page-common btnText="提交" @submit="handleSubmit">
        <TCard :cardStyle="{ padding: '10px' }" v-if="showScrap">
            <view class="flex justify-between" @click="itemCheck(0)">
                <text class="text-[36rpx] font-bold">{{ selectArr[0].label }}</text>
                <u-icon
                    name="checkmark-circle-fill"
                    :color="selectArr[0].checked ? '#0E66FB' : '#F5F5F5'"
                    size="46rpx"
                ></u-icon>
            </view>
            <view class="border-t border-[#f1f1f1] mt-3" v-show="selectArr[0].checked">
                <stepCheckScrap ref="scrapRef" :id="orderId" />
            </view>
        </TCard>
        <TCard :cardStyle="{ marginTop: '15px', padding: '10px' }">
            <view class="flex justify-between" @click="itemCheck(1)">
                <text class="text-[36rpx] font-bold">{{ selectArr[1].label }}</text>
                <u-icon
                    name="checkmark-circle-fill"
                    :color="selectArr[1].checked ? '#0E66FB' : '#F5F5F5'"
                    size="46rpx"
                ></u-icon>
            </view>
            <view class="border-t border-[#f1f1f1] mt-3" v-show="selectArr[1].checked">
                <stepCheckRepair ref="repairRef" :id="orderId" :detail="detail!" :clientId="clientId" />
            </view>
        </TCard>
    </w-page-common>
</template>

<script setup lang="ts">
import { ref, unref } from 'vue'
import { apiRepairDetail } from '@/api/repair'
import { onLoad } from '@dcloudio/uni-app'
import { YesOrNoEnum } from '@/enums/businessEnums'
import stepCheckRepair from './step-check-repair.vue'
import stepCheckScrap from './step-check-scrap.vue'
import { toast } from '@/utils/util'

const detail = ref<RepairItem>()
const showScrap = ref(true)
// 1为排查结果，2为重领配件
const type = ref('')
const orderId = ref('')
const clientId=ref('')
const repairRef = ref()
const scrapRef = ref()
const selectArr = ref([
    {
        label: '报废',
        value: YesOrNoEnum.YES,
        checked: false
    },
    {
        label: '维修',
        value: YesOrNoEnum.NO,
        checked: false
    }
])

const itemCheck = (ind: number) => {
    if (!showScrap.value) return
    selectArr.value[ind].checked = !selectArr.value[ind].checked
    selectArr.value[1 ^ ind].checked = false
}

const handleSubmit = () => {
    const obj = selectArr.value.find(item => item.checked)
    if (!obj) return toast('请选择维修或报废')
    if (obj.value == YesOrNoEnum.NO) repairRef.value.submit()
    else scrapRef.value.submit()
}

const getDetail = async () => {
    const res = await apiRepairDetail({ id: unref(orderId) })
    detail.value = res
    showScrap.value = false
    selectArr.value[1].checked = true
}

onLoad(options => {
    orderId.value = options.id as string
    type.value = options.type as string
    clientId.value = options.clientId as string
    if (type.value == '2') getDetail()
})
</script>
<style scoped lang="scss">
:deep(.u-number-box) {
    @apply h-[25px] ml-1;
    input {
        background-color: #f4f4f4 !important;
        border-radius: 4px;
        height: 25px !important;
    }
}
:deep(.u-number-box__minus),
:deep(.u-number-box__plus) {
    width: 27px !important;
    background: transparent !important;
}
</style>
