<template>
	<div class="app-container">
		<el-row type="flex" justify="space-between" style="margin-bottom: 20px">
			<div class="grid-content bg-purple">
				<el-input v-model="search" placeholder="合同名称/编号、承兑人名称或出票..." clearable style="width: 100%"
					@change="Search">
					<i slot="prefix" class="el-input__icon el-icon-search" />
				</el-input>
			</div>
			<div class="grid-content bg-purple">
				<el-dropdown @command="handleCommand">
					<div class="pulldown">
						<span v-if="!status" class="el-dropdown-link"> 合同状态 </span>
						<span v-if="status" class="el-dropdown-link">
							{{ status }}
						</span>
						<i class="el-icon-arrow-down el-icon--right" />
					</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 v-if="!hpstatus" class="el-dropdown-link"> 汇票状态 </span>
						<span v-if="hpstatus" class="el-dropdown-link">
							{{ hpstatus }}
						</span>
						<i class="el-icon-arrow-down el-icon--right" />
					</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 v-if="!Auditstatus" class="el-dropdown-link"> 审核状态 </span>
						<span v-if="Auditstatus" class="el-dropdown-link">
							{{ Auditstatus }}
						</span>
						<i class="el-icon-arrow-down el-icon--right" />
					</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"
            value-format="yyyy-MM-dd"
          />
        </div>
      </div> -->
		</el-row>

		<el-table v-loading="listLoading" :data="temporaryList" element-loading-text="Loading" border fit
			highlight-current-row @select="handleSelectionChange" @select-all="handleAll">
			<el-table-column align="center" label="" width="55" type="selection" />
			<el-table-column label="合同名称" align="center" prop="name" />
			<el-table-column label="合同编号" align="center" prop="contractNo" width="155" />
			<el-table-column label="承兑人" align="center" prop="acceptorName" />
			<el-table-column label="出票人" align="center" prop="drawersName" />
			<el-table-column label="汇票状态" align="center" prop="draftStatusText" />
			<el-table-column label="合同状态" align="center" prop="contractStatusText" />
			<el-table-column class-name="status-col" label="审核状态" align="center" prop="statusText" />
			<el-table-column align="center" label="时间" prop="createdAt" width="155" />
			<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 v-if="checked === 0" type="success" style="cursor: pointer"
						@click="Ssuccessed(scope.row.id)">
						审核成功</el-tag>
					<el-tag v-if="checked === 0" type="danger" style="cursor: pointer" @click="Sfailed(scope.row.id)">
						审核失败
					</el-tag>
					<el-tag v-if="checked === 1" type="success" style="cursor: pointer">恢复
					</el-tag>
					<el-tag v-if="checked === 1" type="danger" style="cursor: pointer">删除</el-tag>
				</template>
			</el-table-column>
		</el-table>
		<div style="display: flex;justify-content: space-between;">
			<el-row type="flex" justify="space-between">
				<div class="btn" style="display: flex; justify-content: flex-end">
					<el-button v-permission="['admin']" type="primary" @click="addNewContract">上传合同</el-button>
					<el-button v-if="checked === 0" type="primary" @click="failed">审核失败</el-button>
					<el-button v-if="checked === 0" type="primary" @click="successed">审核成功</el-button>
					<el-button type="primary" @click="Exports">批量导出</el-button>
					<el-button type="success" @click="recover">恢复</el-button>
					<el-button type="danger" @click="deleted">删除</el-button>
				</div>
			</el-row>
			<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 ref="pagination" background layout="prev, pager, next" :total="list.length"
					:page-size="10" prev-text="上一页" next-text="下一页" :hide-on-single-page="false"
					@current-change="handleCurrentChange" />
				<el-button type="primary" size="small"
					style="background-color: #d8ab5a; border-color: #d8ab5a; margin: 0 20px" @click="jumpLastPage">尾页
				</el-button>
			</div>
		</div>

	</div>
</template>

<script>
	import {
		dataConversionUtil
	} from '../../utils/Excel.js'
	import {
		contractsPageApi
	} from '@/api/contracts'
	export default {
		filters: {
			statusFilter(status) {
				const statusMap = {
					published: 'success',
					draft: 'gray',
					deleted: 'danger'
				}
				return statusMap[status]
			}
		},
		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: '',
				filter: {
					current: 1,
					size: 10
				},
				pagination: {
					current: 0,
					total: 0,
					pageSize: 10
				}
			}
		},
		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
			//   this.getPageData()
			// })
			this.loadData()
		},
		methods: {
			loadData(filtter = {}) {
				const params = {
					...this.filter,
					...filtter
				}
				contractsPageApi(params).then(res => {
					const {
						data
					} = res
					this.filter = params
					this.temporaryList = data.result
					this.srcList = data.result
					this.pagination = {
						...this.pagination,
						current: params.current,
						pageSize: params.size,
						total: data.total
					}
				})
			},
			addNewContract() {
				this.$router.push({
					path: 'contracts/addcontract'
				})
			},
			tapDetail(id) {
				console.log(id)
				this.$router.push({
					path: '/detail',
					query: {
						id: id
					}
				})
			},
			successed() {
				// let successed = this.list.filter(item => item.id === id)
				const ids = Array.from(this.multipleSelection, ({
					id
				}) => id)
				this.$request({
					url: '/api/Contract/manage',
					method: 'post',
					data: {
						ids: ids,
						operateType: 3
					}
				}).then((res) => {
					if (res.code === 200) {
						this.$message({
							type: 'success',
							message: res.msg
						})
						this.loadData()
					} else {
						this.$message({
							type: 'error',
							message: res.msg
						})
						this.loadData()
					}
				})
			},
			Ssuccessed(id) {
				this.$request({
					url: '/api/Contract/manage',
					method: 'post',
					data: {
						ids: [id],
						operateType: 3
					}
				}).then((res) => {
					if (res.code === 200) {
						this.$message({
							type: 'success',
							message: res.msg
						})
						this.loadData()
					} else {
						this.$message({
							type: 'error',
							message: res.msg
						})
						this.loadData()
					}
				})
			},
			failed() {
				// let failed = this.list.filter(item => item.id === id)
				const ids = Array.from(this.multipleSelection, ({
					id
				}) => id)
				this.$request({
					url: '/api/Contract/manage',
					method: 'post',
					data: {
						ids: ids,
						operateType: 4
					}
				}).then((res) => {
					if (res.code === 200) {
						this.$message({
							type: 'success',
							message: res.msg
						})
						this.loadData()
					} else {
						this.$message({
							type: 'error',
							message: res.msg
						})
						this.loadData()
					}
				})
			},
			Sfailed(id) {
				this.$request({
					url: '/api/Contract/manage',
					method: 'post',
					data: {
						ids: [id],
						operateType: 4
					}
				}).then((res) => {
					if (res.code === 200) {
						this.$message({
							type: 'success',
							message: res.msg
						})
						this.loadData()
					} else {
						this.$message({
							type: 'danger',
							message: res.msg
						})
						this.loadData()
					}
				})
			},
			recover(id) {
				const ids = Array.from(this.multipleSelection, ({
					id
				}) => id)
				this.$request({
					url: '/api/Contract/manage',
					method: 'post',
					data: {
						ids: ids,
						operateType: 2
					}
				}).then((res) => {
					if (res.code === 200) {
						this.$message({
							type: 'success',
							message: res.msg
						})
						this.loadData()
					} else {
						this.$message({
							type: 'danger',
							message: res.msg
						})
						this.loadData()
					}
				})
			},
			deleted() {
				const ids = Array.from(this.multipleSelection, ({
					id
				}) => id)
				this.$request({
					url: '/api/Contract/manage',
					method: 'post',
					data: {
						ids: ids,
						operateType: 1
					}
				}).then((res) => {
					if (res.code === 200) {
						this.$message({
							type: 'success',
							message: res.msg
						})
						this.loadData()
					} else {
						this.$message({
							type: 'danger',
							message: res.msg
						})
						this.loadData()
					}
				})
			},
			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)
			},
			handleAll(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() {
				const font = this.$refs.pagination
				const cpage = Math.ceil(font.total / font.pageSize)
				font.handleCurrentChange(cpage)
			},
			getPageData() {
				const start = (this.currentPage - 1) * this.pagesize
				const 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.srcList.filter(item => item.name === this.search || item.contractNo === this
						.search || item.acceptorName === this.search || item.drawersName === this.search)
				}
			},
			Exports() {
				if (this.multipleSelection == "") {
					this.$message({
						type: 'warning',
						message: '请选择数据!'
					})
				} else {
					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('导出成功!')
				}
			}

		}
	}
</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;
	}

	.btn {
		padding: 20px;
	}
</style>
