<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-user"></i> Potential Users
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container" style="min-width: 1000px;">
			<div class="handle-box">
				<span style="font-size: 14px;color: #606266;margin: 0 10px 0 0;">Title :</span>
				<el-select v-model="query.title" filterable placeholder="Please select" value-key="groupID"
					style="width: 200px;" @change="query.pageIndex = 1;getDate()">
					<el-option key="all" label="All title" value="all"></el-option>
					<el-option v-for="item in df_technical" :key="item.label" :label="item.label" :value="item.label">
					</el-option>
				</el-select>
				<span style="font-size: 14px;color: #606266;margin: 0 10px 0 30px;">Keyword :</span>
				<el-input v-model="query.keywords" placeholder="Realname/Email/Introduction/Company"
					style="width: 260px;margin: 0 10px 0 0;">
				</el-input>
				<el-input v-model="query.fieldkey" placeholder="Field1 ; Field2 ; Field3"
					style="width: 170px;margin: 0 10px 0 0;">
				</el-input>
				<el-button type="primary" icon="el-icon-search" @click="query.pageIndex = 1;getDate()">Search
				</el-button>
				<!-- 	<el-button type="warning" icon="el-icon-message" @click="handleSendAll()">
					PROMOTION</el-button> -->
				<el-button type="primary" icon="el-icon-plus" @click="handleAddUser" style="float: right;">Add user
				</el-button>
				<p style="height: 20px;"></p>
				<span style="font-size: 14px;color: #606266;margin: 0 10px 0 0;">Research direction :</span>
				<el-select v-model="query.major_a" placeholder="Please select major" @change="majorChange(1)"
					style="width: 240px;margin: 0 10px 0 0;">
					<el-option :key="0" label="All major" :value="0"></el-option>
					<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="width: 240px;margin:0 10px 0 0;">
					<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)" style="width: 240px;margin:0 10px 0 0;">
					<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>


			<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="User Message" width="220">
					<template slot-scope="scope">
						<p style="font-size: 16px;font-weight: bold;margin-top: 10px;">{{scope.row.name}}</p>
						<p style="margin: 10px 0 5px 0;">
							<span style="color: #999;">Email :</span>
							{{scope.row.email}}
						</p>
						<p style="margin: 0 0 5px 0;" v-if="scope.row.title!=''">
							<span style="color: #999;">Title :</span>
							{{scope.row.title}}
						</p>
						<p v-if="scope.row.country!=''">
							<span style="color: #999;">Country :</span>
							{{scope.row.country}}
						</p>
					</template>
				</el-table-column>
				<el-table-column prop="major_str" label="Research direction"></el-table-column>
				<el-table-column prop="company" label="Affiliation"></el-table-column>
				<el-table-column prop="field" label="Field"></el-table-column>
				<el-table-column prop="remark" label="Remark" width="160"></el-table-column>
				<el-table-column label="" width="100" align="center">
					<template slot-scope="scope">
						<el-button plain type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)">
							Edit
						</el-button>
						<!-- <div style="margin-top: 12px;">
							<el-button plain type="warning" @click="handleSend(scope.row)">
								PROMOTION
							</el-button>
						</div> -->
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination background layout="total, prev, pager, next ,jumper" :current-page="query.pageIndex"
					:page-size="query.pageSize" :total="link_Total" @current-change="handlePageChange">
				</el-pagination>
			</div>

			<!-- 修改用户信息弹出框 -->
			<el-dialog title="Edit user detail" :visible.sync="editVisible" width="700px" :close-on-click-modal="false">
				<el-form ref="editInpTab" :model="editForm" :rules="rules" label-width="150px">
					<el-form-item label="Realname :" prop="name">
						<el-input v-model="editForm.name" placeholder="Please enter"></el-input>
					</el-form-item>
					<el-form-item label="Email :" prop="email">
						<el-input v-model="editForm.email" placeholder="Please enter"></el-input>
					</el-form-item>
					<el-form-item label="Research direction :" prop="major">
						<el-select v-model="editForm.major_a" placeholder="Please select" @change="majorChangeEdit(1)"
							style="width: 150px;margin: 0 10px 0 0;">
							<el-option v-for="item in majors_a_edit" :key="item.major_id" :label="item.major_title"
								:value="item.major_id"></el-option>
						</el-select>
						<el-select v-model="editForm.major_b" placeholder="Please select" v-if="majors_b_edit!=''"
							@change="majorChangeEdit(2)" style="width: 150px;margin:0 10px 0 0;">
							<el-option :key="0" label="None" :value="0"></el-option>
							<el-option v-for="item in majors_b_edit" :key="item.major_id" :label="item.major_title"
								:value="item.major_id"></el-option>
						</el-select>
						<el-select v-model="editForm.major_c" placeholder="Please select" v-if="majors_c_edit!=''"
							@change="majorChangeEdit(3)" style="width: 150px;">
							<el-option :key="0" label="None" :value="0"></el-option>
							<el-option v-for="item in majors_c_edit" :key="item.major_id" :label="item.major_title"
								:value="item.major_id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="Country :" prop="country">
						<el-select v-model="editForm.country" filterable placeholder="Please select" value-key="groupID"
							style="width: 200px;">
							<el-option v-for="item in df_country" :key="item.en_name" :label="item.en_name"
								:value="item.en_name"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="Title :" prop="title">
						<el-select v-model="editForm.title" filterable placeholder="Please select" value-key="groupID"
							style="width: 200px;">
							<el-option v-for="item in df_technical" :key="item.label" :label="item.label"
								:value="item.label"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="Affiliation :" prop="company">
						<el-input v-model="editForm.company" placeholder="Please enter"></el-input>
					</el-form-item>
					<el-form-item label="Field :" prop="field">
						<el-input v-model="editForm.field" placeholder="Please enter" type="textarea" autosize>
						</el-input>
					</el-form-item>
					<el-form-item label="Introduction :">
						<el-input v-model="editForm.intro" placeholder="Please enter" type="textarea" autosize>
						</el-input>
					</el-form-item>
					<el-form-item label="Remark :" prop="remark">
						<el-input v-model="editForm.remark" placeholder="Please enter" type="textarea" autosize>
						</el-input>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="editVisible = false">Canel</el-button>
					<el-button @click="saveEdituser" type="primary">Save</el-button>
				</span>
			</el-dialog>

			<!-- 添加用户弹出框 -->
			<el-dialog title="Add User" :visible.sync="addVisible" :close-on-click-modal="false" width="660px">
				<el-tabs v-model="activeAdd" style="margin-top: -25px;">
					<el-tab-pane label="Excel import information" name="first">
						<el-upload class="upload-demo" :action="baseUrl+'api/User/upImportFile'"
							:on-success="handleFileSuccess" name="userFile" :on-error="handleFileError"
							:on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove"
							:on-change="handleChange" accept=".xlsx" :on-exceed="handleExceed" :file-list="fileL_excel"
							ref="upload" style="margin: 6px 0 0 0;">
							<el-button type="primary" style="font-weight: bolder;">
								<b class="el-icon-lx-top" style="font-weight: bolder;"></b> upload file
							</el-button>
						</el-upload>
						<p style="font-size: 12px; color: #aaa;margin-top: 15px;">Only compressed files can be
							uploaded(.xls)</p>
						<p class="impotTit" v-if="impotList.length>0">
							Read users
							<span>({{impotList.length}} in total)</span>
						</p>
						<div class="impotList">
							<div v-for="(item,index) in impotList">
								{{index+1}}. {{item.name}}
								<span class="ledEmail" v-if="item.email!=null">
									(<i class="el-icon-message"></i>{{item.email}})
								</span>
							</div>
						</div>
						<div style="text-align: right;margin: 30px 0 0 0;">
							<el-button @click="saveCaneluser">Cancel</el-button>
							<el-button type="primary" @click="saveExceluser" v-if="impotList.length>0">Confirm import
							</el-button>
						</div>
					</el-tab-pane>
					<el-tab-pane label="Enter information" name="second">
						<el-form ref="addInpTab" :model="addInpForm" :rules="rules" label-width="150px">
							<br>
							<el-form-item label="Realname :" prop="name">
								<el-input v-model="addInpForm.name" placeholder="Please enter"></el-input>
							</el-form-item>
							<el-form-item label="Email :" prop="email">
								<el-input v-model="addInpForm.email" placeholder="Please enter"></el-input>
							</el-form-item>
							<el-form-item label="Research direction :" prop="major">
								<el-select v-model="addInpForm.major_a" placeholder="Please select"
									@change="majorChangeInput(1)" style="width: 150px;margin: 0 10px 0 0;">
									<el-option v-for="item in majors_a_input" :key="item.major_id"
										:label="item.major_title" :value="item.major_id"></el-option>
								</el-select>
								<el-select v-model="addInpForm.major_b" placeholder="Please select"
									v-if="majors_b_input!=''" @change="majorChangeInput(2)"
									style="width: 150px;margin:0 10px 0 0;">
									<el-option :key="0" label="None" :value="0"></el-option>
									<el-option v-for="item in majors_b_input" :key="item.major_id"
										:label="item.major_title" :value="item.major_id"></el-option>
								</el-select>
								<el-select v-model="addInpForm.major_c" placeholder="Please select"
									v-if="majors_c_input!=''" @change="majorChangeInput(3)" style="width: 150px;">
									<el-option :key="0" label="None" :value="0"></el-option>
									<el-option v-for="item in majors_c_input" :key="item.major_id"
										:label="item.major_title" :value="item.major_id"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="Country :" prop="country">
								<el-select v-model="addInpForm.country" filterable placeholder="Please select"
									value-key="groupID" style="width: 200px;">
									<el-option v-for="item in df_country" :key="item.en_name" :label="item.en_name"
										:value="item.en_name"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="Title :" prop="title">
								<el-select v-model="addInpForm.title" filterable placeholder="Please select"
									value-key="groupID" style="width: 200px;">
									<el-option v-for="item in df_technical" :key="item.label" :label="item.label"
										:value="item.label"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="Company :" prop="company">
								<el-input v-model="addInpForm.company" placeholder="Please enter"></el-input>
							</el-form-item>
							<el-form-item label="Field :" prop="field">
								<el-input type="textarea" rows="3" v-model="addInpForm.field"
									placeholder="Please enter"></el-input>
							</el-form-item>
							<el-form-item label="Introduction :">
								<el-input type="textarea" rows="3" v-model="addInpForm.intro"
									placeholder="Please enter"></el-input>
							</el-form-item>
						</el-form>
						<div style="text-align: right;margin: 30px 0 0 0;">
							<el-button @click="addVisible = false">Cancel</el-button>
							<el-button type="primary" @click="saveInpuser">OK</el-button>
						</div>
					</el-tab-pane>
				</el-tabs>
			</el-dialog>

			<!-- 导入列表弹出框 -->
			<el-dialog title="Import List" :visible.sync="leadVisible" :close-on-click-modal="false" width="600px">
				<p class="ledTit" v-if="leadSuccList.length>0">
					Import successful users
					<span>({{leadSuccList.length}} in total)</span>
				</p>
				<div class="leadList">
					<div v-for="(item,index) in leadSuccList" class="ledList">
						<i class="el-icon-circle-check ledBiao" style="color: #66b90b;"></i>
						{{index+1}}. {{item.name}}
						<span class="ledEmail">
							(<i class="el-icon-message"></i>{{item.email}})
						</span>
					</div>
				</div>

				<p style="height: 25px;" v-if="leadSuccList.length>0&&leadFailList.length>0"></p>

				<p class="ledTit" v-if="leadFailList.length>0">
					Import failed users
					<span style="color: #b91b0b;">({{leadFailList.length}} in total)</span>
				</p>
				<div class="leadList">
					<div v-for="(item,index) in leadFailList" class="ledList">
						<i class="el-icon-circle-close ledBiao" style="color: #b91b0b;"></i>
						{{index+1}}. {{item.name}}
						<span class="ledEmail">
							(<i class="el-icon-message"></i>{{item.email}})
						</span>
						<span style="color: #c56c63;margin: 0 0 0 8px;font-size: 13px;">{{item.msg}}</span>
					</div>
				</div>
				<span slot="footer" class="dialog-footer">
					<el-button @click="leadVisible = false" type="primary">OK</el-button>
				</span>
			</el-dialog>

			<!-- 发送邮件弹出框 -->
			<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 v-for="(item,index) in mailForm.pooplist" v-if="index<mailForm.maxlist" class="poplSty">
							{{item.name}} (<i class="el-icon-message"></i><span
								style="color: #073a54;">{{item.email}}</span>)
							<i class="el-icon-delete" @click="delePopMail(index)" v-if="mailForm.pooplist.length>1"></i>
						</div>
						<p v-if="mailForm.pooplist.length>3&&mailForm.maxlist==3" @click="moreBtn('max')"
							class="zhsoiuStyle">
							<i class="el-icon-bottom"></i>more
						</p>
						<p v-if="mailForm.pooplist.length>3&&mailForm.maxlist>3" @click="moreBtn('min')"
							class="zhsoiuStyle">
							<i class="el-icon-top"></i>more
						</p>
						<p style="display: inline-block;margin: 0 0 0 20px;color: #999;"
							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="Please select a template"
							@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>
	</div>
</template>

<script>
	import 'quill/dist/quill.core.css';
	import 'quill/dist/quill.snow.css';
	import 'quill/dist/quill.bubble.css';
	import {
		quillEditor
	} from 'vue-quill-editor';
	export default {
		name: 'partyList',
		data() {
			return {
				baseUrl: this.Common.baseUrl,
				mediaUrl: this.Common.mediaUrl,
				userrole: localStorage.getItem('U_status'),
				guest_id: localStorage.getItem('U_id'),
				query: {
					pageIndex: 1,
					pageSize: 30,
					title: 'all',
					keywords: '',
					major: 0,
					major_a: 0,
					major_b: '',
					major_c: '',
				},
				multipleSelection: [],
				tableData: [],
				link_Total: 0,
				editVisible: false,
				mailVisible: false,
				addVisible: false,
				leadVisible: false,
				activeAdd: 'first',
				editForm: {},
				mailForm: {
					pooplist: [],
					maxlist: 3,
					pem_id: 0
				},
				impotList: [],
				leadSuccList: [],
				leadFailList: [],
				formwork: {},
				addInpForm: {
					major: 1,
					major_a: '',
					major_b: '',
					major_c: '',
				},
				fileL_excel: [],
				fileExcelFile: [],
				majors_a: [],
				majors_b: [],
				majors_c: [],
				majors_a_input: [],
				majors_b_input: [],
				majors_c_input: [],
				majors_a_edit: [],
				majors_b_edit: [],
				majors_c_edit: [],
				df_country: [],
				df_technical: [{
					label: 'Prof',
				}, {
					label: 'Associate Prof.',
				}, {
					label: 'Assistant Prof.',
				}, {
					label: 'Ph.D.',
				}, {
					label: 'Researcher',
				}, {
					label: 'Associate research fellow',
				}, {
					label: 'Assistant research fellow',
				}, {
					label: 'Engineer',
				}, {
					label: 'Senior engineer',
				}, {
					label: 'Others',
				}],
				getRowKeys(row) {
					return row.ash_id;
				},
				rules: {
					content: [{
						required: true,
						message: 'Please enter the message content',
						trigger: 'blur'
					}],
					name: [{
						required: true,
						message: 'Please enter the name',
						trigger: 'blur'
					}],
					email: [{
						required: true,
						message: 'Please enter the 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"
					}],
					country: [{
						required: true,
						message: 'Please select the country',
						trigger: 'blur'
					}],
					title: [{
						required: true,
						message: 'Please select the title',
						trigger: 'blur'
					}],
					major: [{
						required: true,
						message: 'Please select the major',
						trigger: 'blur'
					}],
					field: [{
						required: true,
						message: 'Please enter the field',
						trigger: 'blur'
					}],
					company: [{
						required: true,
						message: 'Please enter the company',
						trigger: 'blur'
					}],
					intro: [{
						required: true,
						message: 'Please enter the introduction',
						trigger: 'blur'
					}],
				},
				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.getCountry()
			this.getDate()
			this.initMajor()
		},
		methods: {
			// 获取国家列表
			getCountry() {
				this.$api
					.post('api/Admin/getCountrys')
					.then(res => {
						this.df_country = res;
					})
					.catch(err => {
						console.log(err);
					});
			},
			// 获取数据
			getDate() {
				this.$api
					.post('api/User/researchAshUser', this.query)
					.then(res => {
						if (res.code == 0) {
							this.tableData = res.data.data;
							this.link_Total = res.data.count || 0;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});


			},

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

			// 导入人员
			handleAddUser() {
				this.addVisible = true
			},

			// 保存输入框添加人员
			saveInpuser() {
				this.$refs.addInpTab.validate((valid) => {
					if (valid) {
						this.$api
							.post('api/User/addAshUser', this.addInpForm)
							.then(res => {
								if (res.code == 0) {
									this.getDate()
									this.$refs.addInpTab.resetFields()
									this.addInpForm.intro = ''
									this.addInpForm.major_a = ''
									this.addInpForm.major_b = ''
									this.addInpForm.major_c = ''
									this.majors_b_input = []
									this.majors_c_input = []
									this.addVisible = false
									this.$message.success('Successfully added!');
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});
					} else {
						this.$message.error('error submit!!');
						return false;
					}
				});
			},

			// 取消表格加人员
			saveCaneluser() {
				this.addVisible = false
				this.impotList = []
				this.fileL_excel = []
			},

			// 保存表格加人员
			saveExceluser() {
				this.leadSuccList = []
				this.leadFailList = []
				const loading = this.$loading({
					lock: true,
					text: 'Loading...',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$api
					.post('api/User/importExcelUser', {
						'file': this.fileExcelFile
					})
					.then(res => {
						if (res.code == 0) {
							loading.close()
							this.getDate()
							this.impotList = []
							this.fileL_excel = []
							this.leadSuccList = res.data.suc
							this.leadFailList = res.data.err
							this.fileExcelFile = ''
							this.addVisible = false
							this.leadVisible = true
						} else {
							loading.close()
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						loading.close()
						this.$message.error(err);
					});
			},

			// 修改用户详情
			handleEdit(e) {
				this.editForm = JSON.parse(JSON.stringify(e))
				this.editForm.major = 1
				this.editForm.major_a = ''
				this.editForm.major_b = ''
				this.editForm.major_c = ''
				this.editForm.majorList = []
				if (this.editForm.major_shu != 0) {
					if (typeof(this.editForm.major_shu) == 'number') {
						this.editForm.majorList.push(this.editForm.major_shu)
					} else {
						this.editForm.majorList = this.editForm.major_shu.split(",")
					}
				}
				this.$nextTick(() => {
					this.jiLInaoan()
					this.editVisible = true
				})
			},

			// 保存修改用户
			saveEdituser() {
				this.$refs.editInpTab.validate((valid) => {
					if (valid) {
						this.$api
							.post('api/User/editAshUser', this.editForm)
							.then(res => {
								if (res.code == 0) {
									this.getDate()
									this.editVisible = false
									this.$message.success('Successfully edit!');
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});
					} else {
						this.$message.error('error submit!!');
						return false;
					}
				});
			},

			// 发送邮件弹出
			handleSend(e) {
				this.mailForm.pooplist = []
				this.mailForm.pooplist.push({
					email: e.email,
					name: e.name
				});
				this.mailForm.maxlist = 3
				this.mailForm.content = ''
				this.mailForm.pem_id = 0
				this.mailVisible = true
			},

			// 发送群邮件弹出
			handleSendAll() {
				if (this.multipleSelection.length > 0) {
					this.mailForm.pooplist = JSON.parse(JSON.stringify(this.multipleSelection))
					this.mailForm.maxlist = 3
					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'
				});
			},

			// 展开收缩
			moreBtn(e) {
				if (e == 'max') {
					this.mailForm.maxlist = this.mailForm.pooplist.length
				} else if (e == 'min') {
					this.mailForm.maxlist = 3
				}
			},

			// 删除邮箱
			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;
					}
				});
			},

			// 领域
			initMajor() {
				this.$api
					.post('api/Ucenter/getMajor', {
						major_id: 1
					}).then((res) => {
						this.majors_a = res.data.major.children;
						this.majors_a_input = 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.query.pageIndex = 1
				this.getDate()
			},

			// 输入选择领域
			majorChangeInput(e) {
				if (e == 1) {
					this.$api
						.post('api/Ucenter/getMajor', {
							major_id: this.addInpForm.major_a
						}).then((res) => {
							this.majors_b_input = res.data.major.children;
							this.majors_c_input = []
							this.addInpForm.major_b = ''
							this.addInpForm.major_c = ''
							this.majorChange_panduan_input()
						});
				} else if (e == 2 && this.addInpForm.major_b != 0) {
					this.$api
						.post('api/Ucenter/getMajor', {
							major_id: this.addInpForm.major_b
						}).then((res) => {
							this.majors_c_input = res.data.major.children;
							this.addInpForm.major_c = ''
							this.majorChange_panduan_input()
						});
				} else {
					this.majorChange_panduan_input()
				}
			},

			majorChange_panduan_input() {
				if (this.addInpForm.major_c != '' || this.addInpForm.major_c != 0) {
					this.addInpForm.major = this.addInpForm.major_c
				} else if (this.addInpForm.major_b != '' || this.addInpForm.major_b != 0) {
					this.addInpForm.major = this.addInpForm.major_b
				} else {
					this.addInpForm.major = this.addInpForm.major_a
				}
			},

			// 修改选择领域
			jiLInaoan() {
				this.majors_a_edit = []
				this.majors_b_edit = []
				this.majors_c_edit = []
				this.$api
					.post('api/Ucenter/getMajor', {
						major_id: 1
					}).then((res) => {
						this.majors_a_edit = res.data.major.children;
						if (this.editForm.majorList[0] != undefined) {
							this.editForm.major_a = Number(this.editForm.majorList[0])
							this.$api
								.post('api/Ucenter/getMajor', {
									major_id: this.editForm.major_a
								}).then((res) => {
									this.majors_b_edit = res.data.major.children;
									this.majors_c_edit = []
									this.editForm.major_b = ''
									this.editForm.major_c = ''
									this.majorChange_panduan_edit()
									if (this.editForm.majorList[1] != undefined) {
										this.editForm.major_b = Number(this.editForm.majorList[1])
										this.$api
											.post('api/Ucenter/getMajor', {
												major_id: this.editForm.major_b
											}).then((ref) => {
												if (ref.data.major.children.length != 0) {
													this.majors_c_edit = ref.data.major.children;
													this.majorChange_panduan_edit()
													if (this.editForm.majorList[2] != undefined) {
														this.editForm.major_c = Number(this.editForm.majorList[
															2])
														this.majorChange_panduan_edit()
													}
												}
											});
									}
								});
						}
					});
			},

			majorChangeEdit(e) {
				if (e == 1) {
					this.$api
						.post('api/Ucenter/getMajor', {
							major_id: this.editForm.major_a
						}).then((res) => {
							this.majors_b_edit = res.data.major.children;
							this.majors_c_edit = []
							this.editForm.major_b = ''
							this.editForm.major_c = ''
							this.majorChange_panduan_edit()
						});
				} else if (e == 2 && this.editForm.major_b != 0) {
					this.$api
						.post('api/Ucenter/getMajor', {
							major_id: this.editForm.major_b
						}).then((res) => {
							this.majors_c_edit = res.data.major.children;
							this.editForm.major_c = ''
							this.majorChange_panduan_edit()
						});
				} else {
					this.majorChange_panduan_edit()
				}
			},

			majorChange_panduan_edit() {
				if (this.editForm.major_c != '' || this.editForm.major_c != 0) {
					this.editForm.major = this.editForm.major_c
				} else if (this.editForm.major_b != '' || this.editForm.major_b != 0) {
					this.editForm.major = this.editForm.major_b
				} else {
					this.editForm.major = this.editForm.major_a
				}
			},

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

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

			// 上传文件
			handleChange(file, fileList) {
				if (fileList.length > 0) {
					this.fileL_excel = [fileList[fileList.length - 1]]
				}
			},
			handleFileSuccess(res, file) {
				if (res.code == 0) {
					this.impotList = res.data.data;
					this.fileExcelFile = res.data.file
				} else {
					this.$message.error(res.msg);
				}
			},
			beforeRemove(file, fileList) {
				// return this.$confirm(`Remove ${ file.name }？`)
				this.impotList = []
			},
			handleFileError(res, file) {
				this.impotList = []
				this.$message.error('Please upload a file with correct content!');
			},
			handleRemove(file, fileList) {

			},
			handlePreview(file) {
				window.open(file.url);
			},
			handleExceed(files, fileList) {
				this.$message.warning("The current limit is 1 file. Please delete the current file first!");
			},
		},
		computed: {

		},
		watch: {

		}
	};
</script>

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

	.btnSear {
		text-align: center;
		margin: 0 0 30px 0;
		padding: 30px 0 0 0;
	}

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

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

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

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

	.poplSty i.el-icon-message {
		margin: 0 5px 0 3px;
		color: #666;
	}

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

	.leadList {
		max-height: 250px;
		overflow-y: auto;
	}

	.ledTit {
		font-size: 17px;
		margin: 0 0 15px 0;
		font-weight: bold;
		letter-spacing: -1px;
		color: #333;
	}

	.ledTit>span {
		color: #66b90b;
		margin: 0 0 0 10px;
		font-weight: normal;
	}

	.ledList {
		margin: 0 0 8px 0;
		color: #333;
	}

	.ledList .ledBiao {
		font-size: 16px;
		font-weight: bold;
		margin: 0 5px 0 0;
		vertical-align: text-bottom;
	}

	.ledList .ledEmail {
		color: #888;
		margin: 0 0 0 5px;
	}

	.ledList .ledEmail>i {
		margin: 0 3px 0 1px;
		font-size: 13px;
	}

	.impotTit {
		font-size: 16px;
		margin: 30px 0 15px 0;
		font-weight: bold;
		letter-spacing: -1px;
		color: #333;
	}

	.impotTit>span {
		color: #006699;
		margin: 0 0 0 10px;
		font-weight: normal;
	}

	.impotList {
		max-height: 320px;
		overflow-y: auto;
	}

	.impotList>div {
		margin: 0 0 8px 0;
		color: #333;
	}

	.impotList>div .ledBiao {
		font-size: 16px;
		font-weight: bold;
		margin: 0 5px 0 0;
		vertical-align: text-bottom;
		color: #006699;
	}

	.impotList>div .ledEmail {
		color: #888;
		margin: 0 0 0 5px;
	}

	.impotList .ledEmail>i {
		margin: 0 3px 0 1px;
		font-size: 13px;
	}

	.table {
		color: #333;
	}
</style>
