<template>
	<div class="app-container">
		<el-row type="flex" justify="space-between" style="margin-bottom: 20px">
			<div class="grid-content bg-purple">
				<el-input placeholder="合同名称/编号、承兑人名称或出票..." v-model="search" @change="Search" clearable
					style="width: 100%">
					<i slot="prefix" class="el-input__icon el-icon-search"></i>
				</el-input>
			</div>
			<div class="grid-content bg-purple">
				<el-dropdown @command="handleCommand">
					<div class="pulldown">
						<span class="el-dropdown-link" v-if="!status"> 合同状态 </span>
						<span class="el-dropdown-link" v-if="status">
							{{ status }}
						</span>
						<i class="el-icon-arrow-down el-icon--right"></i>
					</div>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item command="合同状态">合同状态</el-dropdown-item>
						<el-dropdown-item command="正常">正常</el-dropdown-item>
						<el-dropdown-item command="删除">删除</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</div>
			<div class="grid-content bg-purple">
				<el-dropdown @command="handlehpCommand">
					<div class="pulldown">
						<span class="el-dropdown-link" v-if="!hpstatus"> 汇票状态 </span>
						<span class="el-dropdown-link" v-if="hpstatus">
							{{ hpstatus }}
						</span>
						<i class="el-icon-arrow-down el-icon--right"></i>
					</div>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item command="汇票状态">汇票状态</el-dropdown-item>
						<el-dropdown-item command="正常">正常</el-dropdown-item>
						<el-dropdown-item command="删除">删除</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</div>
			<div class="grid-content bg-purple">
				<el-dropdown @command="handleCommandAuditstatus">
					<div class="pulldown">
						<span class="el-dropdown-link" v-if="!Auditstatus"> 审核状态 </span>
						<span class="el-dropdown-link" v-if="Auditstatus">
							{{ Auditstatus }}
						</span>
						<i class="el-icon-arrow-down el-icon--right"></i>
					</div>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item command="审核状态">审核状态</el-dropdown-item>
						<el-dropdown-item command="待审核">待审核</el-dropdown-item>
						<el-dropdown-item command="成功">成功</el-dropdown-item>
						<el-dropdown-item command="失败">失败</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</div>
			<div class="grid-content bg-purple">
				<div class="block">
					<el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="至"
						start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
					</el-date-picker>
				</div>
			</div>
		</el-row>
		<el-row type="flex" justify="space-between" style="margin-bottom: 20px">
			<div class="grid-content bg-purple" style="display: flex; justify-content: flex-end">
				<el-button type="primary" @click="addNewContract" v-if="checked == 1">上传合同</el-button>
				<el-button type="primary" v-if="checked == 0">审核失败</el-button>
				<el-button type="primary" v-if="checked == 0">审核成功</el-button>
				<el-button type="primary" @click="Exports">批量导出</el-button>
				<el-button type="success">恢复</el-button>
				<el-button type="danger">删除</el-button>
			</div>
		</el-row>
		<el-table v-loading="listLoading" :data="temporaryList" element-loading-text="Loading" border fit
			highlight-current-row @select="handleSelectionChange">
			<el-table-column align="center" label="" width="55" type="selection">
			</el-table-column>
			<el-table-column label="合同名称" align="center" prop="name">
			</el-table-column>
			<el-table-column label="合同编号" align="center" prop="contractNo" width="155">
			</el-table-column>
			<el-table-column label="承兑人" align="center" prop="acceptorName">
			</el-table-column>
			<el-table-column label="出票人" align="center" prop="drawersName">
			</el-table-column>
			<el-table-column label="汇票状态" align="center" prop="draftStatusText">
			</el-table-column>
			<el-table-column label="合同状态" align="center" prop="contractStatusText">
			</el-table-column>
			<el-table-column class-name="status-col" label="审核状态" align="center" prop="statusText">
			</el-table-column>
			<el-table-column align="center" label="时间" prop="createdAt" width="155">
			</el-table-column>
			<el-table-column align="center" prop="created_at" label="操作" width="250">
				<template slot-scope="scope">
					<el-tag type="primary" style="cursor: pointer" @click="tapDetail(scope.row.id)">查看详情</el-tag>
					<el-tag type="success" style="cursor: pointer" @click="successed(scope.row.id)" v-if="checked == 0">
						审核成功</el-tag>
					<el-tag type="danger" style="cursor: pointer" @click="failed(scope.row.id)" v-if="checked == 0">审核失败
					</el-tag>
					<el-tag type="success" style="cursor: pointer" v-if="checked == 1" @click="recover(scope.row.id)">恢复
					</el-tag>
					<el-tag type="danger" style="cursor: pointer" v-if="checked == 1">删除</el-tag>
				</template>
			</el-table-column>
		</el-table>
		<div class="pagesip">
			<el-button type="primary" size="small"
				style="background-color: #d8ab5a; border-color: #d8ab5a; margin: 0 20px" @click="jumpFirstPage">首页
			</el-button>
			<el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next"
				:total="list.length" :page-size="10" prev-text="上一页" next-text="下一页" :hide-on-single-page="false"
				ref="pagination">
			</el-pagination>
			<el-button type="primary" size="small"
				style="background-color: #d8ab5a; border-color: #d8ab5a; margin: 0 20px" @click="jumpLastPage">尾页
			</el-button>
		</div>
	</div>
</template>

<script>
	import {
		getList
	} from "@/api/table";
	import {
		dataConversionUtil
	} from '../../utils/Excel.js'
	export default {
		filters: {
			statusFilter(status) {
				const statusMap = {
					published: "success",
					draft: "gray",
					deleted: "danger",
				};
				return statusMap[status];
			},
		},
		mounted() {
			this.checked = this.$store.state.user.checked;
			this.$request({
				url: "/api/Contract/search",
				method: "post",
				data: {
					pageIndex: 1,
					pageSize: 100,
				},
			}).then((res) => {
				console.log(res);
				this.list = res.data.result.reverse();
				this.getPageData();
			});
		},
		data() {
			return {
				srcList: [],
				list: [],
				temporaryList: [],
				listLoading: false,
				status: "",
				hpstatus: "",
				Auditstatus: "",
				search: "",
				currentPage: 1,
				pagesize: 10,
				checked: "",
				pickerOptions: {
					shortcuts: [{
							text: "最近一周",
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
								picker.$emit("pick", [start, end]);
							},
						},
						{
							text: "最近一个月",
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
								picker.$emit("pick", [start, end]);
							},
						},
						{
							text: "最近三个月",
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
								picker.$emit("pick", [start, end]);
							},
						},
					],
				},
				value2: "",
			};
		},
		created() {},
		methods: {
			addNewContract() {
				this.$router.push({
					path: "contracts/addcontract",
				});
			},
			tapDetail(id) {
				console.log(id)
				this.$router.push({
					path: "/detail",
					query: {
						id: id
					}
				});
			},
			successed(id) {
				let successed = this.list.filter(item => item.id == id)
				// this.$request({
				// 	url: '/api/Supplier/manage',
				// 	method: 'post',
				// 	data: {
				// 		ids: [successed[0].id],
				// 		operateType: 3
				// 	}
				// }).then((res) => {
				// 	console.log(res)
				// })
				successed[0].statusText = "成功"
			},
			failed(id) {
				let failed = this.list.filter(item => item.id == id)
				// this.$request({
				// 	url: '/api/Supplier/manage',
				// 	method: 'post',
				// 	data: {
				// 		ids: [failed[0].id],
				// 		operateType: 4
				// 	}
				// }).then((res) => {
				// 	console.log(res)
				// })
				failed[0].statusText = '失败'
			},
			handleCommand(command) {
				this.status = command;
				if (this.status == "正常" || this.status == "删除") {
					this.temporaryList = this.srcList.filter(item => item.contractStatusText == this.status)
				} else {
					this.temporaryList = this.srcList
				}
			},
			handlehpCommand(command) {
				this.hpstatus = command;
				if (this.hpstatus == "正常" || this.hpstatus == "删除") {
					this.temporaryList = this.srcList.filter(item => item.draftStatusText == this.hpstatus)
				} else {
					this.temporaryList = this.srcList
				}
			},
			handleCommandAuditstatus(command) {
				this.Auditstatus = command;
				if (this.Auditstatus == "成功" || this.Auditstatus == "失败" || this.Auditstatus == "待审核") {
					this.temporaryList = this.srcList.filter(item => item.statusText == this.Auditstatus)
				} else {
					this.temporaryList = this.srcList
				}
			},
			handleSelectionChange(data) {
				this.multipleSelection = data;
				console.log(this.multipleSelection);
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getPageData();
			},
			jumpFirstPage() {
				this.$refs.pagination.handleCurrentChange(1);
				this.$emit("handleCurrentChange", 1);
			},
			jumpLastPage() {
				let font = this.$refs.pagination;
				let cpage = Math.ceil(font.total / font.pageSize);
				font.handleCurrentChange(cpage);
			},
			getPageData() {
				let start = (this.currentPage - 1) * this.pagesize;
				let end = start + this.pagesize;
				this.srcList = this.list.slice(start, end);
				this.temporaryList = this.srcList
			},
			Search() {
				if (this.search == "") {
					this.temporaryList = this.srcList
				} else {
					this.temporaryList = this.list.filter(item => item.name == this.search || item.contractNo == this
						.search || item.acceptorName == this.search || item.drawersName == this.search)
				}
			},
			Exports() {
				var tableHeader = [
					['序号', '合同名称', '合同编号', '承兑人', '出票人', '汇票状态', '合同状态', '审核状态', '时间'],
				]
				var dataList = []
				this.multipleSelection.forEach((item, index) => {
					dataList.push([index + 1, item.name, item.contractNo, item.acceptorName, item.drawersName, item
						.draftStatusText, item.contractStatusText, item.statusText, item.createdAt
					]);
				})
				dataConversionUtil.dataToExcel('合同列表', tableHeader, dataList)
				this.$message.success('导出成功!');
			},
			recover(id) {
				let recovered = this.list.filter(item => item.id == id)
				console.log(recovered[0].id)
				// this.$request({
				// 	url: '/api/Supplier/manage',
				// 	method: 'post',
				// 	data: {
				// 		ids: [recovered[0].id],
				// 		operateType: 2
				// 	}
				// }).then((res) => {
				// 	console.log(res)
				// })
			}
		},
	};
</script>
<style lang="scss">
	.pulldown {
		width: 185px;
		height: 40px;
		border: 1px solid #e8e8e8;
		border-radius: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		justify-content: space-between;
		padding: 0 20px;
		color: #999999;
	}

	.pagesip {
		width: 100%;
		margin: 20px auto;
		padding-right: 50px;
		display: flex;
		// align-items: center;
		justify-content: flex-end;
	}

	.el-pagination.is-background .el-pager li:not(.disabled).active {
		background-color: #d8ab5a;
	}

	.el-col {
		margin-bottom: 20px;
	}
</style>
