<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-message"></i> Promotion Record
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container_state">
			<div class="handle-box">
				<el-button type="primary" icon="el-icon-plus" class="handle-del" @click="addTtask()">
					Add email promotion task
				</el-button>
				<!-- 	<el-button type="warning" icon="el-icon-document-copy" @click="addTemple()">
					Mail Template
				</el-button> -->
			</div>
			<p v-if="tableData.length==0" style="color: #6f6f6f;font-size: 18px;margin-top: 30px;text-align: center;">No task</p>
			<div v-for="item in tableData" class="taskList" :style="stateChange(item.range,item.is_end)">
				<div style="text-align: right;padding-right: 60px;">
					<el-button type="primary" size="mini" icon="el-icon-view" @click="handleSend(item)">
						Preview mail
					</el-button>
					<el-button type="success" size="mini" icon="el-icon-postcard" @click="handleTest(item)">
						Send test mail
					</el-button>
					<el-button type="warning" size="mini" icon="el-icon-finished" @click="handleTaske(item,1)"
						v-if="item.is_end==1">
						Open Task
					</el-button>
					<el-button type="info" size="mini" icon="el-icon-circle-close" @click="handleTaske(item,2)"
						v-if="item.is_end==0">
						Close Task
					</el-button>
					<el-button type="danger" size="mini" icon="el-icon-delete" @click="handleDelete(item)">
						Delete
					</el-button>
				</div>
				<!-- <div class="taskRow" style="font-size: 16px;margin:-23px 0 15px 0;letter-spacing: -0.5px;">
					<b>{{decjuRange(item.range)}}</b>
				</div> -->
				<div class="taskRow">
					<font>
						<i class="el-icon-paperclip"></i>
						Promoting journal :
					</font>
					{{item.journal_title}}
				</div>
				<div class="taskRow">
					<font>
						<i class="el-icon-user"></i>
						Target library :
					</font>
					{{decjuSendata(item.library)}}
					<p v-if="item.category=='major'" style="display: inline-block;">
						({{item.major_str}})
					</p>
					<p v-if="item.category=='keyword'" style="display: inline-block;">
						({{item.keyword}})
					</p>
				</div>
				<div class="taskRow">
					<font>
						<i class="el-icon-message"></i>
						Mail title :
					</font>
					{{item.email_title}}
				</div>
				<div class="taskRow">
					<font>
						<i class="el-icon-time"></i>
						Scheduled Tasks :
					</font>
					{{timefreSDel(item.frequency)}}
				</div>
				<div class="taskRow">
					<font>
						<i class="el-icon-position"></i>
						Sent personnel :
					</font>
					<b style="color: #006699">{{item.user_count}}</b> in total,
					<b style="color: #006699">{{item.user_send}}</b> people have been sent,
					send <b style="color: #006699">{{item.pagesize}}</b> people each time.
					<!-- <div style="margin: 10px 0 0 120px;">
						<p v-for="item in numbeoList" class="sentPeale">
							<font :style="item.disfor?'background-color:#F56C6C':'background-color:#006699'"></font>
							<b class="el-icon-success" v-if="item.disfor" style="color: #159900;"></b>
							<b class="el-icon-error" v-if="!item.disfor" style="color: #F56C6C;"></b>
							{{item.title}}
						</p>
					</div> -->
				</div>
				<div class="ribbon-lanren" v-if="item.is_end==0">
					<div class="blue">In Progress</div>
				</div>

				<div class="ribbon-lanren" v-if="item.is_end==1">
					<div class="gray">Unexecuted</div>
				</div>

			</div>
		</div>

		<!-- 预览弹出框 -->
		<el-dialog title="Preview mail messages" :visible.sync="sendVisible" :close-on-click-modal="false"
			width="850px">
			<el-form ref="send_Form" :model="sendForm" :rules="rules" label-width="160px">
				<!-- <el-form-item label="Target personnel :" prop="senProce">
					<el-checkbox-group v-model="sendForm.senProce" @change="chanProce">
						<el-checkbox v-for="item in numbeoList" :label="item.id" :key="item.id" :disabled="item.disfor">
							{{item.title}}
						</el-checkbox>
					</el-checkbox-group>
				</el-form-item> -->
				<!-- <el-form-item label="Mail Range :">
					<div>{{decjuRange(sendForm.range)}}</div>
				</el-form-item> -->
				<el-form-item label="Promoting journal :">
					<div>{{sendForm.journal_title}}</div>
				</el-form-item>
				<el-form-item label="Target library :">
					<div>
						{{decjuSendata(sendForm.library)}}
						<p v-if="sendForm.category=='major'" style="display: inline-block;">
							({{sendForm.major_str}})
						</p>
						<p v-if="sendForm.category=='keyword'" style="display: inline-block;">
							({{sendForm.keyword}})
						</p>
					</div>
				</el-form-item>
				<el-form-item label="Subject :">
					<div>{{sendForm.email_title}}</div>
				</el-form-item>
				<!-- <el-form-item label="Mail Template :">
					<div>Customize</div>
				</el-form-item> -->
				<el-form-item label="Content :">
					<div class="senderKuan">
						<img src="../../assets/img/mailPT.png" style="margin-bottom: -10px;" v-if="sendForm.has_hb==1">
						<div v-html="sendForm.template" style="padding: 20px;word-wrap: break-word;word-break: normal;">
						</div>
						<img src="../../assets/img/mailPB.png" v-if="sendForm.has_hb==1">
					</div>
				</el-form-item>
				<el-form-item label="Scheduled Tasks :">
					{{timefreSDel(sendForm.frequency)}}
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="sendVisible = false;">Cancel</el-button>
				<!-- <el-button type="primary" @click="saveSend(sendForm)">Send mail</el-button> -->
			</span>
		</el-dialog>


		<!-- 测试邮件弹出框 -->
		<el-dialog title="Send test mail" :visible.sync="testEBox" width="500px" :close-on-click-modal="false">
			<el-form ref="testRef" :rules="rules" :model="testEForm" label-width="120px">
				<el-form-item label="Mail title :">
					{{testEForm.email_title}}
				</el-form-item>
				<el-form-item label="Test Email :" prop="email">
					<el-input v-model="testEForm.email" style="width: 280px;" placeholder="Please enter the test email">
					</el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="testEBox = false">Cancel</el-button>
				<el-button type="primary" @click="sendTest">Send test mail</el-button>
			</span>
		</el-dialog>

		<!-- 开关任务弹出框 -->
		<el-dialog title="" :visible.sync="taskBox" width="500px" :close-on-click-modal="false">
			<div style="position: relative;">
				<i class="el-icon-warning"
					style="color: #E6A23C;font-size:30px;margin-right: 5px;position: absolute;top: 5px;left: 10px;"></i>
				<p style="font-size: 15px;line-height: 26px;padding: 5px 35px 0px 50px;word-break: normal;">
					<font v-if="taskForm.index==2">
						Are you sure want to stop executing the email '
						<b style="letter-spacing: -0.5px;">{{taskForm.email_title}}</b>' task?
					</font>
					<font v-if="taskForm.index==1">
						Are you sure want to start executing the email '
						<b style="letter-spacing: -0.5px;">{{taskForm.email_title}}</b>' task?
						<br>
						The task cycle is <b>{{timefreSDel(taskForm.frequency)}}</b>
					</font>
				</p>
			</div>

			<span slot="footer" class="dialog-footer">
				<el-button @click="taskBox = false">Cancel</el-button>
				<el-button type="primary" @click="gengTask">OK</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				edit_id: localStorage.getItem('U_id'),
				tableData: [],
				sendForm: {},
				sendVisible: false,
				testEForm: {
					email: '376837995@qq.com'
				},
				testEBox: false,
				rangeList: [{
					title: 'Appointment',
					id: 1
				}, {
					title: 'Article Recommendation',
					id: 2
				}, {
					title: 'Promotion',
					id: 3
				}],
				numbeoList: [{
					title: '1-100',
					id: 1,
					disfor: true
				}, {
					title: '101-200',
					id: 2,
					disfor: false
				}, {
					title: '201-300',
					id: 3,
					disfor: false
				}],
				taskBox: false,
				taskForm: {},
				rules: {
					senProce: [{
						required: true,
						message: 'Please select target personnel',
						trigger: 'blur'
					}],
					email: [{
						required: true,
						message: 'Please enter a email',
						trigger: 'blur'
					}],
				},
			};
		},
		created: function() {
			this.getData();
		},
		computed: {

		},
		methods: {
			//获取数据
			getData() {
				this.$api
					.post('api/Promotion/getPromotions', {
						user_id: this.edit_id
					})
					.then(res => {
						if (res.code == 0) {
							this.tableData = res.data.list
							for (let i = 0; i < this.tableData.length; i++) {
								this.tableData[i].journal_title = this.tableData[i].journal.title
								if (this.tableData[i].pushed == '') {
									this.tableData[i].user_send = 0
								} else {
									this.tableData[i].user_send = this.tableData[i].pagesize * this.tableData[i].pushed
										.length
								}
							}
						} else {
							this.$message.error('res.msg');
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},

			// 编辑操作
			handleSend(row) {
				this.sendForm = row
				this.sendForm.senProce = []
				this.sendVisible = true
			},

			// 保存编辑
			saveSend(sendForm) {
				this.$refs.send_Form.validate((valid) => {
					if (valid) {

					} else {
						this.$message.error('Please complete the information!');
					}
				});
			},

			// 测试邮件弹出
			handleTest(e) {
				this.testEForm.pro_id = e.pro_id;
				this.testEForm.email_title = e.email_title;
				// this.testEForm.email = '';
				this.testEBox = true
			},

			// 发送测试邮件
			sendTest() {
				this.$refs.testRef.validate((valid) => {
					if (valid) {
						this.$api
							.post('api/Promotion/pushTestEmail', this.testEForm)
							.then(res => {
								if (res.code == 0) {
									this.$message.success('Successfully send test email!');
									this.testEBox = false
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});
					} else {

						this.$message.error('Please complete the information!');
					}
				});
			},


			// 开启关闭任务
			handleTaske(row, index) {
				this.taskForm.email_title = row.email_title
				this.taskForm.frequency = row.frequency
				this.taskForm.pro_id = row.pro_id
				this.taskForm.index = index
				this.taskBox = true
			},
			// 开启关闭任务确认
			gengTask() {
				let bianUrl
				if (this.taskForm.index == 1) {
					bianUrl = 'api/Promotion/startPromotion'
				}
				if (this.taskForm.index == 2) {
					bianUrl = 'api/Promotion/stopPromotion'
				}
				this.$api
					.post(bianUrl, this.taskForm)
					.then(res => {
						if (res.code == 0) {
							this.$message.success('Succeeded!');
							this.taskBox = false
							this.getData();
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},

			// 删除操作
			handleDelete(row) {
				// 二次确认删除
				this.$confirm('Are you sure to delete this email "' + row.email_title + '"?', 'Tips', {
						distinguishCancelAndClose: true,
						confirmButtonText: 'OK',
						cancelButtonText: 'Cancel'
					})
					.then(() => {
						this.$api
							.post('api/Promotion/delPromotion', row)
							.then(res => {
								if (res.code == 0) {
									this.$message.success('Delete succeeded!');
									this.getData();
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});
					})
					.catch(() => {});
			},

			// 添加邮件任务
			addTtask() {
				this.$router.push({
					path: 'disseMinate',
				});
			},

			// 添加模板
			addTemple() {
				this.$router.push({
					path: 'disseMTemple',
				});
			},

			// 任务范围
			decjuRange(e) {
				let phrase = '';
				switch (e) {
					case 1:
						phrase = 'Appointment';
						break;
					case 2:
						phrase = 'Article Recommendation';
						break;
					case 3:
						phrase = 'Promotion';
						break;
				}
				return phrase;
			},

			// 人员范围
			decjuSendata(e) {
				let phrase = '';
				switch (e) {
					case 'user':
						phrase = 'All Users';
						break;
					case 'author':
						phrase = 'Author Database';
						break;
					case 'ash':
						phrase = 'Untapped Users';
						break;
				}
				return phrase;
			},

			// 发送时间
			timefreSDel(e) {
				let phrase = '';
				switch (e) {
					case 'day':
						phrase = 'Day (explanatory note: 10:00 - 12:00)';
						break;
					case 'week':
						phrase = 'Week (explanatory note: Monday - Tuesday)';
						break;
					case 'month':
						phrase = 'Month (explanatory note: 1st - 5th)';
						break;
				}
				return phrase;
			},

			// 改变人员多选框
			chanProce(e) {
				this.$forceUpdate()
			},

			// 列表颜色
			stateChange(value, contol) {
				let str = '';
				let sgr = '';
				let skr = '';
				switch (contol) {
					case 0:
						str = '#5a90e10d;';
						sgr = '#5a90e14d;';
						skr = '0px 0px 4px #5a90e133;';
						break;
					case 1:
						str = '#8888880d;';
						sgr = '#8888884d;';
						skr = '0px 0px 4px #88888833;';
						break;
				}
				return 'background-color:' + str + ';border-color:' + sgr + ';box-shadow:' + skr;
			},
		}
	};
</script>

<style scoped>
	.handle-box {
		margin: 20px 0;
	}

	.table {
		width: 100%;
		font-size: 14px;
	}

	.red {
		color: #ff0000;
	}

	.taskList {
		color: #333;
		margin: 0 0 20px 0;
		font-size: 14px;
		border-radius: 5px;
		border: 1px solid #EBEEF5;
		background-color: #fff;
		padding: 20px;
		position: relative;
	}

	.taskRow {
		margin: 0 0 5px 0;
		line-height: 24px;
	}



	.taskRow>font {
		font-size: 13px;
		color: #666b7a;
		display: inline-block;
		margin: 0 10px 0 0;
	}

	.taskRow>font>i {
		margin: 0 3px 0 0;
	}

	.sentPeale {
		display: inline-block;
		margin-right: 40px;
	}

	.sentPeale font {
		display: inline-block;
		width: 10px;
		height: 10px;
		background-color: #000;
		border-radius: 10px;
	}

	.sentPeale b {
		font-weight: bold;
		font-size: 18px;
		display: inline-block;
		vertical-align: text-bottom;
		margin: 0 3px 0 0;
	}


	.senderKuan {
		margin: 5px 0 0 0;
		padding: 5px;
		border: 1px solid #00669933;
		background: #fff;
	}

	.senderKuan img {
		width: 100%;
		image-rendering: -webkit-optimize-contrast;
	}

	.lanren {
		margin: 50px auto;
		width: 280px;
		height: 180px;
		background: white;
		border-radius: 10px;
		-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
		-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
		box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
		position: relative;
		z-index: 90;
	}

	.ribbon-lanren {
		width: 85px;
		height: 88px;
		overflow: hidden;
		position: absolute;
		top: -3px;
		right: -3px;
	}

	.ribbon-lanren div {
		position: relative;
		padding: 7px 0;
		left: -5px;
		top: 15px;
		width: 120px;
		font: bold 12px Sans-Serif;
		color: #333;
		text-align: center;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
		-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
		box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
	}

	.ribbon-lanren .blue {

		text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px;

		background-color: #006699cc;
		background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
		background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
		background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);
		background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);
		background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);
		color: #fff;

	}

	.ribbon-lanren .gray {
		text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px;

		background-color: #e3e0e0;
		background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
		background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
		background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);
		background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);
		background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);
		color: #6a6340;
	}
</style>
