<template>
    <view class="page">
        <scroll-view class="scroll" scroll-y>
            <view class="detail-page">
                <view class="section">
                    <uni-list>
                        <uni-list-item title="客户名称">
                            <template v-slot:footer>
                                <uni-easyinput v-model="detail.customerName" :clearable="false" disabled />
                            </template>
                        </uni-list-item>
                        <uni-list-item title="订单编号">
                            <template v-slot:footer>
                                <uni-easyinput v-model="detail.contractCode" :clearable="false" disabled />
                            </template>
                        </uni-list-item>
                        <uni-list-item title="办事处">
                            <template v-slot:footer>
                                <uni-easyinput v-model="detail.deptName" :clearable="false" disabled />
                            </template>
                        </uni-list-item>
                        <uni-list-item title="所属分厂">
                            <template v-slot:footer>
                                <uni-easyinput v-model="detail.workshopName" :clearable="false" disabled />
                            </template>
                        </uni-list-item>
                        <uni-list-item title="订单类型">
                            <template v-slot:footer>
                                <uni-easyinput v-model="detail.contractType" :clearable="false" disabled />
                            </template>
                        </uni-list-item>
                        <uni-list-item title="原订货日期">
                            <template v-slot:footer>
                                <uni-easyinput v-model="detail.orderDate" :clearable="false" disabled />
                            </template>
                        </uni-list-item>
                        <uni-list-item title="第几次申请">
                            <template v-slot:footer>
                                <uni-easyinput v-model="detail.applicationCount" :clearable="false" disabled />
                            </template>
                        </uni-list-item>
                        <uni-list-item title="制单日期">
                            <template v-slot:footer>
                                <uni-easyinput v-model="detail.contractDocumentDate" :clearable="false" disabled />
                            </template>
                        </uni-list-item>
                        <uni-list-item title="数量">
                            <template v-slot:footer>
                                <uni-easyinput v-model="detail.totalQuantity" :clearable="false" disabled />
                            </template>
                        </uni-list-item>
                    </uni-list>
                </view>

                <view class="section1">
                    <uni-list>
                        <uni-list-item title="现申请锁规格日期">
                            <template v-slot:footer>
                                <uni-datetime-picker type="date" v-model="form.specLockDate" />
                            </template>
                        </uni-list-item>
                        <uni-list-item title="延迟原因">
                            <template v-slot:footer>
                                <uni-easyinput  v-model="form.delayReason" placeholder="请输入原因" :inputBorder="false" />
                            </template>
                        </uni-list-item>
                        <view class="footer">
                            <button class="btn submit" type="primary" @click="onSubmit">提交</button>
                        </view>
                    </uni-list>
                </view>
            </view>
        </scroll-view>
        
    </view>
</template>

<script>
import { showContract, specLockDelayApplication } from '@/api/contract'
export default {
    name: 'LockApplyForeignUnplan',
    data() {
        return {
            id: '',
            detail: {
                contractCode: '',
                customerName: '',
                deptName: '',
                workshopName: '',
                orderType: '',
                orderTypeName: '',
                orderDate: '',
                applicationCount: '',
                contractDocumentDate: '',
                totalQuantity: ''
            },
            form: { specLockDate: '', delayReason: '' }
        }
    },
    onLoad(options) {
        const id = options && options.id ? options.id : ''
        this.id = id
        this.loadDetail()
    },
    methods: {
        async loadDetail() {
            if (!this.id) return
            try {
                const res = await showContract(this.id)
                const data = res && res.data ? res.data : {}
                this.detail = {
                    contractId: data.contractId || '',
                    contractCode: data.contractCode || '',
                    customerName: data.customerName || '',
                    deptName: data.deptName || '',
                    workshopName: data.workshopName || '',
                    orderType: data.orderType || '',
                    contractTypeCode: data.contractType || '',
                    contractType: data.contractType === 'DRAFT_DIST_AGMT' ? '经销订单' : '外贸订单',
                    orderDate: (data.orderDate || '').slice(0, 10),
                    applicationCount: data.applicationCount || '',
                    contractDocumentDate: (data.contractDocumentDate || '').slice(0, 10),
                    totalQuantity: data.totalQuantity || ''
                }
            } catch (e) {
                this.detail = { ...this.detail }
            }
        },

        onSubmit() {
            const date = this.form.specLockDate
            const reason = this.form.delayReason
            const emptyDate = !date
            if (emptyDate) {
                uni.showToast({ title: '请填写日期', icon: 'none' })
                return
            }
            uni.showModal({
                title: '确认提交',
                content: '确定提交锁规无规格申请吗？',
                success: (res) => {
                    if (res.confirm) {
                        specLockDelayApplication({
                            ...this.detail,
                            contractType: this.detail.contractTypeCode || '',
                            specLockDate: date,
                            delayReason: reason
                        }).then(res => {
                            if (res.code === 200) {
                                uni.showToast({ title: '提交成功', icon: 'success' })
                                setTimeout(() => {
                                    uni.navigateTo({ url: '/pages/contract_foreign_unplan/index' })
                                }, 1000)
                            } else {
                                uni.showToast({ title: res.msg || '提交失败', icon: 'none' })
                            }
                        })
                    }
                }
            })
        }
    }
}
</script>

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

.scroll {
    flex: 1;
    padding: 8rpx 0 144rpx;
}

.detail-page {
    background: #f3f3f3;
}

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

.row {
    display: flex;
    margin-bottom: 20rpx;
    align-items: center;
}

.row:last-child {
    margin-bottom: 0;
}

.label {
    width: 280rpx;
    color: rgba(0, 0, 0, 0.6);
    font-size: 28rpx;
}

.value {
    flex: 1;
    text-align: right;
    color: rgba(0, 0, 0, 0.9);
    font-size: 28rpx;
}

.customer {
    font-weight: 600;
    font-size: 36rpx;
    color: rgba(0, 0, 0, 0.9);
    padding-bottom: 12rpx;
}

.footer { 
    position: fixed; 
    left: 0; right: 0; bottom: 0; 
    padding: 24rpx 32rpx 48rpx; 
    background: #fff; 
    box-shadow: 0 -8rpx 24rpx rgba(0,0,0,0.06);
}
.footer .btn { height: 80rpx; line-height: 80rpx; border-radius: 12rpx; font-size: 32rpx; }
.footer .submit { background: $theme-primary; color: #fff; }

::v-deep .uni-list {
    .uni-easyinput {
        display: flex;

        .uni-input-input {
            color: rgba(0, 0, 0, 0.9);
        }
    }

    .uni-input-placeholder {
        z-index: 1;
    }

    .uni-input-input {
        background-color: #ffffff;
    }

    background: transparent;

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

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

        &__container {
            padding: 32rpx;

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

                &__content {
                    border: none;
                    background-color: #ffffff !important;

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

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

            .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);

                .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;
                }
            }
        }

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

// ::v-deep .uni-list-item__container {
//     padding: 32rpx;
// }

::v-deep .is-disabled {
    background-color: transparent !important;
}
// ::v-deep .uni-list-item__content-title {
//     font-size: 28rpx;
//     color: rgba(0, 0, 0, 0.9);
// }

// ::v-deep .uni-list-item__extra-text {
//     font-size: 32rpx;
// }

::v-deep .uni-easyinput {
    width: 100%;
}

::v-deep .uni-easyinput__placeholder-class {
    font-size: 32rpx;
    color: rgba(0, 0, 0, 0.4);
}

::v-deep .uni-easyinput__content {
    border: none;
    display: flex;
}

::v-deep .uni-easyinput__content-input {
    padding-left: 0 !important;
    height: 48rpx;
    line-height: 48rpx;
    font-size: 32rpx;
    color: rgba(0, 0, 0, 0.9);
}
</style>