<template>
    <view class="page">
            <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-easyinput  v-model="detail.specLockDate"  disabled/>
                            </template>
                        </uni-list-item>
                        <uni-list-item title="延迟原因">
                            <template v-slot:footer>
                                <uni-easyinput  v-model="detail.delayReason" disabled />
                            </template>
                        </uni-list-item>
                    </uni-list>
                </view>
            </view>
    </view>
</template>

<script>
import { getSpecDetailApi } from '@/api/contract'
export default {
    name: 'SpecLockDelayViewer',
    props: {
        id: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            detail: {
                contractCode: '',
                customerName: '',
                deptName: '',
                workshopName: '',
                orderType: '',
                orderTypeName: '',
                orderDate: '',
                applicationCount: '',
                contractDocumentDate: '',
                totalQuantity: ''
            },
            form: { specLockDate: '', delayReason: '' }
        }
    },

    watch: {
        id: {
            immediate: true,
            handler(val) {
                console.log(val,'555555555555')
                const v = (val !== undefined && val !== null) ? String(val) : ''
                if (v) this.loadDetail(v)
            }
        }
    },
    methods: {
        async loadDetail(id) {
            if (!id) return
            try {
                const res = await getSpecDetailApi(id)
                const data = res && res.data ? res.data : {}
                this.detail = {
                    contractCode: data.contractCode || '',
                    customerName: data.customerName || '',
                    deptName: data.deptName || '',
                    workshopName: data.workshopName || '',
                    orderType: data.orderType || '',
                    contractType: data.contractType === 'DRAFT_DIST_AGMT' ? '经销订单' : '外贸订单',
                    orderDate: (data.orderDate || '').slice(0, 10),
                    applicationCount: data.applicationCount || '',
                    contractDocumentDate: (data.contractDocumentDate || '').slice(0, 10),
                    totalQuantity: data.totalQuantity || '',
                    specLockDate: data.specLockDate || '',
                    delayReason: data.delayReason || '',
                }
            } catch (e) {
                this.detail = { ...this.detail }
            }
        },
    }
}
</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: 162rpx;
                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>