dev/dcp-web-gate/src_old/views/ExhibitionService/ExhibitionServiceDetail.vue

<template>
	<div class="autoBox box" style="min-height: 900px; position: relative">
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{ path: 'home' }">{{
					$t('common.Home')
				}}</el-breadcrumb-item>
				<el-breadcrumb-item :to="{ path: 'exhibitionService2' }"
					>{{ $t('common.ExhibitionService') }}
				</el-breadcrumb-item>
				<el-breadcrumb-item>{{
					$t('common.ExhibitionServiceDetail')
				}}</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="ui-body" v-if="$i18n.locale == 'zh'">
			<div class="ui-left">
				<h3 :title="listDetail.name">{{ listDetail.name }}</h3>
				<div class="ui-infos">
					<ul class="ui-uls">
						<li class="ui-ul-li">
							<div class="ui-li-left">
								<div class="ui-info-left">举办时间:</div>
								<div class="ui-info-right">
									{{ listDetail.validityStartDate | time('YYYY-MM-DD') }} --
									{{ listDetail.validityEndDate | time('YYYY-MM-DD') }}
								</div>
							</div>
							<div class="ui-li-right">
								<div class="ui-info-left">举办地区:</div>
								<div class="ui-info-rights" :title="listDetail.region">
									{{ listDetail.region }}
								</div>
							</div>
						</li>
						<li class="ui-ul-li">
							<div class="ui-li-left">
								<div class="ui-info-left">举办地点:</div>
								<div class="ui-info-right" :title="listDetail.place">
									{{ listDetail.place }}
								</div>
							</div>
							<div class="ui-li-right">
								<div class="ui-info-left">展商数量:</div>
								<div
									class="ui-info-right"
									:title="listDetail.showbusinessNumber"
								>
									{{ listDetail.showbusinessNumber }}
								</div>
							</div>
						</li>
						<li class="ui-ul-info">
							<div class="ui-info-left">主办单位:</div>
							<div class="ui-info-right" :title="listDetail.company">
								{{ listDetail.company }}
							</div>
						</li>
						<li class="ui-ul-info">
							<div class="ui-info-left">承办单位:</div>
							<div class="ui-info-right" :title="listDetail.undertakeCompany">
								{{ listDetail.undertakeCompany }}
							</div>
						</li>
						<li class="ui-ul-info">
							<div class="ui-info-left">会展面积:</div>
							<div class="ui-info-right" :title="listDetail.area">
								{{ listDetail.area }}万平
							</div>
						</li>
					</ul>
				</div>
				<div class="user-btn">
					<el-button type="primary" @click="toJoin(listDetail.extendTwo)"
						>参展报名</el-button
					>
					<el-button
						v-if="yunShang"
						plain
						@click="toTop(listDetail.exhibitionHallUrl)"
						>云上展厅</el-button
					>
				</div>
				<div class="user-info" v-html="listDetail.introduceHtml"></div>
				<div class="to-user-detail" @click="aboutInfo">
					<span style="cursor: hand">相关会议</span>
				</div>
				<el-dialog
					title="参展报名"
					:visible.sync="dialogFormVisible"
					:close-on-click-modal="false"
					style="width: 100%"
					:append-to-body="true"
					:destroy-on-close="destroyOnClose"
				>
					<el-form :model="dynamicValidateForm" ref="dynamicValidateForm">
						<el-form-item
							label="展位性质"
							:label-width="formLabelWidth"
							prop="radio"
						>
							<el-radio-group v-model="dynamicValidateForm.radio" size="medium">
								<el-radio label="参展商"></el-radio>
								<el-radio label="参展观众"></el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item
							label="企业名称"
							:label-width="formLabelWidth"
							prop="unitName"
							:rules="[
								{ required: true, message: '请输入企业名称', trigger: 'blur' },
							]"
						>
							<el-input
								v-model="dynamicValidateForm.unitName"
								placeholder="请输入企业名称"
							></el-input>
						</el-form-item>
						<el-form-item
							label="联系人"
							:label-width="formLabelWidth"
							prop="contact"
							:rules="[
								{ required: true, message: '请输入联系人', trigger: 'blur' },
							]"
						>
							<el-input
								v-model="dynamicValidateForm.contact"
								placeholder="请输入联系人"
							></el-input>
						</el-form-item>
						<el-form-item
							label="电话"
							:label-width="formLabelWidth"
							prop="mobile"
							:rules="[
								{ required: true, message: '请输入电话', trigger: 'blur' },
							]"
						>
							<el-input
								v-model="dynamicValidateForm.mobile"
								placeholder="请输入电话"
							></el-input>
						</el-form-item>
						<el-form-item
							label="邮箱"
							:label-width="formLabelWidth"
							prop="email"
							:rules="[
								{ required: true, message: '请输入邮箱', trigger: 'blur' },
							]"
						>
							<el-input
								v-model="dynamicValidateForm.email"
								placeholder="请输入邮箱"
							></el-input>
						</el-form-item>
						<el-form-item
							label="备注"
							:label-width="formLabelWidth"
							prop="advisoryDetails"
							:rules="[
								{ required: true, message: '请填写备注', trigger: 'blur' },
							]"
						>
							<el-input
								v-model="dynamicValidateForm.advisoryDetails"
								placeholder="请输入"
							></el-input>
						</el-form-item>
						<el-form-item label="上传附件" :label-width="formLabelWidth">
							<el-upload
								class="upload-demo"
								ref="upload"
								action="/api/file/upload/attachment?module=resourceshare&attachmentBusinessType=exhibition_apply"
								:limit="limit"
								:headers="myHeaders"
								:on-remove="handleRemove"
								:on-exceed="onExceed"
								:before-upload="beforeUpload"
								:on-success="handleAvatarSuccessAnnex"
								:file-list="fileList"
								:auto-upload="autoUpload"
							>
								<el-button slot="trigger" size="small" type="primary"
									>选取文件</el-button
								>
							</el-upload>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="cancel">取 消</el-button>
						<el-button type="primary" @click="toReady()">确 定</el-button>
					</div>
				</el-dialog>
			</div>
			<div class="ui-right">
				<div style="margin-top: 20px; margin-left: 10px">
					<div class="relevanInformation">
						<div class="informationTitle informationTitleAfter">
							<!-- <img src="@/assets/img/cooperationExchange/20200608_03.gif" alt=""
                                style="height: 20px;vertical-align: middle;"> -->
							{{ $t('common.LookBackAt') }}
						</div>
						<ul class="user-out" style="overflow: auto">
							<li
								v-for="(item, index) in historyInfo"
								:key="index"
								@click="toDetail(item)"
								class="list-infos"
							>
								· {{ item.name }}
							</li>
						</ul>
					</div>
				</div>
				<div style="margin-top: 20px; margin-left: 10px">
					<div class="relevanInformation">
						<div class="informationTitle informationTitleAfter">
							<!-- <img src="@/assets/img/cooperationExchange/20200608_03.gif" alt=""
                                style="height: 20px;vertical-align: middle;"> -->
							{{ $t('common.ContactInformations') }}
						</div>
						<div>
							<ul class="user-out">
								<li class="user-list-info">
									<div class="user-list-pic">
										<img
											src="@/assets/img/exhibition/who.png"
											alt=""
											class="user-list-pic-info"
										/>
										<i>联系人:</i>
									</div>
									<div class="user-info-d">{{ listDetail.contactMen }}</div>
								</li>
								<li class="user-list-info">
									<div class="user-list-pic">
										<img
											src="@/assets/img/exhibition/24gl-phoneBubble.png"
											alt=""
											class="user-list-pic-info"
										/>
										<i>电话:</i>
									</div>
									<div class="user-info-d">{{ listDetail.contactPhone }}</div>
								</li>
								<li class="user-list-info">
									<div class="user-list-pic">
										<img
											src="@/assets/img/exhibition/email.png"
											alt=""
											class="user-list-pic-info"
										/>
										<i>邮箱:</i>
									</div>
									<div class="user-info-d">{{ listDetail.email }}</div>
								</li>
								<li class="user-list-info">
									<div class="user-list-pic">
										<img
											src="@/assets/img/exhibition/QQ.png"
											alt=""
											class="user-list-pic-info"
										/>
										<i>QQ:</i>
									</div>
									<div class="user-info-d">{{ listDetail.qq }}</div>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="ui-body" v-if="$i18n.locale == 'en'">
			<div class="ui-left">
				<h3 :title="listDetail.name">{{ listDetail.name }}</h3>
				<div class="ui-infos">
					<ul class="ui-uls">
						<li class="ui-ul-li">
							<div class="ui-li-left">
								<div class="ui-info-left">Holding time:</div>
								<div class="ui-info-right">
									{{ listDetail.validityStartDate | time('YYYY-MM-DD') }} --
									{{ listDetail.validityEndDate | time('YYYY-MM-DD') }}
								</div>
							</div>
							<div class="ui-li-right">
								<div class="ui-info-left">Hold area:</div>
								<div class="ui-info-rights" :title="listDetail.region">
									{{ listDetail.region }}
								</div>
							</div>
						</li>
						<li class="ui-ul-li">
							<div class="ui-li-left">
								<div class="ui-info-left">Host place:</div>
								<div class="ui-info-right" :title="listDetail.place">
									{{ listDetail.place }}
								</div>
							</div>
							<div class="ui-li-right">
								<div class="ui-info-left">Exhibitors number:</div>
								<div
									class="ui-info-right"
									:title="listDetail.showbusinessNumber"
								>
									{{ listDetail.showbusinessNumber }}
								</div>
							</div>
						</li>
						<li class="ui-ul-info">
							<div class="ui-info-left">Host unit:</div>
							<div class="ui-info-right" :title="listDetail.company">
								{{ listDetail.company }}
							</div>
						</li>
						<li class="ui-ul-info">
							<div class="ui-info-left">Responsible unit:</div>
							<div class="ui-info-right" :title="listDetail.undertakeCompany">
								{{ listDetail.undertakeCompany }}
							</div>
						</li>
						<li class="ui-ul-info">
							<div class="ui-info-left">Exhibition area:</div>
							<div class="ui-info-right">{{ listDetail.area }}Myriametre</div>
						</li>
					</ul>
				</div>
				<div class="user-btn">
					<el-button type="primary" @click="toJoin(listDetail.extendTwo)"
						>Apply</el-button
					>
					<el-button
						v-if="yunShang"
						plain
						@click="toTop(listDetail.exhibitionHallUrl)"
						>Exhibition</el-button
					>
				</div>
				<div class="user-info" v-html="listDetail.introduceHtml"></div>
				<div class="to-user-detail" @click="aboutInfo">
					<span style="cursor: hand">Related Conference Registration</span>
				</div>
				<el-dialog
					title="The exhibition registration"
					:visible.sync="dialogFormVisible"
					:close-on-click-modal="false"
					style="width: 100%"
					:append-to-body="true"
					:destroy-on-close="destroyOnClose"
				>
					<el-form :model="dynamicValidateForm" ref="dynamicValidateForm">
						<el-form-item
							label="Nature of the booth"
							:label-width="formLabelWidth"
							prop="radio"
						>
							<el-radio-group v-model="dynamicValidateForm.radio" size="medium">
								<el-radio label="Exhibitor"></el-radio>
								<el-radio label="The exhibition audience"></el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item
							label="The name of firm"
							:label-width="formLabelWidth"
							prop="unitName"
							:rules="[
								{
									required: true,
									message: 'Please enter the business name',
									trigger: 'blur',
								},
							]"
						>
							<el-input
								v-model="dynamicValidateForm.unitName"
								placeholder="Please enter the business name"
							></el-input>
						</el-form-item>
						<el-form-item
							label="Contacts"
							:label-width="formLabelWidth"
							prop="contact"
							:rules="[
								{
									required: true,
									message: 'Please enter the contact person',
									trigger: 'blur',
								},
							]"
						>
							<el-input
								v-model="dynamicValidateForm.contact"
								placeholder="Please enter the contact person"
							></el-input>
						</el-form-item>
						<el-form-item
							label="Telephone"
							:label-width="formLabelWidth"
							prop="mobile"
							:rules="[
								{
									required: true,
									message: 'Please enter the telephone number',
									trigger: 'blur',
								},
							]"
						>
							<el-input
								v-model="dynamicValidateForm.mobile"
								placeholder="Please enter the telephone number"
							></el-input>
						</el-form-item>
						<el-form-item
							label="E-mail"
							:label-width="formLabelWidth"
							prop="email"
							:rules="[
								{
									required: true,
									message: 'Please enter email address',
									trigger: 'blur',
								},
							]"
						>
							<el-input
								v-model="dynamicValidateForm.email"
								placeholder="Please enter email address"
							>
							</el-input>
						</el-form-item>
						<el-form-item
							label="Remark"
							:label-width="formLabelWidth"
							prop="advisoryDetails"
							:rules="[
								{
									required: true,
									message: 'Please fill in the remarks',
									trigger: 'blur',
								},
							]"
						>
							<el-input
								v-model="dynamicValidateForm.advisoryDetails"
								placeholder="Please fill in the remarks"
							>
							</el-input>
						</el-form-item>
						<el-form-item
							label="Upload attachment"
							:label-width="formLabelWidth"
						>
							<el-upload
								class="upload-demo"
								ref="upload"
								action="/api/file/upload/attachment?module=resourceshare&attachmentBusinessType=exhibition_apply"
								:limit="limit"
								:headers="myHeaders"
								:on-remove="handleRemove"
								:on-exceed="onExceed"
								:before-upload="beforeUpload"
								:on-success="handleAvatarSuccessAnnex"
								:file-list="fileList"
								:auto-upload="autoUpload"
							>
								<el-button slot="trigger" size="small" type="primary"
									>Select the file</el-button
								>
							</el-upload>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="cancel">Take away</el-button>
						<el-button type="primary" @click="toReady()">Determine</el-button>
					</div>
				</el-dialog>
			</div>
			<div class="ui-right">
				<div style="margin-top: 20px; margin-left: 10px">
					<div class="relevanInformation">
						<div class="informationTitle informationTitleAfter">
							<!-- <img src="@/assets/img/cooperationExchange/20200608_03.gif" alt=""
                                style="height: 20px;vertical-align: middle;"> -->
							{{ $t('common.LookBackAt') }}
						</div>
						<ul
							class="user-out"
							v-infinite-scroll="load"
							style="overflow: auto"
						>
							<li
								v-for="(item, index) in historyInfo"
								:key="index"
								@click="toDetail(item)"
								class="list-infos"
							>
								· {{ item.name }}
							</li>
						</ul>
					</div>
				</div>
				<div style="margin-top: 20px; margin-left: 10px">
					<div class="relevanInformation">
						<div class="informationTitle informationTitleAfter">
							<!-- <img src="@/assets/img/cooperationExchange/20200608_03.gif" alt=""
                                style="height: 20px;vertical-align: middle;"> -->
							{{ $t('common.ContactInformations') }}
						</div>
						<div>
							<ul class="user-out">
								<li class="user-list-info">
									<div class="user-list-pic">
										<img
											src="@/assets/img/exhibition/who.png"
											alt=""
											class="user-list-pic-info"
										/>
										<i>Contacts:</i>
									</div>
									<div class="user-info-d">{{ listDetail.contactMen }}</div>
								</li>
								<li class="user-list-info">
									<div class="user-list-pic">
										<img
											src="@/assets/img/exhibition/24gl-phoneBubble.png"
											alt=""
											class="user-list-pic-info"
										/>
										<i>Telephone:</i>
									</div>
									<div class="user-info-d">{{ listDetail.contactPhone }}</div>
								</li>
								<li class="user-list-info">
									<div class="user-list-pic">
										<img
											src="@/assets/img/exhibition/email.png"
											alt=""
											class="user-list-pic-info"
										/>
										<i>E-mail:</i>
									</div>
									<div class="user-info-d">{{ listDetail.email }}</div>
								</li>
								<li class="user-list-info">
									<div class="user-list-pic">
										<img
											src="@/assets/img/exhibition/QQ.png"
											alt=""
											class="user-list-pic-info"
										/>
										<i>QQ:</i>
									</div>
									<div class="user-info-d">{{ listDetail.qq }}</div>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import { ConventionRegistration } from '@/api/exhibition'
import { getToken } from '@/utils/auth'
import { getTokens } from '@/api/token'
import { ExhibitionListsDetail } from '@/api/exhibition'
import moment from 'moment'
export default {
	name: 'exhibitionServiceDetail',
	data() {
		return {
			dialogFormVisible: false,
			dynamicValidateForm: {
				unitName: '',
				contact: '',
				mobile: '',
				email: '',
				radio: '',
				advisoryDetails: '',
			},
			formLabelWidth: '150px',
			fileList: [],
			typeNum: null,
			limit: 1,
			fileInfo: {},
			autoUpload: true,
			myHeaders: { Authorization: 'Bearer ' + getToken() },
			detailId: null,
			three1: null,
			listDetail: {},
			historyInfo: [],
			yunShang: true,
			logNum: null,
			flag: false,
			destroyOnClose: true,
			// flagShe: false,
		}
	},
	watch: {
		'$i18n.locale'() {
			this.initData()
		},
	},
	beforeDestroy() {
		//  window.onbeforeunload = function (e) {
		//         var storage = window.sessionStorage;
		//         storage.clear()
		//     }
		// sessionStorage.removeItem('hzfw-params');
		// sessionStorage.removeItem('hzfw-query')
	},
	mounted() {
		// 缓存不存在
		if (sessionStorage.getItem('hzfw-params') == null) {
			// 原始进入方式
			let params1 = this.$route.params
			this.detailId = params1.id
			this.three1 = params1.three1
			sessionStorage.setItem('hzfw-params', JSON.stringify(params1))
		} else if (sessionStorage.getItem('hzfw-params') != null) {
			// 缓存存在  详情跳转的地方
			// 点击详情进来会保存在这里
			let params2 = JSON.parse(sessionStorage.getItem('hzfw-params'))
			if (this.$route.params.id && params2.id != this.$route.params.id) {
				params2 = this.$route.params
				sessionStorage.setItem('hzfw-params', JSON.stringify(params2))
			}
			this.detailId = params2.id
			this.three1 = params2.three1
		}
		// 缓存不存在
		let query3 = this.$route.query
		let num = query3.num
		if (num == 1) {
			// 点击往期回顾
			let query1 = this.$route.query
			this.detailId = query1.id
			this.three1 = query1.three1
			sessionStorage.setItem('hzfw-query', JSON.stringify(query1))
		} else {
			if (sessionStorage.getItem('hzfw-query') != null) {
				let params2 = JSON.parse(sessionStorage.getItem('hzfw-query'))
				this.detailId = params2.id
				this.three1 = params2.three1
			}
		}
		this.initData()
	},
	filters: {
		twoDecimal(value) {
			return parseFloat(String(value)).toFixed(2)
		},
		time(data, type) {
			return moment(data).format(type)
		},
	},
	methods: {
		toJoin(time) {
			console.log(time)
			let user = window.sessionStorage.getItem('user')
			if (!this.$Cookies.get('token')) {
				if (this.$i18n.locale.toUpperCase() == 'ZH') {
					this.$message.error('未登录用户无法报名')
				} else {
					this.$message.error('Users who are not logged in cannot sign up')
				}
				this.logNum = 1
				let logNums = sessionStorage.setItem('num', this.logNum)
			} else {
				if (time == '未开始') {
                    if (this.$i18n.locale.toUpperCase() == 'ZH') {
						this.$message('活动未开始')
					} else {
						this.$message('The activity did not start')
					}
				} else if(time=='已结束') {
					if (this.$i18n.locale.toUpperCase() == 'ZH') {
						this.$message('活动已结束')
					} else {
						this.$message('Activity has ended')
					}
				}else{
                    if (this.$Cookies.get('token')) {
						this.dialogFormVisible = true
					} else {
						if (this.$i18n.locale.toUpperCase() == 'ZH') {
							this.$message('请登录')
						} else {
							this.$message('Please login')
						}
					}
                }
			}
		},
		initData() {
			let id = this.detailId
			let three1 = this.three1
			let param = {
				id: three1,
				language: this.$i18n.locale.toUpperCase(),
			}
			// console.log(three1, 'three1');
			ExhibitionListsDetail(param).then((res) => {
				console.log(res)
				this.listDetail = res.data.exhibitionManagementLists[0]
				this.historyInfo = res.data.historyDate
				this.detailId = this.listDetail.id
				// if (res.data.historyDate) {
				//     this.flagShe = false
				// }
				// this.listNum=res.data.historyDate.length
				if (this.listDetail.exhibitionHallUrl) {
					this.yunShang = true
				} else {
					this.yunShang = false
				}
			})
		},
		toDetail(item) {
			// console.log(id);
			let picId = item.id
			let three1 = item.extendThree
			console.log(picId)
			this.$router.push({
				name: 'exhibitionServiceDetailInfo',
				params: {
					id: picId,
					three1: three1,
				},
			})
			// const { href } = this.$router.resolve({
			//     name: 'exhibitionServiceDetails',
			//     query: {
			//         id: picId,
			//         three1: three1,
			//         num: 1
			//     }
			// });
			// sessionStorage.removeItem('hzfw-query')
			// window.open(href, '_blank')
		},
		toTop(url) {
			window.open(url)
		},
		aboutInfo() {
			this.$router.push('conferenceServices')
		},
		cancel() {
			console.log()
			this.dialogFormVisible = false
		},
		toReady() {
			this.$refs.upload.clearFiles()
			console.log(this.fileInfo)
			this.$refs.dynamicValidateForm.validate((valid) => {
				if (valid) {
					// alert('submit!');
					if (this.dynamicValidateForm.radio == '参展商') {
						this.typeNum = 0
					} else {
						this.typeNum = 1
					}
					if (this.fileInfo.data) {
						let exhibitionApply = {
							unitName: this.dynamicValidateForm.unitName,
							contact: this.dynamicValidateForm.contact,
							mobile: this.dynamicValidateForm.mobile,
							email: this.dynamicValidateForm.email,
							type: this.typeNum,
							fileId: this.fileInfo.data.attachmentId,
							fileUrl: this.fileInfo.data.path,
							advisoryDetails: this.dynamicValidateForm.advisoryDetails,
							exhibitionId: this.detailId,
							extend1: this.listDetail.extendThree,
							extend2: this.$i18n.locale.toUpperCase(),
						}
						console.log(exhibitionApply, '传给后台的参数')
						getTokens().then((res) => {
							ConventionRegistration(JSON.stringify(exhibitionApply), res.data)
								.then((res) => {
									if (this.$i18n.locale.toUpperCase() == 'ZH') {
										this.$message.success('报名成功')
									} else {
										this.$message.success('Registration success')
									}
								})
								.catch((error) => {
									if (this.$i18n.locale.toUpperCase() == 'ZH') {
										this.$message.error('报名失败')
									} else {
										this.$message.success('Registration failed')
									}
								})
						})
						this.dialogFormVisible = false
						this.$refs.dynamicValidateForm.resetFields()
					} else {
						let exhibitionApply = {
							unitName: this.dynamicValidateForm.unitName,
							contact: this.dynamicValidateForm.contact,
							mobile: this.dynamicValidateForm.mobile,
							email: this.dynamicValidateForm.email,
							advisoryDetails: this.dynamicValidateForm.advisoryDetails,
							type: this.typeNum,
							exhibitionId: this.detailId,
							extend1: this.listDetail.extendThree,
							extend2: this.$i18n.locale.toUpperCase(),
						}
						console.log(exhibitionApply, '传给后台的参数')
						getTokens().then((res) => {
							ConventionRegistration(JSON.stringify(exhibitionApply), res.data)
								.then((res) => {
									if (this.$i18n.locale.toUpperCase() == 'ZH') {
										this.$message.success('报名成功')
									} else {
										this.$message.success('Registration success')
									}
								})
								.catch((error) => {
									if (this.$i18n.locale.toUpperCase() == 'ZH') {
										this.$message.error('报名失败')
									} else {
										this.$message.success('Registration failed')
									}
								})
						})
						this.dialogFormVisible = false
						this.$refs.dynamicValidateForm.resetFields()
					}
				} else {
					console.log('error submit!!')
					return false
				}
			})
		},
		handleRemove(file, fileList) {
			this.files.forEach((i) => {
				if (i == file.uid) {
					var index = this.files.indexOf(i)
					this.files.splice(index, 1)
				}
			})
		},
		onExceed(files, fileList) {
			console.log(files, fileList)
			if (this.$i18n.locale.toUpperCase() == 'ZH') {
				this.$message.error('最多上传一个附件')
			} else {
				this.$message.error('A maximum of one attachment can be uploaded')
			}
		},
		handleAvatarSuccessAnnex(res, file) {
			console.log(res)
			this.fileInfo = res
			console.log(this.fileInfo)
			// this.files.push(res.data.attachmentId);
		},
		beforeUpload(file) {
			var FileExt = file.name.replace(/.+\./, '')
            console.log(FileExt);
			if (
				[ 'pdf', 'zip', 'png'].indexOf(FileExt.toLowerCase()) === -1
			) {
				if (this.$i18n.locale.toUpperCase() == 'ZH') {
					this.$message({
						type: 'warning',
						message: '请上传pdf,zip,png 的附件！',
					})
				} else {
					this.$message({
						type: 'warning',
						message:
							'Please upload the attachment of zip, PDF, word and excel!',
					})
				}
				this.fileList.splice(this.fileList.indexOf(file), 1)
				return false
			}
			this.isLt2k = file.size / 1024 / 1024 < 2 ? '1' : '0'
			if (this.isLt2k === '0') {
				if (this.$i18n.locale.toUpperCase() == 'ZH') {
					this.$message({
						message: '上传文件大小不能超过2M!',
						type: 'error',
					})
				} else {
					this.$message({
						message: 'Upload file size cannot exceed 2m!',
						type: 'error',
					})
				}
				this.fileList.splice(this.fileList.indexOf(file), 1)
				return false
			}
		},
	},
}
</script>
<style lang="less" scoped>
.box {
	margin-top: 10px;
	background: #fff;
	/* height: 500px; */
	padding: 20px 0;

	.crumbs {
		margin-left: 20px;
	}
}

.user-info {
	margin-top: 20px;
}

.ui-body {
	padding: 30px 12px;
	display: flex;
	justify-content: space-between;

	.ui-left {
		width: 63%;
		position: relative;

		h3 {
			display: inline-block;
			width: 90%;
			margin-left: 5%;
			text-align: center;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.ui-infos {
			width: 100%;
			height: 240px;
			background-image: url('~@/assets/img/exhibition/Group 98.png');
			border: 1px solid #d8d6d6;
			background-size: 100% 100%;

			.ui-uls {
				width: 100%;
				height: 200px;
				padding: 20px 20px;

				.ui-ul-li {
					display: flex;
					height: 40px;
					width: 100%;

					.ui-li-left {
						width: 50%;
						height: 40px;
						display: flex;
					}

					.ui-li-right {
						width: 50%;
						height: 40px;
						display: flex;
					}

					.ui-info-left {
						width: 40%;
						height: 40px;
						line-height: 40px;
						font-size: 15px;
						color: rgb(0, 0, 0);
						text-align: center;
					}

					.ui-info-right {
						font-size: 15px;
						height: 40px;
						width: 60%;
						line-height: 40px;
						color: rgb(52, 194, 250);
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.ui-info-rights {
						font-size: 15px;
						height: 40px;
						width: 50%;
						line-height: 40px;
						color: rgb(52, 194, 250);
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}

				.ui-ul-info {
					width: 100%;
					height: 40px;
					display: flex;

					.ui-info-left {
						width: 20%;
						height: 40px;
						font-size: 15px;
						line-height: 40px;
						color: rgb(0, 0, 0);
						text-align: center;
					}

					.ui-info-right {
						height: 40px;
						width: 30%;
						line-height: 40px;
						color: rgb(52, 194, 250);
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
			}
		}

		.user-btn {
			position: absolute;
			top: 220px;
			left: 510px;
		}

		.to-user-detail {
			margin-top: 50px;

			span {
				height: 30px;
				line-height: 30px;
				color: rgb(21, 138, 247);
				border-bottom: 1px solid rgb(21, 138, 247);
				cursor: pointer;
			}
		}
	}

	.ui-right {
		width: 33%;

		.relevanInformation {
			padding: 0;
			overflow: hidden;

			.informationTitle {
				border-bottom: 1px solid #2c558a;
				padding: 0 0 10px 0;
				font-weight: 600;
				font-size: 20px;
				opacity: 0.9;
			}

			.informationTitleAfter {
				position: relative;
			}
		}

		.user-out {
			margin-top: 10px;
			height: 235px;
			overflow: hidden;
			width: 100%;

			.list-infos {
				height: 45px;
				line-height: 45px;
				padding: 0 20px;
				margin-bottom: 5px;
				border-bottom: 1px solid rgb(219, 216, 216);
				cursor: pointer;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
	}
}

// li::before {
//     content: "";
//     display: inline-block;
//     width: 5px;
//     height: 5px;
//     line-height: 5px;
//     background-color: skyblue;
//     border-radius: 50%;
//     margin-right: 5px;
// }
.user-list-info {
	display: flex;
	height: 40px;
	line-height: 40px;
	margin-bottom: 5px;
	padding: 0 5px;

	.user-list-pic {
		width: 120px;

		i {
			font-style: normal;
			display: inline-block;
			transform: translateY(-14px);
		}

		.user-list-pic-info {
			width: 20px;
			height: 20px;
			padding: 10px 5px;
		}
	}

	.user-info-d {
		width: 240px;
		height: 40px;
		line-height: 40px;
		// background-color: red;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
}
</style>