<template>
	<view class="detail-page">
		<scroll-view class="scroll" scroll-y>
			<view class="section">
				<text class="row company">{{ safeText(form.unitName) }}</text>
				<view class="row"><text class="label">公司性质</text><text class="value">{{ safeText(companyNatureText) }}</text></view>
				<view class="row"><text class="label">法人代表</text><text class="value">{{ safeText(form.legalRepresentative) }}</text></view>
				<view class="row"><text class="label">电话及传真</text><text class="value">{{ safeText(form.phoneAndFax) }}</text></view>
				<view class="row"><text class="label">注册证书号</text><text class="value">{{ safeText(form.registrationCertificateNo) }}</text></view>
				<view class="row"><text class="label">地址</text><text class="value">{{ safeText(form.address) }}</text></view>
				<view class="row"><text class="label">国内业务负责人</text><text class="value">{{ safeText(form.domesticBusinessPrincipal) }}</text></view>
				<view class="row"><text class="label">负责人身份证/护照号</text><text class="value">{{ safeText(form.principalCertificateNo) }}</text></view>
				<view class="row"><text class="label">成立时间及货场规模</text><text class="value pre">{{ safeText(form.establishedTimeAndYardScale) }}</text></view>
				<view class="row"><text class="label">经营品种、规模</text><text class="value pre">{{ safeText(form.overallBusinessVarietiesScale) }}</text></view>
				<view class="row"><text class="label">出口到国内时间</text><text class="value">{{ safeText(form.exportToDomesticTime) }}</text></view>
				<view class="row"><text class="label">出口规模、品种</text><text class="value pre">{{ safeText(form.exportToDomesticScaleVarieties) }}</text></view>
				<view class="row"><text class="label">与国内合作企业</text><text class="value pre">{{ safeText(form.cooperatingDomesticCompanies) }}</text></view>
				<view class="row"><text class="label">合作效果</text><text class="value pre">{{ safeText(form.cooperationEffect) }}</text></view>
				<view class="row"><text class="label">供应商考察</text><text class="value pre">{{ safeText(form.supplierInspection) }}</text></view>
				<view class="row"><text class="label">销售代表办公地考察</text><text class="value pre">{{ safeText(form.domesticSalesOfficeInspection) }}</text></view>
				<view class="row"><text class="label">有无担保函</text><text class="value">{{ safeText(form.guaranteeLetter) }}</text></view>
				<view class="row"><text class="label">合同纠纷</text><text class="value pre">{{ safeText(form.contractDispute) }}</text></view>
				<view class="row"><text class="label">保险、运输方式</text><text class="value">{{ safeText(form.insuranceTransportMode) }}</text></view>
				<view class="row"><text class="label">滞箱滞报费用</text><text class="value">{{ safeText(form.detentionDemurrageFee) }}</text></view>
				<view class="row"><text class="label">操作品种</text><text class="value">{{ safeText(form.operationVariety) }}</text></view>
				<view class="row"><text class="label">操作规模</text><text class="value">{{ safeText(form.operationScale) }}</text></view>
				<view class="row"><text class="label">定价模式</text><text class="value">{{ safeText(form.pricingMode) }}</text></view>
				<view class="row"><text class="label">结算方式</text><text class="value">{{ safeText(form.settlementMethod) }}</text></view>
				<view class="row"><text class="label">磅差约定</text><text class="value">{{ safeText(form.weightDifferenceAgreement) }}</text></view>
				<view class="row"><text class="label">质量标准</text><text class="value">{{ safeText(form.qualityStandard) }}</text></view>
				<view class="row"><text class="label">供应商分类</text><text class="value">{{ safeText(supplierCategoryName) }}</text></view>
			</view>

			<view class="title-header">
				<image class="title-header_icon" src="/static/images/title.png" />
				<span>操作方案</span>
			</view>
			<view class="section">
				<view class="row"><text class="label">操作时间</text><text class="value">{{ safeText(form.schemeOperationTime) }}</text></view>
				<view class="row"><text class="label">操作模式</text><text class="value">{{ safeText(form.schemeOperationMode) }}</text></view>
				<view class="row"><text class="label">操作品种</text><text class="value">{{ safeText(form.schemeOperationVariety) }}</text></view>
				<view class="row"><text class="label">操作数量</text><text class="value">{{ safeText(form.schemeOperationQuantity) }}</text></view>
				<view class="row"><text class="label">发货要求</text><text class="value pre">{{ safeText(form.shippingRequirement) }}</text></view>
				<view class="row"><text class="label">付款方式</text><text class="value">{{ safeText(form.paymentMethod) }}</text></view>
				<view class="row"><text class="label">下次评审时间</text><text class="value">{{ safeText(form.nextReviewTime) }}</text></view>
				<view class="row"><text class="label">评审部门</text><text class="value">{{ safeText(form.reviewDepartment) }}</text></view>
				<view class="row"><text class="label">资信调查人</text><text class="value">{{ safeText(form.investigatorName) }}</text></view>
				<view class="row"><text class="label">采购处</text><text class="value">{{ safeText(purchaseDeptName) }}</text></view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { getDicByCodes, getDicName } from '@/utils/dic.js'
import { foreignTradeCreditGetExamineByIdApi, getPurchaseDeptApi } from '@/api/procure-manage/foreignTradeCredit.js'

export default {
	name: 'ForeignTradeCreditViewer',
	props: { id: { type: [String, Number], default: '' } },
	data() {
		return {
			form: {},
			dicOptions: {
				COMPANY_NATURE: []
			},
			purchaseDeptOptions: []
		}
	},
	computed: {
		companyNatureText() {
			const v = this.form && this.form.companyNature != null ? String(this.form.companyNature) : ''
			if (!v) return '-'
			return getDicName('COMPANY_NATURE', v, this.dicOptions.COMPANY_NATURE) || v
		},
		supplierCategoryName() {
			const v = this.form && this.form.supplierCategory != null ? String(this.form.supplierCategory) : ''
			const map = { A: 'A类供应商', B: 'B类供应商', C: 'C类供应商', D: 'D类供应商' }
			return map[v] || (v ? v : '-')
		},
		purchaseDeptName() {
			const v = this.form && this.form.purchase_department != null ? String(this.form.purchase_department) : ''
			if (!v) return '-'
			const found = (this.purchaseDeptOptions || []).find(o => String(o.value) === v)
			return found ? String(found.label || '') : v
		}
	},
	created() {
		this.loadDicData()
		this.loadPurchaseDeptOptions()
	},
	watch: {
		id: {
			immediate: true,
			handler(val) {
				const v = (val !== undefined && val !== null) ? String(val) : ''
				if (v) this.loadDetail(v)
			}
		}
	},
	methods: {
		async loadDicData() {
			try {
				const results = await getDicByCodes(['COMPANY_NATURE'])
				this.dicOptions.COMPANY_NATURE = (results.COMPANY_NATURE && results.COMPANY_NATURE.data) || []
			} catch (e) {
				this.dicOptions.COMPANY_NATURE = []
			}
		},
		async loadPurchaseDeptOptions() {
			try {
				const res = await getPurchaseDeptApi()
				const list = (res && res.data) ? res.data : []
				this.purchaseDeptOptions = (Array.isArray(list) ? list : []).map(it => ({
					label: it && it.name != null ? String(it.name) : '',
					value: it && it.id != null ? String(it.id) : ''
				})).filter(it => it.value)
			} catch (e) {
				this.purchaseDeptOptions = []
			}
		},
		safeText(v) {
			const s = v == null ? '' : String(v)
			return s.trim() ? s : '-'
		},
		async loadDetail(id) {
			try {
				const res = await foreignTradeCreditGetExamineByIdApi(id)
				this.form = (res && res.data) ? res.data : {}
			} catch (e) {
				this.form = {}
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.detail-page {
	background: #f3f3f3;
}

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

.title-header {
	display: flex;
	align-items: center;
	padding: 24rpx 32rpx 12rpx;
	background-color: #ffffff;

	.title-header_icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 12rpx;
	}

	span {
		font-size: 34rpx;
		font-weight: 600;
		color: rgba(0, 0, 0, 0.9);
	}
}

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

.row {
	display: flex;
	margin-bottom: 28rpx;

	&:last-child {
		margin-bottom: 0;
	}

	&.company {
		font-size: 36rpx;
		font-weight: 600;
		color: rgba(0, 0, 0, 0.9);
		padding-top: 8rpx;
		line-height: 50rpx;
	}

	.label {
		max-width: 420rpx;
		margin-right: 20rpx;
		line-height: 32rpx;
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.6);
	}

	.value {
		flex: 1;
		line-height: 32rpx;
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.9);
		text-align: right;
		word-break: break-all;

		&.pre {
			white-space: pre-wrap;
		}
	}
}
</style>