<template>
	<el-dialog v-model="state.dialogVisible" width="80%" draggable title="拓展信息" append-to-body @closed="closed" @opened="opened">
		<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="24" :md="8" :lg="6" :xl="6">
					<el-form-item label="工单类型" class="mb5"> 12315市场监管局受理单 </el-form-item>
				</el-col>
				<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="6">
					<el-form-item label="受理类型" class="mb5">
						{{ state.acceptTypeCode === '30' ? '举报' : state.acceptTypeCode === '35' ? '投诉' : '' }}
					</el-form-item>
				</el-col>
				<el-divider content-position="left">
          <b class="formTitle">{{ state.acceptTypeCode === '30' ? '举报人信息' : state.acceptTypeCode === '35' ? '投诉人信息' : '' }}</b>
        </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) => {
									state.expandForm.licenceType = val.dicDataName;
									state.expandForm.licenceTypeCode = val.dicDataValue;
								}
							"
						>
							<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) => {
									state.expandForm.identityType = val.dicDataName;
									state.expandForm.identityTypeCode = val.dicDataValue;
								}
							"
						>
							<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) => {
									state.expandForm.identity = val.dicDataName;
									state.expandForm.identityCode = val.dicDataValue;
								}
							"
						>
							<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) => {
									state.expandForm.nationality = val.dicDataName;
									state.expandForm.nationalityCode = val.dicDataValue;
								}
							"
						>
							<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) => {
									state.expandForm.nation = val.dicDataName;
									state.expandForm.nationCode = val.dicDataValue;
								}
							"
						>
							<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">
          <b class="formTitle">{{ state.acceptTypeCode === '30' ? '举报对象信息' : state.acceptTypeCode === '35' ? '投诉对象信息' : '' }}</b>
        </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="unifiedSocialCreditCode"
						: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="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="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-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"
						>
						</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"
						>
						</el-cascader>
					</el-form-item>
				</el-col>
				<el-divider content-position="left">
          <b class="formTitle">{{ state.acceptTypeCode === '30' ? '举报详情' : state.acceptTypeCode === '35' ? '投诉详情' : '' }}</b>
        </el-divider>
				<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
					<el-form-item label="商品分类/品牌" prop="brandCode" :rules="[{ required: true, 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"
						>
						</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 v-model="state.expandForm.amount" placeholder="请填写消费金额" clearable> </el-input> -->
						<el-input-number v-model="state.expandForm.amount" :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="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"
						>
						</el-cascader>
					</el-form-item>
				</el-col>
				<!-- 举报展示 -->
				<template v-if="state.acceptTypeCode === '30'">
					<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"
							>
							</el-cascader>
						</el-form-item>
					</el-col>
				</template>
				<!-- 投诉展示 -->
				<template v-if="state.acceptTypeCode === '35'">
					<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"
							>
							</el-cascader>
						</el-form-item>
					</el-col>
				</template>
				<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" v-if="state.acceptTypeCode === '35'">
					<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"
						/>
						<!-- value-format="YYYY-MM-DD 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;
									state.expandForm.salesModeCode = val.dicDataValue}"
						>
							<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.acceptTypeCode === '30' && 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;
									state.expandForm.reportTargetCode = val.dicDataValue}"
							>
								<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.acceptTypeCode === '35' && 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;
									state.expandForm.complainTargetCode = val.dicDataValue}"
							>
								<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.acceptTypeCode === '35'">
					<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"
							>
							</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="salesModeObj" :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;
									state.expandForm.salesChannelCode = val.dicDataValue}"
						>
							<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;
									state.expandForm.patentTypeCode = val.dicDataValue}"
							>
								<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.acceptTypeCode === '35'">
					<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.id" :label="item">{{ item.name }}</el-checkbox>
						</el-checkbox-group>
					</el-form-item>
				</el-col>
			</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 { useRoute } from 'vue-router';
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,
	acceptTypeCode: '30', // 受理类型 30: 举报 35: 投诉
	expandForm: {
		licenceType: '', //证件类型
		licenceTypeCode: '', //证件类型code
		licenceNo: '', //证件号码
		identityType: '', //提供方类型
		identityTypeCode: '', //提供方类型code
		identity: '', //提供方身份
		identityCode: '', // 提供方身份code
		nationality: '', //国籍/地区
		nationalityCode: '', //国籍/地区code
		nation: '', //民族
		nationCode: '', //民族code
		postalCode: '', //邮政编码
		email: '', //电子邮箱
		otherContact: '', //其他联系方式
		enterpriseName: '', //企业名称
		unifiedSocialCreditCode: '', //统一社会信用代码
		registerAddress: '', //注册地址
		registerNumber: '', //注册号
		enterpriseContact: '', //企业联系人
		marketType: '', //市场主体类型
		marketTypeCode: '', //市场主体类型code
		industryClassify: '', //行业分类
		industryClassifyCode: '', //行业分类code
		brand: '', //商品分类/品牌
		brandCode: '', //商品分类/品牌code
		amount: 0, // 消费金额
		objectClassify: '', //客体类别
		objectClassifyCode: '', //客体类别code
		objectName: '', //客体名称
		reportClassifyCode: '', //举报问题类别code
		reportClassify: '', //举报问题类别
		complainClassifyCode: '', //投诉问题类别code
		occurrenceTime: '', //争议发生时间
		salesMode: '', //销售方式
		salesModeCode: '', //销售方式code
		reportTarget: '', //举报目标
		reportTargetCode: '', //举报目标code
		affairTarget: '', //投诉目标
		affairTargetCode: '', //投诉目标code
		eCommercePlatform: '', //电商平台
		eCommercePlatformCode: '', //电商平台code
		externalOrderNo: '', //外部订单号
		businessArea: '', //经营地区
		businessAddress: '', //经营地址
		channel: '', //渠道
		patentee: '', //专利权人
		patentName: '', //专利名称
		patentType: '', //专利类型
		patentTypeCode: '', //专利类型code
		patentNo: '', //专利号
		productName: '', //产品名称
		approvalNumber: '', //批准文号
		productModel: '', //产品型号
		productBatchNo: '', //产品批号
		productSpecification: '', //产品规格
		productExpiredTime: '', //产品有效期
		manufacturer: '', //生产企业
		salesEnterprise: '', //销售企业
		consumerAddress: '', //消费者地址
		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 route = useRoute(); // 路由
// 证件号码验证
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 {number} type  5: 举报 6: 投诉
 * @param {boolean} isValidate
 * @return {*}
 */
const openDialog = async (type: any, isValidate?: boolean) => {
	state.acceptTypeCode = type;
	state.isValidate = isValidate;
	state.dialogVisible = true;
};
// 打开表单如果需要立即校验
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 (state.acceptTypeCode == '30') {
		//举报
		state.expandForm.reportClassify = currentNode[0].label;
		state.isPatent = currentNode[0].parent?.value === '26';
	} else if (state.acceptTypeCode == '35') {
		// 投诉
		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 ?? '';
			submitObj.businessPosition.areaCode = submitObj.businessArea ?? '';
		}
		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'); // 删除无用的参数
		console.log(submitObj, '提交的参数');
		emit('saveExpandForm', submitObj);
		closeDialog();
	});
};
watch(
	() => props.extra,
	(newVal, oldValue) => {
		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.area ?? []; //省市区数据
	}
);
watch(
	() => props.orderDetail,
	(newVal, oldValue) => {

		if (newVal.orderType === 1) {
			// 12315工单
			if (newVal.acceptTypeCode === '30') {
				// 举报
				state.expandForm = newVal.orderReport ?? {};
			} else if (newVal.acceptTypeCode === '35') {
				// 投诉
				state.expandForm = newVal.orderComplain ?? {};
				if (!state.expandForm.businessPosition) {
					state.expandForm.businessPosition = {};
				}
				if (state.expandForm.businessPosition && state.expandForm.businessPosition.areaCode) {
					// 经营地址
					state.expandForm.businessArea = state.expandForm.businessPosition.areaCode;
					state.expandForm.businessAddress = state.expandForm.businessPosition.street;
				}
			}
			state.expandForm.licenceObj = {
				//证件类型
				dicDataValue: state.expandForm.licenceTypeCode,
				dicDataName: state.expandForm.licenceType,
			};
			state.expandForm.identityTypeObj = {
				//提供方类型
				dicDataValue: state.expandForm.identityTypeCode,
				dicDataName: state.expandForm.identityType,
			};
			state.expandForm.identityObj = {
				//提供方身份
				dicDataValue: state.expandForm.identityCode,
				dicDataName: state.expandForm.identity,
			};
			state.expandForm.nationalityObj = {
				//国籍/地区
				dicDataValue: state.expandForm.nationalityCode,
				dicDataName: state.expandForm.nationality,
			};
			state.expandForm.nationObj = {
				//民族
				dicDataValue: state.expandForm.nationCode,
				dicDataName: state.expandForm.nation,
			};
			state.expandForm.salesModeObj = {
				//销售方式
				dicDataValue: state.expandForm.salesModeCode,
				dicDataName: state.expandForm.salesMode,
			};
			state.expandForm.complainTargetObj = {
				//投诉目标
				dicDataValue: state.expandForm.complainTargetCode,
				dicDataName: state.expandForm.complainTarget,
			};
			state.expandForm.reportTargetObj = {
				//举报目标
				dicDataValue: state.expandForm.reportTargetCode,
				dicDataName: state.expandForm.reportTarget,
			};
			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" scoped></style>
