<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item><i class="el-icon-setting"></i> {{ $t('sidebar.promotionManagement') }}</el-breadcrumb-item>
				<el-breadcrumb-item>{{ $t('sidebar.mailboxManagement') }}</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<div class="handle-box">
				<el-form :inline="true" :model="query" class="filter-form">
					<el-form-item :label="$t('mailboxConfig.journal')">
						<el-select v-model="query.journal_id" :placeholder="$t('mailboxConfig.selectJournal')" style="width: 300px;" @change="getList">
							<el-option v-for="item in journalList" :key="item.journal_id" :label="item.title" :value="item.journal_id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" icon="el-icon-refresh" @click="getList">{{ $t('mailboxConfig.refresh') }}</el-button>
						<el-button type="primary" plain icon="el-icon-plus" class="add-account-btn" @click="handleAdd">
							{{ $t('mailboxConfig.addAccount') }}
						</el-button>
					</el-form-item>
				</el-form>
			</div>
			<el-table
				:data="tableData"
				border
				stripe
				class="table"
				header-cell-class-name="table-header"
				:empty-text="$t('mailboxConfig.noData')"
				v-loading="loading"
				:element-loading-text="$t('mailboxConfig.loading')"
			>
				<!-- <el-table-column prop="journal_name" :label="$t('mailboxConfig.journal')" min-width="140"></el-table-column> -->
				<el-table-column type="index" :label="$t('mailboxConfig.no')" width="70" align="center"></el-table-column>
				<el-table-column prop="account" :label="$t('mailboxConfig.account')" min-width="160"></el-table-column>
				<el-table-column prop="smtp_from_name" :label="$t('mailboxConfig.smtpFromName')" min-width="120"></el-table-column>
				<!-- <el-table-column prop="smtp_host" :label="$t('mailboxConfig.smtpHost')" min-width="120"></el-table-column> -->
				<!-- <el-table-column prop="smtp_port" :label="$t('mailboxConfig.smtpPort')" width="100" align="center"></el-table-column> -->
				<!-- <el-table-column prop="imap_host" :label="$t('mailboxConfig.imapHost')" min-width="120"></el-table-column> -->
				<!-- <el-table-column prop="imap_port" :label="$t('mailboxConfig.imapPort')" width="100" align="center"></el-table-column> -->
				<el-table-column prop="today_sent" :label="$t('mailboxConfig.todaySent')" width="95" align="center"></el-table-column>
				<el-table-column prop="remaining_today" :label="$t('mailboxConfig.remainingToday')" width="130" align="center"></el-table-column>
				<!-- <el-table-column prop="state" :label="$t('mailboxConfig.state')" width="80" align="center"></el-table-column> -->
				<el-table-column label="" width="380" align="center" fixed="right">
					<template slot-scope="scope">
						<el-button size="mini" type="primary" plain icon="el-icon-edit" @click="handleEdit(scope.row)">{{ $t('mailboxConfig.edit') }}</el-button>
						<el-button size="mini" type="success" plain icon="el-icon-message" @click="handleMailManage(scope.row)">{{ $t('mailboxConfig.mailManage') }}</el-button>
						<el-button size="mini" type="danger" plain icon="el-icon-delete" @click="handleDelete(scope.row)">{{ $t('mailboxConfig.delete') }}</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<!-- 添加/编辑 弹窗 -->
		<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="580px" :close-on-click-modal="false">
			<el-form ref="formRef" :model="form" :rules="rules" label-width="140px">
				<el-form-item :label="$t('mailboxConfig.journal')" prop="journal_id">
					<el-select :disabled="form.id" v-model="form.journal_id" :placeholder="$t('mailboxConfig.selectJournal')" style="width: 100%;">
						<el-option v-for="item in journalList" :key="item.journal_id" :label="item.title" :value="item.journal_id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item :label="$t('mailboxConfig.account')" prop="account">
					<el-input v-model="form.account" placeholder="eg: test@tmrjournals.co.nz"></el-input>
				</el-form-item>
				<el-form-item :label="$t('mailboxConfig.password')" prop="password">
					<el-input
						v-model="form.password"
						type="password"
						show-password
						clearable
						autocomplete="new-password"
					></el-input>
					<!-- <span class="form-tip">{{ $t('mailboxConfig.passwordTip') }}</span> -->
				</el-form-item>
				<el-form-item :label="$t('mailboxConfig.smtpFromName')" prop="smtp_from_name">
					<el-input v-model="form.smtp_from_name" ></el-input>
				</el-form-item>
				<el-form-item :label="$t('mailboxConfig.smtpHost')" prop="smtp_host">
					<el-input v-model="form.smtp_host" :placeholder="$t('mailboxConfig.smtpPlaceholder')"></el-input>
				</el-form-item>
				<el-form-item :label="$t('mailboxConfig.smtpPort')" prop="smtp_port">
					<el-input v-model="form.smtp_port" :placeholder="$t('mailboxConfig.smtpPortPlaceholder')" style="width: 100%;"></el-input>
				</el-form-item>
				<el-form-item :label="$t('mailboxConfig.smtpEncryption')" prop="smtp_encryption">
					<el-input v-model="form.smtp_encryption" :placeholder="$t('mailboxConfig.smtpEncryptionPlaceholder')"></el-input>
				</el-form-item>
				<el-form-item :label="$t('mailboxConfig.imapHost')" prop="imap_host">
					<el-input v-model="form.imap_host" :placeholder="$t('mailboxConfig.imapPlaceholder')"></el-input>
				</el-form-item>
				<el-form-item :label="$t('mailboxConfig.imapPort')" prop="imap_port">
					<el-input v-model="form.imap_port" :placeholder="$t('mailboxConfig.imapPortPlaceholder')" style="width: 100%;"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">{{ $t('mailboxConfig.cancel') }}</el-button>
				<el-button
					type="primary"
					@click="submitForm"
					:loading="saveLoading"
					:disabled="saveLoading"
					:loading-text="$t('mailboxConfig.loading')"
				>
					{{ $t('mailboxConfig.save') }}
				</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	// 期刊邮箱列表：POST api/email_client/getAccounts 参数 journal_id，返回 data[]: j_email_id, journal_id, smtp_host, smtp_port, smtp_user, imap_host, imap_port, daily_limit, today_sent, state, remaining_today 等
	const API = {
		getAllJournal: 'api/Article/getJournal',
		getAccounts: 'api/email_client/getAccounts',
		addAccount: 'api/email_client/addAccount',
		updateAccount: 'api/email_client/updateAccount',
		deleteAccount: 'api/email_client/deleteAccount',
	};

	export default {
		name: 'mailboxConfig',
		data() {
			return {
				query: {
					journal_id: 0,
					pageIndex: 1,
					pageSize: 10,
				},
				tableData: [],
				total: 0,
				journalList: [],
				loading: false,
				saveLoading: false,
				saveDebounceTimer: null,
				dialogVisible: false,
				dialogTitle: '',
				form: {
					id: null,
					journal_id: null,
					account: '',
					password: '',
					smtp_from_name: '',
					smtp_host: '',
					smtp_port: '',
					smtp_encryption: '',
					imap_host: '',
					imap_port: '',
				},
			};
		},
		computed: {
			rules() {
				return {
					journal_id: [{ required: true, message: this.$t('mailboxConfig.rulesJournal'), trigger: 'change' }],
					account: [
						{ required: true, message: this.$t('mailboxConfig.rulesAccount'), trigger: 'blur' },
						{
							pattern: /^[-._A-Za-z0-9]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
							message: this.$t('mailboxConfig.rulesAccountFormat'),
							trigger: 'blur',
						},
					],
					password: [{ required: true, message: this.$t('mailboxConfig.rulesPassword'), trigger: 'blur' }],
					smtp_from_name: [{ required: true, message: this.$t('mailboxConfig.rulesSmtpFromName'), trigger: 'blur' }],
					smtp_host: [{ required: true, message: this.$t('mailboxConfig.rulesSmtpHost'), trigger: 'blur' }],
					smtp_encryption: [{ required: true, message: this.$t('mailboxConfig.rulesSmtpEncryption'), trigger: 'blur' }],
					imap_host: [{ required: true, message: this.$t('mailboxConfig.rulesImapHost'), trigger: 'blur' }],
					imap_port: [{ required: true, message: this.$t('mailboxConfig.rulesImapPort'), trigger: 'blur' }],
				};
			},
		},
		created() {
			this.loadJournals();
		},
		beforeDestroy() {
			if (this.saveDebounceTimer) {
				clearTimeout(this.saveDebounceTimer);
				this.saveDebounceTimer = null;
			}
		},
		methods: {
			// 期刊下拉框：调用 api/Article/getJournal 获取列表
			loadJournals() {
				var self = this;
				this.$api.post(API.getAllJournal, {username: localStorage.getItem('U_name')}).then(function(res) {
					var list = [];
					if (res && res.code === 0 && res.data) {
						if (Array.isArray(res.data.journals)) {
							list = res.data.journals;
						} else if (Array.isArray(res.data)) {
							list = res.data;
						}
					} else if (res && Array.isArray(res)) {
						list = res;
					}
					// 统一为 { journal_id, title }，兼容 id/title 等字段
					self.journalList = list.map(function(item) {
						return {
							journal_id: item.journal_id != null ? item.journal_id : item.id,
							title: item.title || item.name || ''
						};
					});
					if (self.journalList.length === 0) {
						self.journalList = [
							{ journal_id: 1, title: 'TMR Clinical Research' },
							{ journal_id: 2, title: 'TMR Theory' }
						];
					}
					// 默认选第一个期刊并拉取邮箱列表
					if (self.journalList.length > 0 && (self.query.journal_id === 0 || self.query.journal_id === null || self.query.journal_id === '')) {
						self.query.journal_id = self.journalList[0].journal_id;
						self.getList();
					}
				}).catch(function() {
					self.journalList = [
						{ journal_id: 1, title: 'TMR Clinical Research' },
						{ journal_id: 2, title: 'TMR Theory' }
					];
					if (self.journalList.length > 0) {
						self.query.journal_id = self.journalList[0].journal_id;
						self.getList();
					}
				});
			},
			getJournalName(journalId) {
				var j = this.journalList.find(function(item) { return item.journal_id === journalId; });
				return j ? j.title : '';
			},
			getList() {
				this.loading = true;
				var journalId = this.query.journal_id;
				var params = {};
				if (journalId !== 0 && journalId !== '' && journalId != null) {
					params.journal_id = String(journalId);
				}
				this.$api.post(API.getAccounts, params).then((res) => {
					if (res && res.code === 0 && Array.isArray(res.data)) {
						var list = res.data.map(function(item) {
							return {
								id: item.j_email_id,
								j_email_id: item.j_email_id,
								journal_id: item.journal_id,
								journal_name: this.getJournalName(item.journal_id),
								account: item.smtp_user,
								smtp_user: item.smtp_user,
								smtp_host: item.smtp_host,
								smtp_port: item.smtp_port,
								smtp_encryption: item.smtp_encryption,
								smtp_from_name: item.smtp_from_name || '',
								imap_host: item.imap_host,
								imap_port: item.imap_port,
								last_uid: item.last_uid,
								daily_limit: item.daily_limit,
								today_sent: item.today_sent,
								state: item.state,
								remaining_today: item.remaining_today,
							};
						}.bind(this));
						this.tableData = list;
						this.total = list.length;
					} else {
						this.tableData = [];
						this.total = 0;
					}
				}).catch(function() {
					this.tableData = [];
					this.total = 0;
				}.bind(this)).finally(() => {
					this.loading = false;
				});
			},
			handleAdd() {
				this.dialogTitle = this.$t('mailboxConfig.dialogAdd');
				this.form = {
					id: null,
					journal_id: this.query.journal_id || (this.journalList[0] ? this.journalList[0].journal_id : null),
					account: '',
					password: '',
					smtp_from_name: '',
					smtp_host: 'mail.tmrjournals.co.nz',
					smtp_port: '465',
					smtp_encryption: 'ssl',
					imap_host: 'mail.tmrjournals.co.nz',
					imap_port: '993',
				};
				this.dialogVisible = true;
				this.$nextTick(function() { if (this.$refs.formRef) this.$refs.formRef.clearValidate(); }.bind(this));
			},
			handleEdit(row) {
				this.dialogTitle = this.$t('mailboxConfig.dialogEdit');
				this.form = {
					id: row.id,
					journal_id: row.journal_id,
					account: row.account || row.smtp_user || '',
					password: '',
					smtp_from_name: row.smtp_from_name || '',
					smtp_host: row.smtp_host || '',
					smtp_port: row.smtp_port != null && row.smtp_port !== '' ? String(row.smtp_port) : '',
					smtp_encryption: row.smtp_encryption || '',
					imap_host: row.imap_host || '',
					imap_port: row.imap_port != null && row.imap_port !== '' ? String(row.imap_port) : '',
				};
				this.dialogVisible = true;
				this.$nextTick(function() { if (this.$refs.formRef) this.$refs.formRef.clearValidate(); }.bind(this));
			},
			submitForm() {
				// 保存防抖：连续点击只触发一次
				if (this.saveLoading) return;
				if (this.saveDebounceTimer) clearTimeout(this.saveDebounceTimer);
				this.saveDebounceTimer = setTimeout(() => {
					this.saveDebounceTimer = null;
					this._doSubmitForm();
				}, 600);
			},
			_doSubmitForm() {
				var self = this;
				this.$refs.formRef.validate(function(valid) {
					if (!valid) return;
					var isEdit = !!self.form.id;
					var url = isEdit ? API.updateAccount : API.addAccount;
					var payload = {
						journal_id: String(self.form.journal_id),
						smtp_host: String(self.form.smtp_host || ''),
						smtp_port: String(self.form.smtp_port || ''),
						smtp_encryption: String(self.form.smtp_encryption || ''),
						smtp_user: String(self.form.account || ''),
						smtp_from_name: String(self.form.smtp_from_name || ''),
						imap_host: String(self.form.imap_host || ''),
						imap_port: String(self.form.imap_port || ''),
					};
					if (isEdit) {
						payload.j_email_id = String(self.form.id);
						if (self.form.password) payload.smtp_password = String(self.form.password);
					} else {
						payload.smtp_password = String(self.form.password || '');
					}

					self.saveLoading = true;
					self.$api
						.post(url, payload)
						.then(function(res) {
							if (res && res.code === 0) {
								self.$message.success(isEdit ? self.$t('mailboxConfig.editSuccess') : self.$t('mailboxConfig.addSuccess'));
								self.dialogVisible = false;
								self.getList();
							} else {
								self.$message.error((res && res.msg) || (isEdit ? self.$t('mailboxConfig.editFail') : self.$t('mailboxConfig.addFail')));
							}
						})
						.catch(function() {
							// Mock fallback（保留原逻辑）
							self.$message.success(isEdit ? self.$t('mailboxConfig.editSuccessMock') : self.$t('mailboxConfig.addSuccessMock'));
							self.dialogVisible = false;
							self.getList();
						})
						.finally(function() {
							self.saveLoading = false;
						});
				});
			},
			handleMailManage(row) {
				// 进入邮箱列表前，把当前选择的邮箱账号写入本地，供 mailboxCollect 使用
				if (row && row.j_email_id) {
					localStorage.setItem('mailboxCollect_j_email_id', String(row.j_email_id));
				}
				if (row && row.journal_id) {
					localStorage.setItem('mailboxCollect_journal_id', String(row.journal_id));
				}

				this.$router.push({
					path: '/mailboxCollect',
				});
			},
			// 删除邮箱配置：接口 api/email_client/deleteAccount，传参 j_email_id
			handleDelete(row) {
				const self = this;
				this.$confirm(self.$t('mailboxConfig.deleteConfirm'), self.$t('mailboxConfig.deleteTitle'), {
					confirmButtonText: self.$t('mailboxConfig.confirm'),
					cancelButtonText: self.$t('mailboxConfig.cancel'),
					type: 'warning'
				}).then(() => {
					self.$api.post(API.deleteAccount, { j_email_id: row.j_email_id }).then((res) => {
						if (res && res.code === 0) {
							self.$message.success(self.$t('mailboxConfig.deleteSuccess'));
							self.getList();
						} else {
							self.$message.error((res && res.msg) || self.$t('mailboxConfig.deleteFail'));
						}
					}).catch(() => {
						self.$message.error(self.$t('mailboxConfig.deleteFail'));
					});
				}).catch(() => {});
			},
		},
	};
</script>

<style scoped>
	.handle-box { margin-bottom: 16px; }
	.filter-form { margin: 0; }
	.add-account-btn { margin-left: 10px; }
	.form-tip { font-size: 12px; color: #909399; margin-top: 4px; }
</style>
