<template>
	<div>
		<div class="crumbs">
			<el-button type="text" icon="el-icon-arrow-left" @click="goBackInbox" class="back-inbox-btn">
				{{ $t('mailboxSend.backToInbox') }}
			</el-button>
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-message"></i> {{ $t('mailboxSend.title') }}
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		
		<div class="container" style="padding-top: 0px;" v-if="showSendEmail">
			<div class="mail_shuru" style="position: relative; display: flex; align-items: center;">
    <span class="mail_tit">{{ $t('mailboxSend.to') }}</span>
    
    <div style="flex: 1; display: flex; flex-wrap: wrap; align-items: center;">
        <div class="selected-tags" v-if="queryMail.sendnamelist && queryMail.sendnamelist.length" style="display: inline-block;">
            <el-tag
                v-for="(item, index) in queryMail.sendnamelist"
                :key="item._uid != null ? item._uid : 'to-' + index"
                closable
                @close="removeRecipient(index)"
                type="info"
                size="small"
                style="margin-right: 6px;"
            >
                {{ item.name }}
            </el-tag>
        </div>

        <el-autocomplete
            v-if="!isToRecipientLimitReached()"
            ref="autocompleteTo"
            class="mail_inp"
            v-model="toInput"
            :fetch-suggestions="fetchUserSuggestions"
            :trigger-on-focus="false"
            placeholder=""
            @select="handleSelectUser"
            @blur="handleToBlur"
            style="width: 200px; flex: 1;" 
        >
            <!-- <i slot="suffix" class="el-icon-plus" @click="handleSetLibrary" style="cursor: pointer; color: #006699; font-weight: bold; line-height: 40px; font-size: 16px;"></i> -->
            
            <template slot-scope="{ item }">
                <div class="name">
                    {{ item.value }} <span style="padding: 4px; color: #ccc;">|</span> {{ item.realname }}
                </div>
            </template>
        </el-autocomplete>
    </div>

    <!-- <span class="sel_liby" @click="handleSetLibrary" style="position: static; margin-left: 10px;">
        <i class="el-icon-plus"></i>{{ $t('mailboxSend.selectFromLibrary') }}
    </span> -->
</div>
			<div class="mail_shuru">
				<span class="mail_tit">{{ $t('mailboxSend.subject') }}</span>
				<el-input v-model="queryMail.sendtitle" class="mail_inp" ></el-input>
			</div>
			<!-- <div class="mail_shuru" style="position: relative; display: flex; align-items: center;">
				<span class="mail_tit">{{ $t('mailboxSend.cc') }}</span>
				<div style="flex: 1; display: flex; flex-wrap: wrap; align-items: center;">
					<div class="selected-tags" v-if="ccList && ccList.length" style="display: inline-block;">
						<el-tag
							v-for="(item, index) in ccList"
							:key="item._uid != null ? item._uid : 'cc-' + index"
							closable
							@close="removeCc(index)"
							type="info"
							size="small"
							style="margin-right: 6px;"
						>
							{{ item.name }}
						</el-tag>
					</div>
					<el-autocomplete
						ref="autocompleteCc"
						class="mail_inp"
						v-model="ccInput"
						:fetch-suggestions="fetchUserSuggestions"
						:trigger-on-focus="false"
						placeholder=""
						@select="handleSelectCc"
						@blur="handleCcBlur"
						style="width: 200px; flex: 1;"
					>
						<template slot-scope="{ item }">
							<div class="name">
								{{ item.value }} <span style="padding: 4px; color: #ccc;">|</span> {{ item.realname }}
							</div>
						</template>
					</el-autocomplete>
				</div>
			</div> -->
			
			<div class="mail-editor-wrap" style="margin: 20px 0 0 0;">
				<!-- 仿阿里邮箱：工具栏中的 源代码编辑 / 退出源码编辑 -->
				

				<emailCkeditor
					ref="myTextEditor"
					v-model="queryMail.content"
					:is-source-mode="isSourceMode"
					:source-content.sync="sourceContent"
					:source-rows="16"
					:source-placeholder="$t('mailboxSend.sourcePlaceholder')"
					:show-select-template-button="false"
					@onSelectTemplate="showTemplateDialog = true"
				/>
			</div>
			<div class="mail-footer-bar" :style="{ left: footerBarLeft }">
    <div class="sender-info">
        <span class="sender-label">{{ $t('mailboxSend.sender') }}</span>
        <span class="sender-content">
            {{ userMes.realname }} &lt;{{ userMes.email }}&gt;
        </span>
    </div>
    
    <div class="action-buttons">
        <el-button
          type="primary"
          icon="el-icon-s-promotion"
          :loading="sendLoading"
          :disabled="sendLoading"
          :loading-text="$t('mailboxSend.sending')"
          @click="handleSend"
        >
            {{ $t('mailboxSend.send') }}
        </el-button>
        <!-- <el-button size="medium" :loading="saveDraftLoading" :disabled="saveDraftLoading" @click="handleSaveDraft">{{ $t('mailboxSend.saveDraft') }}</el-button> -->
    </div>
</div>
		</div>

		<!-- 选择通讯录 -->
		<el-dialog :title="$t('mailboxSend.selectUser')" :visible.sync="Librarybox" width="900px" :close-on-click-modal="false">
			<el-button type="primary" style="margin: 0 0 15px 0;" icon="el-icon-plus" @click="mailLiyAll()" v-if="LibrarySelection!=''">
				{{ $t('mailboxSend.batchSelection') }}
			</el-button>
			<el-table :data="mail_List" border ref="multipleTable" header-cell-class-name="table-header" @selection-change="handleSelectionChange" :empty-text="$t('mailboxSend.emptyText')">
				<el-table-column type="selection" width="40" align="center" :selectable='checkboxSelect'></el-table-column>
				<el-table-column :label="$t('mailboxSend.email')">
					<template slot-scope="scope">
						<b class="el-icon-check" v-if="scope.row.select_mark==1" style="color:#f74c4c;margin-right: 5px;font-weight: bold;"></b>
						{{scope.row.email}}
					</template>
				</el-table-column>
				<el-table-column prop="account" :label="$t('mailboxSend.account')"></el-table-column>
				<el-table-column :label="$t('mailboxSend.operation')" width="110" align="center">
					<template slot-scope="scope">
						<el-button plain type="primary" icon="el-icon-plus" @click="mailLibAdd(scope.row)">
							{{ $t('mailboxSend.selectBtn') }}
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination background layout="total, prev, pager, next" :current-page="queryLibry.pageIndex" :page-size="queryLibry.pageSize"
				 :total="link_TotalLibry" @current-change="handlePageChangeLibry"></el-pagination>
			</div>
		</el-dialog>

		<template-selector-dialog
  v-if="showTemplateDialog"
  :visible.sync="showTemplateDialog"
  @confirm="handleTemplateApply"
  @close-all-dialogs="closeAllDialogs"
/>
	</div>
</template>

<script>
import emailCkeditor from '@/components/page/components/email/CkeditorMail.vue'
import TemplateSelectorDialog from '@/components/page/components/email/TemplateSelectorDialog.vue'
	import 'multi-items-input'
	import 'multi-items-input/dist/multi-items-input.css'
	import bus from '../common/bus'
	export default {
		data() {
			return {
				baseUrl: this.Common.baseUrl,
				mediaUrl: this.Common.mediaUrl,
				that: this,
				userMes: {},
				queryMail: {
					sendname: [],
					sendnamelist: [],
					sendtitle: '',
					sendcc: '',
					content: '',
					expert_id: ''
				},
				mail_List: [],
				fileL_atta: [],
				fol_low: [{
					value: '1',
					label: 'Template 1'
				}],
				TempForm: {
					board: 0
				},
				queryLibry: {
					pageIndex: 1,
					pageSize: 15,
					username: ''
				},
				LibrForm: {},
				LibrarySelection: [],
				showTemplateDialog: false,
				Librarybox: false,
				link_TotalLibry: 0,
				isSourceMode: false,
				// 源码模式下的完整 HTML（保留 DOCTYPE、html、行内样式等），发送时若在源码模式则用此项
				sourceContent: '',
			
				toInput: '',
				// 默认只允许 1 个收件人，后续可按需动态修改
				maxToRecipients: 1,
				toSelecting: false,
				nextToUid: 1,
				ccList: [],
				ccInput: '',
				ccSelecting: false,
				nextCcUid: 1,
				collapseValue: localStorage.getItem('collapse'),
				sendLoading: false,
				sendDebounceTimer: null,
				saveDraftLoading: false,
				selectedTemplateId: '',
				selectedStyleId: '',
				recipientSuggest: {
					keyword: '',
					pageIndex: 1,
					pageSize: 10,
					totalPages: 1,
					loading: false,
					options: [],
					cb: null
				},
				recipientSuggestScrollHandler: null,
				showSendEmail:true
			};
		},
		components: {
			emailCkeditor,
			TemplateSelectorDialog,
		},
		computed: {
			footerBarLeft() {
				const collapsed = this.collapseValue === true || this.collapseValue === 'true';
				return (collapsed ? 64: 260) + 'px';
			}
		},
		watch: {
			collapseValue: {
				handler() {
					// 监听 collapseValue 变化，footerBarLeft 通过 computed 自动更新
				},
				immediate: true,
			},
		},
		created() {
			this.showSendEmail=true
			this.getDate();
		},
		activated(){
			this.showSendEmail=true
		},
		mounted() {
			bus.$on('collapse-content', (msg) => {
				this.collapseValue = msg;
			});
			document.addEventListener('click', this.handleOutsideAutocompleteClick, true);
		},
		beforeDestroy() {
			bus.$off('collapse-content');
			this.detachRecipientSuggestScroll();
			if (this.sendDebounceTimer) {
				clearTimeout(this.sendDebounceTimer);
				this.sendDebounceTimer = null;
			}
			document.removeEventListener('click', this.handleOutsideAutocompleteClick, true);
		},
		methods: {
		closeAllDialogs() {
			// 点击“去新增模板”后：关闭模板选择弹窗以及可能打开的其它弹窗
			this.Librarybox = false;
			this.showTemplateDialog = false;
		},
			handleOutsideAutocompleteClick(e) {
				const target = e && e.target;
				if (!target) return;
				const inputRef = this.$refs.autocompleteTo;
				const inputEl = inputRef && inputRef.$el ? inputRef.$el : null;
				const inInput = inputEl && inputEl.contains(target);
				const inSuggestion = typeof target.closest === 'function' && !!target.closest('.el-autocomplete-suggestion');
				if (inInput || inSuggestion) return;

				if (inputRef && typeof inputRef.close === 'function') {
					inputRef.close();
				}
				if (inputRef && inputRef.$refs && inputRef.$refs.input && typeof inputRef.$refs.input.blur === 'function') {
					inputRef.$refs.input.blur();
				}
			},
			isToRecipientLimitReached() {
				const max = Number(this.maxToRecipients || 0);
				if (!max) return false;
				return (this.queryMail.sendnamelist || []).length >= max;
			},
			showToRecipientLimitWarning() {
				const max = Number(this.maxToRecipients || 1);
				this.$message.warning(this.$t('mailboxSend.recipientLimit', { count: max }));
			},
			attachRecipientSuggestScroll() {
				this.detachRecipientSuggestScroll();
				this.$nextTick(() => {
					const wraps = document.querySelectorAll('.el-autocomplete-suggestion__wrap');
					if (!wraps || !wraps.length) return;
					const wrap = wraps[wraps.length - 1];
					const handler = () => {
						if (this.recipientSuggest.loading) return;
						if (this.recipientSuggest.pageIndex >= this.recipientSuggest.totalPages) return;
						const threshold = 24;
						const reachBottom = wrap.scrollTop + wrap.clientHeight >= wrap.scrollHeight - threshold;
						if (reachBottom) {
							this.loadMoreRecipientSuggestions();
						}
					};
					wrap.addEventListener('scroll', handler);
					this.recipientSuggestScrollHandler = { el: wrap, fn: handler };
				});
			},
			detachRecipientSuggestScroll() {
				const h = this.recipientSuggestScrollHandler;
				if (h && h.el && h.fn) {
					h.el.removeEventListener('scroll', h.fn);
				}
				this.recipientSuggestScrollHandler = null;
			},
			normalizeExpertList(list) {
				if (!Array.isArray(list)) return [];
				return list.map((u) => ({
					...u,
					value: u.email || '',
					realname: u.name || u.realname || u.username || '',
					expert_id: u.expert_id || u.id || ''
				}));
			},
			async queryRecipientSuggestions(reset) {
				if (this.recipientSuggest.loading) return;
				const st = this.recipientSuggest;
				if (!st.keyword) {
					st.options = [];
					if (st.cb) st.cb([]);
					return;
				}
				if (reset) {
					st.pageIndex = 1;
					st.totalPages = 1;
					st.options = [];
				} else if (st.pageIndex >= st.totalPages) {
					if (st.cb) st.cb(st.options);
					return;
				} else {
					st.pageIndex += 1;
				}
				st.loading = true;
				try {
					const res = await this.$api.post('api/expert_manage/getList', {
						major_id: '',
						keyword: st.keyword,
						pageIndex: st.pageIndex,
						pageSize: st.pageSize
					});
					const data = (res && res.data) || {};
					const list = this.normalizeExpertList(data.list || []);
					st.totalPages = Number(data.totalPages || data.total_pages || 1) || 1;
					st.options = reset ? list : st.options.concat(list);
					if (st.cb) st.cb(st.options);
					this.attachRecipientSuggestScroll();
				} catch (e) {
					if (st.cb) st.cb(st.options || []);
				} finally {
					st.loading = false;
				}
			},
			loadMoreRecipientSuggestions() {
				this.queryRecipientSuggestions(false);
			},
			handleTemplateApply(payload) {
				// TemplateSelectorDialog 现在返回对象：{ html, journal_id, style_id, template_id, ... }
				const html = payload && typeof payload === 'object' ? (payload.html || '') : String(payload || '');
				const templateId = payload && typeof payload === 'object' ? (payload.template_id || '') : '';
				const styleId = payload && typeof payload === 'object' ? (payload.style_id || '') : '';
				const templateSubject = payload && typeof payload === 'object'
					? ((payload.template && payload.template.subject) || payload.subject || '')
					: '';
				if (!html) {
					this.$message.warning(this.$t('mailTemplate.noTemplateTip') || '未获取到模板内容');
					return;
				}

				// 始终维护一份内容状态，确保源码模式/富文本模式都能回填
				this.queryMail.content = html;
				this.sourceContent = html;

				// 优先回填 TinyMCE 实例
				if (window.tinymce && window.tinymce.activeEditor && window.tinymce.activeEditor.setContent) {
					window.tinymce.activeEditor.setContent(html);
				}
				this.selectedTemplateId = templateId ? String(templateId) : '';
				this.selectedStyleId = styleId ? String(styleId) : '';
				// 模板自带 subject：仅当当前主题为空时自动回填
				if (!this.queryMail.sendtitle && templateSubject) {
					this.queryMail.sendtitle = String(templateSubject);
				}

				// this.$message.success(this.$t('mailboxSend.templateApplied') || 'Template applied successfully!');
			},
			// 切换富文本 / 源代码编辑模式（源码用 sourceContent 保留完整 HTML，可自由来回切换）
			toggleSourceMode() {
				if (this.isSourceMode) {
					// 退出源码 -> 先用 juice 做样式内联，再同步给富文本展示
					if (this.$refs.myTextEditor && this.$refs.myTextEditor.handleInlining) {
						const finalHtml = this.$refs.myTextEditor.handleInlining();
						this.sourceContent = finalHtml || this.sourceContent || '';
						this.queryMail.content = this.sourceContent;
					} else {
						this.queryMail.content = this.sourceContent || '';
					}
				} else {
					// 进入源码：仅当源码区为空时才从富文本同步，避免覆盖你已编辑的完整 HTML
					if (this.sourceContent === '' || this.sourceContent == null) {
						this.sourceContent = this.queryMail.content || '';
					}
				}
				this.isSourceMode = !this.isSourceMode;
			},
			// 返回收件箱（邮箱列表），账号信息从本地缓存读取
			goBackInbox() {
				this.showSendEmail=false
				const currentPath = this.$route.fullPath;
				// 先静默关闭当前标签，强制销毁 keep-alive 缓存，再执行跳转
				bus.$emit('close_tag_by_path', {
					path: currentPath,
					silent: true
				});
				this.$nextTick(() => {
					this.$router.push({ path: '/mailboxCollect' });
				});
			},
			// 收件人自动补全 - 搜索用户
			fetchUserSuggestions(queryString, cb) {
				if (this.isToRecipientLimitReached()) {
					cb([]);
					return;
				}
				const keyword = (queryString || '').trim();
				this.recipientSuggest.keyword = keyword;
				this.recipientSuggest.cb = cb;
				if (!keyword) {
					this.detachRecipientSuggestScroll();
					cb([]);
					return;
				}
				this.queryRecipientSuggestions(true);
			},
			// 收件人输入框失焦：输入内容失去焦点则自动成为一条收件人数据（排除点击下拉项时）
			handleToBlur(e) {
				// 若失焦是因为点击了下拉建议区域，不执行任何逻辑，让 click 触发 select，否则点击会选不中
				const related = e && e.relatedTarget;
				if (related && typeof related.closest === 'function' && related.closest('.el-autocomplete-suggestion')) {
					return;
				}
				const value = (this.toInput || '').trim();
				setTimeout(() => {
					if (this.toSelecting) {
						this.toSelecting = false;
						return;
					}
					if (!value) return;
					if (value.indexOf('@') === -1) {
						this.toInput = '';
						return;
					}
					const exists = (this.queryMail.sendnamelist || []).some(item => item.name === value);
					if (!exists) {
						if (this.isToRecipientLimitReached()) {
							this.showToRecipientLimitWarning();
							this.toInput = '';
							return;
						}
						this.queryMail.sendnamelist.push({
							id: null,
							name: value,
							_uid: this.nextToUid++,
						});
						this.queryMail.expert_id = '';
						this.queryMail.sendname = (this.queryMail.sendnamelist || []).map(i => i.name);
					}
					this.toInput = '';
				}, 150);
			},
			// 选中某个用户作为收件人
			handleSelectUser(user) {
				this.toSelecting = true;
				if (!user || !user.email) return;
				const email = user.email;
				// 去重
				const exists = (this.queryMail.sendnamelist || []).some(item => item.name === email);
				if (!exists) {
					if (this.isToRecipientLimitReached()) {
						this.showToRecipientLimitWarning();
						this.toInput = '';
						return;
					}
					this.queryMail.sendnamelist.push({
						id: user.expert_id || user.user_id || user.id || null,
						name: email,
						_uid: this.nextToUid++,
					});
					this.queryMail.expert_id = user.expert_id || user.user_id || user.id || '';
					// 同步简单数组
					this.queryMail.sendname = (this.queryMail.sendnamelist || []).map(i => i.name);
				}
				// 清空输入框，便于继续输入下一个
				this.toInput = '';
			},
			// 删除已选收件人
			removeRecipient(index) {
				if (index < 0) return;
				this.queryMail.sendnamelist.splice(index, 1);
				this.queryMail.sendname = (this.queryMail.sendnamelist || []).map(i => i.name);
				if (!this.queryMail.sendnamelist.length) {
					this.queryMail.expert_id = '';
				}
			},
			// CC 输入框失焦：与 To 相同逻辑，输入失去焦点则自动成为一条数据（排除点击下拉项时）
			handleCcBlur(e) {
				const related = e && e.relatedTarget;
				if (related && typeof related.closest === 'function' && related.closest('.el-autocomplete-suggestion')) {
					return;
				}
				const value = (this.ccInput || '').trim();
				setTimeout(() => {
					if (this.ccSelecting) {
						this.ccSelecting = false;
						return;
					}
					if (!value) return;
					if (value.indexOf('@') === -1) {
						this.ccInput = '';
						return;
					}
					const exists = (this.ccList || []).some(item => item.name === value);
					if (!exists) {
						this.ccList.push({
							id: null,
							name: value,
							_uid: this.nextCcUid++,
						});
					}
					this.ccInput = '';
				}, 150);
			},
			// 选中某个用户作为 CC（与 To 相同逻辑）
			handleSelectCc(user) {
				this.ccSelecting = true;
				if (!user || !user.email) return;
				const email = user.email;
				const exists = (this.ccList || []).some(item => item.name === email);
				if (!exists) {
					this.ccList.push({
						id: user.user_id || user.id || null,
						name: email,
						_uid: this.nextCcUid++,
					});
				}
				this.ccInput = '';
			},
			// 删除已选 CC
			removeCc(index) {
				if (index < 0) return;
				this.ccList.splice(index, 1);
			},
			// 根据本地缓存（优先）或路由参数获取发件邮箱信息，用于展示发件人
			getDate() {
				// 1. 优先从本地缓存读取
				const storedEmailId = localStorage.getItem('mailboxCollect_j_email_id');
				const jEmailId = storedEmailId || this.$route.query.j_email_id;
				if (!jEmailId) {
					this.userMes = {};
					return;
				}
				this.$api
					.post('api/email_client/getOneEmail', { j_email_id: jEmailId })
					.then(res => {
						if (res && res.code === 0 && res.data && res.data.email) {
							const email = res.data.email;
							this.userMes = {
								realname: email.smtp_from_name || email.smtp_user || '',
								email: email.smtp_user || '',
							};
						} else {
							this.userMes = {};
						}
					})
					.catch(() => {
						this.userMes = {};
					});
			},
			// 获取通讯录数据
			getLibary() {
				this.$api
					.post('api/Reviewer/researchUser', {keywords: this.queryLibry.username})
					.then(res => {
						if (res.code == 0) {
							this.mail_List = res.data.list;
							this.link_TotalLibry = res.data.list.length || 0;
							for (let i = 0; i < this.mail_List.length; i++) {
								this.mail_List[i].select_mark = 0
								for (let j = 0; j < this.queryMail.sendnamelist.length; j++) {
									if (this.queryMail.sendnamelist[j].name == this.mail_List[i].email) {
										this.mail_List[i].select_mark = 1 // 禁用
									}
								}
							}
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},

			// 发送邮件：api/email_client/sendTemplateStyleText
			handleSend() {
				// 防抖：快速连点只触发最后一次
				if (this.sendLoading) return;
				if (this.sendDebounceTimer) clearTimeout(this.sendDebounceTimer);
				this.sendDebounceTimer = setTimeout(() => {
					this.sendDebounceTimer = null;
					if (this.sendLoading) return;

					const toList = (this.queryMail.sendnamelist || []).map((item) => item.name).filter(Boolean);
					const expert_id_list = (this.queryMail.sendnamelist || []).map((item) => item.expert_id).filter(Boolean);
					if (!toList.length) {
						this.$message.warning(this.$t('mailboxSend.validateTo'));
						return;
					}
					if (!this.queryMail.sendtitle) {
						this.$message.warning(this.$t('mailboxSend.validateSubject'));
						return;
					}

					// journal_id 优先从本地缓存获取，兼容旧的路由参数
					const storedJournalId = localStorage.getItem('mailboxCollect_journal_id');
					const journalId = storedJournalId || this.$route.query.journal_id;
					const storedEmailId = localStorage.getItem('mailboxCollect_j_email_id');
					const jEmailId = storedEmailId || this.$route.query.j_email_id;

					if (!journalId) {
						this.$message.warning(this.$t('mailboxSend.needAccount'));
						return;
					}
					if (!jEmailId) {
						this.$message.warning(this.$t('mailboxSend.needAccount'));
						return;
					}
					// if (!this.selectedTemplateId || !this.selectedStyleId) {
					// 	this.$message.warning(this.$t('mailboxSend.selectTemplateStyleFirst'));
					// 	return;
					// }

					this.sendLoading = true;
					const params = {
						to_email: toList.join(','),
						subject: this.queryMail.sendtitle || '',
						content: this.queryMail.content || '',
						j_email_id: String(jEmailId),
						journal_id: String(journalId),
					};

					const self = this;
					this.$api
						.post('api/email_client/sendOne', params)
						.then((res) => {
							if (res && res.code === 0) {
								self.$message.success(self.$t('mailboxSend.sendSuccess'));
								self.queryMail.sendnamelist = [];
								self.queryMail.sendtitle = '';
								self.queryMail.sendcc = '';
								self.ccList = [];
								self.queryMail.content = '';
								self.sourceContent = '';
								self.selectedTemplateId = '';
								self.selectedStyleId = '';
								self.fileL_atta = [];
								self.goBackInbox();
							} else {
								self.$message.error((res && res.msg) || self.$t('mailboxSend.sendFail'));
							}
						})
						.catch(() => {
							self.$message.error(self.$t('mailboxSend.sendFail'));
						})
						.finally(() => {
							self.sendLoading = false;
						});
				}, 600);
			},
			// 保存草稿（防抖：请求中禁用按钮）
			handleSaveDraft() {
				if (this.saveDraftLoading) return;
				this.saveDraftLoading = true;
				// TODO: 调用保存草稿接口，此处仅防抖占位
				this.$nextTick(() => {
					setTimeout(() => {
						this.saveDraftLoading = false;
					}, 300);
				});
			},

			// 选择通讯录-弹出框
			handleSetLibrary() {
				this.Librarybox = true
				console.log(this.LibrarySelection)
			},
			handleSelectionChange(val) {
				this.LibrarySelection = val;
			},
			// 通讯录禁用
			checkboxSelect(row, rowIndex) {
				let mar_dis = 0
				for (let i = 0; i < this.queryMail.sendnamelist.length; i++) {
					if (this.queryMail.sendnamelist[i].name == row.email) {
						mar_dis += 1 // 禁用
					} else {
						mar_dis += 0 // 不禁用
					}
				}
				if (mar_dis == 1) {
					return false
				} else {
					return true
				}
			},
			// 保存通讯录
			mailLibAdd(e) {
				if (this.isToRecipientLimitReached()) {
					this.showToRecipientLimitWarning();
					return;
				}
				this.queryMail.sendname.push(e.email)
				this.queryMail.sendnamelist.push({
					id: null,
					name: e.email,
					_uid: this.nextToUid++,
				})
				this.getLibary();
			},
			// 批量保存通讯录
			mailLiyAll() {
				console.log(this.LibrarySelection)
				const max = Number(this.maxToRecipients || 0);
				const current = (this.queryMail.sendnamelist || []).length;
				const remain = max > 0 ? Math.max(0, max - current) : this.LibrarySelection.length;
				if (remain <= 0) {
					this.showToRecipientLimitWarning();
					return;
				}
				for (let i = 0; i < this.LibrarySelection.length; i++) {
					if (i >= remain) break;
					this.queryMail.sendname.push(this.LibrarySelection[i].email)
					this.queryMail.sendnamelist.push({
						id: null,
						name: this.LibrarySelection[i].email,
						_uid: this.nextToUid++,
					})
				}
				this.getLibary();
			},

		



			// 回车方框输入框
			blueHandle() {
				console.log('456789')
			},
			// ip控制 - 回车确定
			selectHandle(arr, obj) {
				this.queryMail.sendname = []
				for (let i = 0; i < arr.length; i++) {
					this.queryMail.sendname.push(arr[i].name)
				}
			},
			// ip控制 - backspace确定
			deleteHandle(obj, arr) {
				this.queryMail.sendname = []
				for (let i = 0; i < arr.length; i++) {
					this.queryMail.sendname.push(arr[i].name)
				}
			},

			// 分页导航-通讯录
			handlePageChangeLibry(val) {
				this.$set(this.queryLibry, 'pageIndex', val);
				this.getLibary();
			},

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

			// 上传成功
			uploadSuccess(res) {
				let quill = this.$refs.myTextEditor.quill;

				// 获取光标所在位置
				let length = quill.getSelection().index
				// 插入图片 res.upurl为服务器返回的图片地址
				quill.insertEmbed(length, 'image', this.baseUrl + res.data.icon)
				// 调整光标到最后
				quill.setSelection(length + 1)
			},



			// 上传文件
			upSuccess_atta(res, file) {
				if (res.code == 0) {
					this.queryMail.attr = [];
					for (var ii in fileList) {
						var url = fileList[ii].response.upurl;
						this.form.attr.push('picturesAndTables/' + url);
					}
				} else {
					this.$message.error('service error：' + res.msg);
				}
			},
			beforeupload_atta(file) {

			},
			removefile_atta(file, fileList) {
				this.queryMail.picturesAndTables = [];
				for (var ii in fileList) {
					var url = fileList[ii].response.upurl;
					this.queryMail.picturesAndTables.push('picturesAndTables/' + url);
				}
			},
			uperr_atta(err) {
				this.$message.error('Upload error');
			},
			alertlimit() {
				this.$message.error('The maximum number of uploaded files has been exceeded');
			},
		}
	};
</script>

<style scoped>
	.crumbs {
		display: flex;
		align-items: center;
		margin-bottom: 16px;
	}
	.back-inbox-btn {
		margin-right: 12px;
		padding-left: 0;
	}
	.mail_shuru {
		font-size: 14px;
		padding: 0 0 5px 0;
		margin: 0 0 10px 0;
		border-bottom: 1px solid #ccc;
	}

	.mail_tit {
		width: 60px;
		display: inline-block;
	}

	.mail_inp {
		display: inline-block;
		width: 100%;
		margin: 0 15px 0 0;
		border: 0;
	}

	.mail_inp ::v-deep .el-input__inner {
		border: 1px solid #fff !important;
	}

	.up_newstyle {
		margin-left: 15px;
		display: inline-block;
		vertical-align: middle;
	}

	.up_newstyle ::v-deep .el-upload--text {
		background-color: #006699;
		border: 1px solid #006699;
		padding: 5px 15px;
	}

	.up_newstyle ::v-deep .el-upload__text em {
		color: #fff !important;
		font-size: 12px;
	}


	.jw-container {
		margin-top: 0;
		background-color: #fff !important;
		display: flex;
		flex-wrap: wrap;
		width: 75%;
		display: inline-block;
		vertical-align: middle;
	}

	.jw-container .jw__container {
		margin-top: 0;
	}

	.jw-container .jw__container input {
		font-size: 16px;
		color: #606266;
	}

	.jw-container .pre-input {
		width: 100%;
	}


	.jw-container .point-container {
		margin: 2px 0 1px;
	}

	.jw-container .point-container .label {
		height: 24px;
		line-height: 24px;
		background: #eef9ff;
		padding: 0 7px;
	}


	.sel_liby {
		position: absolute;
		top: 10px;
		right: 0;
		color: #006699;
		font-weight: bold;
		letter-spacing: -0.5px;
	}

	.sel_moud {
		font-size: 14px;
		margin: -15px 0 0 0;
		text-align: right;
		color: #006699;
		font-weight: bold;
		letter-spacing: -0.5px;
	}

	.sel_moud:hover,
	.sel_liby:hover {
		text-decoration: underline;
		cursor: pointer;
	}

	.sel_moud i,
	.sel_liby i {
		margin: 0 10px 0 0;
	}

	.avatar-uploader-mail {
		height: 0;
	}

	.avatar-uploader-mail ::v-deep .el-upload--text {
		height: 0 !important;
		border: 0;
	}
	/* 让输入框的边框在平时不可见，只有在交互时体现，对齐邮件系统风格 */
.mail_inp ::v-deep .el-input__inner {
    border: none !important;
    border-bottom: 0px solid #fff !important;
    padding-right: 30px;
}

.mail_inp ::v-deep .el-input__suffix {
    right: 5px;
    transition: all .3s;
}

.mail_inp ::v-deep .el-input__suffix:hover {
    transform: scale(1.2);
}

/* 调整容器对齐 */
.mail_shuru {
    display: flex;
    align-items: flex-start; /* 考虑到多行标签，对齐顶部 */
    min-height: 40px;
    line-height: 40px;
}
/* 底部操作栏容器 */
.mail-footer-bar {
    margin-top: 20px;
    padding: 10px 15px;
    background-color: #f8f9fa; /* 浅灰色背景，类似图1 */
    border: 1px solid #ddd;
    border-radius: 4px;
    display: flex;
    justify-content: space-between; /* 左右分布 */
    align-items: center;
}

/* 发件人信息样式 */
.sender-info {
    font-size: 14px;
    color: #666;
}

.sender-label {
    font-weight: bold;
    margin-right: 10px;
}

.sender-content {
    color: #006699; /* 保持你代码中的蓝色 */
}

/* 按钮组样式 */
.action-buttons {
    display: flex;
    gap: 10px;
}


.mail-footer-bar {
    position: fixed;
    bottom: 0;
	
 
    right: 0;
    z-index: 10;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}

/* Quill 工具栏“源代码编辑”按钮文案 */
/* 仿阿里邮箱：源代码编辑 工具栏条 */
.editor-toolbar-bar {
    border: 1px solid #dcdfe6;
    border-bottom: none;
    background: #fafafa;
    padding: 8px 12px;
    border-radius: 4px 4px 0 0;
}
.toolbar-source-btn {
    color: #409eff;
    padding: 0 4px;
}
.toolbar-source-btn.exit {
    color: #909399;
}
.source-editor-box {
    border: 1px solid #dcdfe6;
    border-radius: 0 0 4px 4px;
    overflow: hidden;
}
.source-editor-box .el-textarea__inner {
    border: none;
    border-radius: 0;
    font-family: Consolas, Monaco, monospace;
    font-size: 13px;
}

</style>
