<template>
	<el-dialog title="回顾页面" :visible.sync="dialogVisible" class="order-details">
		<el-form :model="form" ref="form" label-width="120px">
			<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>
					<el-form-item label="峰会图片:">
						<el-upload
							:action="BASE_API+'/api/universal/file/app/unauth/pictureZip'"
							list-type="picture-card"
							:file-list="list"
							:on-success="handlePictureCardPreview"
							:on-remove="handleRemoveZip"
							:before-upload="beforeAvatarUpload"
						>
							<i class="el-icon-plus"></i>
						</el-upload>
						<!--              <img width="100%" :src="form.picturePath" alt="">-->
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col>
					<el-form-item label="峰会视频:">
						<el-upload
							:action="BASE_API+'/api/universal/file/app/unauth/uploadVideo'"
							list-type="picture-card"
							:headers="getHeaderWithToken"
							:on-preview="handlePreview"
							:on-remove="handleRemove"
							:before-upload="videoUpload"
							:on-success="vidioSuccess"
						>
							<i class="el-icon-plus"></i>
						</el-upload>
						<!-- <video
							v-if="$utils.isString(form.videoPath) && !$utils.isEmpty(form.videoPath) && !imgFlag"
							:src="form.videoPath"
							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-form-item>
				</el-col>
				<el-col>
					<el-form-item>
						<el-button class="button" type="primary" @click="cre">确 定</el-button>
						<el-button class="button" @click="cancelHandel">取 消</el-button>
					</el-form-item>
				</el-col>
			</el-row>
			<!-- <el-row slot="footer" class="dialog-footer1">

			</el-row>-->
		</el-form>
	</el-dialog>
</template>

<script type="javascript">
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 { getToken } from 'src/utils/auth'
import { mapGetters } from 'vuex'
import { one, save } from 'src/api/summit/activityShow'

export default {
	props: ['reviewRow'],
	name: 'reviewPopup',
	components: {
		ElFormItem,
		ElCol,
		ElInput,
		ElRow
	},
	data() {
		return {
			imgDialogVisible: false,
			dialogVisible: false,
			dialogImageUrl: undefined,
			result: false,
			imgFlag: false,
			BASE_API: process.env.BASE_API,
			percent: 0, //上传进度
			list: [], //压缩包
			oldList: '',
			oldVadio: '',
			vadio: [], //视频
			activeId: '', //峰会id
			form: {
				id: undefined,
				banner: undefined,
				videoPath: undefined,
				picturePath: undefined
			}
		}
	},
	watch: {
		dialogVisible(newValue, oldValue) {
			if (!newValue) {
				this.$emit('reviewDialogEvent', this.result)
			}
		}
	},
	computed: {
		...mapGetters(['elements']),

		getHeaderWithToken() {
			return { Authorization: getToken() }
		}
	},
	// watch: {
	// 	dialogVisible(newValue, oldValue) {
	// 		if (!newValue) {
	// 			this.$emit('summitDialogEvent', this.result)
	// 		}
	// 	}
	// },
	mounted() {
		this.getOrderInfo()
		console.log(this.reviewRow)
	},
	methods: {
		vidioSuccess(res, file, fileList) {
			if (res.status == 200) {
				this.$notify({
					title: '提示',
					message: res.message,
					type: 'success',
					duration: 2000
				})
				this.vadio = fileList
			}
		},
		beforeAvatarUpload(file) {
			var index = file.name.lastIndexOf('.')
			var ext = file.name.substr(index + 1)
			if (ext != 'zip') {
				this.$message.error('上传压缩包只能是 zip 格式!')
				return false
			}
			return true
		},
		videoUpload(file) {
			const isJPG = file.type === 'video/mp4'
			if (!isJPG) {
				this.$message.error('上传压缩包只能是 mp4 格式!')
			}
			return isJPG
		},
		getOrderInfo() {
			one(this.reviewRow.id).then(res => {
				this.form = res.data
				this.activeId = res.data.id //峰会id
				this.oldList = res.data.picturePath || '' //压缩包
				this.oldVadio = res.data.videoPath || '' //视频
				this.dialogVisible = true
				this.imgDialogVisible = true
			})
		},
		cre() {
			let zipPic = []
			this.list.forEach(element => {
				zipPic.push(element.response.data)
			})
			let mp4Vadio = []
			this.vadio.forEach(element => {
				mp4Vadio.push(element.response.data)
			})

			let params = {
				id: this.activeId, //回顾id
				banner: this.form.banner,
				activityId: this.reviewRow.id, //峰会id
				videoPath: this.oldVadio
					? mp4Vadio == ''
						? this.oldVadio
						: mp4Vadio.join(',') + ',' + this.oldVadio
					: mp4Vadio.join(','),
				picturePath: this.oldList
					? zipPic == ''
						? this.oldList
						: zipPic.join(',') + ',' + this.oldList
					: zipPic.join(',')
			}
			// console.log(params);

			save(params).then(res => {
				this.responseResult(res)
			})
		},
		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
				})
			}
		},
		/**
		 * 弹框-取消
		 * */
		cancelHandel() {
			this.setSummitDialogEvent(false)
		},
		setSummitDialogEvent(e) {
			this.cleanForm()
			this.result = e
			this.dialogVisible = false
		},
		/**
		 * 封面图上传
		 * **/
		handleAvatarSuccess(res, file) {
			this.percent = 0
			this.imgFlag = false
			this.form.banner = res.data
		},
		/**
		 * 封面图上传进度
		 * */
		uploadProcess(event, file, fileList) {
			this.imgFlag = true
			this.percent = Math.floor(event.percent)
		},
		handlePreview(file) {
			this.form.videoPath = file.data
			this.imgDialogVisible = true
		},
		handleRemoveZip(file, fileList) {
			this.list = fileList
		},
		handleRemove(file, fileList) {
			this.vadio = fileList
		},

		handlePictureCardPreview(res, file, fileList) {
			if (res.status == 200) {
				this.$notify({
					title: '提示',
					message: '上传成功',
					type: 'success'
				})
				this.list = fileList
			}
		},
		cleanForm() {
			this.form = {
				id: undefined,
				banner: undefined,
				activityId: undefined,
				banner: undefined,
				videoPath: undefined,
				picturePath: undefined
			}
		}
	}
}
</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%;
}
</style>

