<template>
	<ContainerQuery>
		<div v-if="$accessCheck($Access.RewardList)" slot="left">
			<el-button size="small" type="primary" @click="$router.push('/Shareholders/addReward')">
				新增股东
			</el-button>
			<el-button size="small" type="primary" @click="$router.push('/Shareholders/sharesList')">
				股份记录
			</el-button>
			<el-button size="small" type="primary" @click="$router.push('/Shareholders/aBonus')">
				分红记录
			</el-button>
		</div>
		<div slot="more">
			<el-form size="small" :inline="true">
				<el-form-item>
					<el-date-picker v-model="time" clearable type="date" end-placeholder="添加日期" @change="changeTime">
					</el-date-picker>
				</el-form-item>
			</el-form>
		</div>
		<el-table :data="rule_list">
			<el-table-column prop="id" label="ID" show-overflow-tooltip min-width="50"></el-table-column>
			<el-table-column prop="name" label="股东名称" show-overflow-tooltip min-width="155"></el-table-column>
			<el-table-column prop="number" label="联系方式" show-overflow-tooltip min-width="155"></el-table-column>
			<el-table-column prop="dends" label="分红股份" min-width="140"></el-table-column>
			<el-table-column prop="shares" label="原始股份" min-width="140"></el-table-column>
			<el-table-column prop="createTime" label="添加时间" min-width="140"></el-table-column>
			<el-table-column prop="name" label="操作" min-width="120">
				<template slot-scope="scope">
					<el-button v-if="$accessCheck($Access.RewardEditUser)" type="text" @click="
              $router.push(
                '/Shareholders/EditReward?id=' + scope.row.id
              )
            ">
						修改
					</el-button>
					<el-button v-if="$accessCheck($Access.RewardDelUser)" type="text" @click="delData(scope.row.id)">
						删除
					</el-button>
					<el-button v-if="$accessCheck($Access.RewardEditShares)" type="text"
						@click="showRewardChange(scope.row.id)">
						股份
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<FooterPage :page-size="pageSize" :total-page.sync="total" :current-page.sync="page" @pageChange="pageChange"
			@sizeChange="sizeChange"></FooterPage>
		<SharesChange v-if="show_reward" :id='rewardId' :is-edit='true' :visible="show_reward"
			@close="show_reward = false" @confirm="sharesConfirm"></SharesChange>
	</ContainerQuery>
</template>

<script>
	import {
		Lst,
	} from "@/api/Holders";
	import SharesChange from "./components/sharesChange.vue";
	export default {
		name: "RewardList",
		components: {
			SharesChange,
		},
		data() {
			return {
				// 股东id
				rewardId: '',
				// 显示修改股份弹窗
				show_reward: false,
				rule_list: [],
				time: '',
				search_form: {
					start: "",
				},
				total: 0,
				page: 1,
				pageSize: 10,
			};
		},
		created() {
			this.Lst();
		},
		activated() {
			if (this.$_isInit()) return;
			this.Lst();
		},
		methods: {
			// 股份修改完成
			sharesConfirm() {
				this.Lst();
			},
			// 显示股份修改
			showRewardChange(id) {
				this.rewardId = id;
				this.show_reward = true;
			},
			//  订单时间
			changeTime(val) {
				if (val && val.length) {
					this.search_form.start = val[0] / 1000;
				} else {
					this.search_form.start = "";
				}
				this.pageChange(1);
			},
			pageChange(page) {
				this.page = page;
				this.Lst();
			},
			// 每页数据大小改变
			sizeChange(val) {
				this.pageSize = val;
				this.pageChange(1);
			},
			async Lst() {
				const {
					data,
					pageTotal
				} = await Lst({
					page: this.page,
					pageSize: this.pageSize,
					createTime: this.search_form.start,
				});
				this.rule_list = data.map((item) => {
					const staffName = data.map((item) => item.staffName);
					return {
						...item,
						staffName: staffName.length ? staffName.join("，") : "",
					};
				});
				this.total = pageTotal;
			},
			// 删除
			async delData(id) {
				this.$confirm("是否要将该股东删除?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				}).then(async () => {
					const data = await deleteRewardRule(id);

					this.$message({
						type: "success",
						message: "操作成功!",
					});
					this.Lst();
				});
			},
		},
	};
</script>

<style scoped></style>
