<template>
	<div class="app-container">
		<el-row>
			<el-col :xs="24" :sm="7" :md="6" :lg="4" :xl="3">
				<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-menu>
					</el-dropdown>
				</div>
			</el-col>


			<el-col :xs="24" :sm="11" :md="9" :lg="7" :xl="5">
				<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-col>
			<el-col :xs="24" :sm="10" :md="8" :lg="5" :xl="5">
				<div class="grid-content bg-purple">
					<div class="grid-content bg-purple" style="margin-left: 30px;">
						<el-input placeholder="请输入查询内容" v-model="input4" style="width: 80%;">
							<i slot="prefix" class="el-input__icon el-icon-search"></i>
						</el-input>
					</div>
				</div>
			</el-col>
			<!-- <el-col :span="1">
       <div class="grid-content bg-purple"></div>
     </el-col> -->
			<el-col :xs="13" :sm="7" :md="6" :lg="8" :xl="11">
				<div class="grid-content bg-purple" style="display: flex;justify-content: flex-end;">

					<el-button type="primary">下载</el-button>
					<el-button type="danger">删除</el-button>
				</div>
			</el-col>

		</el-row>
		<el-table v-loading="listLoading" :data="srcList" element-loading-text="Loading" border fit highlight-current-row>
			<el-table-column align="center" label="" width="55">
				<template slot-scope="scope">
					<el-checkbox v-model="checked"></el-checkbox>
				</template>
			</el-table-column>
			<el-table-column label="文件名称" align="center">
				<template slot-scope="scope">
					DNDFDFN_20220244
				</template>
			</el-table-column>
			<el-table-column label="存储对象" width="180" align="center">
				<template slot-scope="scope">
					<span>本地</span>
				</template>
			</el-table-column>
			<el-table-column label="文件大小" width="150" align="center">
				<template slot-scope="scope">
					10.05KB
				</template>
			</el-table-column>
			<el-table-column align="center" prop="created_at" label="时间">
				<template slot-scope="scope">
					<i class="el-icon-time" />
					<span>{{ scope.row.display_time }}</span>
				</template>
			</el-table-column>
			<el-table-column label="备注" align="center">
				<template slot-scope="scope">
					无
				</template>
			</el-table-column>
			<el-table-column align="center" prop="created_at" label="操作" width="250">
				<template slot-scope="scope">
					<el-tag type="success" style="cursor: pointer;margin-right: 15px;">恢复</el-tag>
					<el-tag type="warning" style="margin-right: 15px;cursor: pointer;">下载</el-tag>
					<el-tag type="danger" style="cursor: pointer;">删除</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="11" 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'

	export default {
		filters: {
			statusFilter(status) {
				const statusMap = {
					published: 'success',
					draft: 'gray',
					deleted: 'danger'
				}
				return statusMap[status]
			}
		},
		data() {
			return {
				srcList: [],
				list: [],
				listLoading: false,
				status: '',
				hpstatus: '',
				currentPage: 1,
				pagesize: 11,
				input4: '',
				checked: false,
				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]);
						}
					}]
				},
				value1: '',
				value2: ''
			}
		},
		created() {
			// this.fetchData()
		},
		methods: {
			handleCommand(command) {
				this.status = command

			},
			handlehpCommand(command) {
				this.hpstatus = command

			},
			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);
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getPageData();
			},
		}
	}
</script>
<style lang="scss">
	.app-container {
		position: relative;
	}

	.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;
		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>
