<template>
	<ContainerQuery>
		<div slot="more">
			<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-date-picker v-model="time" clearable type="month" end-placeholder="选择月份" @change="pageChange(1)">
					</el-date-picker>
				</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}">
							{{ scope.row.type === 1 ? "原始股份" : "分红股份" }}
						</span>
					</template>
				</el-table-column>
				<el-table-column prop="shares" label="我的分红">
					<template slot-scope="scope">
						持有股份：{{scope.row.shares}}<br/>
						分红奖金：{{scope.row.number}}<br/>
					</template>
				</el-table-column>
				<el-table-column prop="number" label="股份奖池">
					<template slot-scope="scope">
						分红总金额：{{scope.row.total}}<br/>
						分红总股份：{{scope.row.total_shares}}<br/>
					</template>
				</el-table-column>
				<el-table-column prop="before" label="金额变动">
					<template slot-scope="scope">
						分红前：{{scope.row.before}}<br/>
						分红后：{{scope.row.after}}<br/>
					</template>
				</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 {
		holdersBonusList
	} from "@/api/Holders";

	export default {
		name: "ABonus",
		data() {
			return {
				// 查询的时间
				time:'',
				state: "状态",
				searchType: '',//1原始股份2分红股份
				searchKey: '',
				searchPm:'',//1增加2减少
				total: 0,
				page: 1,
				pageSize: 10,
				tableData: [],
			};
		},
		created() {
			this.holdersBonusList();
		},
		activated() {
			if (this.$_isInit()) return;
			this.holdersBonusList();
		},
		methods: {
			async holdersBonusList() {
				const {
					data,
					pageTotal
				} = await holdersBonusList({
					name: this.searchKey,
					start_time: this.$_common.formatDate(new Date( this.time).getTime(),"yyyy-MM-dd") ,
					type: this.searchType,
					page: this.page,
					pageSize: this.pageSize,
				});
				this.tableData = data;
				this.total = pageTotal;
			},
			pageChange(page) {
				this.page = page;
				this.holdersBonusList();
			},
			// 每页数据大小改变
			sizeChange(val) {
				this.pageSize = val;
				this.pageChange(1);
			},
		},
	};
</script>
<style></style>
