<template>
	<div class="goodList">
		<Form ref="pagination" :model="formValidate" @submit.native.prevent>
			<FormItem label="员工姓名：" label-for="title">
				<Input v-model="formValidate.name" placeholder="请输入员工姓名" class="input-add mr14" />
				<Button type="primary" @click="userSearchs()">查询</Button>
			</FormItem>
		</Form>
		<Table ref="table" no-data-text="暂无数据" @on-select-all="selectAll" @on-select-all-cancel="cancelAll"
			@on-select="TableSelectRow" @on-select-cancel="TableSelectCancelRow" no-filtered-data-text="暂无筛选结果"
			:columns="columns4" :data="tableList" :loading="loading" class="mr-20" height="500">
			<template slot-scope="{ row }" slot="avatar">
				<viewer>
					<div class="tabBox_img">
						<img v-lazy="row.avatar||row.user.avatar" />
					</div>
				</viewer>
			</template>
		</Table>
		<div class="acea-row row-right page">
			<Page :total="total" show-elevator show-total @on-change="pageChange" :page-size="formValidate.limit" />
		</div>
		<div class="footer" slot="footer" >
			<Button type="primary" size="large" :loading="modal_loading" long @click="ok">确定</Button>
		</div>
	</div>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import {
		getYgList
	} from '@/api/store'
	export default {
		name: "index",
		data() {
			return {
				//选中商品集合
				selectEquips: [],
				// 选中的id集合
				selectEquipsIds: [],
				cateIds: [],
				modal_loading: false,
				formValidate: {
					page: 1,
					limit: 10,
					is_reservation:1
				},
				total: 0,
				loading: false,
				tableList: [],
				columns4: [{
						type: 'selection',
						width: 60,
						align: 'center'
					},
					{
						title: "员工ID",
						key: "id",
					},
					{
						title: "头像",
						slot: "avatar",
						width: 60,
					},
					{
						title: "员工姓名",
						key: "name",
						minWidth: 80,
					},
					{
						title: "别称",
						key: "alias",
						minWidth: 80,
					},
					{
						title: "手机号",
						key: "mobile",
						width: 130,
					},
					{
						title: "创建时间",
						key: "create_time",
						minWidth: 100,
					},
				],
				images: [],
			};
		},
		created() {
		},
		mounted() {
			this.getList();
		},
		methods: {
			// 判断是否选中
			sortData() {
				if (this.selectEquipsIds.length) {
					this.tableList.forEach(ele => {
						if (this.selectEquipsIds.includes(ele.id)) ele._checked = true;
					})
				}
			},
			// 选中一行
			TableSelectRow(selection, row) {
				if (!this.selectEquipsIds.includes(row.id)) {
					this.selectEquipsIds.push(row.id);
					this.selectEquips.push(row);
				}
			},
			// 取消选中一行
			TableSelectCancelRow(selection, row) {
				var _index = this.selectEquipsIds.indexOf(row.id);
				if (_index != -1) {
					this.selectEquipsIds.splice(_index, 1);
					this.selectEquips.splice(_index, 1);
				}
			},
			// 选中所有
			selectAll() {
				for (let i = this.tableList.length - 1; i >= 0; i--) {
					this.TableSelectRow(null, this.tableList[i]);
				}
			},
			// 取消选中所有
			cancelAll() {
				for (let i = this.tableList.length - 1; i >= 0; i--) {
					this.TableSelectCancelRow(null, this.tableList[i]);
				}
			},
			pageChange(index) {
				this.formValidate.page = index;
				this.getList();
			},
			// 列表
			getList() {
				this.loading = true;
					getYgList(this.formValidate)
						.then(async (res) => {
							let data = res.data;
							this.tableList = data.list;
							this.total = res.data.count;
							this.sortData();
							this.loading = false;
						})
						.catch((res) => {
							this.loading = false;
							this.$Message.error(res.msg);
						});
			},
			changeCheckbox(selection) {
				let images = [];
				selection.forEach(function(item) {
					let imageObject = {
						image: item.image,
						product_id: item.id,
						store_name: item.store_name,
						temp_id: item.temp_id
					};
					images.push(imageObject);
				});
				this.images = images;
				this.$emit("getProductDiy", selection);
			},
			ok() {
				this.$emit("getProductId", this.selectEquips);
			},
			treeSearchs(value) {
				this.formValidate.page = 1;
				this.getList();
			},
			// 表格搜索
			userSearchs() {
				this.formValidate.page = 1;
				this.getList();
			},
			clear() {
			},
		},
	};
</script>

<style scoped lang="stylus">
	/deep/.ivu-table-header thead tr th {
		padding: 8px 5px;
	}

	/deep/.ivu-radio-wrapper {
		margin-right: 0 !important;
	}

	.footer {
		margin: 15px 0;
	}

	.tabBox_img {
		width: 36px;
		height: 36px;
		border-radius: 100px;
		overflow: hidden;
		cursor: pointer;

		img {
			width: 100%;
			height: 100%;
		}
	}

	.tabform {
		>>>.ivu-form-item {
			margin-bottom: 16px !important;
		}
	}

	.btn {
		margin-top: 20px;
		float: right;
	}

	.goodList {}

	.mr-20 {
		margin-right: 10px;
	}
</style>