<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-message"></i> Mailbox list
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<el-tabs tab-position="left" style="height: 200px;">
				<el-tab-pane :label="'Mail received ( '+queryIn.num+' )'">
					<div style="margin: 5px 0 20px 10px;">
						<el-input v-model="queryIn.username" placeholder="Please enter name or email" style="width: 300px;margin: 0 15px 0 0;"></el-input>
						<el-button type="primary" icon="el-icon-search" @click="handleSearchIn" style="">Search</el-button>
						<el-button type="primary" icon="el-icon-plus" @click="handleAdd" style="float: right;">Write Letter</el-button>
					</div>
					<div style="margin: 0 0 0 10px;">
						<el-table :data="tableData_in" border ref="multipleTable" header-cell-class-name="table-header" empty-text="New messages (0)">
							<el-table-column label="Email">
								<template slot-scope="scope">
									<img v-if="scope.row.state==0" src="../../assets/img/mes_op.png" alt="" style="vertical-align: text-bottom;margin: 0 6px 0 2px;">
									<img v-if="scope.row.state==1" src="../../assets/img/mes_ne.png" alt="" style="vertical-align: top;margin: 0 6px 0 0;">
									{{scope.row.email}}
								</template>
							</el-table-column>
							<el-table-column prop="account" label="Account"></el-table-column>
							<el-table-column prop="ctime" label="Time" width="100"></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="handleDetail(scope.row)">Look</el-button>
								</template>
							</el-table-column>
						</el-table>
						<div class="pagination">
							<el-pagination background layout="total, prev, pager, next" :current-page="queryIn.pageIndex" :page-size="queryIn.pageSize"
							 :total="link_TotalIn" @current-change="handlePageChangeIn"></el-pagination>
						</div>
					</div>
				</el-tab-pane>
				<el-tab-pane :label="'Mail sent ( '+queryOut.num+' )'">
					<div style="margin: 5px 0 20px 10px;">
						<el-input v-model="queryOut.username" placeholder="Please enter name or email" style="width: 300px;margin: 0 15px 0 0;"></el-input>
						<el-button type="primary" icon="el-icon-search" @click="handleSearchOut" style="">Search</el-button>
						<el-button type="primary" icon="el-icon-plus" @click="handleAdd" style="float: right;">Write Letter</el-button>
					</div>
					<div style="margin: 0 0 0 10px;">
						<el-table :data="tableData_out" border ref="multipleTable" header-cell-class-name="table-header" empty-text="New messages (0)">
							<el-table-column prop="email" label="Email"></el-table-column>
							<el-table-column prop="account" label="Account"></el-table-column>
							<el-table-column prop="ctime" label="Time" width="100"></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="handleDetail(scope.row)">Look</el-button>
								</template>
							</el-table-column>
						</el-table>
						<div class="pagination">
							<el-pagination background layout="total, prev, pager, next" :current-page="queryOut.pageIndex" :page-size="queryOut.pageSize"
							 :total="link_TotalOut" @current-change="handlePageChangeIn"></el-pagination>
						</div>
					</div>

				</el-tab-pane>
			</el-tabs>

		</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: this.Common.baseUrl,
				mediaUrl: this.Common.mediaUrl,
				tableData_in: [{
					state:0,
					email: '123456',
					account: '123456',
					ctime: '123456',
				},{
					state:1,
					email: '123456',
					account: '123456',
					ctime: '123456',
				}],
				tableData_out: [],
				queryIn: {
					pageIndex: 1,
					pageSize: 15,
					username: '',
					num: 10
				},
				queryOut: {
					pageIndex: 1,
					pageSize: 15,
					username: '',
					num: 30
				},
				link_TotalIn: 0,
				link_TotalOut: 0,
			};
		},
		created() {
			this.getDate();
		},
		methods: {
			// 获取编辑列表数据
			getDate() {

			},
			// 搜索-收件箱
			handleSearchIn() {
				this.getDate();
			},
			// 搜索-发件箱
			handleSearchOut() {
				this.getDate();
			},
			// 写邮件
			handleAdd() {

			},
			// 邮箱信息
			handleDetail(e) {

			},

			// 分页导航-收件箱
			handlePageChangeIn(val) {
				this.$set(this.queryIn, 'pageIndex', val);
				this.getDate();
			},
			// 分页导航-发件箱
			handlePageChangeOut(val) {
				this.$set(this.queryOut, 'pageIndex', val);
				this.getDate();
			},
		}
	};
</script>

<style scoped>

</style>
