<template>
    <div>
      <!-- 搜索 -->
      <van-sticky offset-top="0">
      <div class="content-wrap">
        <div class="search-wrap">
          <van-search v-model="searchVal" placeholder="搜索" @input="onInput"/>
        </div>
      </div>
      </van-sticky>
      <div style="margin-bottom: 1.4rem;">
        <van-radio-group v-model="radio">
            <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="getInsideUser()"
                >
                <van-radio  style="margin: 0px 10px;" v-for="item in projectList" :name="item.id" :key="item.id" @click="selData(item)">
                    <van-cell :title="item.name" />
                </van-radio> 
            </van-list>
        </van-radio-group>

      </div>
      <!-- 底部信息 -->
      <footer class="footer">
        <van-cell-group>
          <div class="operate">
            <van-button
              size="small"
              ttype="info"
              plain
              native-type="button"
              style="border-radius: 5px; background-color: #f0f1f5;"
              @click.native="cancel"
            >取消
            </van-button
            >
            <van-button
              size="small"
              type="info"
              native-type="button"
              style="margin:0 10px 0 20px;border-radius: 5px;"
              @click.native="save"
            >保存
            </van-button
            >
          </div>
        </van-cell-group>
      </footer>
    </div>
  </template>
  
  <script>
  // import LHeader from "@/components/header.vue";
  import {getFun, postFun} from '@/service/table';
  import {getUserInfo} from "@/utils/userInfo";
  import {debounce} from "@/utils/common.js";
  
  export default {
    name: "select-people",
    components: {
      // LHeader
    },
    mounted() {
      this.getInsideUser()
    },
    data() {
      return {
        text: "选择人员",
        personName: "",
        searchVal: "",
        radio: "",
        pageSize: 20,
        pageNum: 1,
        loading: false,
        finished: false,
        projectList:[],
        itemSel:{

        }
      };
    },
    methods: {
      // 查询内部人员
      getInsideUser() {
        var obj={
            name:this.searchVal,
            pageSize:this.pageSize,
            pageNum:this.pageNum,
        }
        getFun("risk/plan/project/list", obj)
          .then(res => {
                this.projectList.push(...res.rows)
                this.loading = false;
            if (this.projectList.length >= res.total) {
                this.finished = true;
            }
            if(!(this.pageNum*this.pageSize-this.total>=0)){
                this.pageNum++;
            }
          })
      },
      // 待搜索框内容发生变化
      onInput: debounce(function () {
        this.projectList=[]
        this.pageNum=1
        this.finished = false
        this.loading = true
        this.getInsideUser();
      }, 800),

      selData(e){
        this.itemSel=e
      },
      save() {
        this.$emit('onSave', this.itemSel)
         this.destoryList();
      },
      cancel() {
        this.destoryList();
        this.$emit('onClose')
      },
      destoryList(){
        this.searchVal = '';
        this.onInput()
      }
    }
  };
  </script>
  <style lang="less" scoped>
  /* @import url(); 引入css类 */
  // 搜索
  .content-wrap {
    padding: 10px;
    background-color: #f0f1f5;
  }
  
  .search-wrap {
    margin: 0.26667rem;
  
    .van-search {
      border-radius: 5px;
      padding: 5px 12px;
    }
  
    .van-search__content {
      background-color: #ffffff;
    }
  }
  
  .upStep {
    .van-cell-group {
      display: flex;
      height: 1.2rem;
      align-items: center;
  
      .upStep-btn {
        width: 25%;
        text-align: center;
        display: flex;
  
        span {
          width: 1.866667rem;
          background-color: #1989fa;
          text-align: center;
          display: inline-block;
          color: white;
          height: 0.8rem;
          line-height: 0.8rem;
          font-size: 0.346667rem;
          border-radius: 0.08rem;
        }
      }
  
      .upStep-content {
        width: 75%;
        height: 0.8rem;
        line-height: 0.8rem;
        padding-left: 0.42667rem;
        box-sizing: border-box;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  
  .dept-list-wrap {
    margin-top: 0.266667rem;
  }
  
  .people-wrap {
    margin-top: 0.266667rem;
  
    /deep/ .van-radio__label {
      display: flex;
      align-items: center;
    }
  }
  
  .footer {
    width: 100%;
    height: 1.4rem;
    z-index: 9;
    position: fixed;
    bottom: 0px;
    box-shadow: 0px 8px 15px #000;
  
    .van-cell-group {
      height: 100%;
  
      .selected {
        height: 1.066667rem;
        display: flex;
        align-items: center;
        padding-left: 10px;
        border-bottom: 1px solid #cacbcb;
  
        .selected-title {
          color: #4187f7;
        }
  
        .selected-content {
          width: 80%;
          padding-left: 10px;
          box-sizing: border-box;
        }
      }
  
      .operate {
        height: 1.333333rem;
        display: flex;
        justify-content: flex-end;
        align-items: center;
  
        .van-button {
          width: 1.6rem;
        }
      }
    }
  }
  </style>
  