<template>
	<view class="con-body">
		<view class="con-bg">
			<!-- 头部 -->
			<customHeader ref="customHeaderRef" :title="'市场信息详情'" :leftFlag="true" :rightFlag="false"></customHeader>

			<!-- 高度来避免头部遮挡 -->
			<view class="top-height"></view>

			<!-- 正文内容 -->
			<!-- 详情内容 -->
			<view class="white-bg">
				<view class="report-list">
					<view class="title">{{ detailList.informationType }}</view>
					<view class="r-list">
						<view class="r-name">{{ detailList.cusName }}</view>
					</view>
					<view class="border-bottom b-width"></view>
					<view class="r-list">
						<view class="r-left">报告人</view>
						<view class="r-right">{{ detailList.createName }}</view>
					</view>
					<view class="border-bottom b-width"></view>
					<view class="r-list">
						<view class="r-left">创建日期</view>
						<view class="r-right">{{ detailList.createTime }}</view>
					</view>
					<view class="border-bottom b-width" v-if="detailList.createTime != null"></view>
					<view class="r-list" v-if="detailList.createTime != null">
						<view class="r-left">创建时间</view>
						<view class="r-right">{{ detailList.createTime }}</view>
					</view>

					<view class="border-bottom b-width" v-if="detailList.opportunityType != null"></view>
					<view class="r-list" v-if="detailList.opportunityType != null">
						<view class="r-left">机会类型</view>
						<view class="r-right">{{ detailList.opportunityType }}</view>
					</view>

					<view class="border-bottom b-width" v-if="detailList.understandTheWay != null"></view>
					<view class="r-list" v-if="detailList.understandTheWay != null">
						<view class="r-left">了解途径</view>
						<view class="r-right">{{ detailList.understandTheWay }}</view>
					</view>

					<view class="border-bottom b-width" v-if="detailList.opportunityDescription != null"></view>
					<view class="r-list" v-if="detailList.opportunityDescription != null">
						<view class="r-left">机会描述</view>
						<view class="r-right">{{ detailList.opportunityDescription }}</view>
					</view>

					<view class="border-bottom b-width" v-if="detailList.opportunityStatus != null"></view>
					<view class="r-list" v-if="detailList.opportunityStatus != null">
						<view class="r-left">机会所处状态</view>
						<view class="r-right">{{ detailList.opportunityStatus }}</view>
					</view>

					<view class="border-bottom b-width" v-if="detailList.predictedAmount != null"></view>
					<view class="r-list" v-if="detailList.predictedAmount != null">
						<view class="r-left">预测金额或情况</view>
						<view class="r-right">{{ detailList.predictedAmount }}</view>
					</view>

					<view class="border-bottom b-width" v-if="detailList.competitionSituation != null"></view>
					<view class="r-list" v-if="detailList.competitionSituation != null">
						<view class="r-left">竞争情况</view>
						<view class="r-right">{{ detailList.competitionSituation }}</view>
					</view>

					<view class="border-bottom b-width" v-if="detailList.majorTypesOfMatters != null"></view>
					<view class="r-list" v-if="detailList.majorTypesOfMatters != null">
						<view class="r-left">重大事项类型</view>
						<view class="r-right">{{ detailList.majorTypesOfMatters }}</view>
					</view>

					<view class="border-bottom b-width" v-if="detailList.theImpactGenerated != null"></view>
					<view class="r-list" v-if="detailList.theImpactGenerated != null">
						<view class="r-left">产生的影响</view>
						<view class="r-right">{{ detailList.theImpactGenerated }}</view>
					</view>

					<view class="border-bottom b-width" v-if="detailList.companyResponseStrategy != null"></view>
					<view class="r-list" v-if="detailList.companyResponseStrategy != null">
						<view class="r-left">公司应对策略</view>
						<view class="r-right">{{ detailList.companyResponseStrategy }}</view>
					</view>

					<view class="border-bottom b-width" v-if="detailList.competitiveUnits != null"></view>
					<view class="r-list" v-if="detailList.competitiveUnits != null">
						<view class="r-left">竞争单位</view>
						<view class="r-right">{{ detailList.competitiveUnits }}</view>
					</view>

					<view class="border-bottom b-width" v-if="detailList.competitorLevelOne != null"></view>
					<view class="r-list" v-if="detailList.competitorLevelOne != null">
						<view class="r-left">信息类型</view>
						<view class="r-right">{{ detailList.competitorLevelOne }}</view>
					</view>

					<view class="border-bottom b-width" v-if="detailList.competitorLevelTwo != null"></view>
					<view class="r-list" v-if="detailList.competitorLevelTwo != null">
						<view class="r-left">具体分类</view>
						<view class="r-right">{{ detailList.competitorLevelTwo }}</view>
					</view>

					<view class="border-bottom b-width" v-if="detailList.specificMatters != null"></view>
					<view class="r-list" v-if="detailList.specificMatters != null">
						<view class="r-left">具体事情</view>
						<view class="r-right">{{ detailList.specificMatters }}</view>
					</view>

					<view class="border-bottom b-width" v-if="detailList.originalPosition != null"></view>
					<view class="r-list" v-if="detailList.originalPosition != null">
						<view class="r-left">原职务</view>
						<view class="r-right">{{ detailList.originalPosition }}</view>
					</view>

					<view class="border-bottom b-width" v-if="detailList.currentPosition != null"></view>
					<view class="r-list" v-if="detailList.currentPosition != null">
						<view class="r-left">现职务</view>
						<view class="r-right">{{ detailList.currentPosition }}</view>
					</view>

					<view class="border-bottom b-width" v-if="detailList.positionOfOurCompany != null"></view>
					<view class="r-list" v-if="detailList.positionOfOurCompany != null">
						<view class="r-left">现职务是否与我公司业务相关</view>
						<view class="r-right">{{ detailList.positionOfOurCompany }}</view>
					</view>

					<view class="border-bottom b-width" v-if="detailList.developmentEfforts != null"></view>
					<view class="r-list" v-if="detailList.developmentEfforts != null">
						<view class="r-left">攻关力度</view>
						<view class="r-right">{{ detailList.developmentEfforts }}</view>
					</view>

					<view class="border-bottom b-width" v-if="detailList.successor != null"></view>
					<view class="r-list" v-if="detailList.successor != null">
						<view class="r-left">继任者</view>
						<view class="r-right">{{ detailList.successor }}</view>
					</view>

					<view class="border-bottom b-width" v-if="detailList.keyModels != null"></view>
					<view class="r-list" v-if="detailList.keyModels != null">
						<view class="r-left">重点型号</view>
						<view class="r-right">{{ detailList.keyModels }}</view>
					</view>

					<view class="border-bottom b-width" v-if="detailList.currentStatus != null"></view>
					<view class="r-list" v-if="detailList.currentStatus != null">
						<view class="r-left">目前状态</view>
						<view class="r-right">{{ detailList.currentStatus }}</view>
					</view>

					<view class="border-bottom b-width" v-if="detailList.batchProductionPlan != null"></view>
					<view class="r-list" v-if="detailList.batchProductionPlan != null">
						<view class="r-left">批产计划</view>
						<view class="r-right">{{ detailList.batchProductionPlan }}</view>
					</view>

					<view class="border-bottom b-width" v-if="detailList.situation != null"></view>
					<view class="r-list" v-if="detailList.situation != null">
						<view class="r-left">外协、外包、上级单位情况</view>
						<view class="r-right">{{ detailList.situation }}</view>
					</view>

					<view class="border-bottom b-width" v-if="detailList.subordinateSupportingUnits != null"></view>
					<view class="r-list" v-if="detailList.subordinateSupportingUnits != null">
						<view class="r-left">下级配套单位</view>
						<view class="r-right">{{ detailList.subordinateSupportingUnits }}</view>
					</view>

					<view class="border-bottom b-width" v-if="detailList.generalFormType != null"></view>
					<view class="r-list" v-if="detailList.generalFormType != null">
						<view class="r-left">通用表单类型</view>
						<view class="r-right">{{ detailList.generalFormType }}</view>
					</view>

					<view class="border-bottom b-width" v-if="detailList.informationContent != null"></view>
					<view class="r-list" v-if="detailList.informationContent != null">
						<view class="r-left">信息内容</view>
						<view class="r-right">{{ detailList.informationContent }}</view>
					</view>
					<view class="border-bottom b-width" v-if="detailList.remark != null"></view>
					<view class="r-list" v-if="detailList.remark != null">
						<view class="r-left">备注</view>
						<view class="r-right">{{ detailList.remark }}</view>
					</view>



					<view class="border-bottom b-width"></view>
				</view>
			</view>




			<!-- 底部加高度来避免tabbar遮挡 -->
			<view class="bottom-height"></view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import customHeader from '@/components/customHeader.vue'
	import customTabs from '@/components/customTabs.vue';
	import {
		viewingMarketInfgetDetail
	} from '@/api/crm/api_ys.js';


	let informationId = ref(0)
	// 加载后调用
	let id = ref(null)
	onLoad((options) => {
		informationId.value = options.informationId
		getVisitorReportDetail();
	})
	// 查询详情
	let item = ref({});
	//明细List
	let detailList = ref({})
	const getVisitorReportDetail = async () => {
		let param = {
			informationId: informationId.value
		}
		let detailRes = await viewingMarketInfgetDetail(param);
		detailList.value = detailRes.rows[0];
		uni.$emit('updateStatus',informationId.value);
	}
</script>

<style scoped>
	.white-bg {
		width: 690rpx;
		margin: 0;
		border-radius: 8px 8px 0 0;
	}

	.white-bg.white-bg-2 {
		border-radius: 0;
		margin-bottom: 20rpx;
	}

	:deep(.tabs-header) {
		/* background: none !important; */
		border-bottom: none !important;
		margin: 0 auto;
		gap: 5px;
	}

	:deep(.tab-item) {
		color: #919191;
		font-size: 32rpx;
		font-weight: bold;
		/* flex:none; */
		/* margin: 0 -50rpx; */
		/* padding: 0 50rpx; */
	}

	:deep(.tab-item:first-child) {
		text-align: right;
		margin-left: 230rpx;
	}

	:deep(.tab-item:last-child) {
		text-align: left;
		margin-right: 230rpx;
	}

	:deep(.tab-item.active) {
		color: #3384DF;
		font-weight: bold;
	}

	:deep(.tab-item.active::after) {
		width: 100rpx;
		height: 8rpx;
	}
</style>