<template>
	<el-dialog v-model="state.dialogVisible" draggable title="拓展信息" ref="dialogRef" width="60%" append-to-body>
		<el-form label-width="130px" ref="ruleFormRef" class="show-info-form expanded-form">
      <el-form-item label="工单类型"> {{ state.ruleForm.orderType }} </el-form-item>
			<!-- （1）医疗服务中心受理单 -->
			<template v-if="state.ruleForm.orderTypeCode === 'yl'">
				<el-row>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
						<el-form-item label="医院名称"> {{ state.ruleForm.medName }} </el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
						<el-form-item label="医院地址"> {{ state.ruleForm.medAddress }} </el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
						<el-form-item label="科室"> {{ state.ruleForm.medDepartment }} </el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
						<el-form-item label="医生"> {{ state.ruleForm.medDoctor }} </el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
						<el-form-item label="病人姓名"> {{ state.ruleForm.medPatient }} </el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
						<el-form-item label="就诊卡号"> {{ state.ruleForm.medNo }} </el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
						<el-form-item label="身份证号"> {{ state.ruleForm.medIdNo }} </el-form-item>
					</el-col>
				</el-row>
			</template>
			<!-- （2）电视购物及商铺购买退换货中心受理单 -->
			<template v-if="state.ruleForm.orderTypeCode === 'th'">
        <el-row>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="电视台（商铺）"> {{ state.ruleForm.exchTv }} </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="购买时间"> {{ formatDate(state.ruleForm.exchTradeTime, '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.exchProduct }} </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="消费金额"> ￥{{ state.ruleForm.exchAmount }} </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="商家名称"> {{ state.ruleForm.exchName }} </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="商家地址"> {{ state.ruleForm.exchAddress }} </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="收货人"> {{ state.ruleForm.exchConsignee }} </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="收货地址"> {{ state.ruleForm.exchConsigneeAddress }} </el-form-item>
          </el-col>
        </el-row>
      </template>
			<!-- （3）电视台虚假广告中心受理单 -->
			<template v-if="state.ruleForm.orderTypeCode === 'xjgg'">
        <el-row>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="电视台"> {{ state.ruleForm.adTv }} </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="产品名称"> {{ state.ruleForm.adProduct }} </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="虚假广告内容"> {{ state.ruleForm.adContent }} </el-form-item>
          </el-col>
        </el-row>
      </template>
			<!-- （4）高速公路投诉中心受理单 -->
			<template v-if="state.ruleForm.orderTypeCode === 'gsgl'">
        <el-row>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="高速入口"> {{ state.ruleForm.expwyEntrance }} </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="高速出口"> {{ state.ruleForm.expwyExit }} </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="发生时间"> {{ formatDate(state.ruleForm.expwyTime, '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.expwyNo }} </el-form-item>
          </el-col>
        </el-row>
      </template>
			<!-- （5）四川政务服务网技术中心受理单 -->
			<template v-if="state.ruleForm.orderTypeCode === 'zwfw'">
        <el-row>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="服务网账号"> {{ state.ruleForm.zwfwwAccount }} </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="联系方式"> {{ state.ruleForm.zwfwwContact }} </el-form-item>
          </el-col>
        </el-row>
      </template>
			<!-- （6）四川省12366热线诉求交办单 -->
			<template v-if="state.ruleForm.orderTypeCode === 'swfwsq'">
        <el-row>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="主管税务机关"> {{ state.ruleForm.location12366Sq }} </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="被投诉单位或个人信息" label-width="160"> {{ state.ruleForm.info12366Sq }} </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="投诉类型"> {{ state.ruleForm.type12366Sq }} </el-form-item>
          </el-col>
        </el-row>
      </template>
			<!-- （7）四川省12366热线咨询交办单 -->
			<template v-if="state.ruleForm.orderTypeCode === 'swfwzx'">
        <el-row>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="主管税务机关"> {{ state.ruleForm.location12366Zx }} </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="被投诉单位或个人信息" label-width="160"> {{ state.ruleForm.info12366Zx }} </el-form-item>
          </el-col>
        </el-row>
      </template>
			<!-- （8）12328服务监督中心受理单 -->
			<template v-if="state.ruleForm.orderTypeCode === 'jtfwjd'">
        <el-row>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="受理方式"> {{ state.ruleForm.acceptType12328 }} </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="客户"> {{ state.ruleForm.client12328 }} </el-form-item>
          </el-col>
        </el-row>
      </template>
			<!-- （9）邮政业消费者申诉受理单 -->
			<template v-if="state.ruleForm.orderTypeCode === 'yzxf'">
        <el-row>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="申诉人姓名"> {{ state.ruleForm.mailClaimantName }} </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="申诉人电话"> {{ state.ruleForm.mailClaimantPhone }} </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="申诉企业"> {{ state.ruleForm.mailClaimantEnterprise }} </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="寄件人姓名"> {{ state.ruleForm.mailSenderName }} </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="寄件人电话"> {{ state.ruleForm.mailSenderPhone }} </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="寄件人地址"> {{ state.ruleForm.mailSenderAddress }} </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="收件人姓名"> {{ state.ruleForm.mailReceiverName }} </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="收件人电话"> {{ state.ruleForm.mailReceiverPhone }} </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="收件人地址"> {{ state.ruleForm.mailReceiverAddress }} </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="涉及金额"> ￥{{ state.ruleForm.mailAmount }} </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="是否联系快递公司投诉" label-width="160"> {{ state.ruleForm.mailIsContacted ? '是' : '否' }} </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="处理结果"> {{ state.ruleForm.mailResult }} </el-form-item>
          </el-col>
        </el-row>
      </template>
			<!-- （10）环保举报业务受理单 -->
			<template v-if="state.ruleForm.orderTypeCode === 'hbjb'">
        <el-row>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="邮箱"> {{ state.ruleForm.epEmail }} </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="通讯地址"> {{ state.ruleForm.epAddress }} </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="举报对象"> {{ state.ruleForm.epObject }} </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="详细地址"> {{ state.ruleForm.epObjectAddress }} </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="行业类型"> {{ state.ruleForm.epIndustryType }} </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="重点要素"> {{ state.ruleForm.epKeyPoint }} </el-form-item>
          </el-col>
        </el-row>
      </template>
			<!-- （11）12315 市场监管局受理单【投诉】 （12）12315 市场监管局受理单【举报】-->
			<template v-if="['scjgjts', 'scjgjjb'].includes(state.ruleForm.orderTypeCode)">
        <el-divider content-position="left">
          <el-text tag="b" size="large"> {{
              state.ruleForm.orderTypeCode === 'scjgjjb' ? '举报人信息' : state.ruleForm.orderTypeCode === 'scjgjts' ? '投诉人信息' : null
            }} </el-text>
        </el-divider>
        <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-divider content-position="left">
          <el-text tag="b" size="large"> {{
              state.ruleForm.orderTypeCode === 'scjgjjb' ? '举报对象信息' : state.ruleForm.orderTypeCode === 'scjgjts' ? '投诉对象信息' : ''
            }} </el-text>
        </el-divider>
        <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-divider content-position="left">
          <el-text tag="b" size="large"> {{ state.ruleForm.orderTypeCode === 'scjgjjb' ? '举报详情' : state.ruleForm.orderTypeCode === 'scjgjts' ? '投诉详情' : null }} </el-text>
        </el-divider>
        <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.orderTypeCode === 'scjgjjb'">
            <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.orderTypeCode === 'scjgjts'">
            <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.orderTypeCode === 'scjgjjb'">
            <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.orderTypeCode === 'scjgjts'">
            <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.salesChannel }} </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.orderTypeCode === 'scjgjts'">
            <el-form-item label="诉求">
              <span v-for="item in state.ruleForm.complainTypes" :key="item.key" class="mr8">{{ item.value }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </template>
		</el-form>
		<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: null, // 工单类型
		acceptTypeText: null, // 受理类型
		licenceType: null, // 证件类型
		licenceNo: null, // 证件号码
		identityType: null, // 提供方类型
		identity: null, // 提供放身份
		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>
.expanded-form{
	:deep(.el-form-item__content){
		word-break: break-all;
	}
}
</style>