<template>
  <div>
    <div class="flex mb-10px">
      <el-input v-model="keyword" clearable @clear="initAllUser" style="width: 300px;margin-right: 10px;"></el-input>
      <el-button type="primary" @click="initAllUser">搜索</el-button>
    </div>
    <el-transfer v-model="memberValue" :props="{ key: 'user_id', label: 'user_realname_phone' }" :titles="['全部', '全部']" :data="userData">
      <template slot="left-footer">
        <el-pagination background layout="prev, pager, next" :pager-count="5" :total="memberTotal" @current-change="handleMemberChange" :page-size="memberLimit" :currentPage="memberCurrentPage"></el-pagination>
      </template>
    </el-transfer>
  </div>
</template>

<script>
import { userList, userAdd } from "../api";
export default {
  data() {
    return {
      keyword: "",
      memberValue: [],
      userData: [],
      memberTotal: 0,
      memberLimit: 100,
      memberCurrentPage: 1,
    }
  },
  props: ["currentId"],
  watch: {

  },
  methods: {
    async initAllUser() {
      let obj = {
        is_not_stu: "1",
        admin: 1,
        page: this.memberCurrentPage,
        limit: this.memberLimit,
        keyword:this.keyword
      }
      let data = await userList(obj);
      this.memberTotal = parseInt(data.total_rows);
      data.page_data.map((item) => {
        if (item.user_phone != "") {
          item.user_realname_phone = item.user_realname + "（" + item.user_phone + "）";
        } else {
          item.user_realname_phone = item.user_realname;
        }
      })
      this.userData = data.page_data;
    },
    handleMemberChange(val) {
      this.memberCurrentPage = val;
      this.initAllUser();
    },
    // filterMethod(query, item) {
    //   return item.user_realname_phone.toLowerCase().includes(query.toLowerCase())
    // },
    async commitData() {
      let data = {
        uo_id: this.currentId,
        uo_user_ids: this.memberValue,
        issubmit: "1"
      }
      let obj = await userAdd(data);
      if (obj) {
        this.$message.success("保存成功！");
        this.$emit("close", 2, 1);
      }
    },
    resetForm() {
      this.memberValue = [];
    }
  },
  created() {
    this.initAllUser();
  }
}
</script>

<style lang="scss" scoped>
::v-deep {
  .el-transfer {
    display: flex;
    align-items: center;
    .el-transfer-panel {
      flex: 1;
    }
    .el-transfer-panel__body {
      flex: 1;
      height: 450px;
      // .el-input {
      //   width: 350px;
      // }
      // .el-transfer-panel__list.is-filterable {
      //   height: 400px;
      // }
      .el-transfer-panel__list {
        height: 100%;
      }
    }
  }
}
</style>