<template>
	<el-container style="border-left: 1px solid #e7eaec;" class="fullheight">
		<h3 class="flow_table_title">委托设定列表</h3>
		<el-row class="agent-list__row">
			<el-button
				type="primary"
				size="small"
				@click="operating('0', 'add')"
				icon="el-icon-plus"
				style="margin-left: 0;"
				>{{ $t('common.add') }}</el-button
			>
			<!--      <el-button type="danger" size="small" @click="remove" icon="el-icon-delete" style="margin-left:3px;">删除</el-button>-->
			<eip-popconfirm-button
				type="danger"
				title="确定删除吗？"
				icon="el-icon-delete"
				@onConfirm="remove"
				:disabled="checkBoxData.length < 1"
				style="margin-left: 10px;"
				>{{ $t('common.delete') }}</eip-popconfirm-button
			>
			<el-input
				size="small"
				style="width: 380px; margin-left: 10px;"
				clearable
				placeholder="标题"
				prefix-icon="el-icon-search"
				v-model="tableData"
				@keyup.enter.native="searchEnterFun"
			></el-input>
			<el-button
				style="margin-left: 10px;"
				size="small"
				type="primary"
				icon="el-icon-search"
				@click="search('find')"
				>查询</el-button
			>
			<el-button size="small" icon="el-icon-refresh" @click="reset"
				>重置</el-button
			>
		</el-row>
		<el-main>
			<el-table
				:data="rows"
				ref="htTable"
				@row-click="rowClick"
				stripe
				border
				style="width: 100%;"
				header-cell-class-name="todo-header-row"
				row-class-name="todo-row"
				size="medium"
				v-loading="fullscreenLoading"
				@selection-change="handleChecked"
			>
				<el-table-column type="selection" sortable width="50"></el-table-column>
				<el-table-column
					type="index"
					sortable
					width="50"
					label="序号"
				></el-table-column>
				<el-table-column
					prop="subject"
					width="230"
					label="标题"
					align="center"
				></el-table-column>
				<el-table-column
					prop="authName"
					label="委托人"
					align="center"
				></el-table-column>
				<el-table-column
					prop="agent"
					label="被委托人"
					align="center"
				></el-table-column>
				<el-table-column
					prop="startDate"
					label="开始日期"
					align="center"
				></el-table-column>
				<el-table-column
					prop="endDate"
					label="结束日期"
					align="center"
				></el-table-column>
				<el-table-column label="是否有效" align="center">
					<template slot-scope="scope">
						<el-tag
							size="small"
							type="success"
							v-if="scope.row.isEnabled == 'Y'"
							>有效</el-tag
						>
						<el-tag size="small" type="danger" v-if="scope.row.isEnabled == 'N'"
							>无效</el-tag
						>
					</template>
				</el-table-column>
				<el-table-column prop="type" label="委托类型" align="center">
					<template slot-scope="scope">
						<el-tag size="small" v-if="scope.row.type == 1">全权委托</el-tag>
						<el-tag size="small" v-if="scope.row.type == 2">部分委托</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="" label="操作" align="center" width="200">
					<template slot-scope="scope">
						<el-button
							@click="operating(scope.row.id, 'edit')"
							size="small"
							icon="el-icon-edit"
							plain
							>修改</el-button
						>
						<el-button
							@click="operating(scope.row.id, 'get')"
							size="small"
							icon="el-icon-tickets"
							plain
							>明细</el-button
						>
					</template>
				</el-table-column>
			</el-table>
		</el-main>
		<el-footer height="45px">
			<el-row type="flex" justify="end">
				<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="pagination.page"
					:page-sizes="[10, 20, 30, 40]"
					:page-size="10"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total"
				>
				</el-pagination>
			</el-row>
		</el-footer>
	</el-container>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import EipPopconfirmButton from '@/components/eipControl/EipPopconfirmButton';

export default {
	name: 'agentList',
	components: {
		EipPopconfirmButton,
	},
	data() {
		return {
			tableData: '',
			fullscreenLoading: true,
			checkBoxData: [],
		};
	},
	computed: mapState({
		rows: state => state.agent.rows,
		pagination: state => state.agent.pagination,
		total: state => state.agent.total,
	}),
	methods: {
		rowClick(row, column, event) {
			this.$refs.htTable.toggleRowSelection(row);
		},
		remove() {
			var ids = [];
			if (this.checkBoxData && this.checkBoxData.length > 0) {
				for (let index = 0; index < this.checkBoxData.length; index++) {
					ids.push(this.checkBoxData[index].id);
				}
			}
			//数组去重
			//this.checkBoxData = Array.from(new Set(this.checkBoxData));
			if (ids.length > 0) {
				this.$store.dispatch('agent/remove', ids.join(',')).then(res => {
					this.search();
				});
			} else {
				this.$message({
					message: '请选择要删除的数据',
					type: 'warning',
				});
			}
		},
		handleChecked(value) {
			this.checkBoxData = value;
		},
		//Loading 加载中
		openFullScreen() {
			this.fullscreenLoading = true;
		},
		//回车查询
		searchEnterFun: function (e) {
			var keyCode = window.event ? e.keyCode : e.which;
			if (keyCode == 13) {
				this.search('find');
			}
		},
		// 查询
		search(str) {
			this.openFullScreen();
			if (str == 'find') {
				this.$store.dispatch('agent/setPaginationPageNum', 1);
			}
			let querys = []; //查询条件
			let queryFilter = {};
			let pageBean = { pageBean: this.pagination };
			if (this.tableData == '') {
				this.$store.dispatch('agent/getlistJson', pageBean).then(() => {
					this.fullscreenLoading = false;
				});
			} else {
				querys = [
					{
						property: 'subject_',
						value: this.tableData,
						group: 'main',
						operation: 'LIKE',
						relation: 'OR',
					},
				];
				queryFilter = { pageBean: this.pagination, querys };
				this.$store.dispatch('agent/getlistJson', queryFilter).then(() => {
					this.fullscreenLoading = false;
				});
			}
		},
		//重置
		reset() {
			this.tableData = '';
			this.search('find');
		},
		operating(id, action) {
			// var title =
			// 	action == 'edit'
			// 		? '编辑委托'
			// 		: action == 'add'
			// 		? '添加委托'
			// 		: '查看委托';
			if (action == 'add') {
				this.$router.push('/agent/agentAdd');
			} else if (action == 'edit') {
				this.$router.push('/agent/agentEdit/' + id);
			} else {
				this.$router.push('/agent/agentGet/' + id);
			}
		},
		handleSizeChange: function (size) {
			//每页下拉显示数据
			this.$store.dispatch('agent/setPaginationSize', size);
			this.search();
		},
		handleCurrentChange: function (currentPage) {
			//点击第几页
			this.$store.dispatch('agent/setPaginationPageNum', currentPage);
			this.search();
		},
	},
	created() {
		let pagination = { pageBean: { page: 1, pageSize: 10, showTotal: true } };
		this.$store.dispatch('agent/getlistJson', pagination).then(() => {
			this.fullscreenLoading = false;
		});
	},
};
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';
.el-table /deep/ th.todo-header-row {
	background-color: #fafafa;
	font-size: 13px;
}

.el-table /deep/ tr.todo-row {
	font-size: 13px;
	color: $--color-text-regular;
}

.el-container {
	background-color: #fff;
}

.agent-list__row {
	margin: 10px 0 0 20px;
}

.el-header {
	border-bottom: 1.5px solid #ededed;
}

.todo-subject {
	cursor: pointer;
}

.todo-subject {
	color: $--theme-color;
}
.el-dropdown {
	vertical-align: top;
}
.el-dropdown + .el-dropdown {
	margin-left: 15px;
}
.el-icon-arrow-down {
	font-size: 12px;
}
</style>
