<template>
	<ContainerQuery>
		<el-form slot="more" size="small" :inline="true">
			<el-form-item>
				<el-input v-model="staffName" style="width: 220px" placeholder="员工名称/ID" clearable
					@keyup.enter.native="pageChange(1)" @clear="pageChange(1)">
					<el-button slot="append" @click="pageChange(1)">
						<i class="el-icon-search"></i>
					</el-button>
				</el-input>
			</el-form-item>
			<el-form-item>
				<el-select v-model="pm" filterable placeholder="上下架" @change="pageChange(1)">
					<el-option label="全部" value=""></el-option>
					<el-option label="增加" :value="1"></el-option>
					<el-option label="减少" :value="2"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-date-picker v-model="searchTime" type="daterange" align="right" unlink-panels range-separator="至"
					start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" @change='changeTime'>
				</el-date-picker>
			</el-form-item>
		</el-form>
		<div class="table">
			<el-table :data="tableData" style="width: 100%" type="index">
				<el-table-column prop="staffName" label="员工">
					<template slot-scope="scope">
						{{scope.row.staffName}}<br>
						ID:{{scope.row.staff_id}}
					</template>
				</el-table-column>

				<el-table-column prop="amount" label="股权变动">
					<template slot-scope="scope">
						<span :class="[
				  scope.row.pm === 1 ? 'success-status' : 'danger-status',
				]">
							{{ scope.row.pm === 1 ? "+" : "-" }}{{ scope.row.number }}
						</span>
					</template>
				</el-table-column>
				<el-table-column prop="before" label="变动前">
				</el-table-column>
				<el-table-column prop="after" label="变动后">
				</el-table-column>
				<el-table-column prop="mark" label="说明">
				</el-table-column>
				<el-table-column prop="createTime" label="发放时间">
					<template slot-scope="scope">
						{{ $_common.formatDate(scope.row.createTime,'yyyy-MM-dd') }}
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!--    分页查询-->
		<FooterPage :page-size="pageSize" :total-page.sync="total" :current-page.sync="page" @pageChange="pageChange"
			@sizeChange="sizeChange"></FooterPage>
	</ContainerQuery>
</template>
<script>
	import {
		StaffStockList,
	} from "@/api/Department";
	export default {
		name: "LadderList",
		data() {
			return {
				// 筛选的时间范围
				searchTime:'',
				"start_time": "",
				"end_time": "",
				staffName: '',
				"pm": '', //1增加2减少
				total: 0,
				page: 1,
				pageSize: 10,
				tableData: [],
				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]);
						}
					}]
				},
			};
		},
		created() {
			this.StaffStockList();
		},
		activated() {
			if (this.$_isInit()) return;
			this.StaffStockList();
		},
		methods: {
			// 查询时间范围修改
			changeTime(val){
				this.start_time = this.$_common.formatDate(val[0].getTime())
				this.end_time = this.$_common.formatDate(val[1].getTime())
				this.pageChange(1)
			},
			async StaffStockList() {
				const {
					data,
					pageTotal
				} = await StaffStockList({
					"start_time": this.start_time,
					"end_time": this.end_time,
					staffName: this.staffName,
					"pm": this.pm, //1增加2减少
					page: this.page,
					pageSize: this.pageSize,
				});
				this.tableData = data;
				this.total = pageTotal;
			},
			pageChange(page) {
				this.page = page;
				this.StaffStockList();
			},
			// 每页数据大小改变
			sizeChange(val) {
				this.pageSize = val;
				this.pageChange(1);
			},
		},
	};
</script>
<style></style>
