<template>
    <view class="page">
        <scroll-view class="scroll" scroll-y>
            <view class="detail-page">
                <view class="section">
                    <text class="row customer">{{ detail.code }}</text>
                    <view class="row" v-if="detail.status === 'STANDARD'">
                        <text class="label">标准合同规范性审核状态</text>
                        <text class="value">
                            <span class="info-status" :style="detail.standardApprovedName ? getStatusCss(detail.standardApprovedName) : ''" >{{ detail.standardApprovedName || '-' }}</span>
                        </text>
                    </view>
                    <view class="row" v-if="detail.status === 'STANDARD' || detail.status === 'FORMAL'">
                        <text class="label">正式合同规范性审核状态</text>
                        <text class="value">
                            <span class="info-status" :style="detail.formalApprovedName ? getStatusCss(detail.formalApprovedName) : ''" >{{ detail.formalApprovedName || '-' }}</span>
                        </text>
                    </view>
                    <view v-if="detail.status === 'STANDARD'" :class="['status', `status_${detail.shippingStatusName}`]" />                    
                    <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 class="row"><text class="label">办事处</text><text class="value">{{ detail.deptName || '-'
                    }}</text></view>
                    <view class="row"><text class="label">区域</text><text class="value">{{ detail.regionName || '-'
                    }}</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" v-if="detail.status === 'STANDARD'">
                    <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" v-if="detail.status === 'FORMAL'">
                    <view class="row"><text class="label">规范性合同</text><text class="value" style="color: #3D48A3;">{{
                        detail.formalFileName || '-' }}</text></view>
                    <view class="row"><text class="label">合同是否规范</text><text class="value">{{ detail.formalStandardized
                            ? '是' : '否' }}</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>
        </scroll-view>
        <detail-buttons :buttons="displayButtons" @click="handleButtonClick" />
        <uni-popup ref="uploadPopup" type="bottom" :mask-click="false" :safe-area="true">
            <view class="upload-dialog">
                <view class="upload-header">
                    <text class="title">上传规范性合同</text>
                    <uni-icons type="closeempty" style="position: absolute; right: 16px;" size="22"
                        @click="$refs.uploadPopup.close()" />
                </view>
                <view class="upload-body">
                    <text class="section-title">附件上传：</text>
                    <view class="upload-row">
                        <FileUpload v-model="fileInfo" />
                    </view>
                    <view class="row1" @click="openStandardizedSheet">
                        <view class="label1">合同是否规范</view>
                        <uni-icons type="right" size="18" v-if="!standardStandardizedName"></uni-icons>
                        <view class="value" v-else>{{ standardStandardizedName }}</view>
                    </view>
                </view>
                <view class="upload-footer">
                    <button class="btn submit" type="primary" @click="onUploadSubmit">提交</button>
                </view>
            </view>
        </uni-popup>
        <SingleSelectSheet :visible.sync="sheet.visible" :title="sheet.title" :options="sheet.options"
            v-model="sheet.value" @confirm="onSheetConfirm" />
    </view>
</template>

<script>
import { getContractApi, deleteContractApi, uploadFormalContract, statusStyle, uploadStandardContract, statusMap, showContract } from '@/api/contract'
import ProductRel from './productRel.vue'
import DetailButtons from '@/components/detail-buttons/index.vue'
import FileUpload from '@/components/file-upload/index.vue'
import SingleSelectSheet from '@/components/single-select/index.vue'
import { fillStandardApprovedName, fillFormalApprovedName } from '@/utils/dic.js'

export default {
    name: 'ContractUnplanDetail',
    components: { ProductRel, DetailButtons, FileUpload, SingleSelectSheet },
    data() {
        return {
            id: '',
            uploadId: '',
            uploadType: 'formal',
            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: ''
            },
            statusStyle: statusStyle,
            statusMap: statusMap,
            productList: [],
            buttons: [{
                text: '编辑',
                visible: true,
                variant: 'outline',
                event: 'edit',
            },
            {
                text: '删除',
                visible: true,
                variant: 'outline',
                event: 'delete',
                style: {
                    color: '#D54941',
                    border: '1px solid #D54941'
                }
            },
            {
                text: '锁规',
                visible: true,
                variant: 'outline',
                event: 'lock',
            },
            {
                text: '锁规延期申请',
                visible: true,
                variant: 'outline',
                event: 'lockApply'
            },
            {
                text: '上传正式合同附件',
                visible: true,
                variant: 'outline',
                event: 'upload'
            },
            {
                text: '上传正式合同附件',
                visible: true,
                variant: 'outline',
                event: 'uploadParent'
            },
            {
                text: '上传标准合同附件',
                visible: true,
                variant: 'outline',
                event: 'uploadStandard'
            },
            {
                text: '审核正式合同',
                visible: true,
                variant: 'primary',
                event: 'audit1'
            },
            {
                text: '审核正式合同',
                visible: true,
                variant: 'primary',
                event: 'audit2'
            },
            {
                text: '审核标准合同',
                visible: true,
                variant: 'primary',
                event: 'audit3'
            },
            {
                text: '正式合同审核详情',
                visible: true,
                event: 'auditDetail1'
            },
            {
                text: '正式合同审核详情',
                visible: true,
                event: 'auditDetail2'
            },
            {
                text: '标准合同审核详情',
                visible: true,
                event: 'auditDetail3'
            },
            ],
        }
    },
    computed: {
        displayButtons() {
            const s = this.detail && this.detail.status || false
            const t = this.detail.formalApproved || false
            const l = this.detail.priceSpecLocked || false
            const a = this.detail.standardApproved || false
            const e = this.detail.showExamine || false
            const f = this.detail.standardShowExamine || false
            return [
                { ...this.buttons[0], visible: (s === 'DRAFT' && this.$auth.hasPermi('contract-manage:distribution-unlocked-contract:modify')) },
                { ...this.buttons[1], visible: (s === 'DRAFT' && this.$auth.hasPermi('contract-manage:distribution-unlocked-contract:delete')) },
                { ...this.buttons[2], visible: (s === 'FORMAL' && !l && this.$auth.hasPermi('contract-manage:distribution-unlocked-contract:lock')) },
                { ...this.buttons[3], visible: (s === 'FORMAL' && !l && this.$auth.hasPermi('contract-manage:distribution-unlocked-contract:lock-apply')) },
                { ...this.buttons[4], visible: ((s === 'DRAFT' || s === 'FORMAL') && t !== 'AUDIT' && t !== 'PASS' && this.$auth.hasPermi('contract-manage:distribution-unlocked-contract:upload')) },
                { ...this.buttons[5], visible: (s === 'STANDARD' && t !== 'AUDIT' && t !== 'PASS' && this.$auth.hasPermi('contract-manage:distribution-unlocked-contract:upload')) },
                { ...this.buttons[6], visible: (s === 'STANDARD' && a !== 'AUDIT' && a !== 'PASS' && this.$auth.hasPermi('contract-manage:distribution-unlocked-contract:standard-upload')) },
                { ...this.buttons[7], visible: (s === 'FORMAL' && e && t === 'AUDIT' && this.$auth.hasPermi('contract-manage:distribution-unlocked-contract:approve')) },
                { ...this.buttons[8], visible: (s === 'STANDARD' && e && t === 'AUDIT' && this.$auth.hasPermi('contract-manage:distribution-unlocked-contract:approve')) },
                { ...this.buttons[9], visible: (s === 'STANDARD' && f && a === 'AUDIT' && this.$auth.hasPermi('contract-manage:distribution-unlocked-contract:standard-approve')) },
                { ...this.buttons[10], visible: (s === 'FORMAL' && t === 'AUDIT' && this.$auth.hasPermi('contract-manage:distribution-unlocked-contract:review')) },
                { ...this.buttons[11], visible: (s === 'STANDARD' && t === 'AUDIT' && this.$auth.hasPermi('contract-manage:distribution-unlocked-contract:review')) },
                { ...this.buttons[12], visible: (s === 'STANDARD' && a === 'AUDIT' && this.$auth.hasPermi('contract-manage:distribution-unlocked-contract:standard-review')) },
            ]
        }
    },
    onLoad(options) {
        const id = options && options.id ? options.id : ''
        this.id = id
        this.loadDetail()
    },
    methods: {
        getStatusCss(name) {
            const list = Array.isArray(this.statusStyle) ? this.statusStyle : []
            const found = list.find(it => it && it.text === name) || {}
            return {
                color: found.color || '#000',
                backgroundColor: found.bgColor || '#000'
            }
        },
        onDelete() {
            uni.showModal({
                title: '确认删除',
                content: '确认删除该合同吗？',
                success: (res) => {
                    if (res.confirm) {
                        deleteContractApi(this.id).then(() => {
                            uni.showToast({
                                title: '删除成功',
                                icon: 'success'
                            })
                            setTimeout(() => {
                                uni.navigateTo({
                                    url: '/pages/contract_unplan/index'
                                })
                            }, 500)
                        }).catch(() => {
                            uni.showToast({
                                title: '删除失败',
                                icon: 'error'
                            })
                        })
                    }
                }
            })
        },
        onEdit() {
            const id = this.detail.id || this.detail.code || ''
            const query = id ? ('?id=' + encodeURIComponent(id)) : ''
            uni.navigateTo({
                url: '/pages/contract_unplan/modify' + query
            })
        },
        onLockApply() {
            showContract(this.detail.id).then(res => {
                uni.navigateTo({
                    url: '/pages/contract_unplan/lock_apply?id=' + this.detail.id || ''
                })
            })
        },
        uploadContract(id, type = 'formal') {
            if (!id) return
            this.uploadId = id
            this.uploadType = type
            this.$refs.uploadPopup.open()
        },
        onUploadSubmit() {
            if (!this.fileInfo.id) {
                uni.showToast({
                    title: '请上传合同附件',
                    icon: 'error'
                })
                return
            }
            if (!this.standardStandardized) {
                uni.showToast({
                    title: '请选择合同是否规范',
                    icon: 'error'
                })
                return
            }
            const data = this.uploadType === 'formal' ? {
                id: this.id,
                formalFileId: this.fileInfo.id,
                formalFileName: this.fileInfo.name,
                formalStandardized: this.standardStandardized
            } : {
                id: this.id,
                standardFileId: this.fileInfo.id,
                standardFileName: this.fileInfo.name,
                standardStandardized: this.standardStandardized
            }
            const api = this.uploadType === 'formal' ? uploadFormalContract : uploadStandardContract
            uni.showModal({
                title: '确认提交',
                content: this.uploadType === 'formal' ? '确定提交正式合同吗？' : '确定提交标准合同吗？',
                success: (res) => {
                    if (res.confirm) {
                        api({ ...this.detail, ...data }).then(() => {
                            uni.showToast({
                                title: this.uploadType === 'formal' ? '上传正式合同成功' : '上传标准合同成功',
                                icon: 'success'
                            })
                            setTimeout(() => {
                                uni.navigateTo({
                                    url: '/pages/contract_unplan/index'
                                })
                            }, 500)
                        }).catch(() => {
                            uni.showToast({
                                title: '上传失败',
                                icon: 'error'
                            })
                        })
                    }
                }
            })

        },
        onSheetConfirm({ value, label }) {
            this.standardStandardized = value
            this.standardStandardizedName = label || ''
        },
        openStandardizedSheet() {
            const options = this.yesNoList
            const current = this.standardStandardized
            const match = (options || []).find(o => String(o.value) === String(current) || String(o.label) === String(current))
            this.sheet = { ...this.sheet, visible: true, title: '合同是否规范', options, value: match ? match.value : '' }
        },
        onLock() {
            uni.navigateTo({
                url: '/pages/contract_unplan/lock?id=' + this.detail.id || ''
            })
        },
        handleButtonClick(btn) {
            if (!btn || btn.disabled) return
            if (typeof btn.onClick === 'function') return btn.onClick(this.detail, btn.params)
            const e = btn.event || ''
            if (e === 'edit') return this.onEdit(btn && btn.params)
            if (e === 'delete') return this.onDelete(btn && btn.params)
            if (e === 'lock') return this.onLock()
            if (e === 'lockApply') return this.onLockApply()
            if (e === 'upload') return this.uploadContract(this.detail.id || '')
            if (e === 'uploadParent') return this.uploadContract(this.detail.parentId || '')
            if (e === 'uploadStandard') return this.uploadContract(this.detail.id || '', 'standard')
            if (e === 'audit1') return this.onAudit(this.detail.id || '', 'FORMAL_CONTRACT')
            if (e === 'audit2') return this.onAudit(this.detail.parentId || '', 'FORMAL_CONTRACT')
            if (e === 'audit3') return this.onAudit(this.detail.id || '', 'STANDARD_CONTRACT')
            if (e === 'auditDetail1') return this.onAuditDetail(this.detail.id || '', 'FORMAL_CONTRACT')
            if (e === 'auditDetail2') return this.onAuditDetail(this.detail.parentId || '', 'FORMAL_CONTRACT')
            if (e === 'auditDetail3') return this.onAuditDetail(this.detail.id || '', 'STANDARD_CONTRACT')
        },
        onAudit(id, type) {
            const CACHE_KEY = 'sourceBusinessId'
            const TYPE = 'contractType'
            uni.setStorageSync(TYPE, type)
            uni.setStorageSync(CACHE_KEY, id)
            uni.navigateTo({ url: '/pages/flow/audit' })
        },
        onAuditDetail(id, type) {
            const CACHE_KEY = 'sourceBusinessId'
            const TYPE = 'contractType'
            uni.setStorageSync(TYPE, type)
            uni.setStorageSync(CACHE_KEY, id)
            uni.navigateTo({ url: '/pages/flow/audit_detail' })
        },
        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,
                    stockUpCompanyId: data.stockUpCompanyId || '',
                    stockUpCompanyName: data.stockUpCompanyName || '',
                    deptName: data.deptName || '',
                    region: data.region || '',
                    regionName: data.regionName || '',
                    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}` : '',
                }
                this.detail = await fillStandardApprovedName(this.detail)
                this.detail = await fillFormalApprovedName(this.detail)
                const lines = Array.isArray(data.contractDistributorLineList) ? data.contractDistributorLineList : []
                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;
}
.info-status {
    padding: 4rpx 12rpx;
    border-radius: 6rpx;
    font-size: 24rpx;
    color: #fff;
    line-height: 40rpx;
}
.detail-page {
    background: #f3f3f3;
}

.section {
    padding: 32rpx;
    background: #fff;
    margin-bottom: 20rpx;
    .status {
    position: absolute;
    top: 16rpx;
    right: 52rpx;
    width: 180rpx;
    height: 146rpx;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;

    &_审批中 {
      background-image: url('~@/static/images/contract/status_1.png');
    }

    &_生产中 {
      background-image: url('~@/static/images/contract/status_2.png');
    }

    &_已发货 {
      background-image: url('~@/static/images/contract/status_3.png');
    }

    &_已签收 {
      background-image: url('~@/static/images/contract/status_4.png');
    }
  }
}

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

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

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

.label {
    width: 310rpx;
    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: 310rpx;
    color: rgba(0, 0, 0, 0.6);
    font-size: 32rpx;
}
</style>