<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-user"></i> Inactive Users
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container" style="min-width: 1200px;">
			<div class="handle-box">
				<p class="titline" style="margin-top: 0;">
					Essential information
					<b class="el-icon-arrow-right" v-if="shoLosA==false" @click="shoLosA=true"></b>
					<b class="el-icon-arrow-down" v-if="shoLosA==true" @click="shoLosA=false"></b>
				</p>
				<div v-if="shoLosA">
					<div class="titSear">
						<span>Name/Email :</span>
						<el-input v-model="query.username" placeholder="Please enter">
						</el-input>
					</div>
					<div class="titSear">
						<span>Hindex :</span>
						<el-input v-model="query.username" placeholder="Please enter">
						</el-input>
					</div>
					<div class="titSear">
						<span>Country :</span>
						<el-select v-model="query.country">
							<el-option label="All country" :key="0" :value="0"></el-option>
							<el-option label="China" :key="1" :value="1"></el-option>
						</el-select>
					</div>
					<div class="titSear titMoreInp">
						<span>Research direction :</span>
						<!-- <el-input v-model="query.username" placeholder="Please enter">
						</el-input>
						<el-input v-model="query.username" placeholder="Please enter" style="margin: 0 15px;">
						</el-input>
						<el-input v-model="query.username" placeholder="Please enter">
						</el-input> -->
						<el-select v-model="query.major_a" placeholder="Please select major" @change="majorChange(1)">
							<el-option v-for="item in majors_a" :key="item.major_id" :label="item.major_title"
								:value="item.major_id"></el-option>
						</el-select>
						<el-select v-model="query.major_b" placeholder="Please select major" v-if="majors_b!=''"
							@change="majorChange(2)" style="margin:0 15px;">
							<el-option :key="0" label="None" :value="0"></el-option>
							<el-option v-for="item in majors_b" :key="item.major_id" :label="item.major_title"
								:value="item.major_id"></el-option>
						</el-select>
						<el-select v-model="query.major_c" placeholder="Please select major" v-if="majors_c!=''"
							@change="majorChange(3)">
							<el-option :key="0" label="None" :value="0"></el-option>
							<el-option v-for="item in majors_c" :key="item.major_id" :label="item.major_title"
								:value="item.major_id"></el-option>
						</el-select>
					</div>
				</div>

				<div class="btnSear">
					<el-button type="primary" icon="el-icon-search" @click="getDate"
						style="margin-left: 70px;padding: 10px 80px;">
						Search
					</el-button>
					<el-button plain icon="el-icon-refresh" @click="getDate">
						Reset
					</el-button>
				</div>

				<div style="float: right;margin-top: -65px;">
					<el-button type="warning" icon="el-icon-document" @click="handleSendAll">PROMOTION
					</el-button>
				</div>

			</div>
			<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header"
				@selection-change="handleSelectionChange" :row-key="getRowKeys" empty-text="New messages (0)">
				<el-table-column type="selection" :reserve-selection="true" prop="user_id" width="45" align="center">
				</el-table-column>
				<el-table-column label="Base Information">
					<template slot-scope="scope">
						<p class="tab_base">
							<span>Realname:</span><b>{{scope.row.realname}}</b>
						</p>
						<p class="tab_base">
							<span>Account:</span>{{scope.row.account}}
						</p>

						<p class="tab_base">
							<span>Email:</span>{{scope.row.email}}
						</p>
					</template>
				</el-table-column>
				<el-table-column label="Other Information">
					<template slot-scope="scope">
						<p class="tab_base">
							<span>Country:</span>{{scope.row.country}}
						</p>
						<p class="tab_base">
							<span>Research direction:</span>
						</p>
						<p class="tab_base">
							<span>Institute:</span>
						</p>
						<p class="tab_base">
							<span>Activity:</span>
						</p>
					</template>
				</el-table-column>
				<el-table-column prop="" label="WOS Index" width="100px" align="center">
					<template slot-scope="scope">
						<p v-html="colorIndex(scope.row.wos_index,scope.row.wos_time)"></p>
					</template>
				</el-table-column>
				<el-table-column prop="" label="Google Index" width="110px" align="center">
					<template slot-scope="scope">
						<p v-html="colorIndex(scope.row.google_index,scope.row.google_time)"></p>
					</template>
				</el-table-column>
				<el-table-column label="Role" width="175px">
					<template slot-scope="scope">
						<p v-for="item in scope.row.roles" class="ro_li_ku">
							<font v-if="item=='author'">Author</font>
							<font v-if="item=='editor'">Editor</font>
							<font v-if="item=='chief'">Editor-in-Chief</font>
							<font v-if="item=='reviewer'">Reviewer</font>
							<font v-if="item=='board'">Editorial Board Member</font>
							<font v-if="item=='yboard'">Young Scientist Member</font>
							<font v-if="item=='special'">Guest Editor</font>
						</p>
						<br clear="both">
					</template>
				</el-table-column>
				<el-table-column label=" " width="105" align="center">
					<template slot-scope="scope">
						<el-button plain type="primary" icon="el-icon-discount" @click="handleRole(scope.row)">Detail
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"
					:page-size="query.pageSize" :total="link_Total" @current-change="handlePageChange">
				</el-pagination>
			</div>
		</div>

		<!-- 推广发送邮件弹出框 -->
		<el-dialog title="Send mail" :visible.sync="mailVisible" width="800px">
			<el-form ref="mail_Tab" :model="mailForm" :rules="rules" label-width="140px">
				<el-form-item label="User information :">
					<div class="poplSty">
						<div v-for="(item,index) in mailForm.pooplist">
							{{item.realname}} (<span style="color: #073a54;">{{item.email}}</span>)
							<i class="el-icon-delete" @click="delePopMail(index)"></i>
						</div>
					</div>
					<p style="color: #006699;text-align: right;" v-if="mailForm.pooplist.length>3">
						{{mailForm.pooplist.length}} in total
					</p>
				</el-form-item>
				<el-form-item label="Template :" prop="pem_id">
					<el-select v-model="mailForm.pem_id" filterable placeholder="请选择模板" @change="tem_plt">
						<el-option label="None" :value="0"></el-option>
						<el-option v-for="item in formwork" :key="item.pem_id" :label="item.title" :value="item.pem_id">
						</el-option>
					</el-select>
					<el-button type="warning" icon="el-icon-notebook-2" @click="add_Shutter" style="margin-left: 20px;">
						Template management</el-button>
				</el-form-item>
				<el-form-item label="Content :" prop="content">
					<quill-editor ref="myTextEditor" v-model="mailForm.content" :options="editorOption">
					</quill-editor>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="mailVisible = false">Cancel</el-button>
				<el-button type="primary" @click="savSendmail">Send mail</el-button>
			</span>
		</el-dialog>



	</div>
</template>

<script>
	export default {
		name: 'partyList',
		data() {
			return {
				mediaUrl: this.Common.mediaUrl,
				userrole: localStorage.getItem('U_status'),
				guest_id: localStorage.getItem('U_id'),
				tableData: [],
				multipleSelection: [],
				mailForm: {
					pooplist: [],
					pem_id: 0
				},
				formwork: {},
				query: {
					role: 0,
					activ: 0,
					journal: 1,
					country: 0,
					pageIndex: 1,
					pageSize: 15,
					username: '',
					major: '',
					major_a: '',
					major_b: '',
					major_c: '',
				},
				link_Total: 0,
				shoLosA: true,
				mailVisible: false,
				majors_a: [],
				majors_b: [],
				majors_c: [],
				rules: {
					account: [{
						required: true,
						message: 'Please input account',
						trigger: 'blur'
					}],
					email: [{
						required: true,
						message: 'Please input email',
						trigger: 'blur'
					}, {
						validator: function(rule, value, callback) {
							if (/^[-.-_A-Za-z0-9]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value) == false) {
								callback(new Error("Please enter the correct email format"));
							} else {
								callback();
							}
						},
						trigger: "blur"
					}],
					realname: [{
						required: true,
						message: 'Please input realname',
						trigger: 'blur'
					}],
					phone: [{
						required: true,
						message: 'Please input phone',
						trigger: 'blur'
					}, {
						validator: function(rule, value, callback) {
							if (/^1[3456789]\d{9}$/.test(value) == false) {
								callback(new Error("Please enter the correct phone format!"));
							} else {
								callback();
							}
						},
						trigger: "blur"
					}],
					password: [{
						required: true,
						validator: 'Please input password',
						trigger: 'blur'
					}],
					repassword: [{
						required: true,
						validator: 'Please input password again',
						trigger: 'blur'
					}],
				},
				getRowKeys(row) {
					return row.user_id;
				},
				editorOption: {
					placeholder: 'Please enter...',
					modules: {
						toolbar: {
							container: [
								['bold', 'italic', 'underline', 'strike'],
								['blockquote', 'code-block'],
								[{
									'header': 1
								}, {
									'header': 2
								}],
								[{
									'list': 'ordered'
								}, {
									'list': 'bullet'
								}],
								[{
									'script': 'sub'
								}, {
									'script': 'super'
								}],
								[{
									'indent': '-1'
								}, {
									'indent': '+1'
								}],
								[{
									'direction': 'rtl'
								}],
								[{
									'size': ['small', false, 'large', 'huge']
								}],
								[{
									'header': [1, 2, 3, 4, 5, 6, false]
								}],
								[{
									'color': []
								}, {
									'background': []
								}],
								[{
									'font': []
								}],
								[{
									'align': []
								}],
								['link']
							]
						}
					}
				},
			};
		},
		mounted() {

		},
		created() {
			this.getDate()
			this.initMajor()
		},
		methods: {
			// 获取数据
			getDate() {
				this.$api
					.post('api/User/getAllUser', this.query)
					.then(res => {
						if (res.code == 0) {
							this.tableData = res.data.users;
							this.link_Total = res.data.count || 0;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},

			// 指数颜色
			colorIndex(num, time) {
				if (time != 0) {
					let date = new Date(parseInt(time * 1000));
					let Y = date.getFullYear() + '-';
					let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-';
					let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
					let H = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
					let U = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
					time = Y + M + D;
				}

				let str = '';
				if (num < 10) {
					str = '<b style="color:#cb160a">' + num +
						'</b><br/><span style="color:#aaa;font-size:14px;margin-left:5px;"> (' + time +
						')</span>'
				} else if (num < 15) {
					str = '<b style="color:#cbb504">' + num +
						'</b><br/><span style="color:#aaa;font-size:14px;margin-left:5px;"> (' + time +
						')</span>'
				} else {
					str = '<b style="color:#0cbc15">' + num +
						'</b><br/><span style="color:#aaa;font-size:14px;margin-left:5px;"> (' + time +
						')</span>'
				}
				if (time == 0) {
					str =
						'<b style="color:#aaa;">0 </b><br/><span style="color:#aaa;font-size:14px;margin-left:5px;">(No time)</span>'
				}
				return str;
			},

			// 多选表格
			handleSelectionChange(val) {
				this.multipleSelection = val;
				console.log(this.multipleSelection)
			},

			// 发送群邮件弹出
			handleSendAll() {
				if (this.multipleSelection.length > 0) {
					this.mailForm.pooplist = JSON.parse(JSON.stringify(this.multipleSelection))
					this.mailForm.content = ''
					this.mailForm.pem_id = 0
					this.mailVisible = true
				} else {
					this.$message.error('Please select a person first!');
				}
			},

			// 切换模板
			tem_plt(event) {

			},

			// 模板管理
			add_Shutter() {
				this.mailVisible = false
				this.$router.push({
					path: 'partyExte'
				});
			},

			// 删除邮箱
			delePopMail(e) {
				this.mailForm.pooplist.splice(e, 1)
			},

			// 确定发送
			savSendmail() {
				this.$refs.mail_Tab.validate((valid) => {
					if (valid) {

					} else {
						this.$message.error('error submit!!');
						return false;
					}
				});
			},

			// 编辑身份跳页面
			handleRole(row) {
				this.$router.push({
					path: 'partyRole',
					query: {
						id: row.user_id
					}
				});
			},

			// 领域
			initMajor() {
				this.$api
					.post('api/Ucenter/getMajor', {
						major_id: 1
					}).then((res) => {
						this.majors_a = res.data.major.children;
					});
			},

			majorChange(e) {
				if (e == 1) {
					this.$api
						.post('api/Ucenter/getMajor', {
							major_id: this.query.major_a
						}).then((res) => {
							this.majors_b = res.data.major.children;
							this.majors_c = []
							this.query.major_b = ''
							this.query.major_c = ''
							this.majorChange_panduan()
						});
				} else if (e == 2 && this.query.major_b != 0) {
					this.$api
						.post('api/Ucenter/getMajor', {
							major_id: this.query.major_b
						}).then((res) => {
							this.majors_c = res.data.major.children;
							this.query.major_c = ''
							this.majorChange_panduan()
						});
				} else {
					this.majorChange_panduan()
				}
			},

			majorChange_panduan() {
				if (this.query.major_c != '' || this.query.major_c != 0) {
					this.query.major = this.query.major_c
				} else if (this.query.major_b != '' || this.query.major_b != 0) {
					this.query.major = this.query.major_b
				} else {
					this.query.major = this.query.major_a
				}
				// this.getDate()
			},

			// 分页导航
			handlePageChange(val) {
				this.$set(this.query, 'pageIndex', val);
				this.getDate();
			},

			// 富文本编辑器
			onEditorChange({
				editor,
				html,
				text
			}) {
				this.content = html;
			},
		},
		computed: {

		},
		watch: {

		}
	};
</script>

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

	}

	.el-button--primary.is-plain:hover {
		background-color: #409EFF !important;
		color: #fff !important;
	}

	.ro_li_ku {
		border: 1px solid #419fcf;
		border-radius: 5px;
		color: #419fcf;
		display: inline-block;
		margin: 5px;
		padding: 0 5px;
		white-space: nowrap;
	}

	.titline {
		font-size: 14px;
		border-bottom: 1px solid #c7dbf1;
		padding: 0 0 15px 0;
		margin: 10px 0 15px 0;
	}

	.titline b {
		float: right;
		font-weight: bold;
		font-size: 16px;
		color: #006699;
		margin: 5px 10px 0 0;
		cursor: pointer;
		width: 1000px;
		text-align: right;
	}


	.titSear {
		width: 350px;
		margin-bottom: 18px;
		display: inline-block;
	}

	.titSear>span {
		color: #666;
		display: inline-block;
		vertical-align: middle;
		line-height: 20px;
		width: 140px;
		text-align: right;
		font-size: 14px;
		margin: 0 15px 0 0;
	}

	.titSear .el-select,
	.titSear .el-input {
		width: 180px;
	}


	.titSelectRole {
		display: block;
		width: 800px;
	}

	.titSelectAct {
		width: 100%;
	}



	.titMoreInp {
		width: 800px;
		margin-bottom: 0;
	}

	.titMoreInp .el-select,
	.titMoreInp .el-input {
		width: 258px;
	}


	.titSearLong {
		width: 390px;
	}

	.titSearLong>span {
		width: 165px;
	}

	.titSearLong .el-select,
	.titSearLong .el-input {
		width: 200px;
	}

	.btnSear {
		text-align: center;
		margin: 0 0 30px 0;
		/* border-top: 1px solid #c7dbf1; */
		padding: 20px 0 0 0;
	}

	.btnreset {
		float: right;
		color: #006699;
		font-size: 13px;
		margin: 12px 15px 0 0;
		text-decoration: underline;
	}

	.btnreset:hover {
		cursor: pointer;
	}

	.btnreset i {
		margin-right: 3px;
	}


	.starSty {
		width: 18px;
		vertical-align: sub;
	}

	.zhsoiuStyle {
		color: #006699;
		cursor: pointer;
		display: inline-block;
	}

	.zhsoiuStyle:hover {
		text-decoration: underline;
	}

	.zhsoiuStyle i {
		margin-right: 3px;
		font-weight: bold;
	}

	.poplSty {
		max-height: 160px;
		overflow-y: scroll;
		border: 1px solid #ccc;
		padding: 5px 15px;
	}

	.poplSty div i {
		margin: 0 0 0 15px;
		color: #e51818;
		cursor: pointer;
		font-size: 15px;
	}

	.tab_base {
		font-size: 15px;
		margin: 0 0 5px 0;
		color: #333;
	}

	.tab_base>span {
		color: #888;
		margin: 0 5px 0 0;
		font-size: 13px;
	}
</style>
