<!--
 * @Author: micky
 * @Date: 2024-08-13 14:44:36
 * @LastEditors: micky
 * @LastEditTime: 2024-10-31 20:10:03
 * @FilePath: \chargingpile-uniapp\src\bundle\pages\spareParts\apply.vue
-->
<template>
    <w-page-common btnText="提交" @submit="handleSubmit">
        <view class="bg-white rounded-[16rpx]">
            <view class="px-[24rpx] pb-[12rpx]">
                <view class="c-input-field-item">
                    <view class="label">选择仓库</view>
                    <w-dict-select
                        v-model="detail.warehouseType"
                        :options="optionsMap.stashTypeOptions"
                        :disabled="true"
                    ></w-dict-select>
                </view>
                <view class="list">
                    <view class="header px-[12rpx]">
                        <text class="flex-1">配件名称</text>
                        <text class="w-[35%] text-center">数量</text>
                        <text class="w-[16%] text-center">金额</text>
                    </view>

                    <view
                        class="data px-[12rpx]"
                        v-for="(item, index) in detail.sparePartList"
                        :key="index"
                    >
                        <text class="flex-1">{{ item.sparePartsName }}</text>
                        <text class="w-[35%] text-center">{{ item.count }}</text>
                        <text class="w-[16%] text-center text-error">{{ item.totalPrice }}</text>
                    </view>
                </view>
            </view>
            <template v-if="detail.warehouseType == StashTypeEnum.COMMON">
                <view class="c-input-field-item cell-border">
                    <view class="label">收件方式</view>
                    <w-dict-select
                        v-model="formData.deliveryMethod"
                        :options="optionsMap.deliveryMethodOpt"
                    ></w-dict-select>
                </view>
                <template v-if="formData.deliveryMethod != DeliveryMethodEnum.VISIT">
                    <view class="c-input-field-item cell-border return-address">
                        <view class="label">收件地址</view>
                        <view
                            class="flex flex-1 items-center ml-4 justify-end"
                            @click="handleAddress"
                        >
                            <view v-if="!showInfo.address">请选择收件地址</view>
                            <view v-else>{{ showInfo.address }}</view>
                            <TIcon name="icon-right" :size="24" color="#7C7E82" />
                        </view>
                    </view>
                    <view class="c-input-field-item cell-border" v-if="showInfo.contact">
                        <view class="label">收件人</view>
                        <view class="flex">{{ showInfo.contact }}</view>
                    </view>
                    <view class="c-input-field-item cell-border" v-if="showInfo.mobile">
                        <view class="label">联系电话</view>
                        <view class="flex">{{ showInfo.mobile }}</view>
                    </view>
                </template>
                <view class="c-form-item-wrapper p-[24rpx]">
                    <TTextareaField
                        label="备注"
                        v-model="formData.remark"
                        placeholder="请输入备注，选填"
                        :remarkStyle="{ padding: 0 }"
                    ></TTextareaField>
                </view>
            </template>
        </view>
    </w-page-common>
</template>

<script setup lang="ts">
import { ref, unref } from 'vue'
import { optionsMap } from '@/config/options'
import { onShow, onLoad } from '@dcloudio/uni-app'
import { DeliveryMethodEnum, WorkOrderTypeEnum, StashTypeEnum } from '@/enums/businessEnums'
import { apiApplyParts, apiOverhaulDetail } from '@/api/overhaul'
import { apiRepairDetail, apiApplySpareParts } from '@/api/repair'
import { toast } from '@/utils/util'

const formData = ref({
    deliveryMethod: optionsMap.deliveryMethodOpt[0].value,
    remark: '',
    addressId: ''
})
const showInfo = ref({
    address: '',
    mobile: '',
    contact: ''
})
const detail = ref<any>({})
const orderId = ref('')
const type = ref('')
const handleAddress = () => {
    uni.navigateTo({
        url: '/bundle/pages/user_address/index?type=true'
    })
}
const handleSubmit = async () => {
    const form = unref(formData)
    if (
        detail.value.warehouseType == StashTypeEnum.COMMON &&
        form.deliveryMethod != DeliveryMethodEnum.VISIT &&
        !form.addressId
    )
        return toast('请选择收件地址')
    const params =
        detail.value.warehouseType == StashTypeEnum.MY
            ? {
                  id: unref(orderId)
              }
            : {
                  ...unref(formData),
                  id: unref(orderId)
              }
    const api = unref(type) == WorkOrderTypeEnum.OVERHAUL + '' ? apiApplyParts : apiApplySpareParts
    await api(params)
    toast('操作成功')
    setTimeout(() => {
        uni.navigateBack()
    }, 300)
}

const getDetail = async () => {
    const api = unref(type) == WorkOrderTypeEnum.OVERHAUL + '' ? apiOverhaulDetail : apiRepairDetail
    const res = await api({ id: unref(orderId) })
    detail.value = res
}
onShow(() => {
    uni.$on('address', function (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
    })
})

onLoad(options => {
    orderId.value = options.id as string
    type.value = options.type as string
    getDetail()
})
</script>
<style scoped lang="scss">
.list {
    @apply mt-[12rpx] mb-[12rpx] border border-[#E7E7E7] rounded-sm w-full min-h-[140rpx];
    .header,
    .data {
        @apply flex;
        text {
            @apply mb-1;
        }
    }
    .header {
        @apply h-[68rpx] leading-[68rpx] pl-1 border-b border-[#E7E7E7];
    }
    .data {
        @apply pl-1 h-[90rpx] leading-[90rpx];
    }
}
:deep(.u-number-box) {
    @apply h-[90rpx];
    input {
        border: 1px solid #ececec;
        border-radius: 4px;
        width: 80rpx;
    }
}
:deep(.u-number-box__minus),
:deep(.u-number-box__plus) {
    width: 27px !important;
}
.cell-border {
    @apply px-[24rpx];
    border-bottom: 1px solid $gray-3;
}
.return-address {
    height: auto !important;
    padding: 24rpx;
}
</style>
