<template>

  <!-- pages/index/index.wxml -->
  <view :style="{height: 'calc( ' + getHeight() + 'px - 30rpx)' }" class="container-details" >

    <view class="search-container">
      <view class="search">
        <!--            <uni-icons class="icon" type="search" size="30" @click="search"></uni-icons>-->

        <img class="icon" src="http://8.155.21.176:9000/yonggong/images/sign/fdj.png"/>

        <input class="search-input" id="search-input"  v-model="searchVal"  type="text" placeholder="请输入姓名或手机号查询" maxlength="30"  @confirm="search"/>


      </view>
    </view>
    <view class="list-container">
      <view class="list">
        <view v-for="(item, index) in showSign"  :key="index" class="item" :class="'item-check' + item.status" @click="select(item)">
          <view class="headImg">
            {{item.employeeName}}
          </view>
          <view class="phone">
            {{item.phone}}
          </view>
        </view>
      </view>


    </view>

    <view class="fd-bottom">
      <view class="all-select" @click="addEmployeeAndBaoming">添加员工并报名</view>
      <view class="all-pay" @click="baoming">报名</view>
    </view>

  </view>


</template>

<script>
import { searchUser } from "@/api/system/user";
import { baomingBatch,getTask } from "@/api/task";
export default {
  data() {
    return {
      queryParams: {
        id: null,
      },
      task: {},
      title: "任务名称",
      signInfo: {},
      searchVal: "",
      showSign: [],
      selectItems: {},//key为uid value = user对象
    };
  },

  onLoad: function(options) {
    this.queryParams.id = options.id;
    this.search();
  },
  onUnload: function() {
    // console.log('关闭页面');
    var pages = getCurrentPages();
    // console.log(pages.length);
    var Page = pages[pages.length-1];//当前页
    // console.log(pages[pages.length-1].route);//输出当前路由
    var prevPage = pages[pages.length-2];
    // console.log(pages[pages.length-2].route);//输出上一个页面的路由
    if(pages[pages.length-2].route == 'pages/index'){  //确定要返回到相应页面，在触发
      prevPage.$vm.reload()
    }
  },
  methods:{
    select(item) {
      if (item.status == 2){
        item.status = 1;
        this.selectItems[item["employeeId"]] = item;
      }else if (item.status == 1){
        item.status = 2;
        delete this.selectItems[item["employeeId"]];
      }
    },
    search(){
      var that = this;
      searchUser(this.searchVal, this.queryParams.id).then(response => {
        that.showSign =  Object.values(that.selectItems);
        that.showSign =  that.showSign.reverse();
        for (let i = 0; i <  response.rows.length; i++) {
          if(that.selectItems[response.rows[i].employeeId] == null){
            that.showSign.push(response.rows[i]);
          }
        }
      });
    },
    baoming(){
      baomingBatch({"list": Object.values(this.selectItems), "taskId": this.queryParams.id}).then(response => {
        // console.log("123" + response)
        this.$modal.msgSuccess("报名成功");
        this.selectItems = {};
        this.search();
        // uni.navigateTo({
        //   url: "index"
        // })

        // this.$tab.reLaunch('/pages/index')
      })
    },
    addEmployeeAndBaoming(){
      uni.navigateTo({
        url: "addEmployeeAndBaoming?id="+this.queryParams.id
      })
    },
    getHeight(){
      // const { windowHeight } = uni.getSystemInfoSync(); // 获取页面高度
      return uni.getSystemInfoSync().windowHeight; // 获取页面高度
    }


  }
}
</script>

<style lang='scss' scoped>
page{
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
html, body {
  background-color: #ffffff;
  //height: 100%;
  height: calc(100% - 1rpx);
}
.container-details{
  height: calc(100% - 1rpx);
}

.search-container{
  margin-top: 10rpx;
  margin-bo: 10rpx;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .search{
    width: 100%;
    height: 80rpx;
    border-radius: 450px;
    border: 1px solid #6c6c6c;
    display: flex;
    align-items: center;
    /*justify-content: center;*/
    .icon{
      margin-left: 20rpx;
      width: 50rpx;
      height: 50rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .search-input{
      width: 82%;
      margin-left: 16rpx;
    }

  }
}
.list-container{
  height: calc(100% - 270rpx);
  overflow-y: auto;
  margin-top: 30rpx;
  .list{
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 创建3个等宽的列 */
    list-style-type: none;
    /*padding: 0rpx 10rpx 10rpx 10rpx;*/

    place-items: center;



    .item-check1{
      background-size: 100% 100%;
      background-image: url("http://8.155.21.176:9000/yonggong/m-images/sign/sign.png");
      .phone{
        color: #5e5e5e;
      }
    }
    .item-check0{
      background-size: 100% 100%;
      //background-image: url("http://8.155.21.176:9000/yonggong/m-images/sign/noSign1.png");
      background-image: url("http://8.155.21.176:9000/yonggong/m-images/sign/sign.png");
      color: #d6d6d6;
      .phone{
        color: #d6d6d6;
      }
    }
    .item-check2{
      background-size: 100% 100%;
      background-image: url("http://8.155.21.176:9000/yonggong/m-images/sign/noneSign.png");
      .phone{
        color: #5e5e5e;
      }
    }
    .item{
      position: relative;
      width: 160rpx;
      height: 160rpx;
      margin: 0rpx 0 13rpx 0 ;
      display: grid;
      place-items: center;
      padding: 25rpx 10rpx 25rpx 10rpx;
      border-radius: 10rpx;

      .status{
        position: absolute;
        top: 0rpx;
        right: 0rpx;
      }
      .headImg{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100rpx;
        height: 50rpx;
        font-weight: 650;
        font-size: 28rpx;
      }
      .phone{
        font-size: 20rpx;
      }
      .remark{
        color: #adadad;
        background-color: #e3e3e3;
        width: 90%;
        display: grid;
        text-align: center;
        place-items: center;
        font-size: 20rpx;
        height: 30rpx;
        white-space: nowrap; /* 防止文本换行 */
        overflow: hidden; /* 隐藏超出div的内容 */
        text-overflow: ellipsis; /* 显示省略号来代表被截断的内容 */
      }
    }
  }
}

.fd-bottom{
  background-color: #ffffff;
  width: 100%;
  height: 180rpx;
  position: absolute;
  /*bottom: env(safe-area-inset-bottom);*/
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-items: center;
  padding: 0rpx 50rpx 0rpx 50rpx;
  .all-select{
    width: 50%;
    color: #107ff6;
    font-weight: 650;
    font-size: 30rpx;
    margin-left: 8rpx;
    border-radius: 10rpx;
    width: 300rpx;
    height: 90rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1rpx solid #107ff6;
  }
  .all-pay{
    width: 50%;
    background-color: #107ff6;
    color: #ffffff;
    font-weight: 650;
    font-size: 30rpx;
    margin-left: 8rpx;
    border-radius: 10rpx;
    width: 300rpx;
    height: 90rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto; /* 推动元素到右边 */
  }


}





</style>
