<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(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.legalRepresentative) }}</text></view>
					<view class="row"><text class="label">公司成立时间</text><text class="value">{{ safeText(form.companyEstablishedTime) }}</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.businessPrincipal) }}</text></view>
					<view class="row"><text class="label">职务</text><text class="value">{{ safeText(form.businessPrincipalPosition) }}</text></view>
					<view class="row"><text class="label">电话</text><text class="value">{{ safeText(form.businessPrincipalPhone) }}</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">{{ safeText(form.factoryOfficeProperty) }}</text></view>
					<view class="row"><text class="label">生产厂房及办公楼面积</text><text class="value">{{ safeText(form.factoryOfficeArea) }}</text></view>
					<view class="row"><text class="label">仓库或货场产权</text><text class="value">{{ safeText(form.warehouseYardProperty) }}</text></view>
					<view class="row"><text class="label">仓库或货场产权面积</text><text class="value">{{ safeText(form.warehouseYardArea) }}</text></view>
					<view class="row"><text class="label">主要生产设备</text><text class="value pre">{{ safeText(form.mainEquipment) }}</text></view>
					<view class="row"><text class="label">正常库存量</text><text class="value">{{ safeText(form.normalInventory) }}</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.mainVarieties) }}</text></view>
					<view class="row"><text class="label">月度收购量</text><text class="value">{{ safeText(form.monthlyPurchaseVolume) }}</text></view>
					<view class="row"><text class="label">收购来源</text><text class="value">{{ safeText(purchaseSourceName) }}</text></view>
					<view class="row"><text class="label">入库品名</text><text class="value">{{ safeText(form.stockInProductName) }}</text></view>
					<view class="row"><text class="label">产品名称</text><text class="value">{{ safeText(form.productName) }}</text></view>
					<view class="row"><text class="label">产能</text><text class="value">{{ safeText(form.capacity) }}</text></view>
					<view class="row"><text class="label">销售渠道</text><text class="value">{{ safeText(form.salesChannel) }}</text></view>
					<view class="row"><text class="label">操作方式</text><text class="value">{{ safeText(operationModeName) }}</text></view>
					<view class="row"><text class="label">是否享有优惠政策</text><text class="value">{{ boolText(form.hasPreferentialPolicy) }}</text></view>
					<view class="row"><text class="label">是否投资期货</text><text class="value">{{ boolText(form.investInFutures) }}</text></view>
					<view class="row"><text class="label">是否有被处罚记录</text><text class="value">{{ boolText(form.hasPenaltyRecord) }}</text></view>
					<view class="row"><text class="label">经营范围是否相符</text><text class="value">{{ boolText(form.businessScopeMatch) }}</text></view>
					<view class="row"><text class="label">常见料质问题</text><text class="value pre">{{ safeText(form.commonMaterialIssue) }}</text></view>
					<view class="row"><text class="label">合作中的其它问题</text><text class="value pre">{{ safeText(form.otherIssue) }}</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.firstCooperationYear) }}</text></view>
					<view class="row"><text class="label">是否新开发</text><text class="value">{{ safeText(isNewDevelopmentName) }}</text></view>
					<view class="row"><text class="label">计划落空不良记录</text><text class="value">{{ boolText(form.hasFailedPlanRecord) }}</text></view>
					<view class="row"><text class="label">履行不到位现象</text><text class="value">{{ boolText(form.hasPlanPerformanceIssue) }}</text></view>
					<view class="row"><text class="label">进销账务如何处理</text><text class="value pre">{{ safeText(form.accountingProcess) }}</text></view>
					<view class="row"><text class="label">开票品名是否一致</text><text class="value">{{ boolText(form.invoiceNameMatch) }}</text></view>
					<view class="row"><text class="label">出库流程是否规范</text><text class="value">{{ boolText(form.outboundProcessStandard) }}</text></view>
					<view class="row"><text class="label">运输方式</text><text class="value">{{ safeText(form.transportMode) }}</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.investigatorName) }}</text></view>
					<view class="row"><text class="label">采购处</text><text class="value">{{ safeText(purchaseDepartmentName) }}</text></view>
					<view class="row"><text class="label">评审有效期</text><text class="value">{{ safeText(form.reviewValidUntil) }}</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'
import { getDicByCodes, getDicName } from '@/utils/dic.js'
import { domesticCustomerCreditGetApi } from '@/api/procure-manage/domesticCustomerCredit.js'
import { getPurchaseDeptApi } from '@/api/procure-manage/domesticCustomerCredit.js'

export default {
	name: 'DomesticTradeDetail',
    components: {
        DetailButtons
    },
	data() {
		return {
			id: '',
			loading: false,
			form: {},
			dicOptions: {
				COMPANY_NATURE: [],
				DEVELOP_NEW: [],
				OPERATION_METHOD: [],
				PURCHASE_SOURCE: []
			},
			purchaseDeptOptions: [],
            buttons: [{
                text: '编辑',
                visible: true,
                variant: 'outline',
                event: 'edit',
            }]
		}
	},
	computed: {
        displayButtons() {
            return [
                { ...this.buttons[0], visible: true },
            ]
        },
		companyNatureOptions() {
			return this.dicToSheetOptions(this.dicOptions.COMPANY_NATURE)
		},
		attachments() {
			const f = this.form || {}
			const ids = f.attachmentFileIds != null ? String(f.attachmentFileIds) : ''
			const names = f.attachmentFileNames != null ? String(f.attachmentFileNames) : ''
			const idArr = ids ? ids.split(',').map(s => s.trim()).filter(Boolean) : []
			const nameArr = names ? names.split(',') : []
			if (idArr.length) {
				return idArr.map((id, i) => ({ id, name: (nameArr[i] != null ? String(nameArr[i]) : '') }))
			}
			const legacy = Array.isArray(f.attachments) ? f.attachments : []
			return legacy.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')
		},
		companyNatureName() {
			return this.safeText(this.form.companyNatureName) || this.labelsOf(this.companyNatureOptions, this.form.companyNature)
		},
		purchaseSourceName() {
			const v = this.form && this.form.purchaseSource != null ? String(this.form.purchaseSource) : ''
			return v ? getDicName('PURCHASE_SOURCE', v, this.dicOptions.PURCHASE_SOURCE) : '-'
		},
		operationModeName() {
			const v = this.form && this.form.operationMode != null ? String(this.form.operationMode) : ''
			return v ? getDicName('OPERATION_METHOD', v, this.dicOptions.OPERATION_METHOD) : '-'
		},
		isNewDevelopmentName() {
			const v = this.form && this.form.isNewDevelopment != null ? String(this.form.isNewDevelopment) : ''
			return v ? getDicName('DEVELOP_NEW', v, this.dicOptions.DEVELOP_NEW) : '-'
		},
		purchaseDepartmentName() {
			const v = this.form && this.form.purchaseDepartment != null ? String(this.form.purchaseDepartment) : ''
			if (!v) return '-'
			const found = (this.purchaseDeptOptions || []).find(o => String(o.value) === v)
			return found ? String(found.label || '') : v
		}
	},
	created() {
		this.loadDicData()
		this.loadPurchaseDeptOptions()
	},
	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(['COMPANY_NATURE', 'DEVELOP_NEW', 'OPERATION_METHOD', 'PURCHASE_SOURCE'])
				this.dicOptions = {
					COMPANY_NATURE: (results.COMPANY_NATURE && results.COMPANY_NATURE.data) || [],
					DEVELOP_NEW: (results.DEVELOP_NEW && results.DEVELOP_NEW.data) || [],
					OPERATION_METHOD: (results.OPERATION_METHOD && results.OPERATION_METHOD.data) || [],
					PURCHASE_SOURCE: (results.PURCHASE_SOURCE && results.PURCHASE_SOURCE.data) || []
				}
			} catch (e) {
				this.dicOptions = { COMPANY_NATURE: [], DEVELOP_NEW: [], OPERATION_METHOD: [], PURCHASE_SOURCE: [] }
			}
		},
		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 = []
			}
		},
		dicToSheetOptions(items) {
			const list = Array.isArray(items) ? items : []
			return list.map(it => ({ label: it && it.name != null ? String(it.name) : '', value: it && it.code != null ? String(it.code) : '' })).filter(it => it.value)
		},
        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 })
        },
		boolText(v) {
			if (v === true) return '是'
			if (v === false) return '否'
			return '-'
		},
		safeText(v) {
			const s = v == null ? '' : String(v)
			return s.trim() ? s : ''
		},
		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 res = await domesticCustomerCreditGetApi(this.id)
				const data = (res && res.data) ? res.data : {}
				const u = (this.$store && this.$store.state && this.$store.state.user) ? this.$store.state.user : {}
				if (!data.investigatorName && data.investigatorId && u && String(u.id || '') === String(data.investigatorId || '')) {
					data.investigatorName = u && u.name ? String(u.name) : ''
				}
				this.form = data
			} catch (e) {
				this.form = {}
				uni.showToast({ title: '详情加载失败', icon: 'none' })
			} finally {
				this.loading = false
			}
		},
		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 144rpx;
}

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