<template>
    <div v-loading="loading" element-loading-text="拼命加载中......请稍等">
        <div>
            <el-form :inline="true">
                <el-form-item>
                    <el-input
                        v-model="search.searchText"
                        clearable
                        prefix-icon="el-icon-search"
                        placeholder="请输入用户手机号码"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="handleSearch" type="primary"
                        >搜 索</el-button
                    >
                </el-form-item>
            </el-form>
        </div>
        <el-container>
            <el-table
                :data="search.result"
                border
                stripe
                style="width: 100%"
                max-height="600"
            >
                <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="email"
                    label="用户邮箱"
                ></el-table-column>
                <!-- <el-table-column
                    prop="activated"
                    label="激活"
                ></el-table-column>
                <el-table-column
                    prop="status"
                    label="有效状态"
                ></el-table-column>
                <el-table-column
                    prop="deptName"
                    label="部门名称"
                ></el-table-column> -->
                <el-table-column
                    prop="userType"
                    label="用户类型"
                ></el-table-column>
                <el-table-column label="操作" align="center" width="200">
                    <template slot-scope="scope">
                        <el-button
                            type="primary"
                            @click="handleShowUserEntBindDialog(scope.row)"
                            >所属企业
                        </el-button>
                        <el-button
                            type="primary"
                            @click="handleShowSMSVerificationDialog(scope.row)"
                            >重置密码
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-container>
        <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>
        <el-dialog
            title="短信验证"
            :visible.sync="smsVerification.visible"
            width="30%"
            append-to-body
            :close-on-press-escape="false"
            :close-on-click-modal="false"
            @close="handleSMSVerificationDialogClose"
        >
            <div
                v-loading="smsVerification.loading"
                element-loading-text="拼命加载中......请稍等"
            >
                <div>
                    <div>
                        请输入 {{ smsVerification.ispMobile }} 收到的短信验证码
                    </div>
                    <br />
                    <el-row :gutter="20">
                        <el-col :span="12"
                            ><el-input
                                placeholder="请输入验证码"
                                v-model="smsVerification.smsCode"
                                clearable
                            >
                            </el-input
                        ></el-col>
                        <el-col :span="12"
                            ><el-button type="primary" @click="handleSendSMS">
                                发送验证码
                            </el-button></el-col
                        >
                    </el-row>
                </div>
                <br />
                <br />
                <div>
                    <el-button type="primary" @click="handleResetEntUserPwd"
                        >立即重置密码
                    </el-button>
                </div>
            </div>
        </el-dialog>
        <el-dialog
            title="所属企业"
            :visible.sync="userEntBind.visible"
            width="60%"
            append-to-body
            :close-on-press-escape="false"
            :close-on-click-modal="false"
            @opened="handleUserEntBindDialogOpened"
            @close="handleUserEntBindDialogClose"
        >
            <div
                v-loading="userEntBind.loading"
                element-loading-text="拼命加载中......请稍等"
            >
                <el-table
                    :data="userEntBind.resultList"
                    style="width: 100%"
                    height="350"
                >
                    <el-table-column
                        type="index"
                        :index="pageIndexUserEntBind"
                        align="center"
                        label="序号"
                        width="50"
                    ></el-table-column>
                    <el-table-column prop="entName" label="企业名称">
                    </el-table-column>
                    <el-table-column prop="entTaxId" label="企业税号">
                    </el-table-column>
                    <el-table-column
                        prop="roleMemo"
                        label="角色身份"
                        align="center"
                    >
                    </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="handleUserEntBindResultSizeChange"
                                @current-change="
                                    handleUserEntBindResultCurrentChange
                                "
                                :current-page="
                                    userEntBind.resultPagination.currentPage
                                "
                                :page-sizes="
                                    userEntBind.resultPagination.pageSizes
                                "
                                :page-size="
                                    userEntBind.resultPagination.pageSize
                                "
                                layout="total, sizes, prev, pager, next"
                                :total="userEntBind.resultPagination.total"
                            ></el-pagination>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import USER_MANAGEMENT from "@/api/user-management";
import SMS from "@/api/sms";
import cache from "@/utils/cache";

export default {
    name: "ISPEntUser",
    data() {
        return {
            loading: false,
            search: {
                searchText: "",
                serachTimer: "",
                resultList: [],
                resultPagination: {
                    currentPage: 1,
                    pageSizes: [10, 30],
                    pageSize: 10,
                    total: 0,
                },
            },
            smsVerification: {
                visible: false,
                loading: false,
                originalRow: null,
                ispMobile: "", // 服务商管理者手机号码
                smsCode: "", // 验证码
            },
            userEntBind: {
                visible: false,
                loading: false,
                originalRow: null,
                resultList: [],
                resultPagination: {
                    currentPage: 1,
                    pageSizes: [10, 30],
                    pageSize: 10,
                    total: 0,
                },
            },
        };
    },
    created() {
        this.callGetISPEntUserInfo(
            this.search.resultPagination.currentPage,
            this.search.resultPagination.pageSize
        );
    },
    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);
                });
        },
        handleShowSMSVerificationDialog(row) {
            this.smsVerification.ispMobile = JSON.parse(
                cache.getLocal("user")
            ).account;
            this.smsVerification.originalRow = row;
            this.smsVerification.visible = true;
        },
        handleSMSVerificationDialogClose() {
            this.smsVerification.ispMobile = "";
            this.smsVerification.smsCode = "";
            this.smsVerification.originalRow = null;
        },
        // 发送验证码
        handleSendSMS() {
            let _this = this;
            _this.smsVerification.loading = true;
            SMS.getSmscode(this.smsVerification.ispMobile)
                .then((val) => {
                    _this.smsVerification.loading = false;
                    _this.$message.success(val.msg);
                })
                .catch((err) => {
                    _this.smsVerification.loading = false;
                    _this.$message.error(err);
                });
        },
        // 重置密码
        handleResetEntUserPwd() {
            let _this = this;
            if (this.smsVerification.smsCode) {
                _this.smsVerification.loading = true;
                USER_MANAGEMENT.resetEntUserPasswd({
                    resetMobile: this.smsVerification.originalRow.mobile,
                    smsCode: this.smsVerification.smsCode,
                })
                    .then((val) => {
                        _this.smsVerification.loading = false;
                        _this.$message.success(val.msg);
                    })
                    .catch((err) => {
                        _this.smsVerification.loading = false;
                        _this.$message.error(err);
                    });
            } else {
                _this.$message.error("请输入短信验证码！");
                return false;
            }
        },
        handleShowUserEntBindDialog(row) {
            this.userEntBind.originalRow = row;
            this.userEntBind.visible = true;
        },
        handleUserEntBindDialogOpened() {
            this.callUserEntBindInfo(
                1,
                this.userEntBind.resultPagination.pageSize
            );
        },
        handleUserEntBindDialogClose() {
            this.userEntBind.originalRow = null;
        },
        pageIndexUserEntBind(index) {
            let currentPage = this.userEntBind.resultPagination.currentPage; // 当前页码，具体看组件取值
            let pageSize = this.userEntBind.resultPagination.pageSize; // 每页条数，具体是组件取值
            return index + 1 + (currentPage - 1) * pageSize;
        },
        handleUserEntBindResultSizeChange(val) {
            this.callUserEntBindInfo(1, val);
        },
        handleUserEntBindResultCurrentChange(val) {
            this.callUserEntBindInfo(
                val,
                this.userEntBind.resultPagination.pageSize
            );
        },
        callUserEntBindInfo(pageNum, pageSize) {
            let _this = this;
            _this.userEntBind.loading = true;
            USER_MANAGEMENT.userEntBindInfo({
                userMobile: _this.userEntBind.originalRow.mobile,
                pageNum: pageNum,
                pageSize: pageSize,
            })
                .then((val) => {
                    _this.userEntBind.loading = false;
                    _this.userEntBind.resultPagination.total = val.data.total;
                    _this.userEntBind.resultPagination.pageSize = val.data.size;
                    _this.userEntBind.resultPagination.currentPage =
                        val.data.current;
                    _this.userEntBind.resultList = val.data.records;
                })
                .catch((err) => {
                    _this.userEntBind.loading = false;
                    _this.$message.error(err);
                });
        },
    },
};
</script>