<!--  -->
<template>
	<view class="content">
		<view style="width: 100%; height: 44px;"></view>
		<view class="top-heder">
			<view class="t-left" @click="getfan()">
				<uni-icons type="left" size="18"></uni-icons>
			</view>
			<view class="t-input">
				<uni-icons type="search" color="#BCBCBC" size="22"></uni-icons>
				<input type="text" v-model="workName" placeholder="搜索员工.....">
			</view>
			<view class="sou" @click="getindex()">搜索</view>
		</view>
		<!-- <view class="top-tap">
				<view class="tap-box" v-for="(item,index) in taplist" :key="index" @click="gettapindex(index,item.id)">
					<text :class="{'lan':isListing == item.id}">{{item.Text}}</text>
					<view class="gang" v-if="isListing == item.id"></view>
				</view>

			</view> -->
		<scroll-view scroll-x="true" class="box-bottom">
			<view class="tap-box" v-for="(item,index) in tabList" :key="index" @click="gettap(index,item.id)">
				<view :class="{'lan' : tapindex == index}">{{item.name}}</view>
				<view class="gang" v-if="tapindex == index"></view>
			</view>
		</scroll-view>
		<view class="mub">
			<view class="top-ail">




				<view class="jsy" v-if="!goodsList||goodsList.length == 0">
					<image src="http://www.nuoyunr.com/lananRsc/detection/qs.png" mode=""></image>
				</view>
				<checkbox-group @change="checkboxChange">


					<view class="a-box" v-for="(item,index) in goodsList" :key="index">
						<view class="t-box">
							<label>
								<checkbox :value="item.id" color="#FFCC33" style="transform:scale(0.7)" />
							</label>
							<view class="s-img">
								<image :src="item.avatar" mode="aspectFill"></image>
							</view>
							<view class="s-right">
								<view class="s-title">{{item.workName}}</view>
								<view class="s-hui">电话：{{item.workPhone}}</view>
							</view>
							<view class="bottom-box" @click="gettel(item.workPhone)">
								<uni-icons type="phone-filled" color="#0D2E8D" size="18"></uni-icons>
								<text>电话</text>
								<!-- @click="getdelete(item.id)" -->
								<!-- <text>删除</text> -->
							</view>
						</view>

					</view>
				</checkbox-group>

			</view>
		</view>

		<!-- 底部 -->

		<view class="d-bottom" @click="showpopup()">
			<text>+ 添加员工</text>
		</view>
		<view class="s-bottom" @click="getdelete()">
			<text>- 删除员工</text>
		</view>


		<u-popup :round="10" :show="show" @close="close" @open="open">
			<view class="pop-box">
				<view class="s-title">添加员工</view>
				<view class="on-input">
					<view class="s-huix">姓名：</view>
					<view class=""><input v-model="realName" type="text" placeholder="请输入姓名"></view>
				</view>
				<view class="on-input">
					<view class="s-huix">电话：</view>
					<view class=""><input v-model="phoneNum" type="text" placeholder="请输入手机号"></view>
				</view>
				<view class="">
					<view class="s-huix">岗位：</view>
					<view class="warp-flax">
						<view class="flasxbox" :class="{ 'gwcss' : gwindex == index }" v-for="(item,index) in  renList"
							:key="index" @click="xgang(index,item.id)">
							<text>{{item.name}}</text>
						</view>
					</view>

				</view>
				<view class="tjiao" @click="getyadd">
					<text>提交</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import config from '@/config'
	import request from '../../utils/request';
	export default {
		data() {
			return {
				msg: '3',
				goodsList: [],
				tabList: [],
				renList: [],
				baseUrl: "http://192.168.1.4:8080/lanan",
				partnerId: '',
				isListing: 1,
				tapindex: 0,
				goodsTitle: "",
				taplist: [{
						Text: '已发布',
						id: 1
					},
					{
						Text: '待上架',
						id: 0
					},
				],
				pageNum: 1, //第几页
				pageSize: 10, //一页多少张
				totalPages: 0, //总数
				show: false,
				realName: "",
				phoneNum: "",
				idCard: "",
				workName: "",
				workids: [],
				postid: '',
				gwindex: 0,
				gwid: 0,
			}
		},
		onLoad() {

		},
		onPullDownRefresh() {
			uni.showLoading()
			setTimeout(() => {
				uni.hideLoading()
				uni.stopPullDownRefresh()
			}, 500)
		},
		onReachBottom() {
			console.log(111)
			if (this.pageNum >= this.totalPages) {
				uni.showToast({
					title: '没有下一页数据',
					icon: 'none'
				})
			} else {
				this.pageNum++
				console.log(222)
				this.getindex()
			}
		},
		onShow() {
			this.gettab()
			// this.baseUrl = this.$baseUrl
			this.partnerId = uni.getStorageSync('partnerId')
			this.getindex()
		},
		methods: {
			gettel(num) {
				uni.makePhoneCall({
					phoneNumber: num //仅为示例
				});
			},
			xgang(index, id) {
				this.gwindex = index
				this.gwid = id
			},
			async gettab() {
				let res = await request({
					url: '/partnerOwn/partner/inspectionPostInfo',
					method: 'get',
				})
				console.log(res);
				this.tabList = res.data
				this.renList = res.data.slice(1)
			},
			gettap(index, id) {
				this.tapindex = index
				this.postid = id
				this.goodsList = []
				this.getindex()


			},
			checkboxChange(e) {
				console.log(e.detail.value);
				this.workids = e.detail.value

			},
			showpopup() {
				this.show = true
			},
			async getindex() {

				let data = {
					partnerId: this.partnerId,
					workName: this.workName,
					postId: this.postid,
					pageNum: this.pageNum, //第几页
					pageSize: this.pageSize, //一页多少张
				}
				let res = await request({

					url: '/partnerOwn/partner/getWorkList',
					method: 'get',
					params: data
				})
				if (res.code == 200) {

					if (this.pageNum != 1) {
						this.goodsList = this.goodsList.concat(res.rows)
					} else {
						this.goodsList = res.rows
					}
					let total = res.total
					this.totalPages = Math.ceil(total / this.pageSize);
				}

			},
			// 去编辑
			getedit(id) {
				uni.navigateTo({
					url: '/pages/order/editorder?id=' + id
				})
			},
			// 下架

			async getxia(id) {
				let data = {
					goodsId: id
				}
				let res = await request({
					url: '/partnerOwn/partner/changeListing',
					method: 'post',
					params: data
				})
				if (res.code == 200) {
					uni.showToast({
						title: "操作成功",

					})
					this.getindex()
				}
			},
			// 删除
			async getdelete() {
				console.log(this.workids);
				if (this.workids == '') {
					uni.showToast({
						title: '请至少选择一名要删除的员工！',
						icon: 'none'
					})
					return
				} else {
					this.workids = this.workids.join(",")
				}
				let data = {
					partnerId: this.partnerId,
					workIdStr: this.workids
				}
				let res = await request({
					url: '/partnerOwn/partner/delWorker',
					method: 'post',
					params: data
				})
				if (res.code == 200) {
					uni.showToast({
						title: "操作成功",

					})
					this.getindex()
				}
			},
			gettapindex(index, id) {
				this.isListing = id
				this.getindex()
			},
			async getyadd() {
				console.log(this.gwid, 'this.gwid');
				if (!this.realName || !this.phoneNum) {
					uni.showToast({
						title: '不能有空',
						icon: 'none'
					})
					return
				}
				let data = {
					partnerId: this.partnerId,
					realName: this.realName,
					phoneNum: this.phoneNum,
					postId: this.gwid,

				}
				let res = await request({
					url: '/partnerOwn/partner/addWorker',
					method: 'post',
					params: data
				})
				//
				if (res.code == 200) {
					uni.showToast({
						title: "添加成功"
					})
					this.show = false
					this.getindex()
				}
			},
			open() {},
			close() {
				this.show = false

			},

			getfan() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		box-sizing: border-box;
		width: 100%;
		height: calc(100vh);
		background: white;
	}

	.warp-flax {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}

	.flasxbox {
		border-radius: 6px;
		box-sizing: border-box;
		padding: 5px 10px;
		border: 1px solid #999999;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 5px;
		margin-top: 5px;
	}

	.gwcss {
		border-radius: 6px;
		box-sizing: border-box;
		padding: 5px 10px;
		border: 1px solid #0D2E8D;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 5px;
		margin-top: 5px;
		color: #0D2E8D;
	}

	.top-heder {
		width: 100%;
		height: 46px;
		background: white;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		padding: 5px 15px;
	}

	.t-left {
		width: 10%;
	}

	.t-input {
		width: 75%;
		height: 36px;
		background: #F0F0F0;
		border-radius: 50px;
		box-sizing: border-box;
		padding: 0 15px;
		display: flex;
		align-items: center;

	}

	.top-ail {
		width: 100%;
		box-sizing: border-box;
		padding: 15px;
		background-color: #F4F4F4;
		padding-bottom: 45px;

	}

	.sou {
		width: 10%;
		margin-left: 5px;
	}

	.mub {
		background-color: #F4F4F4;
		height: calc(100vh);
	}

	.dix {
		display: flex;
		align-items: center;
	}

	.top-tap {
		width: 100%;
		height: 44px;
		display: flex;
		justify-content: space-between;
		align-items: center;

	}

	.tap-box {
		width: 20%;
		height: 100%;
		text-align: center;
		font-size: 16px;
		font-weight: 400;
		color: #606266;
		box-sizing: border-box;

	}

	.gang {
		width: 30px;
		height: 4px;
		background: #0D2E8D;
		border-radius: 4px;
		margin: 4px auto;
	}

	.a-box {
		width: 100%;
		border-radius: 8px;
		background-color: white;
		box-sizing: border-box;
		padding: 15px;
		margin-bottom: 10px;
	}

	.t-box {
		width: 100%;
		box-sizing: border-box;
		// padding-bottom: 15px;
		display: flex;
		// border-bottom:  1px solid #EEEEEE;
	}

	.s-huix {
		width: 20%;
	}

	.s-img {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		margin-right: 15px;
		overflow: hidden;
		flex-shrink: 0;

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

	.s-right {
		width: 65%;
	}

	.s-title {
		font-size: 18px;
		font-weight: bold;
		color: #333333;
	}

	.s-hui {
		font-size: 15px;
		font-weight: 400;
		color: #999999;
		margin: 2px auto;
	}

	.s-ju {
		font-size: 18px;
		font-weight: bold;
		color: #FF571A;
	}

	.d-bottom {
		position: fixed;
		bottom: 0px;
		width: 50%;
		height: 45px;
		box-sizing: border-box;
		// padding-bottom: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #0D2E8D;
		color: white;
	}

	.s-bottom {
		position: fixed;
		bottom: 0px;
		right: 0px;
		width: 50%;
		height: 45px;
		box-sizing: border-box;
		// padding-bottom: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: crimson;
		color: white;
	}

	.bottom-box {
		width: 66px;
		height: 31px;
		background: #DAE1F8;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50px;
		font-size: 15px;
		font-weight: 400;
		color: #0D2E8D;
		margin-left: 5px;
	}

	.lan {
		color: #0D2E8D !important;
	}

	.jsy {
		width: 100%;
		margin-top: 20px;
		text-align: center;
		color: #0D2E8D !important;
	}

	.pop-box {
		width: 100%;
		box-sizing: border-box;
		padding: 15px;
	}

	.on-input {
		width: 100%;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #DAE1F8;
		;
		box-sizing: border-box;
		padding-bottom: 5px;
		margin: 10px;
	}

	.tjiao {
		width: 40%;
		height: 30px;
		margin: 5px auto;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #0D2E8D;
		color: white;
		border-radius: 50px;
	}

	.c-tap {
		width: 100%;
		height: 40px;
		box-sizing: border-box;
		padding: 15px;
		display: flex;
		background-color: white;
		align-items: center;
	}

	.tap-box {
		width: 20%;
		display: inline-block;
		text-align: center;


	}

	.gang {
		height: 4px;
		background: #0D2E8D;
		width: 80%;
		margin: 0px auto;
	}

	.lan {
		color: #0D2E8D;
	}

	.box-bottom {
		width: 100%;
		height: 30px;
		box-sizing: border-box;
		white-space: nowrap;
	}
</style>
