<template>
	<view class="page">
		<scroll-view class="scroll" scroll-y>
			<uni-list>
				<view class="title-header">
					<image class="title-header_icon" src="/static/images/title.png" />
					<span>基本资料</span>
				</view>

				<uni-list-item title="单位名称">
					<template v-slot:footer>
						<uni-easyinput v-model="form.companyName" placeholder="请输入单位名称" :inputBorder="false" />
					</template>
				</uni-list-item>

				<uni-list-item class="select-item" :class="form.companyNatureName ? 'is-filled' : 'is-empty'" clickable
					@click="openMultiSheet('companyNature')" :rightText="displayLabel('companyNatureName')" showArrow>
					<template v-slot:body>
						<view class="item-title"><text>公司性质</text></view>
					</template>
				</uni-list-item>
				<uni-list-item v-if="showCompanyNatureOther" class="mgb10" title="其他">
					<template v-slot:footer>
						<uni-easyinput v-model="form.companyNatureOther" placeholder="请输入其他公司性质" :inputBorder="false" />
					</template>
				</uni-list-item>

				<uni-list-item title="开户行">
					<template v-slot:footer>
						<uni-easyinput v-model="form.bankName" placeholder="请输入开户行" :inputBorder="false" />
					</template>
				</uni-list-item>

				<uni-list-item title="账号">
					<template v-slot:footer>
						<uni-easyinput v-model="form.bankAccount" placeholder="请输入账号" :inputBorder="false" />
					</template>
				</uni-list-item>

				<uni-list-item class="amount-item">
					<template v-slot:body>
						<view class="item-title"><text>注册资金</text></view>
					</template>
					<template v-slot:footer>
						<view class="amount-row">
							<uni-easyinput type="digit" v-model="form.registeredCapital" placeholder="请输入" :inputBorder="false" />
							<text class="unit">万元</text>
						</view>
					</template>
				</uni-list-item>

				<uni-list-item class="amount-item">
					<template v-slot:body>
						<view class="item-title"><text>年营业额</text></view>
					</template>
					<template v-slot:footer>
						<view class="amount-row">
							<uni-easyinput type="digit" v-model="form.annualTurnover" placeholder="请输入" :inputBorder="false" />
							<text class="unit">万元</text>
						</view>
					</template>
				</uni-list-item>

				<uni-list-item title="法人代表">
					<template v-slot:footer>
						<uni-easyinput v-model="form.legalRepresentative" placeholder="请输入法人代表" :inputBorder="false" />
					</template>
				</uni-list-item>

				<uni-list-item title="公司成立时间">
					<template v-slot:footer>
						<uni-datetime-picker type="date" v-model="form.companyFoundedDate" />
					</template>
				</uni-list-item>

				<uni-list-item title="地址">
					<template v-slot:footer>
						<uni-easyinput v-model="form.address" placeholder="请输入地址" :inputBorder="false" />
					</template>
				</uni-list-item>

				<uni-list-item title="业务负责人">
					<template v-slot:footer>
						<uni-easyinput v-model="form.businessOwner" placeholder="请输入业务负责人" :inputBorder="false" />
					</template>
				</uni-list-item>

				<uni-list-item title="职务">
					<template v-slot:footer>
						<uni-easyinput v-model="form.position" placeholder="请输入职务" :inputBorder="false" />
					</template>
				</uni-list-item>

				<uni-list-item title="电话">
					<template v-slot:footer>
						<uni-easyinput type="number" v-model="form.phone" placeholder="请输入手机号码" :inputBorder="false" />
					</template>
				</uni-list-item>

				<uni-list-item title="传真">
					<template v-slot:footer>
						<uni-easyinput v-model="form.fax" placeholder="请输入传真" :inputBorder="false" />
					</template>
				</uni-list-item>

				<uni-list-item class="mgb10" title="法人与业务负责人关系">
					<template v-slot:footer>
						<uni-easyinput v-model="form.legalBusinessRelation" placeholder="请输入" :inputBorder="false" />
					</template>
				</uni-list-item>

				<view class="title-header">
					<image class="title-header_icon" src="/static/images/title.png" />
					<span>资产状况</span>
				</view>

				<uni-list-item title="流动资金">
					<template v-slot:footer>
						<uni-easyinput type="textarea" v-model="form.liquidWorkingCapital" placeholder="1、流动资金 2、购、销结算期限 3、债券债务情况"
							:inputBorder="false" maxlength="2000" />
					</template>
				</uni-list-item>

				<uni-list-item class="mgb10" title="固定资产">
					<template v-slot:footer>
						<uni-easyinput type="textarea" v-model="form.fixedAssets" placeholder="1、厂房/办公楼产权、面积 2、主要设备投资规模及产权 3、仓库或货场产权、面积 4、正常库存量"
							:inputBorder="false" maxlength="3000" />
					</template>
				</uni-list-item>

				<view class="title-header">
					<image class="title-header_icon" src="/static/images/title.png" />
					<span>生产经营环节风险调查</span>
				</view>

				<uni-list-item title="收购情况">
					<template v-slot:footer>
						<uni-easyinput type="textarea" v-model="form.purchaseSituation"
							placeholder="1、主要品种及收购量 2、经营绩效状况（上年度利润，区分铜/铁等） 4、入库流程及入库品名" :inputBorder="false"
							maxlength="3000" />
					</template>
				</uni-list-item>
				<uni-list-item class="select-item" :class="form.purchaseSourceName ? 'is-filled' : 'is-empty'" clickable
					@click="openSheet('purchaseSource')" :rightText="displayLabel('purchaseSourceName')" showArrow>
					<template v-slot:body>
						<view class="item-title"><text>货源来源</text></view>
					</template>
				</uni-list-item>
				<uni-list-item v-if="showPurchaseSourceOther" class="mgb10" title="其他">
					<template v-slot:footer>
						<uni-easyinput v-model="form.purchaseSourceOther" placeholder="请输入其他货源来源" :inputBorder="false" />
					</template>
				</uni-list-item>

				<uni-list-item title="生产情况">
					<template v-slot:footer>
						<uni-easyinput type="textarea" v-model="form.productionSituation" placeholder="1、产品介绍 2、产能及对应能耗"
							:inputBorder="false" maxlength="2000" />
					</template>
				</uni-list-item>

				<uni-list-item title="销售情况">
					<template v-slot:footer>
						<uni-easyinput type="textarea" v-model="form.salesSituation" placeholder="销售渠道、销量及操作方式、货款回笼方式、结算期限"
							:inputBorder="false" maxlength="2000" />
					</template>
				</uni-list-item>

				<uni-list-item class="select-item" :class="form.preferentialPolicyName ? 'is-filled' : 'is-empty'" clickable
					@click="openSheet('preferentialPolicy')" :rightText="displayLabel('preferentialPolicyName')" showArrow>
					<template v-slot:body>
						<view class="item-title"><text>是否享受优惠政策</text></view>
					</template>
				</uni-list-item>
				<uni-list-item class="mgb10" title="详细说明">
					<template v-slot:footer>
						<uni-easyinput type="textarea" v-model="form.preferentialPolicyDetail" placeholder="请输入详细说明"
							:inputBorder="false" maxlength="2000" />
					</template>
				</uni-list-item>

				<uni-list-item class="select-item" :class="form.punishmentRecordName ? 'is-filled' : 'is-empty'" clickable
					@click="openSheet('punishmentRecord')" :rightText="displayLabel('punishmentRecordName')" showArrow>
					<template v-slot:body>
						<view class="item-title"><text>是否有被处罚记录</text></view>
					</template>
				</uni-list-item>
				<uni-list-item class="mgb10" title="实际经营范围与法定经营范围是否相符">
					<template v-slot:footer>
						<uni-easyinput type="textarea" v-model="form.scopeMatch" placeholder="请输入" :inputBorder="false"
							maxlength="2000" />
					</template>
				</uni-list-item>

				<uni-list-item class="select-item" :class="form.futuresInvestName ? 'is-filled' : 'is-empty'" clickable
					@click="openSheet('futuresInvest')" :rightText="displayLabel('futuresInvestName')" showArrow>
					<template v-slot:body>
						<view class="item-title"><text>是否投资期货</text></view>
					</template>
				</uni-list-item>

				<uni-list-item class="select-item" :class="form.investNatureName ? 'is-filled' : 'is-empty'" clickable
					@click="openSheet('investNature')" :rightText="displayLabel('investNatureName')" showArrow>
					<template v-slot:body>
						<view class="item-title"><text>投资性质</text></view>
					</template>
				</uni-list-item>

				<uni-list-item class="mgb10" title="上年度期货盈亏">
					<template v-slot:footer>
						<uni-easyinput v-model="form.lastYearFuturesProfitLoss" placeholder="请输入" :inputBorder="false" />
					</template>
				</uni-list-item>

				<view class="title-header">
					<image class="title-header_icon" src="/static/images/title.png" />
					<span>与我司的合作状况</span>
				</view>

				<uni-list-item class="amount-item">
					<template v-slot:body>
						<view class="item-title"><text>合作年限</text></view>
					</template>
					<template v-slot:footer>
						<view class="amount-row">
							<text class="prefix">从</text>
							<uni-easyinput type="digit" v-model="form.cooperationStartYear" placeholder="年份" :inputBorder="false" />
							<text class="suffix">年开始合作</text>
						</view>
					</template>
				</uni-list-item>

				<uni-list-item title="主要操作方式">
					<template v-slot:footer>
						<uni-easyinput type="textarea" v-model="form.mainOperationMode" placeholder="请输入"
							:inputBorder="false" maxlength="2000" />
					</template>
				</uni-list-item>

				<uni-list-item class="select-item" :class="form.badRecordPlanFailName ? 'is-filled' : 'is-empty'" clickable
					@click="openSheet('badRecordPlanFail')" :rightText="displayLabel('badRecordPlanFailName')" showArrow>
					<template v-slot:body>
						<view class="item-title"><text>是否有计划落空的不良记录</text></view>
					</template>
				</uni-list-item>
				<uni-list-item class="select-item" :class="form.planNotFulfilledName ? 'is-filled' : 'is-empty'" clickable
					@click="openSheet('planNotFulfilled')" :rightText="displayLabel('planNotFulfilledName')" showArrow>
					<template v-slot:body>
						<view class="item-title"><text>是否有计划履行不到位现象（时间、数量等）</text></view>
					</template>
				</uni-list-item>

				<uni-list-item title="操作规范性">
					<template v-slot:footer>
						<uni-easyinput type="textarea" v-model="form.operationNorms" placeholder="1、进销账务如何处理 2、开票品名与出库单品名是否一致 3、出库流程是否规范 4、运输发票情况"
							:inputBorder="false" maxlength="3000" />
					</template>
				</uni-list-item>

				<uni-list-item title="常见料质问题">
					<template v-slot:footer>
						<uni-easyinput type="textarea" v-model="form.commonMaterialIssues" placeholder="请输入"
							:inputBorder="false" maxlength="2000" />
					</template>
				</uni-list-item>

				<uni-list-item class="mgb10" title="合作中的其他问题">
					<template v-slot:footer>
						<uni-easyinput type="textarea" v-model="form.otherCooperationIssues" placeholder="请输入"
							:inputBorder="false" maxlength="2000" />
					</template>
				</uni-list-item>

				<view class="title-header">
					<image class="title-header_icon" src="/static/images/title.png" />
					<span>其他</span>
				</view>

				<uni-list-item title="创建日期">
					<template v-slot:footer>
						<uni-datetime-picker type="date" v-model="form.createDate" />
					</template>
				</uni-list-item>

				<uni-list-item title="评审时间">
					<template v-slot:footer>
						<uni-datetime-picker type="date" v-model="form.reviewDate" />
					</template>
				</uni-list-item>

				<uni-list-item class="mgb10" title="附件">
					<template v-slot:footer>
						<view class="attach-box">
							<view v-for="(f, idx) in form.attachments" :key="idx" class="attach-row">
								<FileUpload :value="f" @input="onAttachmentInput(idx, $event)" />
								<text class="attach-del" @click.stop="removeAttachment(idx)">删除</text>
							</view>
							<view class="attach-row">
								<FileUpload :value="newAttachment" @input="onAddAttachment" />
							</view>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
		</scroll-view>

		<view class="footer">
			<button class="btn submit" type="primary" :disabled="submitting" @click="onSubmit">{{ submitting ? '保存中...' : '保存' }}</button>
		</view>

		<SingleSelectSheet :visible.sync="sheet.visible" :title="sheet.title" :options="sheet.options" v-model="sheet.value"
			@confirm="onSheetConfirm" />
		<MultiSelectSheet :visible.sync="multiSheet.visible" :title="multiSheet.title" :options="multiSheet.options"
			v-model="multiSheet.value" @confirm="onMultiSheetConfirm" />
	</view>
</template>

<script>
import FileUpload from '@/components/file-upload/index.vue'
import SingleSelectSheet from '@/components/single-select/index.vue'
import MultiSelectSheet from '@/components/multi-select/index.vue'

export default {
	name: 'DomesticTradeModify',
	components: { FileUpload, SingleSelectSheet, MultiSelectSheet },
	data() {
		return {
			id: '',
			submitting: false,
			loading: false,
			newAttachment: { id: '', name: '' },
			sheet: { visible: false, title: '', options: [], field: '', value: '' },
			multiSheet: { visible: false, title: '', options: [], field: '', value: '' },
			yesNoOptions: [
				{ label: '是', value: 'YES' },
				{ label: '否', value: 'NO' }
			],
			investNatureOptions: [
				{ label: '投机', value: 'SPECULATION' },
				{ label: '保值', value: 'HEDGE' },
				{ label: '保值为主投机为辅', value: 'HEDGE_MAIN' }
			],
			companyNatureOptions: [
				{ label: '回收公司', value: 'RECYCLE' },
				{ label: '贸易公司', value: 'TRADE' },
				{ label: '进口拆解', value: 'IMPORT_DISMANTLE' },
				{ label: '工业制造', value: 'INDUSTRY_MANUFACTURE' },
				{ label: '福利企业', value: 'WELFARE_ENTERPRISE' },
				{ label: '其他', value: 'OTHER' }
			],
			purchaseSourceOptions: [
				{ label: '国外进口', value: 'IMPORT' },
				{ label: '本企业报废', value: 'SELF_SCRAP' },
				{ label: '零散收购', value: 'SCATTERED' },
				{ label: '其他', value: 'OTHER' }
			],
			form: {
				id: '',
				companyName: '',
				companyNature: '',
				companyNatureName: '',
				companyNatureOther: '',
				bankName: '',
				bankAccount: '',
				registeredCapital: '',
				annualTurnover: '',
				legalRepresentative: '',
				companyFoundedDate: '',
				address: '',
				businessOwner: '',
				position: '',
				phone: '',
				fax: '',
				legalBusinessRelation: '',
				liquidWorkingCapital: '',
				fixedAssets: '',
				purchaseSituation: '',
				purchaseSource: '',
				purchaseSourceName: '',
				purchaseSourceOther: '',
				productionSituation: '',
				salesSituation: '',
				preferentialPolicy: '',
				preferentialPolicyName: '',
				preferentialPolicyDetail: '',
				punishmentRecord: '',
				punishmentRecordName: '',
				scopeMatch: '',
				futuresInvest: '',
				futuresInvestName: '',
				investNature: '',
				investNatureName: '',
				lastYearFuturesProfitLoss: '',
				cooperationStartYear: '',
				mainOperationMode: '',
				badRecordPlanFail: '',
				badRecordPlanFailName: '',
				planNotFulfilled: '',
				planNotFulfilledName: '',
				operationNorms: '',
				commonMaterialIssues: '',
				otherCooperationIssues: '',
				createDate: '',
				reviewDate: '',
				attachments: []
			}
		}
	},
	computed: {
		showCompanyNatureOther() {
			const v = String(this.form.companyNature || '')
			return v.split(',').includes('OTHER')
		},
		showPurchaseSourceOther() {
			return this.form.purchaseSource === 'OTHER'
		}
	},
	onLoad(query) {
		const id = (query && (query.id || query.code)) ? String(query.id || query.code) : ''
		this.id = id
		this.loadDetail()
	},
	methods: {
		displayLabel(field) {
			const m = this.form
			const map = {
				companyNatureName: '请选择公司性质',
				purchaseSourceName: '请选择货源来源',
				preferentialPolicyName: '请选择',
				punishmentRecordName: '请选择',
				futuresInvestName: '请选择',
				investNatureName: '请选择',
				badRecordPlanFailName: '请选择',
				planNotFulfilledName: '请选择'
			}
			const val = m[field]
			return val ? String(val) : map[field]
		},
		openSheet(field) {
			const map = {
				purchaseSource: { title: '货源来源', options: this.purchaseSourceOptions, valueField: 'purchaseSource', nameField: 'purchaseSourceName' },
				preferentialPolicy: { title: '是否享受优惠政策', options: this.yesNoOptions, valueField: 'preferentialPolicy', nameField: 'preferentialPolicyName' },
				punishmentRecord: { title: '是否有被处罚记录', options: this.yesNoOptions, valueField: 'punishmentRecord', nameField: 'punishmentRecordName' },
				futuresInvest: { title: '是否投资期货', options: this.yesNoOptions, valueField: 'futuresInvest', nameField: 'futuresInvestName' },
				investNature: { title: '投资性质', options: this.investNatureOptions, valueField: 'investNature', nameField: 'investNatureName' },
				badRecordPlanFail: { title: '是否有计划落空的不良记录', options: this.yesNoOptions, valueField: 'badRecordPlanFail', nameField: 'badRecordPlanFailName' },
				planNotFulfilled: { title: '是否有计划履行不到位现象', options: this.yesNoOptions, valueField: 'planNotFulfilled', nameField: 'planNotFulfilledName' }
			}
			const cfg = map[field]
			if (!cfg) return
			const current = this.form[cfg.valueField]
			const match = (cfg.options || []).find(o => String(o.value) === String(current))
			this.sheet = {
				...this.sheet,
				visible: true,
				title: cfg.title,
				options: cfg.options || [],
				field,
				value: match ? match.value : (current || '')
			}
		},
		openMultiSheet(field) {
			if (field !== 'companyNature') return
			this.multiSheet = {
				...this.multiSheet,
				visible: true,
				title: '公司性质',
				options: this.companyNatureOptions || [],
				field,
				value: this.form.companyNature || ''
			}
		},
		onSheetConfirm({ value, label }) {
			const field = this.sheet.field
			if (field === 'purchaseSource') {
				this.form.purchaseSource = value || ''
				this.form.purchaseSourceName = label || ''
				if (this.form.purchaseSource !== 'OTHER') this.form.purchaseSourceOther = ''
			} else if (field === 'preferentialPolicy') {
				this.form.preferentialPolicy = value || ''
				this.form.preferentialPolicyName = label || ''
			} else if (field === 'punishmentRecord') {
				this.form.punishmentRecord = value || ''
				this.form.punishmentRecordName = label || ''
			} else if (field === 'futuresInvest') {
				this.form.futuresInvest = value || ''
				this.form.futuresInvestName = label || ''
			} else if (field === 'investNature') {
				this.form.investNature = value || ''
				this.form.investNatureName = label || ''
			} else if (field === 'badRecordPlanFail') {
				this.form.badRecordPlanFail = value || ''
				this.form.badRecordPlanFailName = label || ''
			} else if (field === 'planNotFulfilled') {
				this.form.planNotFulfilled = value || ''
				this.form.planNotFulfilledName = label || ''
			}
			this.sheet.visible = false
		},
		onMultiSheetConfirm({ value }) {
			const field = this.multiSheet.field
			if (field === 'companyNature') {
				const normalized = this.normalizeCompanyNature(value)
				this.form.companyNature = normalized.value
				this.form.companyNatureName = normalized.label
				if (!this.showCompanyNatureOther) this.form.companyNatureOther = ''
			}
			this.multiSheet.visible = false
		},
		normalizeCompanyNature(valueStr) {
			const selected = (valueStr ? String(valueStr).split(',').filter(Boolean) : [])
			const group = ['IMPORT_DISMANTLE', 'INDUSTRY_MANUFACTURE', 'WELFARE_ENTERPRISE']
			const groupSelected = selected.filter(v => group.includes(v))
			let finalSelected = selected.slice(0)
			if (groupSelected.length > 1) {
				const keep = groupSelected[0]
				finalSelected = finalSelected.filter(v => !group.includes(v) || v === keep)
			}
			const orderedValues = []
			const orderedLabels = []
			;(this.companyNatureOptions || []).forEach(opt => {
				const v = opt && opt.value != null ? String(opt.value) : ''
				if (v && finalSelected.includes(v)) {
					orderedValues.push(v)
					orderedLabels.push(opt.label != null ? String(opt.label) : '')
				}
			})
			return { value: orderedValues.join(','), label: orderedLabels.join(',') }
		},
		removeAttachment(idx) {
			const list = Array.isArray(this.form.attachments) ? this.form.attachments.slice(0) : []
			list.splice(idx, 1)
			this.form.attachments = list
		},
		onAddAttachment(val) {
			const payload = val || { id: '', name: '' }
			if (!payload.id) return
			const list = Array.isArray(this.form.attachments) ? this.form.attachments.slice(0) : []
			list.push(payload)
			this.form.attachments = list
			this.newAttachment = { id: '', name: '' }
		},
		onAttachmentInput(idx, val) {
			const list = Array.isArray(this.form.attachments) ? this.form.attachments.slice(0) : []
			list[idx] = val || { id: '', name: '' }
			this.form.attachments = list
		},
		validate() {
			const phone = String(this.form.phone || '').trim()
			if (phone && !/^1\d{10}$/.test(phone)) {
				uni.showToast({ title: '电话请输入11位手机号', icon: 'none' })
				return false
			}
			const year = String(this.form.cooperationStartYear || '').trim()
			if (year && !/^\d{4}$/.test(year)) {
				uni.showToast({ title: '合作年限请填写4位年份', icon: 'none' })
				return false
			}
			return true
		},
		buildPayload() {
			const payload = { ...this.form }
			if (!this.showCompanyNatureOther) payload.companyNatureOther = ''
			if (payload.purchaseSource !== 'OTHER') payload.purchaseSourceOther = ''
			delete payload.companyNatureName
			delete payload.purchaseSourceName
			delete payload.preferentialPolicyName
			delete payload.punishmentRecordName
			delete payload.futuresInvestName
			delete payload.investNatureName
			delete payload.badRecordPlanFailName
			delete payload.planNotFulfilledName
			payload.attachments = (Array.isArray(payload.attachments) ? payload.attachments : []).filter(it => it && it.id)
			return payload
		},
		async onSubmit() {
			if (this.submitting) return
			if (!this.validate()) return
			this.submitting = true
			const payload = this.buildPayload()
			try {
				await this.mockUpdate(payload)
				uni.showToast({ title: '保存成功', icon: 'success' })
				setTimeout(() => { uni.navigateBack() }, 300)
			} catch (e) {
				uni.showToast({ title: (e && e.msg) || '保存失败', icon: 'none' })
			} finally {
				this.submitting = false
			}
		},
		async loadDetail() {
			this.loading = true
			try {
				const data = await this.mockGetDetail(this.id)
				const next = { ...this.form, ...(data || {}) }
				next.id = next.id || this.id || ''
				next.attachments = Array.isArray(next.attachments) ? next.attachments : []
				this.form = next
				this.refreshLabelFields()
			} catch (e) {
				uni.showToast({ title: '加载失败', icon: 'none' })
			} finally {
				this.loading = false
			}
		},
		refreshLabelFields() {
			this.form.companyNatureName = this.labelsOf(this.companyNatureOptions, this.form.companyNature)
			this.form.purchaseSourceName = this.labelOf(this.purchaseSourceOptions, this.form.purchaseSource)
			this.form.preferentialPolicyName = this.labelOf(this.yesNoOptions, this.form.preferentialPolicy)
			this.form.punishmentRecordName = this.labelOf(this.yesNoOptions, this.form.punishmentRecord)
			this.form.futuresInvestName = this.labelOf(this.yesNoOptions, this.form.futuresInvest)
			this.form.investNatureName = this.labelOf(this.investNatureOptions, this.form.investNature)
			this.form.badRecordPlanFailName = this.labelOf(this.yesNoOptions, this.form.badRecordPlanFail)
			this.form.planNotFulfilledName = this.labelOf(this.yesNoOptions, this.form.planNotFulfilled)
		},
		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(',') || ''
		},
		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' }
				]
			}
		},
		mockUpdate(payload) {
			return new Promise(resolve => {
				setTimeout(() => {
					const list = this.loadStorageList()
					const id = payload && payload.id ? String(payload.id) : (this.id ? String(this.id) : String(Date.now()))
					const next = { ...payload, id }
					const idx = list.findIndex(it => it && String(it.id || '') === id)
					if (idx >= 0) list.splice(idx, 1, next)
					else list.unshift(next)
					uni.setStorageSync('DOMESTIC_TRADE_RECORDS', list)
					resolve({ success: true })
				}, 350)
			})
		},
		loadStorageList() {
			try {
				const raw = uni.getStorageSync('DOMESTIC_TRADE_RECORDS')
				return Array.isArray(raw) ? raw.slice(0) : (raw && Array.isArray(raw.list) ? raw.list.slice(0) : [])
			} catch (e) {
				return []
			}
		},
		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}`
		}
	}
}
</script>

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

.scroll {
	flex: 1;
	padding: 12rpx 0 160rpx;
}

.footer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 32rpx;
	padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
	background: #fff;
	box-shadow: 0 -8rpx 24rpx rgba(0, 0, 0, 0.06);
	z-index: 10;

	.btn {
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 12rpx;
		font-size: 32rpx;
	}

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

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

.mgb10 {
	margin-bottom: 20rpx;
}

.amount-row {
	display: flex;
	align-items: center;
	gap: 12rpx;

	.unit, .prefix, .suffix {
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.6);
		white-space: nowrap;
	}
}

.attach-box {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 16rpx;
	width: 100%;
}

.attach-row {
	width: 100%;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 20rpx;
}

.attach-del {
	font-size: 28rpx;
	color: #D54941;
}

::v-deep .uni-list {
    .uni-easyinput {
        display: flex;

        .uni-input-input {
            color: rgba(0, 0, 0, 0.9);
        }
    }

    .uni-input-placeholder {
        z-index: 1;
    }

    .uni-input-input {
        background-color: #ffffff;
    }

    background: transparent;

    &-item {
        &__extra-text {
            font-size: 32rpx;
        }

        &__content-title {
            font-size: 32rpx;
            color: rgba(0, 0, 0, 0.9);
        }

        &__container {
            padding: 32rpx;

            .uni-easyinput {
                &__placeholder-class {
                    font-size: 32rpx;
                    color: rgba(0, 0, 0, 0.4);
                }

                &__content {
                    border: none;
                    background-color: #ffffff !important;

                    &-input {
                        padding-left: 0 !important;
                        height: 48rpx;
                        line-height: 48rpx;
                        font-size: 32rpx;
                    }

                    .content-clear-icon {
                        font-size: 44rpx !important;
                    }
                }
            }

            .item-title,
            .uni-list-item__content {
                flex: none;
                min-height: 48rpx;
                line-height: 48rpx;
                font-size: 32rpx;
                position: relative;
                width: 210rpx;
                margin-right: 32rpx;
                color: rgba(0, 0, 0, 0.9);

                .required {
                    color: red;
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    left: -16rpx;
                }
            }
        }

        &.select-item {
            &.is-empty {
                .uni-list-item__extra-text {
                    color: rgba(0, 0, 0, 0.4) !important;
                }
            }

            &.is-filled {
                .uni-list-item__extra-text {
                    color: rgba(0, 0, 0, 0.9) !important;
                }
            }
        }

        &.mgb10 {
            margin-bottom: 20rpx;
        }
    }
}
</style>