<template>
	<view class="page">
		<scroll-view class="scroll" scroll-y>
			<view class="detail-page">
				<view class="section">
					<text class="row company">{{ safeText(form.companyName) }}</text>
					<view class="row"><text class="label">公司性质</text><text class="value">{{ safeText(companyNatureName) }}</text></view>
					<view v-if="showCompanyNatureOther" class="row"><text class="label">其他</text><text class="value">{{ safeText(form.companyNatureOther) }}</text></view>
					<view class="row"><text class="label">开户行</text><text class="value">{{ safeText(form.bankName) }}</text></view>
					<view class="row"><text class="label">账号</text><text class="value">{{ safeText(form.bankAccount) }}</text></view>
					<view class="row"><text class="label">注册资金(万元)</text><text class="value">{{ safeText(form.registeredCapital) }}</text></view>
					<view class="row"><text class="label">年营业额(万元)</text><text class="value">{{ safeText(form.annualTurnover) }}</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.companyFoundedDate) }}</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.businessOwner) }}</text></view>
					<view class="row"><text class="label">职务</text><text class="value">{{ safeText(form.position) }}</text></view>
					<view class="row"><text class="label">电话</text><text class="value">{{ safeText(form.phone) }}</text></view>
					<view class="row"><text class="label">传真</text><text class="value">{{ safeText(form.fax) }}</text></view>
					<view class="row"><text class="label">法人与业务负责人关系</text><text class="value">{{ safeText(form.legalBusinessRelation) }}</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 pre">{{ safeText(form.liquidWorkingCapital) }}</text></view>
					<view class="row"><text class="label">固定资产</text><text class="value pre">{{ safeText(form.fixedAssets) }}</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 pre">{{ safeText(form.purchaseSituation) }}</text></view>
					<view class="row"><text class="label">货源来源</text><text class="value">{{ safeText(purchaseSourceName) }}</text></view>
					<view v-if="showPurchaseSourceOther" class="row"><text class="label">其他</text><text class="value">{{ safeText(form.purchaseSourceOther) }}</text></view>
					<view class="row"><text class="label">生产情况</text><text class="value pre">{{ safeText(form.productionSituation) }}</text></view>
					<view class="row"><text class="label">销售情况</text><text class="value pre">{{ safeText(form.salesSituation) }}</text></view>
					<view class="row"><text class="label">是否享受优惠政策</text><text class="value">{{ safeText(preferentialPolicyName) }}</text></view>
					<view class="row"><text class="label">详细说明</text><text class="value pre">{{ safeText(form.preferentialPolicyDetail) }}</text></view>
					<view class="row"><text class="label">是否有被处罚记录</text><text class="value">{{ safeText(punishmentRecordName) }}</text></view>
					<view class="row"><text class="label">经营范围是否相符</text><text class="value pre">{{ safeText(form.scopeMatch) }}</text></view>
					<view class="row"><text class="label">是否投资期货</text><text class="value">{{ safeText(futuresInvestName) }}</text></view>
					<view class="row"><text class="label">投资性质</text><text class="value">{{ safeText(investNatureName) }}</text></view>
					<view class="row"><text class="label">上年度期货盈亏</text><text class="value">{{ safeText(form.lastYearFuturesProfitLoss) }}</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">{{ cooperationYearText }}</text></view>
					<view class="row"><text class="label">主要操作方式</text><text class="value pre">{{ safeText(form.mainOperationMode) }}</text></view>
					<view class="row"><text class="label">计划落空不良记录</text><text class="value">{{ safeText(badRecordPlanFailName) }}</text></view>
					<view class="row"><text class="label">履行不到位现象</text><text class="value">{{ safeText(planNotFulfilledName) }}</text></view>
					<view class="row"><text class="label">操作规范性</text><text class="value pre">{{ safeText(form.operationNorms) }}</text></view>
					<view class="row"><text class="label">常见料质问题</text><text class="value pre">{{ safeText(form.commonMaterialIssues) }}</text></view>
					<view class="row"><text class="label">合作中的其他问题</text><text class="value pre">{{ safeText(form.otherCooperationIssues) }}</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.createDate) }}</text></view>
					<view class="row"><text class="label">评审时间</text><text class="value">{{ safeText(form.reviewDate) }}</text></view>
					<view class="row">
						<text class="label">附件</text>
						<view class="value">
							<view v-if="!attachments.length" class="value">-</view>
							<view v-for="item in attachments" :key="item.id || item.name" class="file-item" @click="onDownload(item)">
								<text class="value act">{{ item.name }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
        <detail-buttons :buttons="displayButtons" @click="handleButtonClick" />
	</view>
</template>

<script>
import { downloadFile } from '@/utils/downloadFile.js'
import DetailButtons from '@/components/detail-buttons/index.vue'

export default {
	name: 'DomesticTradeDetail',
    components: {
        DetailButtons
    },
	data() {
		return {
			id: '',
			loading: false,
			form: {},
            buttons: [{
                text: '编辑',
                visible: true,
                variant: 'outline',
                event: 'edit',
            }]
		}
	},
	computed: {
        displayButtons() {
            return [
                { ...this.buttons[0], visible: true },
            ]
        },
		companyNatureOptions() {
			return [
				{ label: '回收公司', value: 'RECYCLE' },
				{ label: '贸易公司', value: 'TRADE' },
				{ label: '进口拆解', value: 'IMPORT_DISMANTLE' },
				{ label: '工业制造', value: 'INDUSTRY_MANUFACTURE' },
				{ label: '福利企业', value: 'WELFARE_ENTERPRISE' },
				{ label: '其他', value: 'OTHER' }
			]
		},
		purchaseSourceOptions() {
			return [
				{ label: '国外进口', value: 'IMPORT' },
				{ label: '本企业报废', value: 'SELF_SCRAP' },
				{ label: '零散收购', value: 'SCATTERED' },
				{ label: '其他', value: 'OTHER' }
			]
		},
		yesNoOptions() {
			return [
				{ label: '是', value: 'YES' },
				{ label: '否', value: 'NO' }
			]
		},
		investNatureOptions() {
			return [
				{ label: '投机', value: 'SPECULATION' },
				{ label: '保值', value: 'HEDGE' },
				{ label: '保值为主投机为辅', value: 'HEDGE_MAIN' }
			]
		},
		attachments() {
			const arr = this.form && Array.isArray(this.form.attachments) ? this.form.attachments : []
			return arr.filter(it => it && (it.id || it.name)).map(it => ({ id: it.id || '', name: it.name || '' }))
		},
		showCompanyNatureOther() {
			const v = String((this.form && this.form.companyNature) || '')
			return v.split(',').includes('OTHER')
		},
		showPurchaseSourceOther() {
			return String((this.form && this.form.purchaseSource) || '') === 'OTHER'
		},
		companyNatureName() {
			return this.safeText(this.form.companyNatureName) || this.labelsOf(this.companyNatureOptions, this.form.companyNature)
		},
		purchaseSourceName() {
			return this.safeText(this.form.purchaseSourceName) || this.labelOf(this.purchaseSourceOptions, this.form.purchaseSource)
		},
		preferentialPolicyName() {
			return this.safeText(this.form.preferentialPolicyName) || this.labelOf(this.yesNoOptions, this.form.preferentialPolicy)
		},
		punishmentRecordName() {
			return this.safeText(this.form.punishmentRecordName) || this.labelOf(this.yesNoOptions, this.form.punishmentRecord)
		},
		futuresInvestName() {
			return this.safeText(this.form.futuresInvestName) || this.labelOf(this.yesNoOptions, this.form.futuresInvest)
		},
		investNatureName() {
			return this.safeText(this.form.investNatureName) || this.labelOf(this.investNatureOptions, this.form.investNature)
		},
		badRecordPlanFailName() {
			return this.safeText(this.form.badRecordPlanFailName) || this.labelOf(this.yesNoOptions, this.form.badRecordPlanFail)
		},
		planNotFulfilledName() {
			return this.safeText(this.form.planNotFulfilledName) || this.labelOf(this.yesNoOptions, this.form.planNotFulfilled)
		},
		cooperationYearText() {
			const y = this.safeText(this.form.cooperationStartYear)
			return y ? `从${y}年开始合作` : '-'
		}
	},
	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: {
        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(params) {
            uni.navigateTo({ url: '/pages/domestic_trade/modify?id=' + this.id })
        },
		safeText(v) {
			const s = v == null ? '' : String(v)
			return s.trim() ? s : ''
		},
		labelOf(options, value) {
			const v = value == null ? '' : String(value)
			if (!v) return '-'
			const found = (options || []).find(o => String(o.value) === v)
			return found ? String(found.label) : v
		},
		labelsOf(options, csv) {
			const v = csv == null ? '' : String(csv)
			if (!v) return '-'
			const parts = v.split(',').filter(Boolean)
			if (!parts.length) return '-'
			const labels = []
			;(options || []).forEach(opt => {
				const ov = opt && opt.value != null ? String(opt.value) : ''
				if (ov && parts.includes(ov)) labels.push(opt.label != null ? String(opt.label) : '')
			})
			return labels.filter(Boolean).join(',') || '-'
		},
		async loadDetail() {
			this.loading = true
			try {
				const data = await this.mockGetDetail(this.id)
				this.form = data || {}
			} catch (e) {
				this.form = {}
				uni.showToast({ title: '详情加载失败', icon: 'none' })
			} finally {
				this.loading = false
			}
		},
		mockGetDetail(id) {
			return new Promise(resolve => {
				const stored = this.tryLoadFromStorage(id)
				if (stored) return setTimeout(() => resolve(stored), 180)
				setTimeout(() => resolve(this.buildMockDetail(id)), 180)
			})
		},
		tryLoadFromStorage(id) {
			try {
				const raw = uni.getStorageSync('DOMESTIC_TRADE_RECORDS')
				const arr = Array.isArray(raw) ? raw : (raw && Array.isArray(raw.list) ? raw.list : [])
				if (!id) return arr && arr[0] ? arr[0] : null
				const found = (arr || []).find(it => it && String(it.id || '') === String(id))
				return found || null
			} catch (e) {
				return null
			}
		},
		buildMockDetail(id) {
			const now = new Date()
			const createDate = this.formatDate(now)
			return {
				id: id || '1',
				companyName: '华东商贸有限公司1',
				companyNature: 'RECYCLE,OTHER',
				companyNatureOther: '再生资源综合回收',
				bankName: '中国工商银行上海分行',
				bankAccount: '6222020202020202',
				registeredCapital: '500',
				annualTurnover: '2600',
				legalRepresentative: '张三',
				companyFoundedDate: '2018-06-01',
				address: '上海市浦东新区示例路 88 号',
				businessOwner: '李四',
				position: '总经理',
				phone: '13800000000',
				fax: '021-88888888',
				legalBusinessRelation: '亲属',
				liquidWorkingCapital: '流动资金 300 万；购销结算期限 30 天；债权债务情况正常',
				fixedAssets: '厂房产权自有 2000㎡；主要设备投资 800 万；仓库自有 1200㎡；正常库存量 300 吨',
				purchaseSituation: '主要品种：铜、铁；收购量：月均 1200 吨；上年度利润：铜 120 万，铁 80 万；入库流程规范',
				purchaseSource: 'OTHER',
				purchaseSourceOther: '本地回收站合作渠道',
				productionSituation: '产品：再生铜；产能：月均 800 吨；能耗：电 40 万度/月',
				salesSituation: '渠道：长期客户+现货；回款方式：承兑/转账；结算期限：30-60 天',
				preferentialPolicy: 'NO',
				preferentialPolicyDetail: '',
				punishmentRecord: 'NO',
				scopeMatch: '相符',
				futuresInvest: 'YES',
				investNature: 'HEDGE_MAIN',
				lastYearFuturesProfitLoss: '盈利 15 万',
				cooperationStartYear: '2021',
				mainOperationMode: '现货+月度计划',
				badRecordPlanFail: 'NO',
				planNotFulfilled: 'NO',
				operationNorms: '账务按月对账；开票品名一致；出库流程规范；运输发票齐全',
				commonMaterialIssues: '含杂偏高、含水偏高',
				otherCooperationIssues: '暂无',
				createDate,
				reviewDate: '',
				attachments: [
					{ id: 'mock-file-1', name: '资信调查表.pdf' },
					{ id: 'mock-file-2', name: '营业执照.jpg' }
				]
			}
		},
		formatDate(d) {
			const y = d.getFullYear()
			const m = String(d.getMonth() + 1).padStart(2, '0')
			const da = String(d.getDate()).padStart(2, '0')
			return `${y}-${m}-${da}`
		},
		onDownload(item) {
			if (!item || !item.id) return
			downloadFile(item.id, item.name || 'download')
		}
	}
}
</script>

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

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

.detail-page {
	background: #f3f3f3;
}

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

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

		&.act {
			color: $theme-primary;
		}

		&.pre {
			white-space: pre-wrap;
		}
	}
}
.title-header {
    background-color: #ffffff;
}
.file-item {
	margin-bottom: 12rpx;

	&:last-child {
		margin-bottom: 0;
	}
}
</style>