<template>
	<!-- 门店-门店列表 -->
	<div>
		<Card :bordered="false" dis-hover class="ivu-mt tablebox" :padding="16">
			<Form ref="queryData" :model="queryData" :label-width="labelWidth" :label-position="labelPosition"
				class="tabform" inline @submit.native.prevent>
				<FormItem label="选择门店：">
					<Select v-model="queryData.store_id" clearable filterable @on-change="userSearchs"
						class="input-add">
						<Option v-for="item in staffData" :value="item.id" :key="item.id">{{ item.name }}
						</Option>
					</Select>
				</FormItem>
			</Form>
			<div class="new_tab">
				<!-- Tab栏切换 -->
				<!-- <Tabs @on-click="onClickTab">
					<TabPane label="全部" name="all" />
					<TabPane label="营业中" name="1" />
					<TabPane label="休息中" name="0"/>
					<TabPane label="已停业" name="-1" />
				</Tabs> -->
			</div>
			<Button type="primary" @click="add">添加店员</Button>
			<div class="table">
				<Table :columns="columns" :data="orderList" ref="table" class="ivu-mt" :loading="loading" highlight-row
					no-userFrom-text="暂无数据" no-filtered-userFrom-text="暂无筛选结果">
					<template slot-scope="{ row }" slot="avatar">
						<img :src="row.avatar" />
					</template>
					<template slot-scope="{ row }" slot="department_list">
						<div>{{row.department_list[0].name.name || ''}}</div>
					</template>
					<template slot-scope="{ row, index }" slot="action">
						<!-- <a @click="gostore(row)">进入门店</a>
						<Divider type="vertical" />
						<a @click="reset(row)">重置</a>
						<Divider type="vertical" />
						<a @click="operation(row)">{{row.is_show == 0 ? "开业" : "停业"}}</a>
						<Divider type="vertical" /> -->
						<a @click="edit(row)">编辑</a>
						<Divider type="vertical" />
						<a @click="delte(row, '删除店员', index)">删除</a>
					</template>
				</Table>
				<div class="acea-row row-right page">
					<Page :total="total" :current="formValidate.page" show-elevator show-total @on-change="pageChange"
						:page-size="formValidate.limit" />
				</div>
			</div>
		</Card>
		<add-staff ref="template" @success="addsuccess" :staffInfo="staffInfo" ></add-staff>
	</div>
</template>

<script>
	import { mapState } from "vuex";
	import util from "@/libs/util";
	import Setting from "@/setting";
	import addStaff from "../components/addStaff";
	import {
		storeListApi,
		storeLogin,
		storeSetShowApi,
		resetApi,
		staffListInfo,
		getYgList
	} from "@/api/store";
	export default {
		name: "storeList",
		components: {
			addStaff,
		},
		data() {
			return {
				
				staffInfo: {},
				staffData: [],
				queryData:{
				  page: 1,
				  limit: 10,
				  type: '',
				  status: "",
				  time: "",
				  real_name: "",
				  store_id: "",
				  order_type: 6,
				},
				BaseURL: '',
				total: 0,
				loading: false,
				formValidate: {
					type: "all",
					page: 1,
					limit: 15,
				},
				columns: [{
						title: "ID",
						key: "id",
						width: 60,
					},
					{
						title: "头像",
						slot: "avatar",
						minWidth: 80,
					},
					{
						title: "姓名",
						key: "alias",
						minWidth: 80,
					},
					{
						title: "别名",
						key: "name",
						minWidth: 80,
					},
					{
						title: "部门",
						slot: "department_list",
						minWidth: 100
					},
					{
						title: "职务",
						key: "position",
						minWidth: 80,
					},
					{
						title: "联系电话",
						key: "mobile",
						minWidth: 90,
					},
					{
						title: "住址",
						key: "address",
						minWidth: 150,
					},
					{
						title: "添加时间",
						key: "create_time",
						minWidth: 120,
					},
					{
						title: "操作",
						slot: "action",
						fixed: "right",
						minWidth: 240,
						align: "center",
					},
				],
				orderList: [{
					id: "1",
					order_id: "12",
					pay_price: "12",
					status: 1,
					phone: "13000000000",
					address: "陕西省西安市莲湖区大兴西路啊餐厨",
				}, ],
			};
		},
		computed: {
			...mapState("admin/layout", ["isMobile"]),
			labelWidth() {
				return this.isMobile ? undefined : 96;
			},
			labelPosition() {
				return this.isMobile ? "top" : "right";
			},
		},
		mounted() {
			this.getList();
			this.staffList()
		},
		methods: {
			addsuccess() {
				this.getList()
			},
			// 门店列表
			staffList() {
				let data = {
					page: 0,
					limit: 0,
				};
				staffListInfo()
					.then((res) => {
						this.staffData = res.data;
					})
					.catch((err) => {
						this.$Message.error(err.msg);
					});
			},
			// 选择门店
			userSearchs() {
			  this.queryData.page = 1;
			  // this.searchList();
			},
			getList() {
				this.loading = true;
				getYgList(this.formValidate).then((res) => {
					this.orderList = res.data.list;
					this.total = res.data.count;
					this.loading = false;
				});
			},
			reset(row) {
				this.$modalForm(resetApi(row.id)).then(() => this.getList());
			},
			add() {
				this.$refs.template.isEdit = 0;
				this.$refs.template.title = "添加店员";
				this.$refs.template.add = 1;
				this.$refs.template.isTemplate = true;
				this.$refs.template.cityInfo({
					pid: 0
				});
			},
			edit(row) {
				this.$refs.template.title = "编辑店员";
				this.$refs.template.isTemplate = true;
				// this.$refs.template.getInfo(row.id);
				let editData = row
				console.log(row);
				this.$refs.template.formItem = row
			},
			getExpiresTime(expiresTime) {
				let nowTimeNum = Math.round(new Date() / 1000);
				let expiresTimeNum = expiresTime - nowTimeNum;
				return parseFloat(parseFloat(parseFloat(expiresTimeNum / 60) / 60) / 24);
			},
			
			delte(row, tit, num) {
				let delfromData = {
					title: tit,
					num: num,
					url: `work/delete?id=${row.id}&user_id=${row.uid}`,
					method: "post",
					ids: "",
				};
				this.$modalSure(delfromData)
					.then((res) => {
						this.$Message.success(res.msg);
						this.orderList.splice(num, 1);
						if (!this.orderList.length) {
							this.formValidate.page =
								this.formValidate.page == 1 ? 1 : this.formValidate.page - 1;
						}
						this.getList();
					})
					.catch((res) => {
						this.$Message.error(res.msg);
					});
			},
			operation(row) {
				let a = 0; //修改营业状态的反值
				if (row.is_show == 0) {
					a = 1;
				}
				if (row.is_show == 1) {
					a = 0;
				}
				storeSetShowApi(row.id, a)
					.then((res) => {
						this.getList();
						this.$Message.success(res.msg);
					})
					.catch((err) => {
						this.$Message.error(res.msg);
					});
			},
			searchs() {},
			onClickTab(e) {
				this.formValidate.page = 1;
				this.formValidate.type = e;
				this.getList();
			},
			//分页
			pageChange(status) {
				this.formValidate.page = status;
				this.getList();
			},
		},
	};
</script>

<style scoped lang="stylus">
	/deep/.ivu-tabs-nav {
		height: 45px;
	}

	.tablebox {
		margin-top: 15px;
	}

	.btnbox {
		padding: 20px 0px 0px 30px;

		.btns {
			width: 99px;
			height: 32px;
			background: #1890ff;
			border-radius: 4px;
			text-align: center;
			line-height: 32px;
			color: #ffffff;
			cursor: pointer;
		}
	}

	.table {
		padding: 0;

		img {
			width: 40px;
			height: 40px;
		}
	}

	.search {
		width: 86px;
		height: 32px;
		background: #1890ff;
		border-radius: 4px;
		text-align: center;
		line-height: 32px;
		font-size: 13px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #ffffff;
		cursor: pointer;
	}

	.reset {
		width: 86px;
		height: 32px;
		border-radius: 4px;
		border: 1px solid rgba(151, 151, 151, 0.36);
		text-align: center;
		line-height: 32px;
		font-size: 13px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.85);
		cursor: pointer;
	}

	.new_tab {
		>>>.ivu-tabs-nav .ivu-tabs-tab {
			padding: 4px 16px 20px !important;
			font-weight: 500;
		}
	}
</style>