<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-checkbox-group v-model="checkbox">
        <!-- <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="getInsideUser()"
                > -->
        <van-checkbox
          style="margin: 0px 10px;"
          v-for="(item, index) in listDataCopy"
          :name="item.dictLabel"
          :key="index"
          @click="selData(item)"
        >
          <van-cell :title="item.dictValue" />
        </van-checkbox>
        <!-- </van-list> -->
      </van-checkbox-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 { debounce } from "@/utils/common.js";

export default {
  props: {
    listdata: {
      type: Array,
      default: () => []
    }
  },
  components: {
    // LHeader
  },
  created() {
    this.listDataCopy = this.listdata;
  },

  data() {
    return {
      text: "选择人员",
      personName: "",
      searchVal: "",
      checkbox: [],
      pageSize: 20,
      pageNum: 1,
      loading: false,
      finished: false,
      projectList: [],
      listDataCopy: [],
      itemSel: {}
    };
  },
  methods: {
    // 待搜索框内容发生变化
    onInput: debounce(function() {
      this.projectList = [];
      this.pageNum = 1;
      this.finished = false;
      this.loading = true;
      // this.getInsideUser();
      this.listDataCopy = this.listdata.filter(item => {
        return item.dictLabel.indexOf(this.searchVal) > -1;
      });
    }, 800),

    selData(e) {
      this.itemSel = e;
    },
    save() {
      this.$emit("saveSlect", this.checkbox);
      this.checkbox = [];
    },
    cancel() {
      this.$emit("closeSlect");
    }
  }
};
</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>
