<template>
  <WlPopUp v-model="popupVisible" position="bottom" :style="{ height: '80%' }" round>
    <div class="staff-select">
      <WlHeader :title="title" />
      <div class="staff-select-search">
        <WlSearch @onChange="onSearchChange" :placeholder="placeholder" />
      </div>
      <div class="staff-select-content">
        <WlLoadMore v-model="isLoading" :finished="isFinished" @load="getData">
          <div
            class="staff-select-content-item"
            v-for="item in staff_list"
            :key="item.id"
            @click="onChoose(item)"
          >
            <WlUser :data="item.user_info" />
            <p class="icon-wrap">
              <i class="iconfont icon-mobile-ui-weixuanzhong" v-show="!item.is_checked"></i>
              <i
                class="iconfont icon-mobile-ui-xuanzhong icon-checked"
                v-show="item.is_checked"
              ></i>
            </p>
          </div>
        </WlLoadMore>
      </div>
      <div class="staff-select-footer">
        <WlButton text="确认选择" @onClick="onSure" />
      </div>
    </div>
  </WlPopUp>
</template>

<script>
/*
 * @Author: Liao.xiuli
 * @Date: 2021-09-18 11:18:59
 * @Last Modified by: Liao.xiuli
 * @Last Modified time: 2022-04-10 20:36:00
 */
import Api from "@packages/api";
import WlUser from "@packages/components/Common/WlUser";
import WlPopUp from "@packages/components/Common/WlPopUp";
import WlHeader from "@packages/components/Common/WlHeader";
import WlButton from "@packages/components/Common/WlButton";
import WlSearch from "@packages/components/Common/WlSearch";
import WlLoadMore from "@packages/components/Common/WlLoadMore";
export default {
  name: "WlStaffSelect",
  components: { WlUser, WlPopUp, WlHeader, WlButton, WlSearch, WlLoadMore },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    //是否多选
    multiple: {
      type: Boolean,
      default: false,
    },
    placeholder: {
      type: String,
      default: "搜索",
    },
    title: {
      type: String,
      default: "标题",
    },
  },
  data() {
    return {
      popupVisible: true,
      keyword: "",
      staff_list: [],
      limit: 15,
      page_count: 1,
      isLoading: false,
      isFinished: false,
    };
  },
  methods: {
    onSearchChange(val) {
      this.keyword = val;
      this.staff_list = [];
      this.page_count = 1;
      this.isLoading = false;
      this.isFinished = false;
      this.getData();
    },
    getData() {
      Api.getStaffList({
        page: { page_count: this.page_count, limit: this.limit, keyword: this.keyword },
      }).then((res) => {
        let result = res.data.data_list.map((item) => {
          const { head_img_url, nick_name, id } = item;
          return {
            id,
            is_checked: false,
            user_info: {
              head_img_url,
              nick_name,
            },
          };
        });
        this.staff_list = [...this.staff_list, ...result];
        this.page_count++;
        this.isLoading = false;
        if (result.length < this.limit) this.isFinished = true;
      });
    },
    onChoose(item) {
      //单选
      if (!this.multiple) {
        this.staff_list = this.staff_list.map((res) => {
          return {
            ...res,
            is_checked: res.id === item.id,
          };
        });
        //多选
      } else {
        item.is_checked = !item.is_checked;
      }
    },
    onSure() {
      const list = this.staff_list.filter((res) => res.is_checked === true);
      this.$emit("onConfirm", list);
    },
  },
  watch: {
    value: {
      handler(val) {
        this.popupVisible = val;
        if (val) this.getData();
      },
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.staff-select {
  height: 100%;
  @extend %flex-direction-column;
  &-search {
    padding: 0 j(12) j(10) j(12);
  }
  &-content {
    flex: 1;
    @extend %overflow-auto;
    &-item {
      height: j(40);
      cursor: pointer;
      padding: 0 j(12);
      @include halfBorder("bottom", #ebedf0);
      @extend %flex-between;
      .icon-wrap {
        color: #c8c9cc;
        > .iconfont {
          font-size: j(18);
          &.icon-checked {
            color: $theme-blue-color;
          }
        }
      }
    }
  }
  &-footer {
    padding: j(10) j(12);
  }
}
</style>
