<template>
		<el-dialog v-model="state.dialogVisible" draggable title="拓展信息" ref="dialogRef" width="60%" append-to-body>
			<el-collapse v-model="state.collapseArr"  class="collapse-box">
					<el-collapse-item name="1">
						<template #title>
							<p class="pl20">
								<b class="font14">工单信息</b>
							</p>
						</template>
						<div class="collapse-container pb1">
							<el-form label-width="130px" ref="ruleFormRef">
								<el-row :gutter="35">
									<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
										<el-form-item label="工单类型"> {{ state.ruleForm.orderTypeText }} </el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
										<el-form-item label="受理类型"> {{ state.ruleForm.acceptType }}  </el-form-item>
									</el-col>
								</el-row>
							</el-form>
						</div>
					</el-collapse-item>
					<!-- 举报人信息 -->
					<el-collapse-item name="2">
						<template #title>
							<p class="pl20">
								<b class="font14">举报人信息</b>
							</p>
						</template>
						<div class="collapse-container pb1">
							<el-form label-width="130px" ref="ruleFormRef">
								<el-row :gutter="35">
									<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
										<el-form-item label="证件类型"> {{ state.ruleForm.licenceType }} </el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
										<el-form-item label="证件号码"> {{ state.ruleForm.licenceNo }} </el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
										<el-form-item label="提供方类型"> {{ state.ruleForm.identityType }} </el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
										<el-form-item label="提供方身份"> {{ state.ruleForm.identity }} </el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
										<el-form-item label="国籍/地区"> {{ state.ruleForm.nationality }} </el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
										<el-form-item label="民族"> {{ state.ruleForm.nation }} </el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
										<el-form-item label="邮政编码"> {{ state.ruleForm.postalCode }} </el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
										<el-form-item label="邮箱"> {{ state.ruleForm.email }}</el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
										<el-form-item label="其他联系方式"> {{ state.ruleForm.otherContact }} </el-form-item>
									</el-col>
								</el-row>
							</el-form>
						</div>
					</el-collapse-item>
					<!-- 举报对象信息 -->
					<el-collapse-item title="Feedback" name="3">
						<template #title>
							<p class="pl20">
								<b class="font14">举报对象信息</b>
							</p>
						</template>
						<div class="collapse-container pb1">
							<el-form label-width="130px" ref="ruleFormRef">
								<el-row :gutter="35">
									<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
										<el-form-item label="企业名称"> {{ state.ruleForm.enterpriseName }} </el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
										<el-form-item label="统一社会信用代码"> {{ state.ruleForm.unifiedSocialCreditCode }} </el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
										<el-form-item label="注册地址"> {{ state.ruleForm.registerAddress }} </el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
										<el-form-item label="注册号"> {{ state.ruleForm.registerNumber }} </el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
										<el-form-item label="企业联系人"> {{ state.ruleForm.enterpriseContact }} </el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
										<el-form-item label="市场主体类型"> {{ state.ruleForm.marketType }} </el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
										<el-form-item label="行业分类"> {{ state.ruleForm.industryClassify }} </el-form-item>
									</el-col>
								</el-row>
							</el-form>
						</div>
					</el-collapse-item>
					<!-- 举报详情 -->
					<el-collapse-item title="Efficiency" name="4">
						<template #title>
							<p class="pl20">
								<b class="font14">举报详情</b>
							</p>
						</template>
						<div class="collapse-container">
							<el-form label-width="130px" ref="ruleFormRef" class="pt10 pb10">
								<el-row :gutter="35">
									<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
										<el-form-item label="商品分类/品牌"> {{ state.ruleForm.brand }} </el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" v-if="state.ruleForm.occurrenceTime">
										<el-form-item label="争议发生时间"> {{ formatDate(state.ruleForm.occurrenceTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
										<el-form-item label="消费金额"> ￥{{ state.ruleForm.amount }} </el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
										<el-form-item label="客体类别"> {{ state.ruleForm.objectClassify }} </el-form-item>
									</el-col>
									<el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16" v-if="state.ruleForm.acceptTypeText === '举报'">
										<el-form-item label="举报问题类别"> {{ state.ruleForm.reportClassify }} </el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" v-if="state.ruleForm.acceptTypeText === '投诉'">
										<el-form-item label="投诉问题类别"> {{ state.ruleForm.complainClassify }} </el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
										<el-form-item label="销售方式"> {{ state.ruleForm.salesMode }} </el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" v-if="state.ruleForm.acceptTypeText === '举报'">
										<el-form-item label="举报目标"> {{ state.ruleForm.reportTarget }} </el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" v-if="state.ruleForm.acceptTypeText === '投诉'">
										<el-form-item label="投诉目标"> {{ state.ruleForm.complainTarget }} </el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" v-if="state.ruleForm.salesMode === '网购'">
										<el-form-item label="电商平台"> {{ state.ruleForm.eCommercePlatform }} </el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" v-if="state.ruleForm.salesMode === '网购'">
										<el-form-item label="订单号"> {{ state.ruleForm.externalOrderNo }} </el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" v-if="state.ruleForm.salesMode === '现场'">
										<el-form-item label="经营地址"> {{ state.ruleForm.businessPosition.address }} </el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8"  v-if="state.ruleForm.salesMode === '现场'">
										<el-form-item label="经营详细地址"> {{ state.ruleForm.businessPosition.street }} </el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" v-if="state.ruleForm.salesModeCode === '19'">
										<el-form-item label="具体渠道"> {{ state.ruleForm.channel }} </el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" v-if="state.ruleForm.patentee">
										<el-form-item label="专利权人"> {{ state.ruleForm.patentee }} </el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" v-if="state.ruleForm.patentee">
										<el-form-item label="发明名称"> {{ state.ruleForm.patentName }} </el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" v-if="state.ruleForm.patentee">
										<el-form-item label="专利类型"> {{ state.ruleForm.patentType }} </el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" v-if="state.ruleForm.patentee">
										<el-form-item label="专利号"> {{ state.ruleForm.patentNo }} </el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
										<el-form-item label="产品名称"> {{ state.ruleForm.productName }} </el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
										<el-form-item label="批准文号"> {{ state.ruleForm.approvalNumber }} </el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
										<el-form-item label="产品批号"> {{ state.ruleForm.productBatchNo }} </el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
										<el-form-item label="产品规格"> {{ state.ruleForm.productStandard }} </el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
										<el-form-item label="产品有效期"> {{ formatDate(state.ruleForm.productExpiredTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
										<el-form-item label="生产厂家"> {{ state.ruleForm.manufacturer }} </el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
										<el-form-item label="销售企业"> {{ state.ruleForm.consumerAddress }} </el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
										<el-form-item label="消费者地址"> {{ state.ruleForm.consumerAddress }} </el-form-item>
									</el-col>
									<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-if="state.ruleForm.acceptTypeText === '投诉'">
										<el-form-item label="诉求">
                      <span v-for="item in state.ruleForm.complainTypes" :key="item.id" class="mr8">{{item.name}}</span>
										</el-form-item>
									</el-col>
								</el-row>
							</el-form>
						</div>
					</el-collapse-item>
			</el-collapse>
			<template #footer>
				<span class="dialog-footer">
					<el-button class="default-button" @click="state.dialogVisible = false">关闭</el-button>
				</span>
			</template>
		</el-dialog>
</template>

<script setup lang="ts" name="orderDetailExpand">
import { reactive, ref } from 'vue';
import { formatDate } from '/@/utils/formatTime';

// 定义变量内容
const state = reactive<any>({
	dialogVisible: false,
	ruleForm: {
    orderTypeText: '', // 工单类型
    acceptTypeText: '', // 受理类型
    licenceType: '', // 证件类型
    licenceNo: '', // 证件号码
    identityType: '', // 提供方类型
    identity:'',// 提供放身份
    businessPosition:{},
  },
	collapseArr: ['1', '2', '3', '4'],
});
// 打开弹窗
const ruleFormRef = ref<RefType>();
const openDialog = (val:any) => {
	state.ruleForm = val;
	state.dialogVisible = true;
};
const dialogRef = ref<RefType>();
// 关闭弹窗
const closeDialog = () => {
	state.dialogVisible = false;
};
// 暴露变量
defineExpose({
	openDialog,
	closeDialog,
});
</script>
<style lang="scss" scoped>
.collapse-box {
	:deep(.el-collapse-item__header) {
		background-color: var(--hotline-bg-main-color);
		height: 40px;
		border-radius: var(--el-border-radius-base);
	}
	:deep(.el-collapse-item__content) {
		padding-bottom: 0 !important;
		.el-form-item {
			margin-bottom: 5px;
			.el-form-item__content {
				line-height: 24px;
			}
		}
	}
	.collapse-container {
		padding: 15px;
		.plug-container {
			border: var(--el-border);
			border-radius: var(--el-border-radius-base);
			margin-bottom: 15px;
			&:last-child {
				margin-bottom: 0;
			}
			.plug-container-title {
				padding: 15px;
				font-weight: bold;
				border-bottom: var(--el-border);
				font-size: var(--el-font-size-medium);
			}
		}
	}
}
</style>
<style lang="scss">
.demo-tabs-form {
	.title {
		font-size: var(--el-font-size-medium);
		padding: 10px 15px 20px 15px;
	}
	.el-form-item {
		margin-bottom: 0 !important;
	}
}
</style>
