<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="handleRemove"
							: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" @click="cancelHandel">取 消</el-button>
						<!-- <el-button class="button" type="primary" @click="cre">确 定</el-button> -->
					</el-form-item>
				</el-col>
			</el-row>
			<!-- <el-row slot="footer" class="dialog-footer1">
       
			</el-row>-->
		</el-form>
	</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 { 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: [],
			form: {
				id: undefined,
				banner: undefined,
				activityId: 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()
	},
	methods: {
		vidioSuccess(res) {
			this.$notify({
				title: '提示',
				message: res.message,
				type: 'success',
				duration: 2000
			})
		},
		beforeAvatarUpload(file) {
			// const zip = file.type === 'application/zip'
			// if (!zip) {
			// 	this.$message.error('上传头像图片只能是 zip 格式!')
			// }
			// return zip
		},
		videoUpload(file) {
			console.log(file.type)

			const isJPG = file.type === 'video/mp4'
			if (!isJPG) {
				this.$message.error('上传头像图片只能是 mp4 格式!')
			}
			return isJPG
		},
		getOrderInfo() {
			console.log(this.reviewRow.id)

			one(this.reviewRow.id).then(res => {
				this.form = res.data
				this.dialogVisible = true
				this.imgDialogVisible = true
			})
		},
		cre() {
			console.log(this.form.picturePath)
			save(this.form).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
		},
		handleRemove(file, fileList) {
			// console.log(file)
			console.log(file, fileList)
		},

		handlePictureCardPreview(res, file) {
			this.$notify({
				title: '提示',
				message: res.message,
				type: 'success',
				duration: 2000
			})
			this.list.push({ url: res.data })
			// this.imgDialogVisible = true;
		},
		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>

