<template>
    <div v-loading="loading" element-loading-text="拼命加载中">
        <h2>接收消息用户：</h2>
        <el-table
            :data="selectUsers"
            border
            stripe
            style="width: 100%"
            height="250"
        >
            <el-table-column
                type="index"
                align="center"
                label="序号"
                width="50"
            ></el-table-column>
            <el-table-column prop="name" label="用户名称"></el-table-column>
            <el-table-column prop="mobile" label="用户手机号"></el-table-column>
            <el-table-column prop="userType" label="用户类型"></el-table-column>
            <el-table-column label="操作" align="center" width="80">
                <template slot-scope="scope">
                    <el-button @click="handleSelectUserRemove(scope.row)">
                        移除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <h2>用户查询：</h2>
        <el-form :inline="true">
            <el-form-item>
                <el-input
                    v-model="search.searchText"
                    clearable
                    placeholder="请输入用户手机号码"
                >
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button
                    @click="handleSearch"
                    type="primary"
                    icon="el-icon-search"
                >
                    搜 索
                </el-button>
            </el-form-item>
        </el-form>
        <el-table
            :data="search.result"
            border
            stripe
            style="width: 100%"
            height="250"
        >
            <el-table-column
                type="index"
                :index="pageIndex"
                align="center"
                label="序号"
                width="50"
            ></el-table-column>
            <el-table-column prop="name" label="用户名称"></el-table-column>
            <el-table-column prop="mobile" label="用户手机号"></el-table-column>
            <el-table-column prop="userType" label="用户类型"></el-table-column>
            <el-table-column label="操作" align="center" width="80">
                <template slot-scope="scope">
                    <el-button @click="handleSelectUser(scope.row)">
                        选择
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <br />
        <el-row type="flex" :gutter="20">
            <el-col :span="12"></el-col>
            <el-col :span="12">
                <div style="text-align: right">
                    <el-pagination
                        @size-change="handleSearchResultSizeChange"
                        @current-change="handleSearchResultCurrentChange"
                        :current-page="search.resultPagination.currentPage"
                        :page-sizes="search.resultPagination.pageSizes"
                        :page-size="search.resultPagination.pageSize"
                        layout="total, sizes, prev, pager, next"
                        :total="search.resultPagination.total"
                    ></el-pagination>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import USER_MANAGEMENT from "@/api/user-management";

export default {
    name: "SelectUsers",
    data() {
        return {
            loading: false,
            search: {
                searchText: "",
                serachTimer: "",
                resultList: [],
                resultPagination: {
                    currentPage: 1,
                    pageSizes: [10, 30],
                    pageSize: 10,
                    total: 0,
                },
            },
            selectUsers: [], // 选择的用户列表
        };
    },
    methods: {
        pageIndex(index) {
            let currentPage = this.search.resultPagination.currentPage; // 当前页码，具体看组件取值
            let pageSize = this.search.resultPagination.pageSize; // 每页条数，具体是组件取值
            return index + 1 + (currentPage - 1) * pageSize;
        },
        handleSearch() {
            this.callGetISPEntUserInfo(
                this.search.resultPagination.currentPage,
                this.search.resultPagination.pageSize
            );
        },
        handleSearchResultSizeChange(val) {
            this.callGetISPEntUserInfo(1, val);
        },
        handleSearchResultCurrentChange(val) {
            this.callGetISPEntUserInfo(
                val,
                this.search.resultPagination.pageSize
            );
        },
        /**
         * 搜索服务商下的企业用户
         * @param {Number} pageNum : 当前页码
         * @param {Number} pageSize : 每页数量
         */
        callGetISPEntUserInfo(pageNum, pageSize) {
            let _this = this;
            _this.loading = true;
            USER_MANAGEMENT.getISPEntUserInfo({
                entUserMobile: this.search.searchText,
                pageNum: pageNum,
                pageSize: pageSize,
            })
                .then((val) => {
                    _this.loading = false;
                    _this.search.resultPagination.total = val.data.total;
                    _this.search.resultPagination.pageSize = val.data.size;
                    _this.search.resultPagination.currentPage =
                        val.data.current;
                    _this.search.result = val.data.records;
                })
                .catch((err) => {
                    _this.loading = false;
                    _this.$message.error(err);
                });
        },
        // 选择用户
        handleSelectUser(row) {
            if (row) {
                if (this.selectUsers) {
                    var findItem = this.selectUsers.find((item) => {
                        return item.mobile === row.mobile;
                    });
                    if (findItem) {
                        this.$message.warning("用户已选择！");
                    } else {
                        var tempList = [...this.selectUsers];
                        tempList.push(row);
                        this.selectUsers = tempList;
                    }
                } else {
                    this.selectUsers = [row];
                }
            }
        },
        // 选择用户移除
        handleSelectUserRemove(row) {
            if (row && this.selectUsers) {
                var findItemIndex = this.selectUsers.findIndex((item) => {
                    return item.mobile === row.mobile;
                });
                if (findItemIndex > -1) {
                    var tempList = [...this.selectUsers];
                    tempList.splice(findItemIndex, 1);
                    this.selectUsers = tempList;
                }
            }
        },
        // 获取选中用户列表
        getSelectUsers(){
            return this.selectUsers;
        }
    },
};
</script>