<template>
    <view>
        <statusNav returnColor="#c2c2c2" navBarTitle="人员状态"></statusNav>
		<container-subgroup-two>
			<view slot="content" style="margin: -30rpx;">
				<view class="peopleManagement-input">
					<input type="text" class="int" @confirm="callEv()" v-model="keyword" placeholder="请输入关键字" placeholder-style="color:#999999;" />
					<image class="search" @tap="callEv()" src="../../static/iocn/ss.png" mode=""></image>
					<view class="xian"></view>
				</view>
				<view class="peopleManagement-content pad-x50">
					<view class="li" v-for="(item,index) in dataList" :key="index">
						<view class="head">
							<view class="name">
								<view class="" v-if="order_id" @click="listStateFun(item)">
									<!-- 选中 -->
									<view class="icon" v-if="!item.state"></view>
									<!-- 未选中 -->
									<image class="iconImg" v-else src="../../static/iocn/pxz.png" mode=""></image>
								</view>
								<view class="">
									{{item.name}}<text :class="item.isJob ? 'cor' : 'cor1'">({{item.isJob ? '正在作业' : '空闲中'}})</text>
								</view>
							</view>
							<view class="state">{{['未审核','已审核'][item.is_check]}}</view>
						</view>
						<view class="con">
							<image class="img" :src="item.avatar" mode="aspectFill"></image>
							<view class="text scal09">
								<view class="code">
									<view class="">编号: {{item.number}}</view>
									<view class="iconCon">
										<view v-for="(item1,index1) in 5" :key="index1">
											<image class="icon" v-if="index1 < item.rate" src="../../static/iocn/6.png" mode="aspectFill" ></image>
											<image class="icon" v-else src="../../static/iocn/7.png" mode="aspectFill" ></image>
										</view>
									</view>
								</view>
								<view class="p">
									<view class="one">待处理：{{item.num}}单 </view>
									<view class="">已处理：{{item.allnum}}单 </view>
								</view>
								<view class="address">当前定位：{{item.address}}</view>
							</view>
						</view>
						<view class="bottom">
						  <view class="bottom-content">
							  联系电话： <text class="cor3" v-if="item.phone">{{$toolAll.tools.hideMPhone(item.phone,'x')}}</text>
						  </view>  
						  <view class="bottom-content">
							  注册时间： <text class="cor3">{{item.time}}</text>
						  </view>
						</view>
					</view>
				</view>
				<pitera v-if="total == dataList.length && dataList.length" textStr="暂无更多人员列表"></pitera>
				<nothing-page v-if="!dataList.length" content="暂无人员状态数据"></nothing-page>
				<button class="submit-button" type="default" @click="sellEv" :style="{display: tianxuan ? 'flex' : 'none'}">派发工单</button>
			</view>
		</container-subgroup-two>
    </view>
</template>

<script>
    import statusNav from '../../components/status-nav.vue';
	import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
	import pitera from '@/components/nothing/pitera.vue';
    export default {
        components: {
            statusNav,
			containerSubgroupTwo,
			pitera
        },
        data() {
            return {
                dataList: [
					// {id:'1',name: "陈志远",state: false,isJob: false,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',number:'YG20211207-001',rate:5,num:2,allnum:2000,address:'湖南省株洲市xxxxxxxx小区1栋202室',phone:'173xxxx1088',time:'2018-12-12'},
					// {id:'1',name: "陈志远",state: false,isJob: false,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',number:'YG20211207-001',rate:3,num:2,allnum:2000,address:'湖南省株洲市xxxxxxxx小区1栋202室',phone:'173xxxx1088',time:'2018-12-12'},
					// {id:'1',name: "陈志远",state: false,isJob: false,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',number:'YG20211207-001',rate:2,num:2,allnum:2000,address:'湖南省株洲市xxxxxxxx小区1栋202室',phone:'173xxxx1088',time:'2018-12-12'},
                ],
				keyword:'',//关键字
				page:1,
				list_rows:20,
				total:0,
				tianxuan:'',
				order_id:'',//工单id
            }
        },
		onReachBottom() {
			if(this.total!=this.dataList.length) {
				this.page++;
				this.checkList();
			}
		},
		onLoad(op) {
			if(op.orderId){
				this.order_id = op.orderId;
			}
			this.checkList();
		},
        methods: {
			// 查询人员状态列表
			checkList() {
				let params = {
					list_rows:this.list_rows,
					page:this.page,
					keyword:this.keyword
				}
				this.$requst.get('/universal/api.order/user_location',params).then(res=>{
					console.log(res,'人员状态')
					if(res.code) {
						this.total = res.data.total;
						if(this.page==1) this.dataList = [];
						if(res.data.data.length) {
							res.data.data.forEach(item=>{
								let obj = {
									id:item.uid,
									name: item.name,
									imgsrc:item.avatar,
									number:item.user_number,
									rate:item.starlevel,
									num:item.pending_order,
									allnum:item.processed_order,
									address:item.address,
									phone:item.phone,
									time:item.register_time,
									state: false,
									isJob: item.is_working==1 ? true : false,
									is_check:item.is_check
								}
								this.dataList.push(obj);
							})
						}
					}
				})
			},
			// 派发工单事件
			sellEv(){
				this.$requst.post('/universal/api.order/dispatch',{order_id:this.order_id,uid:this.tianxuan}).then(res=>{
					if(res.code){
						this.$toolAll.tools.showToast('派单成功');
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},1000)
					}
				})
			},
			// 调用查询事件
			callEv() {
				this.page = 1;
				this.checkList();
			},
			
			listStateFun(item){
				this.dataList.forEach(item1=>{item1.state = false})
				item.state = !item.state;
				item.state ? this.tianxuan = item.id : '';
			}
        }
    }
</script>

<style>
   .submit-button {
		position: fixed;
		display: none;
		bottom: 30rpx;
		left: 50%;
		transform: translateX(-50%);
        width: 686rpx;
        border-radius: 50rpx;
        height: 90rpx;
        background-color: #02A2ea;
        line-height: 90rpx;
        color: #FFFFFF;
        margin-top: 60rpx;
        text-align: center;
        font-size: 30rpx;
    }
    .peopleManagement-input {
        width: 100%;
        position: relative;
        padding: 40rpx 16rpx;
        box-sizing: border-box;
        background-color: #FFFFFF
    }

    .peopleManagement-input .int {
        width: 100%;
        background-color: #F7F7F7;
        padding: 0 25rpx;
        height: 67rpx;
        box-sizing: border-box;
        border-radius: 36rpx;
		font-size: 24rpx;
    }
	.peopleManagement-input  .xian {
		width: 3rpx;
		height: 35rpx;
		position: absolute;
        background-color: #EAEAEA;
		right: 100rpx;
		top: 50%;
		margin-top: -14rpx;
	}
    .peopleManagement-input .search {
        width: 28rpx;
        height: 28rpx;
        position: absolute;
        right: 43rpx;
        top: 50%;
        margin-top: -14rpx;
		z-index: 9;
    }
    .peopleManagement-content .li {
        background-color: #FFFFFF;
        padding-right: 30rpx;
        margin-top: 18rpx;
    }

    .peopleManagement-content .li .head {
        display: flex;
        padding: 22rpx 0rpx;
        padding-left: 40rpx;
        border-bottom: 2rpx solid #eaeaea;
        justify-content: space-between;
        padding-right: 30rpx;
    }

    .peopleManagement-content .li .head .name {
        display: flex;
        align-items: center;
        color: #333333;
        font-size: 27rpx;
        font-weight: bold;

    }

    .peopleManagement-content .li .head .name .icon {
        width: 38rpx;
        height: 38rpx;
        margin-right: 12rpx;
        border: solid #969696 2rpx;
        box-sizing: border-box;
        border-radius: 50%;
    }
 .peopleManagement-content .li .head .name .iconImg{
     width: 38rpx;
     height: 38rpx;
     margin-right: 12rpx;
     box-sizing: border-box;
     border-radius: 50%;
 }
    .cor {
        color: #1c9bdb;
    }

    .cor1 {
        color: #ff424d;
    }

    .peopleManagement-content .li .head .state {
        color: #1c9bdb;
        font-size: 27rpx;
    }

    .peopleManagement-content .li .con {
        padding: 20rpx 0rpx;
        padding-left: 52rpx;
          border-bottom: 2rpx solid #eaeaea;
        display: flex;

    }

    .peopleManagement-content .li .con .img {
        width: 140rpx;
        height: 130rpx;
        margin-right: 10rpx;
    }

    .peopleManagement-content .li .con .text {
        flex: 1;
        margin-left: -14rpx;
    }

    .peopleManagement-content .li .con .text .iconCon {
        font-size: 0rpx;
        display: flex;
    }

    .peopleManagement-content .li .con .text .icon {
        width: 28rpx;
        height: 26rpx;
		margin-left: 10rpx;
    }

    .peopleManagement-content .li .con .text .code {
        font-size: 24rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #333333;
    }
     .peopleManagement-content .li .con .text .p{
         color: #7a7979;
         display: flex;
         font-size: 24rpx;
         
         padding: 15rpx 0rpx;
     }
           
       .peopleManagement-content .li .con .text .p .one{
           margin-right: 40rpx;
       }
      .peopleManagement-content .li .con .text .address{
                color: #7a7979;
                     font-size: 24rpx;
      }
        .peopleManagement-content .li  .bottom{
            display: flex;
            padding: 10rpx 0rpx;
            padding-left: 40rpx;
            color: #333333;
            font-size: 24rpx;
            display: flex;
            padding-right: 22rpx;
            justify-content: space-between;
        }
        .peopleManagement-content .li  .bottom .cor3{
                 color: #666666;
        }
        .peopleManagement-content .li  .bottom .bottom-content{
            height: 60rpx;
            line-height: 60rpx;
        }
       .peopleManagement-content .li  .bottom .bottom-content:last-child{
                 text-align: right;
                      width: 48%;
       }
       .peopleManagement-content .li  .bottom .bottom-content:first-child{
                border-right: 2rpx dashed #eaeaea;
                width: 52%;
       }
</style>
