<template>
    <view class="page">
        <view class="detail-page">
            <view class="section">
                <text class="row customer">{{ detail.code }}</text>
                <view class="row"><text class="label">承揽方</text><text class="value">{{ detail.supplierName || '-'
                }}</text></view>
                <view class="row"><text class="label">定作方</text><text class="value">{{ detail.buyerName || '-'
                }}</text></view>
                <view class="row"><text class="label">订货日期</text><text class="value">{{ detail.orderDate }}</text>
                </view>
                <view class="row"><text class="label">单位</text><text class="value">{{ detail.unit }}</text></view>
                <view class="row"><text class="label">生产厂</text><text class="value">{{ detail.workshopName || '-'
                }}</text></view>
            </view>

            <view class="section1">
                <ProductRel mode="view" :list="productList" />
            </view>

            <view class="section">
                <view class="row"><text class="label">合计人民币金额（大写）</text><text class="value">{{
                    detail.totalAmountCapital || '-' }}</text></view>
                <view class="row"><text class="label">交付定金、数额、时间</text><text class="value">{{ detail.depositInfo ||
                    '-' }}</text></view>
                <view class="row"><text class="label">包装要求</text><text class="value">{{ detail.packagingRequirements
                    || '-' }}</text></view>
                <view class="row"><text class="label">付款方式、付款期限</text><text class="value">{{ detail.paymentTerms ||
                    '-' }}</text></view>
                <view class="row"><text class="label">运输方式</text><text class="value">{{ detail.transportMode || '-'
                }}</text></view>
                <view class="row"><text class="label">目的地</text><text class="value">{{ detail.destinationLabel || '-'
                }}</text></view>
                <view class="row"><text class="label">单价中是否已包含包装费</text><text class="value">{{
                    detail.includesPackagingFeeName || '-' }}</text></view>
                <view class="row"><text class="label">单价中是否已包含运费</text><text class="value">{{
                    detail.includesTransportFeeName || '-' }}</text></view>
                <view class="row"><text class="label">需方指定收货人</text><text class="value">{{
                    detail.designatedConsignee || '-' }}</text></view>

                <view class="row"><text class="label">特别条款要求</text><text class="value">{{ detail.specialTermsName ||
                    '-' }}</text></view>
                <view class="row"><text class="label">执行标准</text><text class="value">{{ detail.executionStandardName
                    || '-' }}</text></view>
                <view class="row" v-if="detail.executionStandard === 'OTHER'"><text class="label">其他</text><text
                        class="value">{{ detail.executionStandardRemarks || '-' }}</text></view>
                <view class="row"><text class="label">特别说明</text><text class="value">{{ detail.specialInstructions
                    || '-' }}</text></view>
                <view class="row"><text class="label">备注</text><text class="value">{{ detail.remarks || '-'
                }}</text></view>
            </view>

            <view class="section">
                <view class="row"><text class="label">规范性合同</text><text class="value" style="color: #3D48A3;">{{
                    detail.standardFileName || '-'
                        }}</text></view>
                <view class="row"><text class="label">合同是否规范</text><text class="value">{{ detail.standardStandardized ?
                    '是' : '否'
                        }}</text></view>
            </view>

            <view class="section">
                <text class="row customer">具体质量要求</text>
                <view class="row"><text class="label">件重条头</text><text class="value">{{ detail.pieceWeightHead ||
                    '-' }}</text></view>
                <view class="row"><text class="label">表面</text><text class="value">{{ detail.surface || '-'
                }}</text></view>
                <view class="row"><text class="label">公差</text><text class="value">{{ detail.tolerance || '-'
                }}</text></view>
                <view class="row"><text class="label">性能</text><text class="value">{{ detail.performance || '-'
                }}</text></view>
                <view class="row"><text class="label">成分</text><text class="value">{{ detail.component || '-'
                }}</text></view>
                <view class="row"><text class="label">包装</text><text class="value">{{ detail.packaging || '-'
                }}</text></view>
            </view>
        </view>
    </view>
</template>

<script>
import { getContractApi } from '@/api/contract'
import ProductRel from './productRel.vue'

export default {
    name: 'ProcessStdAgmtViewer',
    components: { ProductRel },
    props: { id: { type: [String, Number], default: '' } },
    data() {
        return {
            id: '',
            uploadId: '',
            fileInfo: { id: '', name: '' },
            yesNoList: [{ label: '是', value: true }, { label: '否', value: false }],
            standardStandardized: '',
            standardStandardizedName: '',
            sheet: { visible: false, title: '请选择', options: [], value: '' },
            detail: {
                code: '',
                supplier: '',
                supplierName: '',
                buyer: '',
                buyerName: '',
                orderDate: '',
                unit: '',
                workshopId: '',
                workshopName: '',
                designatedConsignee: '',
                specialTerms: '',
                specialTermsName: '',
                executionStandard: '',
                executionStandardName: '',
                executionStandardRemarks: '',
                includesPackagingFee: false,
                includesPackagingFeeName: '',
                includesTransportFee: false,
                includesTransportFeeName: '',
                totalAmountCapital: '',
                depositInfo: '',
                packagingRequirements: '',
                paymentTerms: '',
                transportMode: '',
                destinationId: '',
                destinationLabel: '',
                specialInstructions: '',
                remarks: '',
                pieceWeightHead: '',
                surface: '',
                tolerance: '',
                performance: '',
                component: '',
                packaging: ''
            },
            productList: [],
        }
    },
    watch: {
        id: {
            immediate: true,
            handler(val) {
                const v = (val !== undefined && val !== null) ? String(val) : ''
                if (v) this.loadDetail(v)
            }
        }
    },
    methods: {
        async loadDetail() {
            if (!this.id) return
            try {
                const res = await getContractApi(this.id)
                const data = res && res.data ? res.data : {}
                const includesPackagingFeeName = data.includesPackagingFeeName || (data.includesPackagingFee ? '是' : '否')
                const includesTransportFeeName = data.includesTransportFeeName || (data.includesTransportFee ? '是' : '否')
                this.detail = {
                    ...this.detail,
                    ...data,
                    includesPackagingFeeName, includesTransportFeeName,
                    destinationId: data.provinceId && data.cityId && data.districtId ? [data.provinceId, data.cityId, data.districtId] : '',
                    destinationLabel: data.provinceName && data.cityName && data.districtName ? `${data.provinceName} / ${data.cityName} / ${data.districtName}` : '',
                }
                const lines = Array.isArray(data.contractStdProcessingLineList) ? data.contractStdProcessingLineList : []
                this.productList = lines
            } catch (e) {
                this.detail = { ...this.detail }
                this.productList = []
            }
        }
    }
}
</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 {
    padding: 32rpx;
    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;
}

.upload-dialog {
    background: #fff;
    border-top-left-radius: 16rpx;
    border-top-right-radius: 16rpx;
}

.upload-header {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    padding: 32rpx 32rpx;
}

.upload-header .title {
    font-size: 36rpx;
    color: rgba(0, 0, 0, 0.9);
    font-weight: 600;
}

.upload-body {
    padding: 16rpx 32rpx;
    border-bottom: 1rpx solid #E7E7E7;
}

.upload-body .section-title {
    font-size: 32rpx;
    color: rgba(0, 0, 0, 0.9);
    font-weight: 600;
    line-height: 48rpx;
}

.upload-footer {
    padding: 24rpx 32rpx 48rpx;
}

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

.row1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: rgba(0, 0, 0, 0.9);
    margin: 32rpx 0;
}

.label1 {
    width: 280rpx;
    color: rgba(0, 0, 0, 0.6);
    font-size: 32rpx;
}
</style>