<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 class="select-item" :class="form.supplierName ? 'is-filled' : 'is-empty'" clickable
					@click="openSheet('supplier')" :rightText="displayLabel('supplierName')" showArrow>
					<template v-slot:body>
						<view class="item-title"><text>供应商</text></view>
					</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 v-model="form.unitName" placeholder="请输入" :inputBorder="false" />
					</template>
				</uni-list-item>

				<uni-list-item title="公司性质">
					<template v-slot:footer>
						<uni-easyinput v-model="form.companyNature" placeholder="请输入" :inputBorder="false" />
					</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-easyinput v-model="form.phoneFax" placeholder="请输入" :inputBorder="false" />
					</template>
				</uni-list-item>

				<uni-list-item title="注册证书号">
					<template v-slot:footer>
						<uni-easyinput v-model="form.registrationCertificateNo" placeholder="请输入" :inputBorder="false" />
					</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.domesticBusinessLeader" placeholder="请输入" :inputBorder="false" />
					</template>
				</uni-list-item>

				<uni-list-item title="负责人身份证/护照号">
					<template v-slot:footer>
						<uni-easyinput v-model="form.leaderIdPassportNo" placeholder="请输入" :inputBorder="false" />
					</template>
				</uni-list-item>

				<uni-list-item title="成立时间及货场规模">
					<template v-slot:footer>
						<uni-easyinput type="textarea" v-model="form.establishedTimeAndYardScale" placeholder="请输入" :inputBorder="false" maxlength="2000" />
					</template>
				</uni-list-item>

				<uni-list-item title="经营品种、规模">
					<template v-slot:footer>
						<uni-easyinput type="textarea" v-model="form.overallBusinessVarietyScale" placeholder="请输入" :inputBorder="false" maxlength="2000" />
					</template>
				</uni-list-item>

				<uni-list-item title="出口到国内时间">
					<template v-slot:footer>
						<uni-easyinput v-model="form.exportToDomesticTime" placeholder="请输入" :inputBorder="false" />
					</template>
				</uni-list-item>

				<uni-list-item title="出口规模、品种">
					<template v-slot:footer>
						<uni-easyinput type="textarea" v-model="form.exportToDomesticScaleVariety" placeholder="请输入" :inputBorder="false" maxlength="2000" />
					</template>
				</uni-list-item>

				<uni-list-item title="与国内合作企业">
					<template v-slot:footer>
						<uni-easyinput type="textarea" v-model="form.domesticCooperationCompanies" placeholder="请输入" :inputBorder="false" maxlength="2000" />
					</template>
				</uni-list-item>

				<uni-list-item title="合作效果">
					<template v-slot:footer>
						<uni-easyinput type="textarea" v-model="form.cooperationEffect" placeholder="请输入" :inputBorder="false" maxlength="2000" />
					</template>
				</uni-list-item>

				<uni-list-item title="供应商考察">
					<template v-slot:footer>
						<uni-easyinput type="textarea" v-model="form.supplierInspection" placeholder="请输入" :inputBorder="false" maxlength="2000" />
					</template>
				</uni-list-item>

				<uni-list-item title="销售代表办公地考察">
					<template v-slot:footer>
						<uni-easyinput type="textarea" v-model="form.domesticSalesRepOfficeInspection" placeholder="请输入" :inputBorder="false" maxlength="2000" />
					</template>
				</uni-list-item>

				<uni-list-item title="有无担保函">
					<template v-slot:footer>
						<uni-easyinput v-model="form.hasGuaranteeLetter" placeholder="请输入" :inputBorder="false" />
					</template>
				</uni-list-item>

				<uni-list-item title="合同纠纷">
					<template v-slot:footer>
						<uni-easyinput type="textarea" v-model="form.contractDispute" placeholder="请输入" :inputBorder="false" maxlength="2000" />
					</template>
				</uni-list-item>

				<uni-list-item title="保险、运输方式">
					<template v-slot:footer>
						<uni-easyinput v-model="form.insuranceTransportMode" placeholder="请输入" :inputBorder="false" />
					</template>
				</uni-list-item>

				<uni-list-item title="滞箱滞报费用">
					<template v-slot:footer>
						<uni-easyinput v-model="form.demurrageFee" placeholder="请输入" :inputBorder="false" />
					</template>
				</uni-list-item>

				<uni-list-item title="操作品种">
					<template v-slot:footer>
						<uni-easyinput v-model="form.operatingVariety" placeholder="请输入" :inputBorder="false" />
					</template>
				</uni-list-item>

				<uni-list-item title="操作规模">
					<template v-slot:footer>
						<uni-easyinput v-model="form.operatingScale" placeholder="请输入" :inputBorder="false" />
					</template>
				</uni-list-item>

				<uni-list-item title="定价模式">
					<template v-slot:footer>
						<uni-easyinput v-model="form.pricingModel" placeholder="请输入" :inputBorder="false" />
					</template>
				</uni-list-item>

				<uni-list-item title="结算方式">
					<template v-slot:footer>
						<uni-easyinput v-model="form.settlementMethod" placeholder="请输入" :inputBorder="false" />
					</template>
				</uni-list-item>

				<uni-list-item title="磅差约定">
					<template v-slot:footer>
						<uni-easyinput v-model="form.weightDiffAgreement" placeholder="请输入" :inputBorder="false" />
					</template>
				</uni-list-item>

				<uni-list-item class="mgb10" title="质量标准">
					<template v-slot:footer>
						<uni-easyinput v-model="form.qualityStandard" 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="select-item mgb10" :class="form.supplierCategory ? 'is-filled' : 'is-empty'" clickable
					@click="openSheet('supplierCategory')" :rightText="displayLabel('supplierCategory')" showArrow>
					<template v-slot:body>
						<view class="item-title"><text>供应商分类</text></view>
					</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 v-model="form.operationTime" placeholder="请输入" :inputBorder="false" />
					</template>
				</uni-list-item>

				<uni-list-item title="操作模式">
					<template v-slot:footer>
						<uni-easyinput v-model="form.operationMode" placeholder="请输入" :inputBorder="false" />
					</template>
				</uni-list-item>

				<uni-list-item title="操作品种">
					<template v-slot:footer>
						<uni-easyinput v-model="form.operationVariety" placeholder="请输入" :inputBorder="false" />
					</template>
				</uni-list-item>

				<uni-list-item title="操作数量">
					<template v-slot:footer>
						<uni-easyinput v-model="form.operationQuantity" placeholder="请输入" :inputBorder="false" />
					</template>
				</uni-list-item>

				<uni-list-item title="发货要求">
					<template v-slot:footer>
						<uni-easyinput type="textarea" v-model="form.deliveryRequirement" placeholder="请输入" :inputBorder="false" maxlength="2000" />
					</template>
				</uni-list-item>

				<uni-list-item title="付款方式">
					<template v-slot:footer>
						<uni-easyinput v-model="form.paymentMethod" placeholder="请输入" :inputBorder="false" />
					</template>
				</uni-list-item>

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

				<uni-list-item class="mgb10" title="评审部门">
					<template v-slot:footer>
						<uni-easyinput v-model="form.reviewDepartment" placeholder="请输入" :inputBorder="false" />
					</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" />
	</view>
</template>

<script>
import SingleSelectSheet from '@/components/single-select/index.vue'
import { getDicByCodes } from '@/utils/dic.js'
import { foreignCustomerCreditGetApi, foreignCustomerCreditSaveApi } from '@/api/procure-manage/foreignCustomerCredit.js'

export default {
	name: 'ForeignTradeModify',
	components: { SingleSelectSheet },
	data() {
		return {
			id: '',
			submitting: false,
			loading: false,
			supplierOptions: [],
			supplierCategoryOptions: [
				{ label: 'A类供应商', value: 'A' },
				{ label: 'B类供应商', value: 'B' },
				{ label: 'C类供应商', value: 'C' },
				{ label: 'D类供应商', value: 'D' }
			],
			sheet: { visible: false, title: '', options: [], field: '', value: '' },
			form: {
				id: '',
				supplier: '',
				supplierName: '',
				unitName: '',
				companyNature: '',
				legalRepresentative: '',
				phoneFax: '',
				registrationCertificateNo: '',
				address: '',
				domesticBusinessLeader: '',
				leaderIdPassportNo: '',
				establishedTimeAndYardScale: '',
				overallBusinessVarietyScale: '',
				exportToDomesticTime: '',
				exportToDomesticScaleVariety: '',
				domesticCooperationCompanies: '',
				cooperationEffect: '',
				supplierInspection: '',
				domesticSalesRepOfficeInspection: '',
				hasGuaranteeLetter: '',
				contractDispute: '',
				insuranceTransportMode: '',
				demurrageFee: '',
				operatingVariety: '',
				operatingScale: '',
				pricingModel: '',
				settlementMethod: '',
				weightDiffAgreement: '',
				qualityStandard: '',
				supplierCategory: '',
				operationTime: '',
				operationMode: '',
				operationVariety: '',
				operationQuantity: '',
				deliveryRequirement: '',
				paymentMethod: '',
				nextReviewTime: '',
				reviewDepartment: ''
			}
		}
	},
	async onLoad(query) {
		const id = (query && (query.id || query.code)) ? String(query.id || query.code) : ''
		this.id = id
		await this.loadSupplierOptions()
		await this.loadDetail()
	},
	methods: {
		async loadSupplierOptions() {
			try {
				const results = await getDicByCodes(['SUPPLIER'])
				const items = results && results.SUPPLIER && results.SUPPLIER.data ? results.SUPPLIER.data : []
				this.supplierOptions = (Array.isArray(items) ? items : []).map(it => ({
					label: it && it.name != null ? String(it.name) : '',
					value: it && it.code != null ? String(it.code) : ''
				})).filter(it => it.value)
			} catch (e) {
				this.supplierOptions = []
			}
		},
		displayLabel(field) {
			const m = this.form || {}
			const map = {
				supplierName: '请选择',
				supplierCategory: '请选择'
			}
			const v = m[field]
			if (v != null && String(v).trim()) return String(v)
			if (field === 'supplierCategory') {
				const code = m.supplierCategory
				const found = (this.supplierCategoryOptions || []).find(o => String(o.value) === String(code))
				return found ? String(found.label || '') : map[field]
			}
			return map[field] || '请选择'
		},
		openSheet(field) {
			const map = {
				supplier: { title: '选择供应商', options: this.supplierOptions, valueField: 'supplier', labelField: 'supplierName' },
				supplierCategory: { title: '供应商分类', options: this.supplierCategoryOptions, valueField: 'supplierCategory', labelField: '' }
			}
			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
			}
		},
		onSheetConfirm({ value, label }) {
			const field = this.sheet.field
			if (field === 'supplier') {
				this.form.supplier = value
				this.form.supplierName = label
			}
			if (field === 'supplierCategory') {
				this.form.supplierCategory = value
			}
			this.sheet.visible = false
		},
		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 = { ...this.form, ...data, id: this.id }
				if (!this.form.supplierName && this.form.supplier) {
					const found = (this.supplierOptions || []).find(o => String(o.value) === String(this.form.supplier))
					if (found) this.form.supplierName = String(found.label || '')
				}
			} catch (e) {
				uni.showToast({ title: '详情加载失败', icon: 'none' })
			} finally {
				this.loading = false
			}
		},
		validate() {
			const requiredFields = [
				{ key: 'supplier', label: '供应商' },
				{ key: 'unitName', label: '单位名称' },
				{ key: 'companyNature', label: '公司性质' },
				{ key: 'legalRepresentative', label: '法人代表' },
				{ key: 'phoneFax', label: '电话及传真' },
				{ key: 'registrationCertificateNo', label: '注册证书号' },
				{ key: 'address', label: '地址' },
				{ key: 'domesticBusinessLeader', label: '国内业务负责人' },
				{ key: 'leaderIdPassportNo', label: '负责人身份证/护照号' },
				{ key: 'establishedTimeAndYardScale', label: '成立时间及货场规模' },
				{ key: 'overallBusinessVarietyScale', label: '经营品种、规模' },
				{ key: 'exportToDomesticTime', label: '出口到国内时间' },
				{ key: 'exportToDomesticScaleVariety', label: '出口规模、品种' },
				{ key: 'domesticCooperationCompanies', label: '与国内合作企业' },
				{ key: 'cooperationEffect', label: '合作效果' },
				{ key: 'supplierInspection', label: '供应商考察' },
				{ key: 'domesticSalesRepOfficeInspection', label: '销售代表办公地考察' },
				{ key: 'hasGuaranteeLetter', label: '有无担保函' },
				{ key: 'contractDispute', label: '合同纠纷' },
				{ key: 'insuranceTransportMode', label: '保险、运输方式' },
				{ key: 'demurrageFee', label: '滞箱滞报费用' },
				{ key: 'operatingVariety', label: '操作品种' },
				{ key: 'operatingScale', label: '操作规模' },
				{ key: 'pricingModel', label: '定价模式' },
				{ key: 'settlementMethod', label: '结算方式' },
				{ key: 'weightDiffAgreement', label: '磅差约定' },
				{ key: 'qualityStandard', label: '质量标准' },
				{ key: 'supplierCategory', label: '供应商分类' },
				{ key: 'operationTime', label: '操作时间' },
				{ key: 'operationMode', label: '操作模式' },
				{ key: 'operationVariety', label: '操作品种' },
				{ key: 'operationQuantity', label: '操作数量' },
				{ key: 'deliveryRequirement', label: '发货要求' },
				{ key: 'paymentMethod', label: '付款方式' },
				{ key: 'nextReviewTime', label: '下次评审时间' },
				{ key: 'reviewDepartment', label: '评审部门' }
			]
			for (let i = 0; i < requiredFields.length; i++) {
				const f = requiredFields[i]
				const v = this.form && this.form[f.key]
				if (v == null || String(v).trim() === '') {
					uni.showToast({ title: `${f.label}必填`, icon: 'none' })
					return false
				}
			}
			return true
		},
		buildPayload() {
			return { ...this.form, id: this.id }
		},
		async onSubmit() {
			if (this.submitting) return
			if (!this.validate()) return
			this.submitting = true
			const payload = this.buildPayload()
			try {
				await foreignCustomerCreditSaveApi(payload)
				uni.showToast({ title: '保存成功', icon: 'success' })
				try { uni.setStorageSync('FOREIGN_TRADE_LIST_NEED_REFRESH', '1') } catch (e) {}
				setTimeout(() => { uni.navigateBack() }, 300)
			} catch (e) {
				uni.showToast({ title: (e && e.msg) || '保存失败', icon: 'none' })
			} finally {
				this.submitting = false
			}
		},
	}
}
</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;
}

::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: 260rpx;
				margin-right: 32rpx;
				color: rgba(0, 0, 0, 0.9);
			}
		}

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