<template>
	<view class="container">
		<headersVue :titles="titles"><u-icon name="arrow-left" color="#fff" size="18"></u-icon></headersVue>
		<view class="content">
			<view class="top_">
				<view class="search_box">
						<u-search placeholder="请输入员工姓名进行搜索" @search="getindex" :showAction="false" searchIconColor="#427FFE" v-model="workName"></u-search>
				</view>

				<scroll-view scroll-x="true" class="tap_box">
					<view class="tap_list" :class="{ 'acColor': tapIndex == index}" v-for="(item,index) in  tabList"
						:key="index" @click="gettap(index,item.id)">
						<view class=""> {{item.name}}</view>
						<view class="gang" :class="{ 'actColor': tapIndex == index}"></view>

					</view>
				</scroll-view>
			</view>
      <view class="lsit_">
        <view class="list_box" v-for="(item, index) in goodsList" :key="index">
          <view class="checkbox_" @click="setIndex(item.id)">
            <u-icon name="checkmark" color="#2979ff" size="18" v-if="workids.includes(item.id)"></u-icon>
          </view>
          <view class="right_box" >
            <view class="d_s" @click="toInfo(item)">
              <view class="user_">
                <image :src="item.avatar" mode="" v-if="item.avatar"></image>
                <image src="/static/imgs/yh.png" v-else mode=""></image>
              </view>
              <view class="name_">{{ item.nickname || item.username }}</view>
              <view class="icon_"><u-text :lines="1" :text="item.roleNames" /></view>
            </view>
            <view class="d_b">
              <view class="">
                <text style="color: #8D90A6;">电话：</text>
                <text>{{ item.mobile || item.username }}</text>
              </view>
              <view class="tel_" @click="gettel(item)">
                <image src="/static/imgs/tel.png" mode=""></image>
              </view>
            </view>
          </view>
        </view>
      </view>
			<view style="width: 100%; height: 128rpx; "></view>
		</view>
		<view class="bottom_">
			<view class="bottom_left" @click="getdelete()">删除员工</view>
			<view class="bottom_right" @click="goAdd()" >添加员工</view>
		</view>
	</view>
</template>

<script>
	import headersVue from '../../components/header/headers.vue';
  import request from "@/utils/request";
  import config from "@/config";

	export default {
		data() {
			return {
				titles: "员工管理",
				keyword:'',
				List: [],
				listIndex:[],
				tapIndex:0,
				tapList: [],
				show: false,
				status: 'loading',
        msg: '3',
        goodsList: [],
        tabList: [],
        renList: [],
        baseUrl: "http://192.168.1.4:8080/lanan",
        partnerId: '',
        isListing: 1,
        goodsTitle: "",
        taplist: [{
          Text: '已发布',
          id: 1
        },
          {
            Text: '待上架',
            id: 0
          },
        ],
        pageNum: 1, //第几页
        pageSize: 10, //一页多少张
        totalPages: 0, //总数
        realName: "",
        phoneNum: "",
        workName: "",
        workids: [],
        postid: '',
        gwindex: 0,
        gwid: 0,
        roleId: undefined,
        addRoleId: undefined,
        education: null,
        educationText: null,
        idCard: null,
        joinDate: null,
        probationPeriod: null,
        socialSecurityBuyDate: null,
        educations: [],
        showEducation: false,
        showJoinedDate: false,
        showFormalDate: false,
        showSafeDate: false,
        files: [],
        showDriveType: false,
        driverLicenseType: [],
        driverLicenseTypeArr: [],
        driverLicenseTypeArrStr: null
			}
		},
		components:{
			headersVue
		},
    onLoad() {
      this.getDriveType()
      this.gettab()
    },
    onReachBottom() {
      if (this.pageNum >= this.totalPages) {
        uni.showToast({
          title: '没有下一页数据',
          icon: 'none'
        })

      } else {
        this.pageNum++
        this.gettab()
      }
    },
		methods:{
      gettap(index, id) {
        this.tapIndex = index
        this.roleId = id
        this.goodsList = []
        this.pageNum = 1
        this.getindex()


      },
			setIndex(num){
				 const index = this.workids.indexOf(num); // 查找是否包含此数字
				    if (index === -1) {
				     this.workids.push(num);          // 若不存在，
				    } else {
				       this.workids.splice(index, 1);   // 存在的话，则删除这个数
				    }
					console.log(this.workids);
			},

      gettel(num) {
        const value = num.mobile || num.username
        uni.makePhoneCall({
          phoneNumber: value //仅为示例
        });
      },
      toInfo(data){
        uni.navigateTo({
          url: '/pages/index/addStaff?id=' + data.id
        })
      },
      async getdelete() {
        if (this.workids == '') {
          uni.showToast({
            title: '请至少选择一名要删除的员工！',
            icon: 'none'
          })
          return
        } else {
          // this.workids = this.workids.join(",")
        }
        let res = await request({
          url: '/system/user/deleteUserByIds',
          method: 'delete',
          data: this.workids

        })
        if (res.code == 200) {
          uni.showToast({
            title: "操作成功",

          })
          this.pageNum = 1
          this.goodsList = []
          this.getindex()
        }
      },
      getDriveType() {
        return request({
          url: '/common/down/getDriverLicenseType',
          method: 'get'
        }).then(res => {
          //提取出数组中的id属性
          this.driverLicenseType = res.data
        })
      },
			goAdd(){
				uni.navigateTo({
					url:'/pages/index/addStaff'
				})
			},
			goManage(num){
				if(num == 1){
					uni.navigateTo({
						url:'/pages/index/staffManagement'
					})
				}

			},
      async gettab() {
        let res = await request({
          url: '/system/role/pageByQuery',
          method: 'get',
          params: {
            servicePackageId: 'jiance'
          }
        })
        this.tabList = [{
          name: '全部',
          id: undefined
        }]
        this.tabList.push(...res.data)
        this.roleId = this.tabList[0].id
        this.renList = res.data
        this.getindex()
      },
      async getindex() {
        if (this.workName != '') {
          this.pageNum = 1
          this.goodsList = []
        }

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

          url: '/system/role/selectListByRoleId',
          method: 'get',
          params: data
        })
        if (res.code == 200) {

          if (this.pageNum != 1) {
            this.goodsList = this.goodsList.concat(res.rows)
          } else {
            this.goodsList = res.rows
          }
          this.goodsList.forEach(item => {
            if (item.avatar && !item.avatar.includes(config.baseImageUrl)){
              item.avatar = config.baseImageUrl + (item.avatar[0] === '/' ? item.avatar : '/' + item.avatar)
            }
          })
          let total = res.total
          this.totalPages = Math.ceil(total / this.pageSize);
        }
        const newUsers = this.goodsList.filter(item => !item.roleName)
        if (newUsers && newUsers.length > 0) {
          const ids = newUsers.map(item => item.id)
          request({
            url: '/inspection/util/getRoleNameByIds?ids=' + ids,
            method: 'get'
          }).then(res => {
            this.goodsList.filter(item => !item.roleName).map(item => {
              this.$set(item, "roleName", res.data[item.id])
            })
          })
        }
      },
		}

		}
</script>

<style scoped lang="scss">
.icon_ {
  background: #eaf2fe;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 5rpx 10rpx;
  color: #427FFE;
  font-size: 14px;
  max-width: 200rpx; /* 限制最大宽度 */
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  flex-shrink: 0; /* 禁止挤压 */
}

.user_ {
  width: 90rpx; /* 固定宽度 */
  height: 90rpx; /* 固定高度 */
  border-radius: 4rpx;
  overflow: hidden;
  margin-right: 20rpx;
  flex-shrink: 0; /* 禁止挤压 */
}

.d_s {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
  width: 100%; /* 确保宽度占满父容器 */
}

.name_ {
  font-size: 32rpx;
  color: #101A3E;
  margin-right: 20rpx;
  flex-shrink: 0; /* 禁止挤压 */
}
	image{
		width: 100%;
		height: 100%;
	}
	.container{
		background: #F1F3F6;
		height: 100vh;
	}
	.content{
		width: 100%;
		box-sizing: border-box;

		padding-top: 170rpx;
	}
	.top_{
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx;
		background: #fff;
		padding-bottom: 0px;
	}
	.tap_box {
		width: 100%;
		white-space: nowrap;
		margin: 5px 0px;
		box-sizing: border-box;
		padding-bottom: 5px;

	}
	.tap_list {
		color: #333333;
		margin: 0px 10px;
		display: inline-block;
	}

	.acColor {
		font-weight: bold;
		color: #5384fd;
	}
	.right_box{
		width: 88%;
	}
	.gang {
		width: 20px;
		height: 4px;
		margin-top: 5px;
		// background-color: #5384fd;
		border-radius: 30px;
		margin: 5px auto;
	}

	.actColor {
		background-color: #5384fd;
	}
	.search_box{
		box-sizing: border-box;
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid #F5F5F5;
    margin-top: 30rpx;
	}
	.lsit_{
		background: #F1F3F6;
		box-sizing: border-box;
		padding: 30rpx;
	}
	.list_box{
		width: 100%;
		background: #fff;
		margin-bottom:30rpx ;
		box-sizing: border-box;
		padding: 20rpx;
		display: flex;
	}
	.checkbox_{
		width: 48rpx;
		height: 48rpx;
		border-radius: 8rpx;
		border: 2rpx solid #E0E0E0;
		margin-right: 15rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	//.d_s{
	//	display: flex;
	//	align-items: center;
	//	margin-bottom: 30rpx;
	//}
	.d_b{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	//.user_{
	//	width: 90rpx;
	//	height: 90rpx;
	//	border-radius: 4rpx;
	//	overflow: hidden;
	//	margin-right: 20rpx;
	//}
	//.icon_{
	//	background: #eaf2fe;
	//	border-radius: 8rpx;
	//	display: flex;
	//	align-items: center;
	//	justify-content: center;
	//	box-sizing: border-box;
	//	padding:5rpx 10rpx;
	//	color: #427FFE;
	//	font-size: 14px;
  //
  //
	//}
	.tel_{
		width: 36rpx;
		height: 36rpx;
	}
	//.name_{
	//	font-size: 32rpx;
	//	color: #101A3E;
	//	margin-right: 20rpx;
	//}
	.bottom_{
		width: 100%;
		height: 158rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -1rpx 24rpx 0rpx rgba(0,0,0,0.1);
		border-radius: 15px 15px 0px 0px;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.bottom_left{
		width: 301rpx;
		height: 78rpx;
		border: 2rpx solid #427FFE;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #427FFE;
		font-size: 28rpx;
		border-radius: 50px;
		margin: 30rpx;

	}
	.bottom_right{
		width: 301rpx;
		height: 78rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #fff;
		background: #427FFE;
		border: 2rpx solid #427FFE;
		border-radius: 50px;
		margin: 30rpx;
	}
.roleName{
  white-space: nowrap;      /* 不换行 */
  overflow: hidden;         /* 超出部分隐藏 */
  text-overflow: ellipsis;  /* 超出部分显示省略号 */
  width: 200rpx;            /* 根据需要设置宽度 */
}
</style>