<template>
	<el-dialog
		:title="title"
		:visible.sync="dialogVisible"
		class="order-details"
		:close-on-click-modal="false"
	>
		<div>
			<!-- <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm"> -->
			<el-form :model="form" ref="form" :rules="rules" label-width="120px">
				<div>
					<div class="steLine">
						<el-row>
							<el-col :span="12">
								<el-form-item label="标题:">
									<el-input v-model="form.title" placeholder="请输入峰会标题"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="8">
								<el-form-item label="封面图:">
									<el-upload
										class="upload-demo"
										:headers="getHeaderWithToken"
										:action="BASE_API+'/api/universal/file/app/unauth/admin/upload'"
										:show-file-list="false"
										:on-success="handleAvatarSuccess"
										:on-progress="uploadProcess"
										list-type="picture"
									>
										<el-progress
											v-show="imgFlag == true"
											type="circle"
											:percentage="percent"
											style="margin-top: 20px"
										></el-progress>
										<img
											v-if="$utils.isString(form.banner) && !$utils.isEmpty(form.banner) && !imgFlag"
											:src="form.banner"
											style="width:300px;max-height:300px;"
										/>
										<i
											v-else-if="!imgFlag"
											class="el-icon-plus avatar-uploader-icon"
											style="lineHeight:100px;width:300px;height: 100px;border: 1px dashed #ccc;"
										></i>
									</el-upload>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="16">
								<el-form-item label="峰会时间:">
									<el-date-picker
										v-model="form.startTime"
										type="datetime"
										:editable="true"
										placeholder="开始时间"
									></el-date-picker>-
									<el-date-picker v-model="form.endTime" type="datetime" :editable="true" placeholder="选择日期"></el-date-picker>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="9">
								<el-form-item label="报名截止时间:">
									<el-date-picker v-model="form.bmCloseTime" type="datetime" placeholder="报名截止时间"></el-date-picker>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="10">
								<el-form-item label="地点:">
									<el-input v-model="form.address" placeholder="请输入峰会举办地点"></el-input>
								</el-form-item>
							</el-col>
							<el-form-item style="display:inline-block;margin-left:-120px">
								<el-input class="content" v-model="form.longitude" placeholder="经度" style="width:100px"></el-input>
							</el-form-item>
							<el-form-item style="display:inline-block;margin-left:-120px">
								<el-input class="content" v-model="form.latitude" placeholder="纬度" style="width:100px"></el-input>
							</el-form-item>
						</el-row>
						<el-row>
							<el-col :span="8">
								<el-form-item label="状态:">
									<el-radio-group v-model="form.state">
										<el-radio-button label="默认"></el-radio-button>
										<el-radio-button label="自定义"></el-radio-button>
									</el-radio-group>
								</el-form-item>
							</el-col>
							<el-col :span="9" v-if="form.state==='自定义'">
								<el-radio-group v-model="statusRadio">
									<el-radio class="status" :label="0">默认</el-radio>
									<el-radio class="status" :label="1">报名中</el-radio>
									<el-radio class="status" :label="2">进行中</el-radio>
									<el-radio class="status" :label="3">已结束</el-radio>
								</el-radio-group>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="12">
								<el-form-item label="活动id:">
									<!-- <el-input v-model="form.rid" placeholder="请输入签到/抽奖活动的id"></el-input> -->
									<el-select v-model="form.rid" placeholder="请选择签到/抽奖活动id">
										<el-option v-for="(item,index) in optionsId" :key="index" :label="item" :value="item"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
						</el-row>

						<el-tabs v-model="activeNameTab">
							<el-tab-pane label="峰会主题" name="first">
								<UE
									:editorId="activeName"
									:defaultMsg="form.content"
									:config="config"
									ref="ue"
									@ready="editorReadyEvent"
								></UE>
							</el-tab-pane>
							<el-tab-pane label="诚邀莅临" name="second">
								<UE
									:editorId="activeNameShare"
									:defaultMsg="form.actDesc "
									:config="config"
									ref="ue"
									@ready="editorReadyEventShare"
								></UE>
							</el-tab-pane>
							<el-tab-pane label="公司简章" name="third">
								<UE
									:editorId="activeNameFirm"
									:defaultMsg="form.companyDesc"
									:config="config"
									ref="ue"
									@ready="editorReadyEventFirm"
								></UE>
							</el-tab-pane>
						</el-tabs>
					</div>
				</div>
				<div>
					<div>
						<el-row>
							<el-col>
								<el-form-item label="房车介绍:" style="margin-top:20px">
									<el-upload
										:action="BASE_API+'/api/universal/file/app/unauth/admin/upload'"
										list-type="picture-card"
										:file-list="fileList2"
										:on-success="handleBannerSuccess"
										:on-remove="handleRemove"
										:headers="getHeaderWithToken"
									>
										<i class="el-icon-plus"></i>
									</el-upload>
								</el-form-item>
								<el-form-item label="峰会流程:">
									<el-row class="height" v-for="(item, index) in processJson" :key="index">
										<el-col :span="6">
											<el-time-select
												v-model="item.time"
												:picker-options="{
													start: '06:00',
													step: '00:15',
													end: '23:59'
												}"
												placeholder="选择/输入时间"
											></el-time-select>
										</el-col>
										<el-col :span="8">
											<el-input class="content" v-model="item.content" placeholder="请输入内容"></el-input>
										</el-col>
										<el-col class="content" :span="8">
											<el-button
												type="danger"
												size="small"
												style="margin-left: 10px;"
												@click="deleteItem(item,index)"
											>删除</el-button>
										</el-col>
									</el-row>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-form-item>
								<el-button size="small" type="button" icon="plus" @click="addTag()">添加流程</el-button>
							</el-form-item>
						</el-row>
					</div>
				</div>
				<el-row>
					<el-col>
						<el-button class="button" @click="cancelHandel">取 消</el-button>
						<el-button class="button" type="primary" v-if="titleNme=='创建峰会'" @click="create('form')">确定</el-button>
						<el-button class="button" type="primary" v-if="titleNme=='编辑峰会'" @click="update1()">确定</el-button>
					</el-col>
				</el-row>
			</el-form>
		</div>

		<!--    <div class="modal_modal" v-show="resetCarVisible"></div>-->
	</el-dialog>
</template>

<script>
import ElRow from 'element-ui/packages/row/src/row'
import ElInput from '../../../../node_modules/element-ui/packages/input/src/input.vue'
import ElCol from 'element-ui/packages/col/src/col'
import ElFormItem from '../../../../node_modules/element-ui/packages/form/src/form-item.vue'
import { getOne, update, add, activityIds } from 'src/api/summit/activity'
import { getToken } from 'src/utils/auth'
import { mapGetters } from 'vuex'
import UE from '../../modal/Ueditor' // 百度ue富文本
import { formatDate } from 'utils/dateFormattor'
export default {
	props: ['popupShow', 'popupRow', 'titleNme'],
	name: 'summitPopup',
	components: {
		ElFormItem,
		ElCol,
		ElInput,
		ElRow,
		UE
	},
	data() {
		return {
			optionsId: [],
			statusRadio: '0',
			activeNameTab: 'first',
			fileList2: [],
			config: {
				initialFrameWidth: null,
				initialFrameHeight: 350
			},
			dialogVisible: false,
			title: '',
			BASE_API: process.env.BASE_API,
			percent: 0, // 上传进度
			percents: 0, // 上传进度
			imgFlag: false,
			imgFlags: false,
			activeName: '',
			activeNameShare: '',
			activeNameFirm: '',
			rules: {},
			form: {
				title: undefined,
				banner: undefined,
				startTime: undefined,
				endTime: undefined,
				bmCloseTime: undefined,
				address: undefined,
				longitude: undefined,
				latitude: undefined,
				state: '默认',
				status: 0,
				rid: undefined,
				content: '', // 峰会主题
				contentFirm: '',
				actDesc: '', // 诚邀莅临
				companyDesc: '', // 公司简章
				vehicleImgs: [], // 房车介绍
				processJson: []
			},
			result: false,
			processJson: [{ time: undefined, content: '' }]
		}
	},
	mounted() {
		this.cleanForm()
		this.getOrderInfo()
	},
	created() {
		activityIds().then(data => {
			if (data.status == 200) {
				this.optionsId = data.data
			}
		})
	},
	computed: {
		...mapGetters(['elements']),

		getHeaderWithToken() {
			return { Authorization: getToken() }
		}
	},
	watch: {
		dialogVisible(newValue) {
			if (!newValue) {
				this.$emit('summitDialogEvent', this.result)
			}
		}
	},
	methods: {
		handleBannerSuccess(res, file, fileList) {
			console.log(fileList);
			this.fileList2 = fileList
			// this.form.vehicleImgs = this.fileList2
		},
		handleRemove(res, file, fileList) {
			this.fileList2 = file
		},
		getOrderInfo() {
			this.title = this.titleNme
			if (this.title === '编辑峰会') {
				this.$nextTick(() => {
					this.dialogVisible = true
					this.activeName = 'first'
					this.activeNameShare = 'second'
					this.activeNameFirm = 'three'
				})

				getOne(this.popupRow.id).then(res => {
					res.data.state = this.getState(res.data.status)
					this.form = res.data
					this.form.bmCloseTime = Number(res.data.bmCloseTime)
					let introduce = this.form.vehicleImgs.split(',')
					this.statusRadio = res.data.status
					introduce.forEach(element => {
						this.fileList2.push({ name: '峰会介绍', url: element })
					})
					if (res.data.processJson) {
						this.processJson = JSON.parse(res.data.processJson)
					}
				})
			}
			if (this.title === '创建峰会') {
				this.dialogVisible = true
				this.activeName = 'first'
				this.activeNameShare = 'second'
				this.activeNameFirm = 'three'
			}
		},
		editorReadyEvent(instance) {
			const t = this
			instance.addListener('contentChange', () => {
				console.log(t.activeName)
				if (t.activeName === 'first') {
					t.form.content = instance.getContent()
				}
			})
		},
		editorReadyEventShare(instance) {
			const t = this
			instance.addListener('contentChange', () => {
				if (t.activeNameShare === 'second') {
					t.form.actDesc = instance.getContent()
				}
			})
		},
		editorReadyEventFirm(instance) {
			const t = this
			instance.addListener('contentChange', () => {
				if (t.activeNameFirm == 'three') {
					t.form.companyDesc = instance.getContent()
				}
			})
		},
		/**
		 * 封面图上传进度
		 * */
		uploadProcess(event, file, fileList) {
			this.imgFlag = true
			this.percent = Math.floor(event.percent)
		},
		/**
		 * 封面图上传
		 * **/
		handleAvatarSuccess(res, file) {
			this.percent = 0
			this.imgFlag = false
			this.form.banner = res.data
		},
		getState(status) {
			if (this.$utils.isInteger(status)) {
				console.log(status)
				if (status == 0) {
					return '默认'
				} else {
					return '自定义'
				}
			}
			return ''
		},
		setSummitDialogEvent(e) {
			this.cleanForm()
			this.result = e
			this.dialogVisible = false
		},
		addTag() {
			const t = {
				time: null,
				content: ''
			}
			this.processJson.push(t)
		},
		/**
		 * 保存修改
		 *
		 * */
		update1() {
			if (!this.form.title) {
				this.$notify({
					title: '失败',
					message: '标题不能为空',
					type: 'error',
					duration: 2000
				})
				return false
			} else if (!this.form.startTime) {
				this.$notify({
					title: '失败',
					message: '开始时间不能为空',
					type: 'error',
					duration: 2000
				})
			} else if (!this.form.endTime) {
				this.$notify({
					title: '失败',
					message: '结束时间不能为空',
					type: 'error',
					duration: 2000
				})
			} else if (!this.form.bmCloseTime) {
				this.$notify({
					title: '失败',
					message: '报名截止时间不能为空',
					type: 'error',
					duration: 2000
				})
			} else {
				typeof this.form.endTime == 'number'
					? (this.form.endTime = this.form.endTime)
					: (this.form.endTime = this.form.endTime.getTime())
				typeof this.form.startTime == 'number'
					? (this.form.startTime = this.form.startTime)
					: (this.form.startTime = this.form.startTime.getTime())
				typeof this.form.bmCloseTime == 'number'
					? (this.form.bmCloseTime = this.form.bmCloseTime)
					: (this.form.bmCloseTime = this.form.bmCloseTime.getTime())
				let pic = []
				if (this.fileList2 != '') {
					console.log(this.fileList2);
					this.fileList2.forEach(element => {
						if (!!element.response) {
							pic.push(element.response.data)
						}else{
							pic.push(element.url);
						}
					});
					console.log(pic);
					
					this.form.vehicleImgs = pic.join(',')
				}

				this.form.processJson = this.processJson

				update(this.form).then(res => {
					this.responseResult(res)
				})
				this.dataProcessing()
			}
		},
		create() {
			if (!this.form.title) {
				this.$notify({
					title: '失败',
					message: '标题不能为空',
					type: 'error',
					duration: 2000
				})
				return false
			} else if (!this.form.startTime) {
				this.$notify({
					title: '失败',
					message: '开始时间不能为空',
					type: 'error',
					duration: 2000
				})
			} else if (!this.form.endTime) {
				this.$notify({
					title: '失败',
					message: '结束时间不能为空',
					type: 'error',
					duration: 2000
				})
			} else if (!this.form.bmCloseTime) {
				this.$notify({
					title: '失败',
					message: '报名截止时间不能为空',
					type: 'error',
					duration: 2000
				})
			} else {
				// this.form.processJson = this.processJson
				this.form.endTime = this.form.endTime.getTime()
				this.form.startTime = this.form.startTime.getTime()
				this.form.bmCloseTime = this.form.bmCloseTime.getTime()
				let pic = []
				if (this.fileList2 != '') {
					this.fileList2.forEach(element => {
						pic.push(element.response.data);
					});
					this.form.vehicleImgs = pic.join(',')
				}
				// if (!!this.form.vehicleImgs) {
				// 	this.form.vehicleImgs.forEach(element => {
				// 		pic.push(element.url)
				// 	})
				// 	this.form.vehicleImgs = pic.join(',')
				// }
				this.dataProcessing()
				add(this.form).then(res => {
					this.responseResult(res)
				})
			}
		},
		dataProcessing() {
			if (this.form.state === '默认') {
				this.form.status = '0'
			} else {
				this.form.status = this.statusRadio
			}
			this.form.processJson = JSON.stringify(this.processJson)
		},
		/**
		 * 请求结果判断
		 * */
		responseResult(res) {
			if (res.status === 200) {
				this.$notify({
					title: '成功',
					message: '操作成功',
					type: 'success',
					duration: 2000
				})

				this.setSummitDialogEvent(true)
			} else {
				this.$notify({
					title: '失败',
					message: '操作失败！',
					type: 'error',
					duration: 2000
				})
			}
		},
		/**
		 * 删除时间
		 * */
		deleteItem(obj, index) {
			this.processJson.splice(index, 1)
		},
		/**
		 * 弹框-取消
		 * */
		cancelHandel() {
			this.setSummitDialogEvent(false)
		},

		cleanForm() {
			this.form = {
				title: undefined,
				banner: undefined,
				startTime: undefined,
				endTime: undefined,
				bmCloseTime: undefined,
				address: undefined,
				longitude: undefined,
				latitude: undefined,
				state: '默认',
				rid: undefined,
				content: '', // 峰会主题
				contentFirm: '',
				actDesc: '', // 诚邀莅临
				companyDesc: '', // 公司简章
				vehicleImgs: [], // 房车介绍
				processJson: []
			}
		}
	}
}
</script>
<style>
.label-text {
	margin-left: 10px;
	margin-right: 20px;
}

.label-title {
	margin-top: 10px;
}

.orderDetail tr th {
	background: #eef1f6;
}

.orderDetail tr td,
.orderDetail tr th {
	width: 500px;
	text-align: center;
	border: 1px solid #dfe6ec;
	margin-left: 100px;
	margin-right: 100px;
	padding: 10px;
}

.label-value {
	margin-left: 80px;
	margin-right: 100px;
}

#license-img {
	width: 50px;
	height: 50px;
}

.order-details .el-form-item {
	margin-bottom: 10px !important;
}

.el-dialog__footer .dialog-footer1 {
	position: relative;
	text-align: center;
}

.fhjj {
	width: 500px;
}

.content {
	margin-left: 4%;
}

.height {
	margin-bottom: 2%;
}

/* . el-form-item__content {
  margin-left: 5% !important;
} */

.status {
	margin-top: 4%;
}
.steLine .el-row {
	margin-bottom: 10px;
}
</style>

