<template>
  
  <!-- pages/index/index.wxml -->
<view class="container-details">

     <view class="head">
         <view class="bm-num">
             <view class="num">
                 {{task.baomingNum}}
             </view>
             <view class="num-label">
                 报名人数
             </view>
         </view>

         <view class="right">
             <view class="sign-num">
                 <view class="num">
                     {{task.signNum}}
                 </view>
                 <view class="num-label">
                     已到人数
                 </view>
             </view>
             <view class="no-num">
                 <view class="num">
                     {{task.noSignNum}}
                 </view>
                 <view class="num-label">
                     未到人数
                 </view>
             </view>
         </view>

     </view>
    <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">
        <view v-for="(item, index) in showSign"  :key="index" class="item" :class="'item-check' + item.status" @click="setInfo(item)">

<!--            <view class="status">-->
<!--                <uni-icons v-if="item.status == 1" class="icon" color="#11dc03" type="checkbox-filled" size="20" @click="search"></uni-icons>-->
<!--                <uni-icons v-if="item.status == 0" class="icon" color="red" type="clear" size="20" @click="search"></uni-icons>-->
<!--            </view>-->
            <view class="headImg">
                {{item.employeeName}}
            </view>
            <view class="phone">
                {{item.phone}}
            </view>
            <view class="remark">
                {{item.remark == null ? "备注说明文案" : item.remark}}
            </view>
        </view>

    </view>

     <view>
         <!-- 普通弹窗 -->
         <uni-popup ref="popup"  background-color="#fff">
             <view class="popup-content dialog" :class="{'popup-height': type === 'left' || type === 'right' }">
                 <view class="delItem" @click="delItem(signInfo)">移除</view>
                 <view class="name">
                     {{signInfo.employeeName}}
                 </view>
                 <view class="phone">
                     {{signInfo.phone}}
                 </view>
                 <view class="remark">
                 <textarea placeholder="请输入备注说明"  v-model="signInfo.remark" >

                 </textarea>
                 </view>
                 <view class="bottom">
                     <view class="yidao" @click="sign(1)">
<!--                         已到-->
                     </view>
                     <view class="weidao" @click="sign(0)">
                         <!--                         未到-->
                     </view>
                 </view>
             </view>
         </uni-popup>
     </view>
 </view>

  
</template>

<script>
	import { getTaskDetails, setSign, cancelBaoming } from "@/api/task";
	// import { getCodeImg } from '@/api/login'
  export default {
	  data() {
      return {
        queryParams: {
          id: null,
        },
        task: {},
        title: "任务名称",
        signInfo: {},
        searchVal: "",
        showSign: [],
      };
	  },
    onLoad: function(options) {
        this.queryParams.id = options.id;
        this.getInfo();
    },
    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:{
         getInfo() {
           var that = this;
           getTaskDetails(this.queryParams).then(response => {
               that.task = response.data;
               that.showSign = that.task.listSign;
               let title = "【"+ that.task.taskName +"】人员详情";
               uni.setNavigationBarTitle({
                   title: title
               });
           });
         },
         setInfo(item){
             this.$refs.popup.open('center')
             this.signInfo = item;
         },
         sign(status){
             let oldStatus = this.signInfo.status;
             let change = this.signInfo.status != status;
             this.signInfo.status = status;
             setSign(this.signInfo);
             if (change){
                 if (status == 1){
                     this.task.signNum ++;
                 }else{
                     this.task.noSignNum ++;
                 }
                 if (oldStatus == 0){
                     this.task.noSignNum --;
                 }else if (oldStatus == 1){
                     this.task.signNum --;
                 }

             }
             this.$refs.popup.close()
         },
         search(){
             this.showSign = [];
             for (let i = 0; i < this.task.listSign.length; i++) {
                 if (this.task.listSign[i].employeeName.indexOf(this.searchVal) > -1){
                     this.showSign.push(this.task.listSign[i]);
                 }
             }
         },
         delItem(item){
           var that = this;
           cancelBaoming({"id": item.id}).then(response => {
             this.$refs.popup.close()
             that.showSign = that.showSign.filter(i => i.id !== item.id);
             if (item.status == 1){
               this.task.signNum --;
             }else if (item.status == 0){
               this.task.noSignNum --;
             }
             this.task.baomingNum --;
             this.$modal.msgSuccess(item.employeeName + "已移除");
           });
         },

	 }
  }
</script>

<style lang='scss'>
    html, body {
        background-color: #ffffff;
        height: 100%;
    }
    .container-details{
        /*background-color: #e3e3e3;*/

        background-image:url('http://8.155.21.176:9000/yonggong/images/bg.png');
        /*background-image: url('http://8.155.21.176:9000/yonggong/m-images/sign/bg.png');*/

        /*height: 1100rpx;*/
        min-height: 100%;
        background-size: 100% 100%;
        /*background-size: 100%;*/
        background-repeat: no-repeat;
        background-position: center;
        z-index: 1000;
        padding: 30rpx 30rpx 0 30rpx;
    }
    .head{
        height: 300rpx;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .bm-num{
            background-image: url('http://8.155.21.176:9000/yonggong/m-images/sign/bmNum.png');
            background-size: 100% 100%;
            /*width: 40%;*/
            height: 300rpx;
            width: 300rpx;
            padding: 40rpx 0 0 40rpx;

            .num{
                width: 100%;
                color: #ffffff;
                font-weight: 650;
                font-size: 60rpx;
            }
            .num-label{
                color: #ffffff;
                margin-top: 10rpx;
                width: 100%;

            }
        }

        .right{
            /*width: 60%;*/
            margin-left:auto ;
            .sign-num{
                width: 370rpx;
                height: 145rpx;
                background-image: url('http://8.155.21.176:9000/yonggong/m-images/sign/ydrs.png');
                background-size: 100% 100%;
                padding: 12rpx 0 0 12rpx;
                .num{
                    width: 100%;
                    color: #ffffff;
                    font-weight: 650;
                    font-size: 40rpx;
                }
                .num-label{
                    color: #ffffff;
                    width: 100%;
                }
            }
            .no-num{
                margin-top: 2rpx;
                width: 370rpx;
                height: 145rpx;
                background-image: url('http://8.155.21.176:9000/yonggong/m-images/sign/wdrs.png');
                background-size: 100% 100%;
                padding: 12rpx 0 0 12rpx;
                .num{
                    width: 100%;
                    color: #ffffff;
                    font-weight: 650;
                    font-size: 40rpx;
                }
                .num-label{
                    color: #ffffff;
                    width: 100%;
                }
            }


        }

    }
    .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{
        display: grid;
        grid-template-columns: repeat(4, 1fr); /* 创建3个等宽的列 */
        list-style-type: none;
        /*padding: 0rpx 10rpx 10rpx 10rpx;*/
        margin-top: 30rpx;
        place-items: center;
        .item-check1{
            background-size: 100% 100%;
            background-image: url("http://8.155.21.176:9000/yonggong/m-images/sign/sign.png");
        }
        .item-check0{
            background-size: 100% 100%;
            background-image: url("http://8.155.21.176:9000/yonggong/m-images/sign/noSign1.png");
        }
        .item-check-1{
            background-size: 100% 100%;
            background-image: url("http://8.155.21.176:9000/yonggong/m-images/sign/noneSign.png");
        }
        .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{
                color: #5e5e5e;
                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; /* 显示省略号来代表被截断的内容 */
            }
        }
    }


    .uni-popup__wrapper{
        background-color: #ffffff;
        border-radius: 20rpx;
        width: 90%;
        padding: 20rpx;
    }

    .dialog{
        width: 100%;
        height: 100%;
        display: grid;
        place-items: center;
        .delItem{
            position: absolute;
            right: 50rpx;
            top: 50rpx;
            color: #e8001a;
            font-size: 30rpx;
        }
        .name{
            width: 100%;
            text-align: center;
            font-weight: 350;
            font-size: 58rpx;
        }
        .phone{
            width: 100%;
            text-align: center;
            font-size: 28rpx;
            color: #3e3e3e;
        }
        .remark{
            margin-top: 10rpx;
            width: 92%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #ececec;
            padding: 20rpx;
            textarea{
                width: 100%;
                height: 200rpx;
            }
        }
        .bottom{
            width: 100%;
            height: 150rpx;
            display: flex;
            align-items: center;
            .weidao{
                display: flex;
                align-items: center;
                justify-content: center;
                height: 90rpx;
                width: 50%;
                text-align: center;
                margin: 0 50rpx 0 50rpx ;
                background-image: url("http://8.155.21.176:9000/yonggong/m-images/sign/noSignBtn.png");
                background-size: 100% 100%;
            }
            .yidao{
                display: flex;
                align-items: center;
                justify-content: center;
                height: 90rpx;
                width: 50%;
                margin: 0 50rpx 0 50rpx ;
                background-image: url("http://8.155.21.176:9000/yonggong/m-images/sign/signBtn.png");
                background-size: 100% 100%;

            }
        }

    }



</style>
