<template>
	<el-container class="mainBox">
		<el-aside width="340px">
			<el-container>
				<el-header>
					<span class="emailTitle">邮件通知</span>
					<span class="statusBox">
						<span class="item complete">已确认</span>
						<span class="item notStarted">未确认</span>
						<span class="item part">部分确认</span>
					</span>
				</el-header>
				<el-main class="nopadding" v-loading="listLoading" element-loading-text="加载中...">
					<el-scrollbar height="100%" ref="scrollbar" @scroll="onScroll">
						<div class="emailMain">
							<div class="itemBox" :class="[item.is_confirm===0?'notStarted':'complete', emailId == item.id?'itemTrue':'']" v-for="item in confirmList" :key="item" @click="()=>{this.emailChange(item);}">
								<div class="name text">{{item.from && item.from.email}}</div>
								<div class="title text">{{item.subject}}</div>
								<div class="msg text">{{item.text}}</div>
								<div class="date">{{item.sent_at}}</div>
								<div class="total">
									<el-badge class="badgeItem" :value="item.total_count" :max="99" color="#eeeeee"></el-badge>
								</div>
							</div>
						</div>
					</el-scrollbar>
				</el-main>
			</el-container>
		</el-aside>
		<el-container class="mainHeaderNoBorderPadding" v-loading="loading" element-loading-text="加载中...">
			<el-main class="nopadding emailMiddle">
				<div class="emailContent">
					<div class="title">【邮件名称】{{emailParams.subject}}</div>
					<div class="fromPeople itemText"><span class="text">发件人：</span>{{emailParams.from && emailParams.from.email}} {{emailParams.from && emailParams.from.name?'('+emailParams.from.name+')':''}}</div>
					<div class="receivingPeople itemText"><span class="text">收件人：</span>{{emailParams.source_email}}</div>
					<div class="theme itemText">
						<span class="text">摘&nbsp;&nbsp;&nbsp;要：</span><span v-html="emailParams.text"></span>
					</div>

					<div class="rightBtnMain">
						<div class="date">{{emailParams.sent_at}}</div>
						<div class="btnItem">
							<el-button type="primary" plain icon="el-icon-Refresh" :size="size">手动同步</el-button>
							<el-button type="primary" plain :size="size">查看原邮件</el-button>
							<el-dropdown placement="bottom-start">
								<el-button type="primary" :size="size" >确认维保 <el-icon class="el-icon--right"><el-icon-ArrowDown/></el-icon></el-button>
								<template #dropdown>
									<el-dropdown-menu>
										<el-dropdown-item @click="allDefend">全部入保</el-dropdown-item>
										<el-dropdown-item @click="allDefend">部分入保</el-dropdown-item>
									</el-dropdown-menu>
								</template>
							</el-dropdown>
						</div>
					</div>
				</div>
				<div class="emailBody">
					<div class="searchMain " style="padding-left: 10px;">
						<scSearch ref="scSearch" :searchList="searchList" @fetchSelectData="getSelectData"></scSearch>

						<div class="searchItem searchBtn">
							<el-button :size="size" :icon="searchShow?'el-icon-ArrowUpBold':'el-icon-ArrowDownBold'" @click="searchShowClick">{{searchShow?'收起':'更多'}}</el-button>
							<el-button :size="size" type="primary" icon="el-icon-search" @click="upSearch">查询</el-button>
							<el-button :size="size" type="info" icon="el-icon-RefreshRight" @click="reset">重置</el-button>
						</div>
					</div>
					<el-table class="scTable" :header-cell-class-name="setClassName" :data="emailData.rows" ref="table" :row-key="rowKey" :key="toggleIndex" :header-cell-style="{'background': '#F5F7FA','color':'#606266'}" @selection-change="selectionChange"  stripe :size="size">
						<el-table-column type="selection" align="center" width="45" :selectable="selectable"></el-table-column>
						<el-table-column label="序号" align="center" type="index"></el-table-column>
						<template v-for="(item, index) in userColumn" :key="index">
							<template v-if="item.prop == 'description'">
								<el-table-column v-if="!item.hide" :column-key="item.prop" :label="item.label" :prop="item.prop" :width="item.width" :sortable="item.sortable" :fixed="item.fixed" :filters="item.filters">
									<template #default="scope">
										<slot :name="item.prop" v-bind="scope">
											<el-popover
												placement="bottom-start"
												title=""
												:width="400"
												trigger="hover"
												:content="scope.row[item.prop]"
											>
												<template #reference>
													<span style="width: 100%;display: inline-block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{scope.row[item.prop]}}</span>
												</template>
											</el-popover>

										</slot>
									</template>
								</el-table-column>
							</template>
							<template v-else>
								<el-table-column v-if="!item.hide" :column-key="item.prop" :label="item.label" :prop="item.prop" :width="item.width" :sortable="item.sortable" :fixed="item.fixed" :filters="item.filters" show-overflow-tooltip>
									<template #default="scope">
										<slot :name="item.prop" v-bind="scope">
											{{scope.row[item.prop]}}
										</slot>
									</template>
								</el-table-column>
							</template>
						</template>
						<el-table-column min-width="1"></el-table-column>
						<template #empty>
							<el-empty :description="emptyText" :image-size="100"></el-empty>
						</template>
					</el-table>
				</div>
				<div class="annex">
					<div class="annexMain" v-if="emailParams.file_path && emailParams.file_path.length>0">
						<div class="title">
							{{emailParams.file_path && emailParams.file_path.length}} 个附件
						</div>
						<div class="itemBox">
							<div class="leftBox">
								<el-icon style="font-size: 26px;"><sc-icon-Excel/></el-icon>
							</div>
							<div class="rightBox" @click="downFile(emailParams)">
								<div class="name">{{emailParams.file_name && emailParams.file_name.file}}</div>
								<div class="size">
									{{emailParams.file_name && emailParams.file_name.size}}
									<span class="down">下载</span>
								</div>
							</div>
						</div>
					</div>
					<div class="scTable-page">
						<div class="scTable-pagination">
							<el-pagination background :small="true" :layout="paginationLayout" :total="total" :page-size="scPageSize" :page-sizes="pageSizes" v-model:currentPage="currentPage" @current-change="paginationChange" @update:page-size="pageSizeChange"></el-pagination>
						</div>
						<div class="scTable-do">
							<el-button @click="reset" icon="el-icon-refresh" circle style="margin-left:15px"></el-button>
							<el-popover placement="top" title="列设置" :width="500" trigger="click" :hide-after="0" @show="customColumnShow=true" @after-leave="customColumnShow=false">
								<template #reference>
									<el-button icon="el-icon-set-up" circle style="margin-left:15px"></el-button>
								</template>
								<columnSetting v-if="customColumnShow" ref="columnSetting" @userChange="columnSettingChange" @save="columnSettingSave" @back="columnSettingBack" :column="userColumn"></columnSetting>
							</el-popover>
							<el-popover placement="top" title="表格设置" :width="400" trigger="click" :hide-after="0">
								<template #reference>
									<el-button icon="el-icon-setting" circle style="margin-left:15px"></el-button>
								</template>
								<el-form label-width="80px" label-position="left">
									<el-form-item label="表格尺寸">
										<el-radio-group v-model="config.size" size="small" @change="configSizeChange">
											<el-radio-button label="large">大</el-radio-button>
											<el-radio-button label="default">正常</el-radio-button>
											<el-radio-button label="small">小</el-radio-button>
										</el-radio-group>
									</el-form-item>
									<el-form-item label="样式">
										<el-checkbox v-model="config.config.border" label="纵向边框" @change="configSizeChange"></el-checkbox>
										<el-checkbox v-model="config.config.stripe" label="斑马纹" @change="configSizeChange"></el-checkbox>
									</el-form-item>
								</el-form>
							</el-popover>
						</div>
					</div>
				</div>
			</el-main>
		</el-container>
	</el-container>

</template>

<script>

import columnSetting from '@/components/scTable/columnSetting'
import config from "@/config/table";

export default {
	components: {
		columnSetting
	},
	data() {
		return {
			size:'small',
			dialog: {
				save: false,
				show: false,
			},
			confirmList:[],
			listLoading:false,
			listParams:{
				page:1,
				pageSize:30,
			},
			threshold:100,

			emailId:'',
			searchShow:false,
			searchList:[
				{name:'创建日期',type:'date',code:'activation_date'},
				{name:'状态',type:'select',code:'active_status', data:[], placeholder:"请选择状态",show:true},
				{name:'联系方式',type:'text',code:['mobile'],placeholder:"请输入手机号",isOpen:true,show:false},
				{name:'姓名',type:'text',code:['name'],placeholder:"请输入姓名",isOpen:true,show:false},
				{name:'关键字',type:'text',code:['login_name','roles','department'],keyword:true,show:true},
			],
			emailParams: {},
			toggleIndex: 0,
			rowKey:"",
			paginationLayout:config.paginationLayout,
			scPageSize:config.pageSize,
			pageSizes:config.pageSizes,
			currentPage: 1,
			total:0,
			loading:false,
			customColumnShow: false,
			config: {
				size: 'small',
				config:{
					border: false,
					stripe: false
				},
			},

			selection:[],
			userColumn:[],
			emailData:{
				list:[],
				column:[],
				rows:[]
			},
			emptyText: "暂无数据",
		}
	},
	computed: {
		isAllDisabled() {
			let isDis = false;
			if(this.emailData && this.emailData.rows.length>0){
				isDis = this.emailData.rows.every((el) => el.is_confirm == true)
			}
			return isDis
		},
	},
	mounted() {
		this.getData();
	},
	methods: {
		setClassName({ column }) {
			if (column.type == 'selection' && this.isAllDisabled) {
				return 'all-disabled'
			}
		},

		async getData() {
			this.listLoading = true;
			const res = await this.$API.orders.order.mail.list.get(this.listParams);
			if(res.code == 200){
				if(res.data.rows && res.data.rows.length>0){
					res.data.rows.forEach(item=>{
						item.text = this.stripHtmlTags(item.summary)
					})
					this.confirmList = res.data.rows;
					await this.emailChange(res.data.rows[0])
				}
			}
			this.listLoading = false;
		},
		stripHtmlTags(html) {
			const div = document.createElement('div');
			div.innerHTML = html;
			return div.textContent || div.innerText || '';
		},
		// 滚动分页
		onScroll(event){
			const scrollbar = this.$refs.scrollbar;
			const remainingDistance = scrollbar.$el.scrollHeight - (event.scrollTop + scrollbar.$el.clientHeight);
			if (remainingDistance <= this.threshold) {
				this.loadMore();
			}
		},
		loadMore(){
			console.log('加载更多')
		},

		emailChange(item) {
			this.emailId = item.id;
			this.getEmailData();
		},
		async getEmailData() {
			let params = {
				mail_data_id: this.emailId,
				pageSize:this.scPageSize,
				page:this.currentPage
			}
			this.loading = true;
			const res = await this.$API.orders.order.mail.detail.post(params);
			if (res.code == 200) {
				this.total = res.data.total;
				this.emailData = res.data;
				this.userColumn = res.data.columnConfig;
				res.data.mail_info[0].text = this.stripHtmlTags(res.data.mail_info[0].summary)
				this.emailParams = res.data.mail_info[0];
			}
			this.loading = false;
		},

		async allDefend() {
			let params = {
				ids:this.selection.map(em=> em.id)
			};
			const res = await this.$API.orders.order.mail.confirm.post(params);
			if(res.code == 200){
				await this.getData();
			}
		},

		getSelectData(){

		},
		searchShowClick(){

		},
		upSearch(){
			this.getEmailData();
		},
		reset(){
			this.getEmailData();
		},
		downFile(info){
			if(info.file_path && info.file_path.length>0){
				info.file_path.forEach(em=>{
					const link = document.createElement('a');
					link.href = em;
					link.setAttribute('download', '');
					document.body.appendChild(link);
					link.click();
					document.body.removeChild(link);
				})
			}
		},
		// 选择数据
		selectionChange(selection){
			this.selection = selection;
		},
		selectable(row){
			if(row.is_confirm){
				return false;  //不禁用
			}else {
				return true;  //禁用
			}
		},

		//分页点击
		paginationChange(){
			this.getEmailData();
		},
		//条数变化
		pageSizeChange(size){
			this.scPageSize = size
			this.getEmailData();
		},

		//自定义变化事件
		columnSettingChange(userColumn){
			this.userColumn = userColumn;
			this.toggleIndex += 1;
		},
		//自定义列保存
		async columnSettingSave(userColumn){
			this.$refs.columnSetting.isSave = true
			try {
				await config.columnSettingSave(this.tableName, userColumn,this.apiObj);
				this.$message.success('保存成功')
			}catch(error){
				this.$message.error('保存失败')
				this.$refs.columnSetting.isSave = false
			}
			this.$refs.columnSetting.isSave = false
		},
		//自定义列重置
		async columnSettingBack(userColumn){
			this.$refs.columnSetting.isSave = true
			try {
				const column = await config.columnSettingReset(this.tableName, userColumn,this.apiObj)
				if(column){
					this.userColumn = column
					this.$refs.columnSetting.usercolumn = JSON.parse(JSON.stringify(this.userColumn||[]))
				}
			}catch(error){
				this.$message.error('重置失败')
				this.$refs.columnSetting.isSave = false
			}
			this.$refs.columnSetting.isSave = false
		},
		async configSizeChange() {
			try {
				await config.columnSettingConfigSave(this.tableName, this.config, this.apiObj);
				this.$message.success('保存成功')
			} catch (error) {
				this.$message.error('保存失败')
			}
		},
	}
}
</script>

<style lang="scss" scoped>
::v-deep .all-disabled .el-checkbox__input .el-checkbox__inner {
	background-color: #edf2fc;
	border-color: #dcdfe6;
	cursor: not-allowed;
}


.emailTitle{font-size: 14px;font-weight: 600;}
.statusBox{
	display: flex;align-items: center;justify-content: flex-end;
	.item{
		position: relative;
		margin-left: 18px;
	}
	.item:after{
		content: '';
		position: absolute;
		left: -12px;
		top: 5px;
		width: 6px;
		height: 6px;
		border-radius: 50%;
	}
}
.complete:after{
	background: var(--el-color-success);
}
.notStarted:after{
	background: var(--el-color-danger);
}
.part:after{
	background: var(--el-color-warning);
}

.emailMain{
	padding: 5px 0;
	.itemBox{
		position: relative;
		padding: 12px 0 12px 10px;
		cursor: pointer;
		.text{text-overflow: ellipsis;white-space: nowrap;overflow: hidden;width: calc(100% - 10px);}
		.name{margin-bottom: 10px;font-size: 14px;font-weight: 600;color: var(--el-color-dark);}
		.title{margin-bottom: 6px;color: var(--el-text-color-regular)}
		.msg{color: var(--el-text-color-placeholder);width: calc(100% - 40px);}
		.date{
			position: absolute;right: 12px;top: 14px;z-index: 10;
			color: var(--el-text-color-regular);
			width: 90px;
			overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
		}
		.total{
			position: absolute;right: 12px;bottom: 8px;z-index: 10;
			.badgeItem ::v-deep .el-badge__content{
				background: #EBEBEB;
				border-color: #EBEBEB;
				color: #555555;
			}
		}
	}
	.itemBox:after{
		content: "";
		position: absolute;
		top: 16px;
		left: 0;
		z-index: 20;
		width: 4px;
		height: calc(100% - 32px);
		border-radius: 4px;
	}
	.itemTrue{
		background: #EFF5FF;
		border-top-left-radius: 2px;
		border-bottom-left-radius: 2px;
	}
	.itemBox:last-child{
		box-shadow: none;
	}
}
.emailMiddle{
	display: flex;flex-direction: column;
	.emailContent{
		box-shadow: 0 1px 1px rgba(0,0,0,0.06);
		padding: 10px 5px 10px 10px;
		color: var(--el-color-dark);
		position: relative;
		.title{
			font-weight: 600;
			font-size: 14px;
			padding: 10px 0;
			margin-bottom: 8px;
		}
		.fromPeople{
			margin-bottom: 6px;
		}
		.date{
			margin-bottom: 6px;
		}
		.receivingPeople{
			margin-bottom: 6px;
		}
		.itemText{
			padding: 0 0 0 10px;
			.text{
				color: var(--el-text-color-regular)
			}
		}
		.theme{
			line-height: 20px;
		}
		.rightBtnMain{
			position: absolute;
			right: 10px;
			top: 10px;
			.date{
				text-align: right;
				margin-bottom: 10px;
				color: var(--el-text-color-placeholder);
			}
		}
	}
	.emailBody{
		flex: 1;
		overflow: hidden;
		display: flex;flex-direction: column;
	}
	.annex{
		padding: 10px;
		overflow: hidden;
		display: flex;flex-direction: column;justify-content: space-between;

		.annexMain{
			width: 320px;
			margin-bottom: 10px;
			.itemBox{
				margin-top: 8px;
				border-radius: 4px;
				padding: 10px;
				background: #f6f6f6;
				display: flex;align-items: center;
				cursor: pointer;
				.leftBox{flex-basis: 40px;display: flex;align-items: center;justify-content: flex-start;}
				.rightBox{
					flex: 1;overflow: hidden;
					.name{
						width: 100%;
						white-space: nowrap;text-overflow: ellipsis;overflow: hidden;
						margin-bottom: 4px;
					}
					.size{
						position: relative;
						.down{
							color: var(--el-color-primary);
							cursor: pointer;
							margin-left: 10px;
						}
					}
				}
			}
		}
		.scTable-page{
			flex: 1;
			display: flex;flex-direction: row;justify-content: space-between;align-items: flex-end;
		}
	}
}

.scTable{
	flex: 1;
	overflow: hidden;
}
.scTable ::v-deep .el-table__header .cell{
	white-space: nowrap;text-overflow: ellipsis;overflow: hidden;
}
</style>
