<template>
    <view class="page">
        <scroll-view class="scroll" scroll-y>
            <uni-list>
                <view class="section">
                    <uni-list-item title="订单编号">
                        <template v-slot:footer>
                            <view class="readonly-text">{{ form.orderNo }}</view>
                        </template>
                    </uni-list-item>
                    <uni-list-item title="客户名称">
                        <template v-slot:footer>
                            <view class="readonly-text">{{ form.orderingUnitName }}</view>
                        </template>
                    </uni-list-item>
                    <uni-list-item title="办事处">
                        <template v-slot:footer>
                            <view class="readonly-text">{{ form.deptName }}</view>
                        </template>
                    </uni-list-item>
                    <uni-list-item title="生产厂">
                        <template v-slot:footer>
                            <view class="readonly-text">{{ form.workshopName }}</view>
                        </template>
                    </uni-list-item>
                    <uni-list-item title="计划吨位(kg)">
                        <template v-slot:footer>
                            <view class="readonly-text">{{ form.quantity }}</view>
                        </template>
                    </uni-list-item>
                    <uni-list-item title="计划装货日期">
                        <template v-slot:footer>
                            <view class="readonly-text">{{ form.deliveryDate }}</view>
                        </template>
                    </uni-list-item>
                </view>

                <view class="section">

                    <uni-list-item>
                        <template v-slot:body>
                            <view class="item-title"><text class="required">*</text><text>卸货地点</text></view>
                        </template>
                        <template v-slot:footer>
                            <uni-easyinput v-model="form.destination" placeholder="请输入卸货地点" :inputBorder="false" />
                        </template>
                    </uni-list-item>
                    <uni-list-item>
                        <template v-slot:body>
                            <view class="item-title"><text class="required">*</text><text>接货人/联络人</text></view>
                        </template>
                        <template v-slot:footer>
                            <uni-easyinput v-model="form.consignee" placeholder="请输入接货人/联络人" :inputBorder="false" />
                        </template>
                    </uni-list-item>
                    <uni-list-item>
                        <template v-slot:body>
                            <view class="item-title"><text class="required">*</text><text>联系电话</text></view>
                        </template>
                        <template v-slot:footer>
                            <uni-easyinput v-model="form.phone" placeholder="请输入联系电话" :inputBorder="false" />
                        </template>
                    </uni-list-item>

                </view>

                <view class="section">
                    <uni-list-item title="回货计划安排">
                        <template v-slot:footer>
                            <uni-easyinput type="textarea" v-model="form.returnPlanArrangement" placeholder="请输入回货计划安排"
                                :inputBorder="false" />
                        </template>
                    </uni-list-item>
                    <uni-list-item title="特殊需求、其他等">
                        <template v-slot:footer>
                            <uni-easyinput type="textarea" v-model="form.other" placeholder="请输入特殊需求、其他等"
                                :inputBorder="false" />
                        </template>
                    </uni-list-item>
                    <uni-list-item title="装货特别要求/需求">
                        <template v-slot:footer>
                            <uni-easyinput type="textarea" v-model="form.specialLoadingRequirement"
                                placeholder="请输入装货特别要求/需求" :inputBorder="false" />
                        </template>
                    </uni-list-item>
                </view>
            </uni-list>
        </scroll-view>

        <view class="footer">
            <button class="btn submit" type="primary" @click="onSubmit">提交</button>
        </view>
    </view>
</template>

<script>
import { getDetailApi } from '@/api/order_list.js'
import { createApi as createShipmentApplyApi } from '@/api/draft_order.js'

export default {
    name: 'ShipmentApply',
    data() {
        return {
            id: '',
            form: {
                orderNo: '',
                orderingUnitName: '',
                deptName: '',
                workshopName: '',
                quantity: '',
                deliveryDate: '',
                destination: '',
                consignee: '',
                phone: '',
                returnPlanArrangement: '',
                other: '',
                specialLoadingRequirement: '',
            },
        }
    },
    onLoad(query) {
        this.id = (query && (query.id || query.code)) || ''
        if (this.id) this.loadDetail(this.id)
    },
    methods: {
        async loadDetail(id) {
            try {
                const res = await getDetailApi(id)
                const m = res.data || {}
                const response = { ...this.form, ...m }
                response.id = m.id || m.code || id
                this.form = {
                    purchaseOrderId: response.id || '',
                    orderNo: response?.orderNo || '',
                    orderingUnit: response?.orderingUnit || '',
                    orderingUnitName: response?.orderingUnitName || '',
                    deptName: response?.deptName || '',
                    deptId: response?.deptId || '',
                    workshopName: response?.workshopName || '',
                    workshopId: response?.workshopId || '',
                    quantity: response?.totalQuantity || '',
                    deliveryDate: response?.deliveryDate || '',
                    destination: response?.destination || '',
                    consignee: response?.consignee || '',
                    phone: response?.phone || '',
                    returnPlanArrangement: response?.returnPlanArrangement || '',
                    other: response?.other || '',
                    specialLoadingRequirement: response?.specialLoadingRequirement || '',
                };
            } catch (e) {
                uni.showToast({ title: '加载失败', icon: 'none' })
            }
        },
        validateRequired() {
            const checks = [
                { key: 'destination', label: '卸货地点' },
                { key: 'consignee', label: '接货人/联络人' },
                { key: 'phone', label: '联系电话' },
            ]
            for (const it of checks) {
                const val = this.form[it.key]
                if (val === undefined || val === null || String(val).trim() === '') {
                    uni.showToast({ title: `请先填写${it.label}`, icon: 'none' })
                    return false
                }
            }
            return true
        },
        async onSubmit() {
            if (!this.validateRequired()) return
            const payload = { ...this.form }
            console.log('onSubmit__payload', payload)
            try {
                await createShipmentApplyApi(payload)
                uni.showToast({ title: '保存成功', icon: 'success' })
                setTimeout(() => { uni.redirectTo({ url: '/pages/order_list/index' }) }, 300)
            } catch (e) {
                uni.showToast({ title: (e && e.msg) || '保存失败', icon: 'none' })
            }
        },
    }
}
</script>

<style lang="scss" scoped>
.page {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.scroll {
    flex: 1;
    padding: 6rpx 0 156rpx;
}


.section {
    background: #fff;
    margin-bottom: 20rpx;
}

.section2 {
    background: #f1f1f1;
}

::v-deep .uni-list {
    background: transparent;

    &-item {
        &__extra-text {
            font-size: 32rpx;
        }

        &__content-title {
            font-size: 32rpx;
            color: rgba(0, 0, 0, 0.9);
        }

        &__container {
            padding: 32rpx;
            align-items: center;

            .uni-easyinput {

                .is-disabled {
                    background-color: transparent !important;
                }

                &__placeholder-class {
                    font-size: 32rpx;
                    color: rgba(0, 0, 0, 0.4);
                }

                &__content {
                    border: none;

                    &-input {
                        padding-left: 0 !important;
                        height: 48rpx;
                        line-height: 48rpx;
                        font-size: 32rpx;
                    }

                    .content-clear-icon {
                        font-size: 44rpx !important;
                    }
                }
            }

            .amount-row {
                flex: 1;
                display: flex;
                align-items: center;

                .uni-easyinput {
                    flex: 1;
                }

                .unit {
                    margin-left: 16rpx;
                    color: rgba(0, 0, 0, 0.9);
                }
            }

            .item-title,
            .uni-list-item__content {
                flex: none;
                min-height: 48rpx;
                line-height: 48rpx;
                font-size: 32rpx;
                position: relative;
                width: 210rpx;
                margin-right: 32rpx;
                color: rgba(0, 0, 0, 0.9);
                padding-right: 0;


                .required {
                    color: red;
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    left: -16rpx;
                }
            }

        }

        &.select-item {
            &.is-empty {
                .uni-list-item__extra-text {
                    color: rgba(0, 0, 0, 0.4) !important;
                }
            }

            &.is-filled {
                .uni-list-item__extra-text {
                    color: rgba(0, 0, 0, 0.9) !important;
                }
            }

            .serial-number-row {
                display: flex;
                align-items: center;
            }

        }

        &.mgb10 {
            margin-bottom: 20rpx;
        }

    }

}

/* 只读 easyinput 根据内容自适应高度 */
::v-deep .uni-list-item__container {
    align-items: flex-start;
}

/* 只读文本样式 */
.readonly-text {
    color: rgba(0, 0, 0, 0.9);
    font-size: 32rpx;
    line-height: 48rpx;
    text-align: right;
    white-space: pre-wrap;
    word-break: break-all;
}


.footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 32rpx;
    padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
    background: #fff;
    box-shadow: 0 -8rpx 24rpx rgba(0, 0, 0, 0.06);

    .btn {
        height: 80rpx;
        line-height: 80rpx;
        border-radius: 12rpx;
        font-size: 32rpx;
    }

    .submit {
        background: $theme-primary;
        color: #fff;
    }

}
</style>