<template>
	<el-dialog
		v-model="state.dialogVisible"
		width="80%"
		draggable
		title="拓展信息"
		@closed="closed"
		@opened="opened"
		modal-class="modal_class"
		class="expand-from-dialog"
		:modal="false"
		:close-on-click-modal="false"
		destroy-on-close
	>
		<el-form :model="state.expandForm" scroll-to-error ref="expandFormRef" label-width="120px" v-loading="state.loading">
			<el-row :gutter="20">
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
					<el-form-item label="工单类型" prop="orderTypeObj">
						<el-select
							v-model="state.expandForm.orderTypeObj"
							filterable
							value-key="dicDataValue"
							placeholder="请选择工单类型"
							class="w100"
							clearable
							@change="
								(val:any) => {
									state.expandForm.orderType = val?.dicDataName ?? null;
									state.expandForm.orderTypeCode = val?.dicDataValue ?? null;
								}
							"
						>
							<el-option v-for="item in state.orderTypeOptions" :key="item.dicDataValue" :label="item.dicDataName" :value="item" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
					<el-form-item prop="orderTypeObj">
						<el-text type="danger" tag="b">注意：保存拓展单后，需要再点下保存工单才可以保存拓展单。</el-text>
					</el-form-item>
				</el-col>
				<!-- （1）医疗服务中心受理单 -->
				<template v-if="state.expandForm.orderTypeCode === 'yl'">
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="医院名称" prop="medName" :rules="[{ required: false, message: '指投诉医院的医院名称', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.medName" placeholder="请填写医院名称" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="医院地址" prop="medAddress" :rules="[{ required: false, message: '指投诉医院的医院地址', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.medAddress" placeholder="请填写医院地址" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="科室" prop="medDepartment" :rules="[{ required: false, message: '指投诉医院医疗科室', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.medDepartment" placeholder="请填写科室" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="医生" prop="medDoctor" :rules="[{ required: false, message: '指投诉医院医生', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.medDoctor" placeholder="指投诉医院医生" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="病人姓名" prop="medPatient" :rules="[{ required: false, message: '患者姓名', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.medPatient" placeholder="请填写病人姓名" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="就诊卡号" prop="medNo" :rules="[{ required: false, message: '请填写就诊卡号', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.medNo" placeholder="请填写就诊卡号" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item
							label="身份证号"
							prop="medIdNo"
							:rules="[
								{ required: false, message: '请填写身份证号', trigger: 'blur' },
								{
									pattern: /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/,
									message: '身份证号格式错误',
									trigger: 'blur',
								},
							]"
						>
							<el-input v-model="state.expandForm.medIdNo" placeholder="请填写身份证号" clearable> </el-input>
						</el-form-item>
					</el-col>
				</template>
				<!-- （2）电视购物及商铺购买退换货中心受理单 -->
				<template v-if="state.expandForm.orderTypeCode === 'th'">
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="电视台（商铺）" prop="exchTv" :rules="[{ required: false, message: '请填写电视台（商铺） ', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.exchTv" placeholder="指投诉产品的商铺" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="购买时间" prop="exchTradeTime" :rules="[{ required: false, message: '请选择购买时间', trigger: 'change' }]">
							<el-date-picker
								v-model="state.expandForm.exchTradeTime"
								type="datetime"
								placeholder="购买时间"
								class="w100"
								clearable
								value-format="YYYY-MM-DD[T]HH:mm:ss"
							/>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="产品名称" prop="exchProduct" :rules="[{ required: false, message: '请填写产品名称', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.exchProduct" placeholder="指产品的名称 " clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="消费金额(元)" prop="exchAmount" :rules="[{ required: false, message: '请填写消费金额', trigger: 'blur' }]">
							<el-input-number v-model="state.expandForm.exchAmount" :min="0" placeholder="产品消费金额" class="w100" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="商家名称" prop="exchName" :rules="[{ required: false, message: '请填写商家名称', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.exchName" placeholder="商家名称" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="商家地址" prop="exchAddress" :rules="[{ required: false, message: '请填写商家地址', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.exchAddress" placeholder="商家详细地址" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="收货人" prop="exchConsignee" :rules="[{ required: false, message: '请填写收货人', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.exchConsignee" placeholder="收货人姓名" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="收货地址" prop="exchConsigneeAddress" :rules="[{ required: false, message: '请填写收货地址', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.exchConsigneeAddress" placeholder="收货地址" clearable> </el-input>
						</el-form-item>
					</el-col>
				</template>
				<!-- （3）电视台虚假广告中心受理单 -->
				<template v-if="state.expandForm.orderTypeCode === 'xjgg'">
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="电视台" prop="adTv" :rules="[{ required: false, message: '请填写电视台', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.adTv" placeholder="虚假广告电视台名称" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="产品名称" prop="adProduct" :rules="[{ required: false, message: '请填写产品名称', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.adProduct" placeholder="虚假广告产品名称" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="虚假广告内容" prop="adContent" :rules="[{ required: false, message: '请填写虚假广告内容', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.adContent" placeholder="虚假广告具体内容" clearable> </el-input>
						</el-form-item>
					</el-col>
				</template>
				<!-- （4）高速公路投诉中心受理单 -->
				<template v-if="state.expandForm.orderTypeCode === 'gsgl'">
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="高速入口" prop="expwyEntrance" :rules="[{ required: false, message: '请填写高速入口', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.expwyEntrance" placeholder="高速入口" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="高速出口" prop="expwyExit" :rules="[{ required: false, message: '请填写高速出口', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.expwyExit" placeholder="高速出口" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="发生时间" prop="expwyTime" :rules="[{ required: false, message: '请选择投诉发生的时间', trigger: 'change' }]">
							<el-date-picker
								v-model="state.expandForm.expwyTime"
								type="datetime"
								placeholder="发生时间"
								class="w100"
								clearable
								value-format="YYYY-MM-DD[T]HH:mm:ss"
							/>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="车牌号" prop="expwyNo" :rules="[{ required: false, message: '请填写车牌号', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.expwyNo" placeholder="涉事车辆的车牌号" clearable> </el-input>
						</el-form-item>
					</el-col>
				</template>
				<!-- （5）四川政务服务网技术中心受理单 -->
				<template v-if="state.expandForm.orderTypeCode === 'zwfw'">
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="服务网账号" prop="zwfwwAccount" :rules="[{ required: false, message: '请填写服务网账号', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.zwfwwAccount" placeholder="四川政务服务网账号" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="联系方式" prop="zwfwwContact" :rules="[{ required: false, message: '请填写联系方式', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.zwfwwContact" placeholder="群众联系电话（QQ：）" clearable> </el-input>
						</el-form-item>
					</el-col>
				</template>
				<!-- （6）四川省12366热线诉求交办单 -->
				<template v-if="state.expandForm.orderTypeCode === 'swfwsq'">
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="主管税务机关" prop="location12366Sq" :rules="[{ required: false, message: '请填写主管税务机关', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.location12366Sq" placeholder="主管税务机关（问题归属地）" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item
							label="被投诉单位或个人信息"
							prop="info12366Sq"
							label-width="160"
							:rules="[{ required: false, message: '请填写被投诉单位或个人信息', trigger: 'blur' }]"
						>
							<el-input v-model="state.expandForm.info12366Sq" placeholder="被投诉单位或个人信息" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="投诉类型" prop="type12366Sq" :rules="[{ required: false, message: '请填写投诉类型', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.type12366Sq" placeholder="12366的投诉类型" clearable> </el-input>
						</el-form-item>
					</el-col>
				</template>
				<!-- （7）四川省12366热线咨询交办单 -->
				<template v-if="state.expandForm.orderTypeCode === 'swfwzx'">
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="主管税务机关" prop="location12366Zx" :rules="[{ required: false, message: '请填写主管税务机关', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.location12366Zx" placeholder="主管税务机关（问题归属地）" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item
							label="被投诉单位或个人信息"
							prop="info12366Zx"
							label-width="160"
							:rules="[{ required: false, message: '请填写被投诉单位或个人信息', trigger: 'blur' }]"
						>
							<el-input v-model="state.expandForm.info12366Zx" placeholder="被投诉单位或个人信息" clearable> </el-input>
						</el-form-item>
					</el-col>
				</template>
				<!--（8）12328服务监督中心受理单 -->
				<template v-if="state.expandForm.orderTypeCode === 'jtfwjd'">
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="受理方式" prop="acceptType12328" :rules="[{ required: false, message: '请填写受理方式', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.acceptType12328" placeholder="受理方式" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="客户" prop="client12328" :rules="[{ required: false, message: '请填写客户', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.client12328" placeholder="客户" clearable> </el-input>
						</el-form-item>
					</el-col>
				</template>
				<!-- （9）邮政业消费者申诉受理单 -->
				<template v-if="state.expandForm.orderTypeCode === 'yzxf'">
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="申诉人姓名" prop="mailClaimantName" :rules="[{ required: false, message: '请填写申诉人姓名', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.mailClaimantName" placeholder="申诉人姓名" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item
							label="申诉人电话"
							prop="mailClaimantPhone"
							:rules="[
								{ required: false, message: '请填写申诉人电话', trigger: 'blur' },
								{
									pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
									message: '申诉人电话格式错误',
									trigger: 'blur',
								},
							]"
						>
							<el-input v-model="state.expandForm.mailClaimantPhone" placeholder="申诉人电话" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="申诉企业" prop="mailClaimantEnterprise" :rules="[{ required: false, message: '请填写申诉企业', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.mailClaimantEnterprise" placeholder="申诉企业" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="寄件人姓名" prop="mailSenderName" :rules="[{ required: false, message: '请填写寄件人姓名', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.mailSenderName" placeholder="寄件人姓名" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item
							label="寄件人电话"
							prop="mailSenderPhone"
							:rules="[
								{ required: false, message: '请填写寄件人电话', trigger: 'blur' },
								{
									pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
									message: '寄件人电话格式错误',
									trigger: 'blur',
								},
							]"
						>
							<el-input v-model="state.expandForm.mailSenderPhone" placeholder="寄件人电话" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="寄件人地址" prop="mailSenderAddress" :rules="[{ required: false, message: '请填写寄件人地址', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.mailSenderAddress" placeholder="寄件人地址" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="收件人姓名" prop="mailReceiverName" :rules="[{ required: false, message: '请填写收件人姓名', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.mailReceiverName" placeholder="收件人姓名" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item
							label="收件人电话"
							prop="mailReceiverPhone"
							:rules="[
								{ required: false, message: '请填写收件人电话', trigger: 'blur' },
								{
									pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
									message: '收件人电话格式错误',
									trigger: 'blur',
								},
							]"
						>
							<el-input v-model="state.expandForm.mailReceiverPhone" placeholder="收件人电话" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="收件人地址" prop="mailReceiverAddress" :rules="[{ required: false, message: '请填写收件人地址', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.mailReceiverAddress" placeholder="收件人地址" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="涉及金额(元)" prop="mailAmount" :rules="[{ required: false, message: '请填写涉及金额', trigger: 'blur' }]">
							<el-input-number v-model="state.expandForm.mailAmount" :min="0" placeholder="涉及金额" class="w100" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item
							label="是否联系快递公司投诉"
							prop="mailIsContacted"
							label-width="160"
							:rules="[{ required: false, message: '请选择是否联系快递公司投诉', trigger: 'change' }]"
						>
							<el-radio-group v-model="state.expandForm.mailIsContacted">
								<el-radio :value="true">是</el-radio>
								<el-radio :value="false">否</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="处理结果" prop="mailResult" :rules="[{ required: false, message: '请填写处理结果', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.mailResult" placeholder="处理结果" clearable> </el-input>
						</el-form-item>
					</el-col>
				</template>
				<!-- （10）环保举报业务受理单 -->
				<template v-if="state.expandForm.orderTypeCode === 'hbjb'">
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item
							label="邮箱"
							prop="epEmail"
							:rules="[
								{ required: false, message: '请填写邮箱', trigger: 'blur' },
								{
									pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
									message: '邮箱格式错误',
									trigger: 'blur',
								},
							]"
						>
							<el-input v-model="state.expandForm.epEmail" placeholder="举报人邮箱" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="通讯地址" prop="epAddress" :rules="[{ required: false, message: '请填写通讯地址', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.epAddress" placeholder="举报人通讯地址" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="举报对象" prop="epObject" :rules="[{ required: false, message: '请填写举报对象', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.epObject" placeholder="被举报对象名称" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="详细地址" prop="epObjectAddress" :rules="[{ required: false, message: '请填写详细地址', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.epObjectAddress" placeholder="被举报对象详细地址" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="行业类型" prop="epIndustryType" :rules="[{ required: false, message: '请填写行业类型', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.epIndustryType" placeholder="对应行业类型" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="重点要素" prop="epKeyPoint" :rules="[{ required: false, message: '请填写重点要素', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.epKeyPoint" placeholder="重点要素" clearable> </el-input>
						</el-form-item>
					</el-col>
				</template>
				<!-- （11）12315 市场监管局受理单【投诉】 （12）12315 市场监管局受理单【举报】-->
				<template v-if="['scjgjts', 'scjgjjb'].includes(state.expandForm.orderTypeCode)">
					<el-divider content-position="left">
						<el-text tag="b" size="large">
							{{ state.expandForm.orderTypeCode === 'scjgjjb' ? '举报人信息' : state.expandForm.orderTypeCode === 'scjgjts' ? '投诉人信息' : null }}
						</el-text>
					</el-divider>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="证件类型" prop="licenceObj" :rules="[{ required: false, message: '请选择证件类型', trigger: 'change' }]">
							<el-select
								v-model="state.expandForm.licenceObj"
								clearable
								filterable
								value-key="dicDataValue"
								placeholder="请选择证件类型"
								class="w100"
								@change="
									(val:any) => {
										state.expandForm.licenceType = val?.dicDataName ?? null;
										state.expandForm.licenceTypeCode = val?.dicDataValue ?? null;
									}
								"
							>
								<el-option v-for="item in state.licenceTypeOptions" :key="item.dicDataValue" :label="item.dicDataName" :value="item" />
							</el-select>
						</el-form-item>
					</el-col>
					<!-- 选择了证件类型必填 -->
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item
							label="证件号码"
							prop="licenceNo"
							:rules="[
								{ required: state.expandForm.licenceTypeCode, message: '请填写证件号码', trigger: 'blur' },
								{
									pattern: licenceNoPattern,
									message: '证件号码格式错误',
									trigger: 'blur',
								},
							]"
						>
							<el-input v-model="state.expandForm.licenceNo" placeholder="请填写证件号码" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="提供方类型" prop="identityTypeObj" :rules="[{ required: false, message: '请选择提供方类型', trigger: 'change' }]">
							<el-select
								v-model="state.expandForm.identityTypeObj"
								value-key="dicDataValue"
								clearable
								filterable
								placeholder="请选择提供方类型"
								class="w100"
								@change="
									(val:any) => {
										state.expandForm.identityType = val?.dicDataName ?? null;
										state.expandForm.identityTypeCode = val?.dicDataValue ?? null;
									}
								"
							>
								<el-option v-for="item in state.identityTypeOptions" :key="item.dicDataValue" :label="item.dicDataName" :value="item" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="提供方身份" prop="identityObj" :rules="[{ required: false, message: '请选择提供方身份', trigger: 'change' }]">
							<el-select
								v-model="state.expandForm.identityObj"
								value-key="dicDataValue"
								filterable
								clearable
								placeholder="请选择提供方身份"
								class="w100"
								@change="
									(val:any) => {
										state.expandForm.identity = val?.dicDataName ?? null;
										state.expandForm.identityCode = val?.dicDataValue ?? null;
									}
								"
							>
								<el-option v-for="item in state.identityOptions" :key="item.dicDataValue" :label="item.dicDataName" :value="item" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="国籍/地区" prop="nationalityObj" :rules="[{ required: false, message: '请选择国籍/地区', trigger: 'change' }]">
							<el-select
								v-model="state.expandForm.nationalityObj"
								filterable
								clearable
								placeholder="请选择国籍/地区"
								class="w100"
								value-key="dicDataValue"
								@change="
									(val:any) => {
										state.expandForm.nationality = val?.dicDataName ?? null;
										state.expandForm.nationalityCode = val?.dicDataValue ?? null;
									}
								"
							>
								<el-option v-for="item in state.nationalityOptions" :key="item.dicDataValue" :label="item.dicDataName" :value="item" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="民族" prop="nationObj" :rules="[{ required: false, message: '请选择民族', trigger: 'change' }]">
							<el-select
								v-model="state.expandForm.nationObj"
								value-key="dicDataValue"
								clearable
								filterable
								placeholder="请选择民族"
								class="w100"
								@change="
									(val:any) => {
										state.expandForm.nation = val?.dicDataName ?? null;
										state.expandForm.nationCode = val?.dicDataValue ?? null;
									}
								"
							>
								<el-option v-for="item in state.nationOptions" :key="item.dicDataValue" :label="item.dicDataName" :value="item" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item
							label="邮政编码"
							prop="postalCode"
							:rules="[
								{ required: false, message: '请填写邮政编码', trigger: 'blur' },
								{
									pattern: /^(0[1-7]|1[0-356]|2[0-7]|3[0-6]|4[0-7]|5[1-7]|6[1-7]|7[0-5]|8[013-6])\d{4}$/,
									message: '邮政编码格式错误',
									trigger: 'blur',
								},
							]"
						>
							<el-input v-model="state.expandForm.postalCode" placeholder="请填写邮政编码" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item
							label="电子邮箱"
							prop="email"
							:rules="[
								{ required: false, message: '请填写电子邮箱', trigger: 'blur' },
								{
									pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
									message: '电子邮箱格式错误',
									trigger: 'blur',
								},
							]"
						>
							<el-input v-model="state.expandForm.email" placeholder="请填写邮箱" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="其他联系方式" prop="otherContact" :rules="[{ required: false, message: '请填写其他联系方式', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.otherContact" placeholder="请填写其他联系方式" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-divider content-position="left">
						<el-text tag="b" size="large">
							{{ state.expandForm.orderTypeCode === 'scjgjjb' ? '举报对象信息' : state.expandForm.orderTypeCode === 'scjgjts' ? '投诉对象信息' : '' }}
						</el-text>
					</el-divider>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="对象名称" prop="enterpriseName" :rules="[{ required: true, message: '请填写对象名称', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.enterpriseName" placeholder="请填写对象名称" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="对象注册地址" prop="registerAddress" :rules="[{ required: true, message: '请填写对象注册地址', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.registerAddress" placeholder="请填写对象注册地址" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="市场主体类型" prop="marketTypeCode" :rules="[{ required: false, message: '请选择市场主体类型', trigger: 'change' }]">
							<el-cascader
								:options="state.marketTypeOptions"
								filterable
								:props="{ value: 'dicDataValue', label: 'dicDataName', emitPath: false }"
								placeholder="请选择市场主体类型"
								class="w100"
								v-model="state.expandForm.marketTypeCode"
								ref="marketTypeRef"
								@change="changeMarketType"
								clearable
							>
							</el-cascader>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="行业分类" prop="industryClassifyCode" :rules="[{ required: false, message: '请选择行业分类', trigger: 'blur' }]">
							<el-cascader
								:options="state.industryClassifyOptions"
								filterable
								:props="{ value: 'dicDataValue', label: 'dicDataName', emitPath: false }"
								placeholder="请选择行业分类"
								class="w100"
								v-model="state.expandForm.industryClassifyCode"
								ref="industryClassifyRef"
								@change="changeIndustryClassify"
								clearable
							>
							</el-cascader>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item
							label="统一社会信用代码"
							prop="unifiedSocialCreditCode"
							label-width="130px"
							:rules="[
								{ required: false, message: '请填写统一社会信用代码', trigger: 'blur' },
								{
									pattern: /^(([0-9A-Za-z]{15})|([0-9A-Za-z]{18})|([0-9A-Za-z]{20}))$/,
									message: '社会信用代码格式错误',
									trigger: 'blur',
								},
							]"
						>
							<el-input v-model="state.expandForm.unifiedSocialCreditCode" placeholder="请填写统一社会信用代码" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<!-- 数字字母 -->
						<el-form-item
							label="注册号"
							prop="registerNumber"
							:rules="[
								{ required: false, message: '请填写注册号', trigger: 'blur' },
								{
									pattern: /^[A-Za-z0-9]+$/,
									message: '注册号格式错误',
									trigger: 'blur',
								},
							]"
						>
							<el-input v-model="state.expandForm.registerNumber" placeholder="请填写注册号" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="联系人" prop="enterpriseContact" :rules="[{ required: false, message: '请填写联系人', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.enterpriseContact" placeholder="请填写联系人" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-divider content-position="left">
						<el-text tag="b" size="large">
							{{ state.expandForm.orderTypeCode === 'scjgjjb' ? '举报详情' : state.expandForm.orderTypeCode === 'scjgjts' ? '投诉详情' : null }}
						</el-text>
					</el-divider>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="商品分类/品牌" prop="brandCode" :rules="[{ required: false, message: '请选择商品分类/品牌', trigger: 'change' }]">
							<el-cascader
								:options="state.brandOptions"
								filterable
								:props="{ value: 'dicDataValue', label: 'dicDataName', emitPath: false }"
								placeholder="请选择商品分类/品牌"
								class="w100"
								v-model="state.expandForm.brandCode"
								ref="brandRef"
								@change="changeBrand"
								clearable
							>
							</el-cascader>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="客体类别" prop="objectClassifyCode" :rules="[{ required: true, message: '请选择客体类别', trigger: 'change' }]">
							<el-cascader
								:options="state.objectClassifyOptions"
								filterable
								:props="{ value: 'dicDataValue', label: 'dicDataName', emitPath: false }"
								placeholder="请选择客体类别"
								class="w100"
								v-model="state.expandForm.objectClassifyCode"
								ref="objectClassifyRef"
								@change="changeObjectClassify"
								clearable
							>
							</el-cascader>
						</el-form-item>
					</el-col>
					<!-- 只能填写数字，且只能填写非负数 -->
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="消费金额(元)" prop="amount" :rules="[{ required: true, message: '请填写消费金额', trigger: 'blur' }]">
							<el-input-number v-model="state.expandForm.amount" :min="0" placeholder="请填写消费金额" class="w100" />
						</el-form-item>
					</el-col>
					<!-- 举报展示 -->
					<template v-if="state.expandForm.orderTypeCode === 'scjgjjb'">
						<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
							<el-form-item
								label="举报问题类别"
								prop="reportClassifyCode"
								:rules="[{ required: true, message: '请选择举报问题类别', trigger: 'change' }]"
							>
								<el-cascader
									:options="state.reportClassifyOptions"
									filterable
									:props="{ value: 'dicDataValue', label: 'dicDataName', emitPath: false }"
									placeholder="请选择举报问题类别"
									class="w100"
									v-model="state.expandForm.reportClassifyCode"
									ref="problemCascadeRef"
									@change="changeProblems"
									clearable
								>
								</el-cascader>
							</el-form-item>
						</el-col>
					</template>
					<!-- 投诉展示 -->
					<template v-if="state.expandForm.orderTypeCode === 'scjgjts'">
						<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
							<el-form-item
								label="投诉问题类别"
								prop="complainClassifyCode"
								:rules="[{ required: true, message: '请选择投诉问题类别', trigger: 'change' }]"
							>
								<el-cascader
									:options="state.complainClassifyOptions"
									filterable
									:props="{ value: 'dicDataValue', label: 'dicDataName', emitPath: false }"
									placeholder="请选择投诉问题类别"
									class="w100"
									v-model="state.expandForm.complainClassifyCode"
									ref="problemCascadeRef"
									@change="changeProblems"
									clearable
								>
								</el-cascader>
							</el-form-item>
						</el-col>
					</template>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" v-if="state.expandForm.orderTypeCode === 'scjgjts'">
						<el-form-item label="争议发生时间" prop="occurrenceTime" :rules="[{ required: true, message: '请选择争议发生时间', trigger: 'change' }]">
							<el-date-picker
								v-model="state.expandForm.occurrenceTime"
								type="datetime"
								placeholder="请选择争议发生时间"
								class="w100"
								clearable
								value-format="YYYY-MM-DD[T]HH:mm:ss"
							/>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="销售方式" prop="salesModeObj" :rules="[{ required: true, message: '请选择销售方式', trigger: 'change' }]">
							<el-select
								v-model="state.expandForm.salesModeObj"
								value-key="dicDataValue"
								placeholder="请选择销售方式"
								clearable
								class="w100"
								@change="(val:any)=>{state.expandForm.salesMode = val?.dicDataName ?? null;
									state.expandForm.salesModeCode = val?.dicDataValue ?? null;state.expandForm.businessPosition = {};expandFormRef.resetFields('businessArea')}"
							>
								<el-option v-for="item in state.salesModeOptions" :key="item.dicDataValue" :label="item.dicDataName" :value="item" />
							</el-select>
						</el-form-item>
					</el-col>
					<!-- 售方式为“网购”时展示该字段且必填 -->
					<template v-if="state.expandForm.orderTypeCode === 'scjgjjb' && state.expandForm.salesModeCode === '114'">
						<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
							<el-form-item label="举报目标" prop="reportTargetObj" :rules="[{ required: true, message: '请选择举报目标', trigger: 'blur' }]">
								<el-select
									v-model="state.expandForm.reportTargetObj"
									placeholder="请选择举报目标"
									class="w100"
									clearable
									value-key="dicDataValue"
									@change="(val:any)=>{state.expandForm.reportTarget = val?.dicDataName ?? null;
									state.expandForm.reportTargetCode = val?.dicDataValue ?? null}"
								>
									<el-option v-for="item in state.affairTargetOptions" :key="item.dicDataValue" :label="item.dicDataName" :value="item" />
								</el-select>
							</el-form-item>
						</el-col>
					</template>
					<!-- 销售方式为“网购”时展示该字段且必填 -->
					<template v-if="state.expandForm.orderTypeCode === 'scjgjts' && state.expandForm.salesModeCode === '114'">
						<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
							<el-form-item label="投诉目标" prop="complainTargetObj" :rules="[{ required: true, message: '请选择投诉目标', trigger: 'blur' }]">
								<el-select
									v-model="state.expandForm.complainTargetObj"
									placeholder="请选择投诉目标"
									class="w100"
									clearable
									value-key="dicDataValue"
									@change="(val:any)=>{state.expandForm.complainTarget = val?.dicDataName ?? null;
									state.expandForm.complainTargetCode = val?.dicDataValue ?? null}"
								>
									<el-option v-for="item in state.affairTargetOptions" :key="item.dicDataValue" :label="item.dicDataName" :value="item" />
								</el-select>
							</el-form-item>
						</el-col>
					</template>

					<!-- 销售方式为“网购”时展示该字段且必填，支持模糊搜索，支持分级模式选择 -->
					<template v-if="state.expandForm.salesModeCode === '114'">
						<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
							<el-form-item label="电商平台" prop="eCommercePlatformCode" :rules="[{ required: true, message: '请选择电商平台', trigger: 'change' }]">
								<el-cascader
									:options="state.eCommercePlatformOptions"
									filterable
									:props="{ value: 'dicDataValue', label: 'dicDataName', emitPath: false }"
									placeholder="请选择电商平台"
									clearable
									class="w100"
									v-model="state.expandForm.eCommercePlatformCode"
									ref="eCommercePlatformRef"
									@change="changeECommercePlatform"
								>
								</el-cascader>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" v-if="state.expandForm.salesModeCode === '114'">
							<el-form-item label="订单号" prop="externalOrderNo" :rules="[{ required: true, message: '请填写订单号', trigger: 'blur' }]">
								<el-input v-model="state.expandForm.externalOrderNo" placeholder="请填写订单号" clearable> </el-input>
							</el-form-item>
						</el-col>
					</template>

					<!-- 销售方式为“现场”或者“电视电话购物及有够”时必填，先选择经营地址所属行政区划，后填写详细地址，行政区划展示本市所有区县名称即可 投诉并且销售方式为现场才会有经营地址 -->
					<template
						v-if="(state.expandForm.salesModeCode === '2' || state.expandForm.salesModeCode === '19') && state.expandForm.orderTypeCode === 'scjgjts'"
					>
						<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="6">
							<el-form-item label="经营地址" prop="businessArea" :rules="[{ required: true, message: '请选择经营地址', trigger: 'change' }]">
								<el-cascader
									:options="state.areaOptions"
									filterable
									:props="{ value: 'id', label: 'areaName', emitPath: false, checkStrictly: true }"
									placeholder="请选择经营地址"
									class="w100"
									v-model="state.expandForm.businessArea"
									ref="areaRef"
									@change="changeArea"
									clearable
								>
								</el-cascader>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="6">
							<el-form-item label="经营详细地址" prop="businessAddress" :rules="[{ required: true, message: '请填写经营详细地址', trigger: 'blur' }]">
								<el-input v-model="state.expandForm.businessAddress" placeholder="请填写经营详细地址" clearable> </el-input>
							</el-form-item>
						</el-col>
					</template>

					<!-- 销售方式为“电视购物”“电话购物”“邮购”时展示该字段-->
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" v-if="state.expandForm.salesModeCode === '19'">
						<el-form-item label="销售渠道" prop="salesChannelObj" :rules="[{ required: true, message: '请选择销售渠道', trigger: 'change' }]">
							<el-select
								v-model="state.expandForm.salesChannelObj"
								value-key="dicDataValue"
								placeholder="请选择销售渠道"
								clearable
								class="w100"
								@change="(val:any)=>{state.expandForm.salesChannel = val?.dicDataName ?? null;
									state.expandForm.salesChannelCode = val?.dicDataValue ?? null}"
							>
								<el-option v-for="item in state.salesChannelOptions" :key="item.dicDataValue" :label="item.dicDataName" :value="item" />
							</el-select>
						</el-form-item>
					</el-col>
					<!-- 投诉问题类别”为“专利”时展示该字段 -->
					<template v-if="state.isPatent">
						<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
							<el-form-item label="专利权人" prop="patentee" :rules="[{ required: false, message: '请填写专利权人', trigger: 'blur' }]">
								<el-input v-model="state.expandForm.patentee" placeholder="请填写专利权人" clearable> </el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
							<el-form-item label="发明名称" prop="patentName" :rules="[{ required: false, message: '请填写发明名称', trigger: 'blur' }]">
								<el-input v-model="state.expandForm.patentName" placeholder="请填发明名称" clearable> </el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
							<el-form-item label="专利类型" prop="patentTypeObj" :rules="[{ required: false, message: '请选择专利类型', trigger: 'blur' }]">
								<el-select
									v-model="state.expandForm.patentTypeObj"
									value-key="dicDataValue"
									clearable
									filterable
									placeholder="请选择专利类型"
									class="w100"
									@change="(val:any)=>{state.expandForm.patentType = val?.dicDataName ?? null;
									state.expandForm.patentTypeCode = val?.dicDataValue ?? null}"
								>
									<el-option v-for="item in state.patentTypeOptions" :key="item.dicDataValue" :label="item.dicDataName" :value="item" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
							<el-form-item label="专利号" prop="patentNo" :rules="[{ required: false, message: '请填写专利号', trigger: 'blur' }]">
								<el-input v-model="state.expandForm.patentNo" placeholder="请填写专利号" clearable> </el-input>
							</el-form-item>
						</el-col>
					</template>

					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="产品名称" prop="productName" :rules="[{ required: false, message: '请填写产品名称', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.productName" placeholder="请填写产品名称" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="批准文号" prop="approvalNumber" :rules="[{ required: false, message: '请填写批准文号', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.approvalNumber" placeholder="请填写批准文号" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="产品批号" prop="productBatchNo" :rules="[{ required: false, message: '请填写产品批号', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.productBatchNo" placeholder="请填写产品批号" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="产品规格" prop="productStandard" :rules="[{ required: false, message: '请填写产品规格', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.productStandard" placeholder="请填写产品规格" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="产品有效期" prop="productExpiredTime" :rules="[{ required: false, message: '请选择产品有效期', trigger: 'change' }]">
							<el-date-picker
								v-model="state.expandForm.productExpiredTime"
								type="date"
								placeholder="请选择产品有效期"
								class="w100"
								value-format="YYYY-MM-DD[T]HH:mm:ss"
							/>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="生产厂家" prop="manufacturer" :rules="[{ required: false, message: '请填写生产厂家', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.manufacturer" placeholder="请填写生产厂家" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="销售企业" prop="salesEnterprise" :rules="[{ required: false, message: '请填写销售企业', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.salesEnterprise" placeholder="请填写销售企业" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
						<el-form-item label="消费者地址" prop="consumerAddress" :rules="[{ required: false, message: '请填写消费者地址', trigger: 'blur' }]">
							<el-input v-model="state.expandForm.consumerAddress" placeholder="请填写消费者地址" clearable> </el-input>
						</el-form-item>
					</el-col>
					<!-- 投诉展示 -->
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-if="state.expandForm.orderTypeCode === 'scjgjts'">
						<el-form-item label="诉求" prop="complainTypes" :rules="[{ required: false, message: '请选择诉求', trigger: 'change' }]">
							<el-checkbox-group v-model="state.expandForm.complainTypes">
								<el-checkbox v-for="item in state.complainTypeOptions" :key="item.key" :value="item">{{ item.value }}</el-checkbox>
							</el-checkbox-group>
						</el-form-item>
					</el-col>
				</template>
			</el-row>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="state.dialogVisible = false" class="default-button">取 消</el-button>
				<el-button type="primary" @click="saveExpandForm(expandFormRef)" :loading="state.loading">保 存</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts" name="oderExpandForm">
import { reactive, ref, computed, watch } from 'vue';
import other from '@/utils/other';
import { ElMessage, FormInstance } from 'element-plus';
const emit = defineEmits(['saveExpandForm']);
const props = defineProps({
	extra: {
		type: Object,
		default: () => {
			return {};
		},
	},
	orderDetail: {
		type: Object,
		default: () => {
			return {};
		},
	},
});
// 定义变量内容
const state = reactive<any>({
	dialogVisible: false,
	expandForm: {
		orderTypeObj: null,
		orderType: null, // 工单类型
		orderTypeCode: null, // 工单类型code
		mailAmount: 0, // 涉及金额
		exchAmount: 0, // 交易金额
		mailIsContacted: false, // 是否联系快递公司投诉
		licenceType: null, //证件类型
		licenceTypeCode: null, //证件类型code
		licenceNo: null, //证件号码
		identityType: null, //提供方类型
		identityTypeCode: null, //提供方类型code
		identity: null, //提供方身份
		identityCode: null, // 提供方身份code
		nationality: null, //国籍/地区
		nationalityCode: null, //国籍/地区code
		nation: null, //民族
		nationCode: null, //民族code
		postalCode: null, //邮政编码
		email: null, //电子邮箱
		otherContact: null, //其他联系方式
		enterpriseName: null, //企业名称
		unifiedSocialCreditCode: null, //统一社会信用代码
		registerAddress: null, //注册地址
		registerNumber: null, //注册号
		enterpriseContact: null, //企业联系人
		marketType: null, //市场主体类型
		marketTypeCode: null, //市场主体类型code
		industryClassify: null, //行业分类
		industryClassifyCode: null, //行业分类code
		brand: null, //商品分类/品牌
		brandCode: null, //商品分类/品牌code
		amount: 0, // 消费金额
		objectClassify: null, //客体类别
		objectClassifyCode: null, //客体类别code
		objectName: null, //客体名称
		reportClassifyCode: null, //举报问题类别code
		reportClassify: null, //举报问题类别
		complainClassifyCode: null, //投诉问题类别code
		occurrenceTime: null, //争议发生时间
		salesMode: null, //销售方式
		salesModeCode: null, //销售方式code
		reportTarget: null, //举报目标
		reportTargetCode: null, //举报目标code
		affairTarget: null, //投诉目标
		affairTargetCode: null, //投诉目标code
		eCommercePlatform: null, //电商平台
		eCommercePlatformCode: null, //电商平台code
		externalOrderNo: null, //外部订单号
		businessArea: null, //经营地区
		businessAddress: null, //经营地址
		channel: null, //渠道
		patentee: null, //专利权人
		patentName: null, //专利名称
		patentType: null, //专利类型
		patentTypeCode: null, //专利类型code
		patentNo: null, //专利号
		productName: null, //产品名称
		approvalNumber: null, //批准文号
		productModel: null, //产品型号
		productBatchNo: null, //产品批号
		productSpecification: null, //产品规格
		productExpiredTime: null, //产品有效期
		manufacturer: null, //生产企业
		salesEnterprise: null, //销售企业
		consumerAddress: null, //消费者地址
		complainTypes: [], //诉求
		businessPosition: {}, //经营地址
	},
	licenceTypeOptions: [], //证件类型
	identityTypeOptions: [], //提供方类型
	identityOptions: [], //提供方身份
	nationalityOptions: [], //国籍/地区
	nationOptions: [], //民族
	marketTypeOptions: [], //市场主体类型
	industryClassifyOptions: [], //行业分类
	brandOptions: [], //商品分类/品牌
	objectClassifyOptions: [], //客体类别
	complainClassifyOptions: [], //投诉问题类别
	reportClassifyOptions: [], //举报问题类别
	salesModeOptions: [], //销售方式
	salesChannelOptions: [], //销售渠道
	affairTargetOptions: [], //举报 / 投诉目标
	eCommercePlatformOptions: [], //电商平台
	patentTypeOptions: [], //专利类型
	complainTypeOptions: [], // 诉求列表
	areaOptions: [], //省市区
	isPatent: false, // 举报或者投诉问题类别为专利
	validated: false, // 是否验证通过
	isValidate: false, // 是否需要验证
	loading: false, // 保存按钮loading
});
// 证件号码验证
const licenceNoPattern = computed(() => {
	switch (state.expandForm.licenceTypeCode) {
		case '10': // 身份证
			return /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/;

		default: //默认只允许数字字母
			return /^[A-Za-z0-9]+$/;
	}
});
/**
 * @description: 打开弹窗
 * @param {boolean} isValidate
 * @return {*}
 */
const openDialog = async (isValidate?: boolean) => {
	state.isValidate = isValidate;
	state.dialogVisible = true;
	loadForm(props.orderDetail); // 加载表单内容
};
// 打开表单如果需要立即校验
const expandFormRef = ref<RefType>();
const opened = async () => {
	if (state.isValidate) {
		// 如果需要验证
		ElMessage.warning('请确认扩展表单信息');
		closed(expandFormRef.value);
	} else {
		expandFormRef.value.clearValidate();
	}
};
// 弹窗关闭时校验一次表单
const closed = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate((valid: boolean) => {
		state.validated = valid;
		if (!valid) return;
	});
};
// 选择举报或者投诉问题目
const problemCascadeRef = ref<RefType>();
const changeProblems = () => {
	let currentNode = problemCascadeRef.value.getCheckedNodes();
	if (currentNode && currentNode[0]) {
		if (state.expandForm.orderTypeCode == 'scjgjjb') {
			//举报
			state.expandForm.reportClassify = currentNode[0].label;
			state.isPatent = currentNode[0].parent?.value === '26';
		} else if (state.expandForm.orderTypeCode == 'scjgjts') {
			// 投诉
			state.expandForm.complainClassify = currentNode[0].label;
			state.isPatent = currentNode[0].parent?.value === '2000';
		}
	}
};
// 选择市场主体类型
const marketTypeRef = ref<RefType>();
const changeMarketType = () => {
	let currentNode = marketTypeRef.value.getCheckedNodes();
	state.expandForm.marketType = currentNode[0]?.label;
};
// 选择行业分类
const industryClassifyRef = ref<RefType>();
const changeIndustryClassify = () => {
	let currentNode = industryClassifyRef.value.getCheckedNodes();
	state.expandForm.industryClassify = currentNode[0]?.label;
};
// 选择商品分类/品牌
const brandRef = ref<RefType>();
const changeBrand = () => {
	let currentNode = brandRef.value.getCheckedNodes();
	state.expandForm.brand = currentNode[0]?.label;
};
// 选择客体类别
const objectClassifyRef = ref<RefType>();
const changeObjectClassify = () => {
	let currentNode = objectClassifyRef.value.getCheckedNodes();
	state.expandForm.objectClassify = currentNode[0]?.label;
};
// 电商平台
const eCommercePlatformRef = ref<RefType>();
const changeECommercePlatform = () => {
	let currentNode = eCommercePlatformRef.value.getCheckedNodes();
	state.expandForm.eCommercePlatform = currentNode[0]?.label;
};
// 经营地址选择
const areaRef = ref<RefType>();
const changeArea = () => {
	const currentNode = areaRef.value.getCheckedNodes();
	state.expandForm.businessPosition.address = currentNode[0]?.pathLabels.join('');
};
// 保存拓展表单
const saveExpandForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate((valid: boolean) => {
		state.validated = valid;
		if (!valid) return;
		let submitObj = other.deepClone(state.expandForm);
		if (submitObj.businessArea) {
			// 经营地址
			submitObj.businessPosition.street = submitObj.businessAddress ?? null;
			submitObj.businessPosition.areaCode = submitObj.businessArea ?? null;
		} else {
			submitObj.businessPosition = null;
		}
		Reflect.deleteProperty(submitObj, 'licenceObj'); // 删除无用的参数
		Reflect.deleteProperty(submitObj, 'identityTypeObj'); // 删除无用的参数
		Reflect.deleteProperty(submitObj, 'identityObj'); // 删除无用的参数
		Reflect.deleteProperty(submitObj, 'nationalityObj'); // 删除无用的参数
		Reflect.deleteProperty(submitObj, 'nationObj'); // 删除无用的参数
		Reflect.deleteProperty(submitObj, 'salesModeObj'); // 删除无用的参数
		Reflect.deleteProperty(submitObj, 'patentTypeObj'); // 删除无用的参数
		Reflect.deleteProperty(submitObj, 'complainTargetObj'); // 删除无用的参数
		Reflect.deleteProperty(submitObj, 'reportTargetObj'); // 删除无用的参数
		Reflect.deleteProperty(submitObj, 'salesChannelObj'); // 删除无用的参数
		Reflect.deleteProperty(submitObj, 'orderTypeObj'); // 删除无用的参数
		console.log(submitObj, '提交的参数');
		emit('saveExpandForm', submitObj);
		closeDialog();
	});
};
watch(
	() => props.extra,
	(newVal) => {
		state.licenceTypeOptions = newVal.ext.licenceTypeOptions ?? []; // 证件类型
		state.identityTypeOptions = newVal.ext.identityTypeOptions ?? []; // 提供方类型
		state.identityOptions = newVal.ext.identityOptions ?? []; // 提供方身份
		state.nationalityOptions = newVal.ext.nationalityOptions ?? []; // 国籍/地区
		state.nationOptions = newVal.ext.nationOptions ?? []; // 民族
		state.marketTypeOptions = newVal.ext.marketTypeOptions ?? []; // 市场主体类型
		state.eCommercePlatformOptions = newVal.ext.eCommercePlatformOptions ?? []; // 电商平台
		state.industryClassifyOptions = newVal.ext.industryClassifyOptions ?? []; // 行业分类
		state.brandOptions = newVal.ext.brandOptions ?? []; // 商品分类/品牌
		state.objectClassifyOptions = newVal.ext.objectClassifyOptions ?? []; // 客体类别
		state.complainClassifyOptions = newVal.ext.complainClassifyOptions ?? []; // 投诉问题类别
		state.salesModeOptions = newVal.ext.salesModeOptions ?? []; // 销售方式
		state.salesChannelOptions = newVal.ext.salesChannelOptions ?? []; // 销售渠道
		state.affairTargetOptions = newVal.ext.affairTargetOptions ?? []; // /举报 / 投诉目标
		state.reportClassifyOptions = newVal.ext.reportClassifyOptions ?? []; // 举报问题类别
		state.complainTypeOptions = newVal.ext.complainTypeOptions ?? []; // 诉求列表
		state.patentTypeOptions = newVal.ext.patentTypeOptions ?? []; // 专利类型
		state.areaOptions = newVal.ext?.area ?? []; //省市区数据
		state.orderTypeOptions = newVal.ext.orderTypeOptions ?? []; // 工单类型
	},
	{
		immediate: true,
	}
);
const loadForm = (newVal: any) => {
	state.expandForm = newVal.orderExtension ?? {};
	state.expandForm.complainTypes = newVal.orderExtension?.complainTypes ?? [];
	if (state.expandForm.orderTypeCode) {
		state.expandForm.orderTypeObj = {
			//工单类型
			dicDataValue: state.expandForm.orderTypeCode,
			dicDataName: state.expandForm.orderType,
		};
	}
	if (state.expandForm.businessPosition && state.expandForm.businessPosition.areaCode) {
		// 经营地址
		state.expandForm.businessArea = state.expandForm.businessPosition.areaCode;
		state.expandForm.businessAddress = state.expandForm.businessPosition.street;
	} else {
		state.expandForm.businessPosition = {};
	}
	if (state.expandForm.licenceTypeCode) {
		state.expandForm.licenceObj = {
			//证件类型
			dicDataValue: state.expandForm.licenceTypeCode,
			dicDataName: state.expandForm.licenceType,
		};
	}
	if (state.expandForm.identityTypeCode) {
		state.expandForm.identityTypeObj = {
			//提供方类型
			dicDataValue: state.expandForm.identityTypeCode,
			dicDataName: state.expandForm.identityType,
		};
	}
	if (state.expandForm.identityCode) {
		state.expandForm.identityObj = {
			//提供方身份
			dicDataValue: state.expandForm.identityCode,
			dicDataName: state.expandForm.identity,
		};
	}
	if (state.expandForm.nationalityCode) {
		state.expandForm.nationalityObj = {
			//国籍/地区
			dicDataValue: state.expandForm.nationalityCode,
			dicDataName: state.expandForm.nationality,
		};
	}
	if (state.expandForm.nationCode) {
		state.expandForm.nationObj = {
			//民族
			dicDataValue: state.expandForm.nationCode,
			dicDataName: state.expandForm.nation,
		};
	}
	if (state.expandForm.salesModeCode) {
		state.expandForm.salesModeObj = {
			//销售方式
			dicDataValue: state.expandForm.salesModeCode,
			dicDataName: state.expandForm.salesMode,
		};
	}
	if (state.expandForm.complainTargetCode) {
		state.expandForm.complainTargetObj = {
			//投诉目标
			dicDataValue: state.expandForm.complainTargetCode,
			dicDataName: state.expandForm.complainTarget,
		};
	}

	if (state.expandForm.reportClassifyCode) {
		state.expandForm.reportClassifyObj = {
			//举报问题类别
			dicDataValue: state.expandForm.reportClassifyCode,
			dicDataName: state.expandForm.reportClassify,
		};
	}
	if (state.expandForm.reportTargetCode) {
		state.expandForm.reportTargetObj = {
			//举报目标
			dicDataValue: state.expandForm.reportTargetCode,
			dicDataName: state.expandForm.reportTarget,
		};
	}
	if (state.expandForm.salesChannelCode) {
		state.expandForm.salesChannelObj = {
			//销售渠道
			dicDataValue: state.expandForm.salesChannelCode,
			dicDataName: state.expandForm.salesChannel,
		};
	}
	if (state.expandForm.patentTypeCode) {
		//专利类型
		state.expandForm.patentTypeObj = {
			dicDataValue: state.expandForm.patentTypeCode,
			dicDataName: state.expandForm.patentType,
		};
	}
};
// 关闭弹窗
const closeDialog = () => {
	state.dialogVisible = false;
};
// 暴露变量
defineExpose({
	openDialog,
	closeDialog,
	closed,
	state,
});
</script>
<style lang="scss">
.expand-from-dialog {
	pointer-events: auto;
	margin: 0 !important;
	position: absolute;
	top: 10vh;
	left: 10%;
}
</style>
