<template>
	<div class="app-container calendar-list-container">
		<div class="online">
			<h4>参与活动奖励抽奖</h4>
			<table border="1">
				<tr>
					<td>宫格1</td>
					<td>宫格2</td>
					<td>宫格3</td>
				</tr>
				<tr>
					<td>宫格4</td>
					<td style="background:#20a0ff;color:#fff" @click="setOnline(1)">设置</td>
					<td>宫格6</td>
				</tr>
				<tr>
					<td>宫格7</td>
					<td>宫格8</td>
					<td>宫格9</td>
				</tr>
			</table>
		</div>
		<div class="local">
			<h4>发布会现场奖品抽奖</h4>
			<table border="1">
				<tr>
					<td>宫格1</td>
					<td>宫格2</td>
					<td>宫格3</td>
				</tr>
				<tr>
					<td>宫格4</td>
					<td style="background:#20a0ff;color:#fff" @click="setOnline(2)">设置</td>
					<td>宫格6</td>
				</tr>
				<tr>
					<td>宫格7</td>
					<td>宫格8</td>
					<td>宫格9</td>
				</tr>
			</table>
		</div>

		<el-dialog title="参与活动奖励抽奖设置" :visible.sync="dialogVisible" @close="closePop">
			<ul>
				<li>
					<p></p>
					<p>抽奖类型</p>
					<p>奖品名称</p>
					<p>奖品图片</p>
					<p>奖品数量</p>
					<p>中奖概率</p>
					<p>最大中奖数</p>
				</li>
				<li v-for="(item,index) in table" :key="index">
					<!-- 序号 -->
					<p>宫格{{item.serialNumber}}</p>

					<!-- 奖品类型 -->
					<p>
						<el-select v-model="item.prizeGoodsType" placeholder="请选择" @visible-change="discount(index)">
							<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</p>

					<!-- 奖品名称 -->
					<p>
						<el-input v-model="item.name" placeholder v-if="item.prizeGoodsType != 2" ref="prizeName"></el-input>
						<el-select v-model="item.goodsId" placeholder="请选择" v-else ref="prizeTicket">
							<el-option v-for="item in couponData" :key="item.id" :label="item.title" :value="item.id"></el-option>
						</el-select>
					</p>
					<!-- 奖品图片 -->
					<p>
						<el-upload
							class="avatar-uploader"
							:action="BASE_API + '/api/universal/file/app/unauth/admin/upload'"
							:show-file-list="false"
							:on-success="(response, file, fileList,id)=> handleSuccess(response, file, fileList,index)"
						>
							<img v-if="item.iconPath" :src="item.iconPath" style="width:50px;height:30px" ref="prizeImg"/>
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</p>
					<!-- 奖品数量 -->
					<p>
						<el-input v-model="item.totalStock" placeholder ref="prizeNumber"></el-input>
					</p>
					<!-- 中奖概率 -->
					<p>
						<el-input v-model="item.probability" placeholder ref="prizeTheory"></el-input>
					</p>
					<!-- 最大中奖数 -->
					<p>
						<el-input v-model="item.dayMaxUse" placeholder ref="prizeNumberMax"></el-input>
					</p>
				</li>
			</ul>
			<p style="text-align:center">
				<el-button type="primary" @click="save">保存</el-button>
			</p>
		</el-dialog>

	</div>
</template>
<script>
import { getTitle } from 'api/cunponManagements'
import { savePrize, infoPrize } from 'api/applyManagements'
export default {
	data() {
		return {
			demoImg:'',
			or: '',
			BASE_API: process.env.BASE_API,
			couponData: [],
			dialogVisible: false,
			value4: '',
			input: '',
			iconPath: '',
			options: [
				{
					id: 1,
					name: '奖品'
				},
				{
					id: 2,
					name: '优惠券'
				},
				{
					id: 0,
					name: '谢谢参与'
				}
			],
			table: [
				{
					serialNumber: '1',
					name: '', //奖品名称
					iconPath:'', //奖品图片
					totalStock: '', //奖品数量
					probability: '', //中奖概率
					dayMaxUse: '', //最大次数
					prizeGoodsType: '', //奖品类型
					goodsId: '', //优惠券id
					id: null
				},
				{
					serialNumber: '2',
					name: '', //奖品名称
					iconPath: '', //奖品图片
					totalStock: '', //奖品数量
					probability: '', //中奖概率
					dayMaxUse: '', //最大次数
					prizeGoodsType: '', //奖品类型
					goodsId: '', //优惠券id
					id: null
				},
				{
					serialNumber: '3',
					name: '', //奖品名称
					iconPath: '', //奖品图片
					totalStock: '', //奖品数量
					probability: '', //中奖概率
					dayMaxUse: '', //最大次数
					prizeGoodsType: '', //奖品类型
					goodsId: '', //优惠券id
					id: null
				},
				{
					serialNumber: '4',
					name: '', //奖品名称
					iconPath: '', //奖品图片
					totalStock: '', //奖品数量
					probability: '', //中奖概率
					dayMaxUse: '', //最大次数
					prizeGoodsType: '', //奖品类型
					goodsId: '', //优惠券id
					id: null
				},
				{
					serialNumber: '5',
					name: '', //奖品名称
					iconPath: '', //奖品图片
					totalStock: '', //奖品数量
					probability: '', //中奖概率
					dayMaxUse: '', //最大次数
					prizeGoodsType: '', //奖品类型
					goodsId: '', //优惠券id
					id: null
				},
				{
					serialNumber: '6',
					name: '', //奖品名称
					iconPath: '', //奖品图片
					totalStock: '', //奖品数量
					probability: '', //中奖概率
					dayMaxUse: '', //最大次数
					prizeGoodsType: '', //奖品类型
					goodsId: '', //优惠券id
					id: null
				},
				{
					serialNumber: '7',
					name: '', //奖品名称
					iconPath: '', //奖品图片
					totalStock: '', //奖品数量
					probability: '', //中奖概率
					dayMaxUse: '', //最大次数
					prizeGoodsType: '', //奖品类型
					goodsId: '', //优惠券id
					id: null
				},
				{
					serialNumber: '8',
					name: '', //奖品名称
					iconPath: '', //奖品图片
					totalStock: '', //奖品数量
					probability: '', //中奖概率
					dayMaxUse: '', //最大次数
					prizeGoodsType: '', //奖品类型
					goodsId: '', //优惠券id
					id: null
				}
			]
		}
	},
	created() {
		this.getTitleFn()
	},
	methods: {
		//优惠券
		discount(val){
			this.table[val].name = ''
			this.table[val].goodsId = ''
			// if (!this.table[val].goodsId ||) {
			// 	this.table[val].goodsId = ''
			// 	console.log(this.table);
			// }
			
		},
		//图片上传
		handleSuccess(res, file,list,id) {
			this.table[id].iconPath = res.data
		},
		//弹窗关闭
		closePop() {
			this.table = [
				{
					serialNumber: '1',
					name: '', //奖品名称
					iconPath:
						'https://xxtest.upyuns.com/image/admin/2019-12-05/37.jpg', //奖品图片
					totalStock: '', //奖品数量
					probability: '', //中奖概率
					dayMaxUse: '', //最大次数
					prizeGoodsType: '', //奖品类型
					goodsId: '', //优惠券id
					id: null
				},
				{
					serialNumber: '2',
					name: '', //奖品名称
					iconPath: '', //奖品图片
					totalStock: '', //奖品数量
					probability: '', //中奖概率
					dayMaxUse: '', //最大次数
					prizeGoodsType: '', //奖品类型
					goodsId: '', //优惠券id
					id: null
				},
				{
					serialNumber: '3',
					name: '', //奖品名称
					iconPath: '', //奖品图片
					totalStock: '', //奖品数量
					probability: '', //中奖概率
					dayMaxUse: '', //最大次数
					prizeGoodsType: '', //奖品类型
					goodsId: '', //优惠券id
					id: null
				},
				{
					serialNumber: '4',
					name: '', //奖品名称
					iconPath: '', //奖品图片
					totalStock: '', //奖品数量
					probability: '', //中奖概率
					dayMaxUse: '', //最大次数
					prizeGoodsType: '', //奖品类型
					goodsId: '', //优惠券id
					id: null
				},
				{
					serialNumber: '5',
					name: '', //奖品名称
					iconPath: '', //奖品图片
					totalStock: '', //奖品数量
					probability: '', //中奖概率
					dayMaxUse: '', //最大次数
					prizeGoodsType: '', //奖品类型
					goodsId: '', //优惠券id
					id: null
				},
				{
					serialNumber: '6',
					name: '', //奖品名称
					iconPath: '', //奖品图片
					totalStock: '', //奖品数量
					probability: '', //中奖概率
					dayMaxUse: '', //最大次数
					prizeGoodsType: '', //奖品类型
					goodsId: '', //优惠券id
					id: null
				},
				{
					serialNumber: '7',
					name: '', //奖品名称
					iconPath: '', //奖品图片
					totalStock: '', //奖品数量
					probability: '', //中奖概率
					dayMaxUse: '', //最大次数
					prizeGoodsType: '', //奖品类型
					goodsId: '', //优惠券id
					id: null
				},
				{
					serialNumber: '8',
					name: '', //奖品名称
					iconPath: '', //奖品图片
					totalStock: '', //奖品数量
					probability: '', //中奖概率
					dayMaxUse: '', //最大次数
					prizeGoodsType: '', //奖品类型
					goodsId: '', //优惠券id
					id: null
				}
			]
		},
		//设置弹窗
		setOnline(val) {
			this.or = val
			this.dialogVisible = true
			infoPrize().then(data => {
				if (val == 1) {
					if (data.data.onlinePrize != ''){
						data.data.onlinePrize.forEach(element => {
							if (!element.goodsId) {
								element.goodsId = ''
							}
							if (!element.totalStock) {
								element.totalStock = ''
							}
							if (!element.dayMaxUse) {
								element.dayMaxUse = ''
							}
						});
					}
					this.table = data.data.onlinePrize
				} else {
					if (data.data.localePrize != ''){
						data.data.localePrize.forEach(element => {
							if (!element.goodsId) {
								element.goodsId = ''
							}
							if (!element.totalStock) {
								element.totalStock = ''
							}
							if (!element.dayMaxUse) {
								element.dayMaxUse = ''
							}
						});
					}	
					this.table = data.data.localePrize
				}
			})
		},
		//保存
		save() {
			var flig = true;
			this.table.forEach(element => {
				if(element.prizeGoodsType == 1 || element.prizeGoodsType === ''){
					if (element.name === '' || element.iconPath === '' || element.totalStock === '' || element.probability === '' || element.dayMaxUse === '') {
						flig = false
						return false
					}
				}
				if(element.prizeGoodsType == 2 || element.prizeGoodsType === ''){
					if (element.goodsId === '' || element.iconPath === '' || element.totalStock === '' || element.probability === '' || element.dayMaxUse === '') {
						flig = false
						return false
					}
				}
				if(element.prizeGoodsType == 0 || element.prizeGoodsType === ''){
					if (element.name === '' || element.iconPath === '' || element.probability === '') {
						flig = false
						return false
					}
				}
				if(!flig){
					return true
				}
			});
			// console.log(flig);
			
			if(flig){
				let params = []
				this.table.forEach(element => {
					let defaults = {
						serialNumber: element.serialNumber,
						name: element.name,
						iconPath: element.iconPath,
						dayMaxUse: element.dayMaxUse,
						totalStock: element.totalStock,
						probability: element.probability,
						type: this.or,
						prizeGoodsType: element.prizeGoodsType,
						goodsId: element.goodsId,
						id: element.id
					}
					params.push(defaults)
				})
				savePrize(params).then(data => {
					if (data.status == 200) {
						this.$message.success('设置成功')
						this.dialogVisible = false
					} else {
						this.$message.error(data.message)
					}
				})
				// console.log(params);
				
			}else{
				this.$message('必填项不能为空')
			}
		},
		
		//优惠券列表
		getTitleFn() {
			getTitle().then(data => {
				if (data.status == 200) {
					this.couponData = data.data
				} else {
					this.$message.error('优惠券获取失败')
				}
			})
		}
	}
}
</script>
<style scoped>
.el-dialog--small {
	width: 60% !important;
}
.avatar-uploader-icon {
	width: auto;
	height: auto;
}
li {
	list-style: none;
	overflow: hidden;
	/* text-align: center; */
}
li p {
	float: left;
	margin-left: 10px;
}
li:nth-child(1) p {
	color: #ccc;
}
li p:nth-child(1) {
	width: 8%;
	margin-top: 20px;
}
li p:nth-child(2) {
	width: 18%;
}
li p:nth-child(3) {
	width: 18%;
}
li p:nth-child(4) {
	width: 8%;
}
li p:nth-child(5) {
	width: 13%;
}
li p:nth-child(6) {
	width: 13%;
}
li p:nth-child(7) {
	width: 8%;
}
.online,
.local {
	width: 49%;
	display: inline-block;
}
.online {
	float: left;
}
.local {
	float: right;
}
h4 {
	text-align: center;
	font-size: 20px;
	font-weight: 400;
}
table {
	border: 1px solid #d9d9d9;
	margin: 0 auto;
}
td {
	width: 150px;
	height: 150px;
	text-align: center;
}
</style>