<!-- 获取企业成员 -->
<template>
  <div class="meta-card-wrap">
    <Search
      v-model="searchForm.keywords"
      placeholder="请输入代理人"
      @search="onSearch"
      @update:model-value="onSearch"
    />
    <div class="list_box">
      <div class="list_data" v-for="(list, index) in mumberlist" :key="index">
        <div class="list_header">{{ list.title }}</div>
        <div
          class="list_content clearfix"
          v-for="(item, nameIndex) in list.data"
          :key="nameIndex"
        >
          <div class="username fl">{{ item.username }}</div>
          <div class="employeno fr">{{ item.employeno }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { checkCh } from "@/common/utils/phoneticize";
import { getEnterpriseMember } from "@/service/requestApi";
import { Search } from "vant";
export default {
  name: "MetaMember",
  props: {
    optid: {
      type: String,
      default: "",
    },
  },
  components: {
    Search,
  },
  // watch: {
  //   optid() {
  //      this.searchForm.useridList = "";
  //      this.searchForm.useridList.push(this.optid);
  //      this.getMembers();
  //   }
  // },
  data() {
    return {
      searchForm: {
        username: "",
        keywords: "",
        joinstatus: ["0"],
        adminuserids: [],
        useridList: [],
      },
      mumberlist: [],
      indexData: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z",
        "#",
      ],
      searchValue: "",
    };
  },
  methods: {
    //获取企业成员
    getMembers() {
      getEnterpriseMember({
        page: 1,
        limit: 0,
        params: encodeURI(JSON.stringify(this.searchForm)),
      }).then((res) => {
        if (res.err == "0") {
          this.mumberlist = [];
          let mumberdata = res.data;
          let namesArr = [];
          if (mumberdata.length > 0) {
            mumberdata.forEach((item) => {
              let data = {
                title: "",
              };
              if (item.username) {
                data = item;
                data.title = checkCh(item.username).toUpperCase().charAt(0);
                namesArr.push(data);
              }
            });
            this.mumberlist.push(...this.regroupData(namesArr));
          }
        }
      });
    },
    // 搜索企业成员
    onSearch(item) {
      this.searchForm.keywords = item;
      this.getMembers();
    },
    regroupData(arr) {
      //  将不是字母的姓名排在末尾
      let newArr = [];
      let self = this;
      arr.forEach((item) => {
        if (self.indexData.indexOf(item.title) < 0) {
          item.title = "#";
          newArr.push(item);
        }
      });
      for (let index = 0; index < newArr.length; index++) {
        let item = newArr[index];
        for (let j = 0; j < arr.length; j++) {
          let element = arr[j];
          if (item.id === element.id) {
            arr.splice(j, 1);
            break;
          }
        }
      }
      arr.sort((a, b) => {
        return (
          this.indexData.indexOf(a.title) - this.indexData.indexOf(b.title)
        );
      });
      arr.push(...newArr);
      let obj1 = {};
      arr.forEach((item) => {
        if (!obj1[item.title]) {
          obj1[item.title] = [];
        }
        let data1 = {
          str: "",
        };
        let str = item.name;
        data1 = item;
        data1.str = str;
        obj1[item.title].push(data1);
      });
      let fruitArr = [];
      for (let i in obj1) {
        let data2 = {
          title: "",
          data: [],
        };
        data2.title = i;
        data2.data = [];
        data2.data.push(...obj1[i]);
        fruitArr.push(data2);
      }
      return fruitArr;
    },
  },
  mounted() {
    this.searchForm.useridList = this.optid.split(",");
    this.getMembers();
  },
};
</script>

<style lang="scss" scoped>
.meta-card-wrap {
  padding: 4vw;
  margin-top: 4vh;
  .list_box {
    height: 47vh;
    overflow-y: auto;
    .list_data {
      margin-top: 1.2vh;
      .list_header {
        background-color: #f7f7f7;
        padding: 1vw;
      }
      .list_content {
        padding: 1vw;
        justify-content: space-around;
        line-height: 3vh;
        .employeno {
          color: #888;
        }
      }
    }
  }
}
</style>