<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>

