<template>
	<Container>
		<div slot="left">
			<el-form inline size="small">
				<el-form-item>
					<el-input v-model="searchKey" 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 label="股份类型">
					<el-select v-model="searchType" placeholder="股份类型" style="width: 150px" clearable
						@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 label="变动类型">
					<el-select v-model="searchPm" placeholder="变动类型" style="width: 150px" clearable
						@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>
		</div>
		<!--    表格-->
		<div class="table">
			<el-table :data="tableData" style="width: 100%" type="index">
				<el-table-column prop="goods" label="股东" width="180">
					<template slot-scope="scope">
						{{ scope.row.name }}<br />
						ID:{{ scope.row.hol_id}}
					</template>
				</el-table-column>
				<el-table-column prop="originNo" label="股份类型" width="180">
					<template slot-scope="scope">
						<span :class="{'success-status': scope.row.type === 1,'danger-status': scope.row.type === 2}">
							<span v-if="scope.row.type === 1">
								原始股份
							</span>
							<span v-if="scope.row.type === 2">
								分红股份
							</span>
						</span>
					</template>
				</el-table-column>
				<el-table-column prop="remarks" label="说明"></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="time" label="创建时间">
					<template slot-scope="scope">
						{{ $_common.formatDate(scope.row.createTime) }}
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!--    分页查询-->
		<FooterPage :page-size="pageSize" :total-page.sync="total" :current-page.sync="page" @pageChange="pageChange"
			@sizeChange="sizeChange"></FooterPage>
	</Container>
</template>
<script>
	import {
		sharesList
	} from "@/api/Holders";

	export default {
		name: "SharesList",
		data() {
			return {
				state: "状态",
				searchType: '',//1原始股份2分红股份
				searchKey: '',
				searchPm:'',//1增加2减少
				total: 0,
				page: 1,
				pageSize: 10,
				tableData: [],
			};
		},
		created() {
			this.sharesList();
		},
		activated() {
			if (this.$_isInit()) return;
			this.sharesList();
		},
		methods: {
			//  订单时间
			// changeTime(val) {
			// 	if (val && val.length) {
			// 		this.search_form.start = val[0] / 1000;
			// 		this.search_form.end = val[1] / 1000 + 86399;
			// 	} else {
			// 		this.search_form.start = "";
			// 		this.search_form.end = "";
			// 	}
			// 	this.pageChange(1);
			// },
			async sharesList() {
				const {
					data,
					pageTotal
				} = await sharesList({
					name: this.searchKey,
					pm: this.searchPm,
					type: this.searchType,
					page: this.page,
					pageSize: this.pageSize,
				});
				this.tableData = data;
				this.total = pageTotal;
			},
			pageChange(page) {
				this.page = page;
				this.sharesList();
			},
			// 每页数据大小改变
			sizeChange(val) {
				this.pageSize = val;
				this.pageChange(1);
			},
		},
	};
</script>
<style></style>
