<template>
	<view class="page">
		<scroll-view class="scroll" scroll-y>
			<view class="detail-page">
				<view class="section">
					<text class="row company">{{ safeText(form.unitName) }}</text>
					<view class="row"><text class="label">供应商</text><text class="value">{{ safeText(form.supplierName) }}</text></view>
					<view class="row"><text class="label">公司性质</text><text class="value">{{ safeText(form.companyNature) }}</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.phoneFax) }}</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.domesticBusinessLeader) }}</text></view>
					<view class="row"><text class="label">负责人身份证/护照号</text><text class="value">{{ safeText(form.leaderIdPassportNo) }}</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.overallBusinessVarietyScale) }}</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.exportToDomesticScaleVariety) }}</text></view>
					<view class="row"><text class="label">与国内合作企业</text><text class="value pre">{{ safeText(form.domesticCooperationCompanies) }}</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.domesticSalesRepOfficeInspection) }}</text></view>
					<view class="row"><text class="label">有无担保函</text><text class="value">{{ safeText(form.hasGuaranteeLetter) }}</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.demurrageFee) }}</text></view>
					<view class="row"><text class="label">操作品种</text><text class="value">{{ safeText(form.operatingVariety) }}</text></view>
					<view class="row"><text class="label">操作规模</text><text class="value">{{ safeText(form.operatingScale) }}</text></view>
					<view class="row"><text class="label">定价模式</text><text class="value">{{ safeText(form.pricingModel) }}</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.weightDiffAgreement) }}</text></view>
					<view class="row"><text class="label">质量标准</text><text class="value">{{ safeText(form.qualityStandard) }}</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(supplierCategoryName) }}</text></view>
					<view class="row"><text class="label">分类说明</text><text class="value pre">{{ safeText(supplierCategoryDesc) }}</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.operationTime) }}</text></view>
					<view class="row"><text class="label">操作模式</text><text class="value">{{ safeText(form.operationMode) }}</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.operationQuantity) }}</text></view>
					<view class="row"><text class="label">发货要求</text><text class="value pre">{{ safeText(form.deliveryRequirement) }}</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 v-if="reviewHint" class="hint">{{ reviewHint }}</view>
				</view>

				<view v-if="auditStatusText !== '-'" class="section">
					<view class="row"><text class="label">审核状态</text><text class="value">{{ auditStatusText }}</text></view>
				</view>
			</view>
		</scroll-view>

		<detail-buttons :buttons="displayButtons" @click="handleButtonClick" />
	</view>
</template>

<script>
import DetailButtons from '@/components/detail-buttons/index.vue'
import { getDicByCodes, getDicName } from '@/utils/dic.js'
import { foreignCustomerCreditGetApi } from '@/api/procure-manage/foreignCustomerCredit.js'

export default {
	name: 'ForeignTradeDetail',
	components: { DetailButtons },
	data() {
		return {
			id: '',
			loading: false,
			form: {},
			dicOptions: {
				AUDIT_STATUS: []
			},
			buttons: [{
				text: '编辑',
				visible: true,
				variant: 'outline',
				event: 'edit',
			}]
		}
	},
	computed: {
		displayButtons() {
			return [{ ...this.buttons[0], visible: true }]
		},
		auditStatusText() {
			const v = this.form && this.form.status != null ? String(this.form.status) : ''
			if (!v) return '-'
			return getDicName('AUDIT_STATUS', v, this.dicOptions.AUDIT_STATUS) || 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 : '-')
		},
		supplierCategoryDesc() {
			const v = this.form && this.form.supplierCategory != null ? String(this.form.supplierCategory) : ''
			const map = {
				A: '资信调查有担保函无资金风险、资料齐全，料质可控，价格较好，若出现质量、磅差问题可以索赔解决，进口倒挂时可协商延迟点价，可推迟发货，可试操作（前3个月每月操作量300-500吨）；第一次计划货到厂验收结束后进行评审，正常后可以增量操作，要求每年评审一次；',
				B: '资信调查无担保函，国外企业属国内企业控股，无资金风险、资料齐全，价格较好，料质可控，若出现质量、磅差问题可以索赔解决（前3个月每月操作量200-400吨），第一次货到厂验收合格后可增量操作；操作正常每年评审一次；',
				C: '资信调查无担保函，资料齐全，料质可控，价格一般，出现质量、磅差问题可以索赔解决，可试单限量操作（前3个月每月操作量100-200吨），第一次货到厂验收合格后可增量操作，新开发供应商首年操作按每半年评审一次，操作正常则次年调整为每年评审一次；若出现索赔问题不及时解决可中止后续开信用证和中止到港货物的DP/TT付款，且立即暂停业务操作。',
				D: '资信调查无担保函，通过委托第三方机构调查无风险，虽然资料不齐全，但料质可控，价格略高，出现质量、磅差问题索赔解决有难度，一单一议，D类供应商第一次货到厂验收、付款、退款或者索赔正常后，可继续操作逐步增量（每月操作量100-200吨），每半年评审一次，操作正常到则次年调整为每年评审一次；若出现索赔问题不及时解决可终止后续到港货物的付款，且立即停止业务操作。'
			}
			return map[v] || '-'
		},
		reviewHint() {
			const d = this.parseDateOnly(this.form && this.form.nextReviewTime)
			if (!d) return ''
			const now = new Date()
			const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
			const diffDays = Math.floor((d.getTime() - today.getTime()) / (24 * 60 * 60 * 1000))
			if (diffDays < 0) return '已到评审时间'
			if (diffDays <= 15) return `距评审还有${diffDays}天`
			return ''
		}
	},
	created() {
		this.loadDicData()
	},
	onShow() {
		const options = (this.$route && this.$route.query) ? this.$route.query : {}
		const id = options && options.id ? String(options.id) : ''
		this.id = id
		this.loadDetail()
	},
	methods: {
		async loadDicData() {
			try {
				const results = await getDicByCodes(['AUDIT_STATUS'])
				this.dicOptions.AUDIT_STATUS = (results.AUDIT_STATUS && results.AUDIT_STATUS.data) || []
			} catch (e) {
				this.dicOptions.AUDIT_STATUS = []
			}
		},
		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)
		},
		onEdit() {
			uni.navigateTo({ url: '/pages/foreign_trade/modify?id=' + this.id })
		},
		safeText(v) {
			const s = v == null ? '' : String(v)
			return s.trim() ? s : '-'
		},
		parseDateOnly(v) {
			const s = v == null ? '' : String(v).trim()
			if (!s) return null
			const d = new Date(s.length >= 10 ? s.slice(0, 10) : s)
			if (!Number.isFinite(d.getTime())) return null
			return new Date(d.getFullYear(), d.getMonth(), d.getDate())
		},
		async loadDetail() {
			if (!this.id) return
			this.loading = true
			try {
				const res = await foreignCustomerCreditGetApi(this.id)
				const data = (res && res.data) ? res.data : {}
				this.form = data
			} catch (e) {
				this.form = {}
				uni.showToast({ title: '详情加载失败', icon: 'none' })
			} finally {
				this.loading = false
			}
		},
	}
}
</script>

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

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

.detail-page {
	background: #f3f3f3;
}

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

.hint {
	margin-top: 12rpx;
	font-size: 26rpx;
	color: #D54941;
	text-align: right;
}
</style>