<template>
    <div
        id="baiwang_account_query"
        v-loading="loading"
        element-loading-text="拼命加载中......请稍等"
    >
        <el-row type="flex" :gutter="20">
            <el-col :span="6">
                <el-input
                    v-model="search.entTaxId"
                    clearable
                    prefix-icon="el-icon-search"
                    placeholder="请输入企业税号"
                    class="ent_input"
                ></el-input>
            </el-col>
            <el-col :span="6">
                <el-input
                    v-model="search.entName"
                    clearable
                    prefix-icon="el-icon-search"
                    placeholder="请输入企业名称"
                    class="ent_input"
                ></el-input>
            </el-col>
            <el-col :span="16">
                <el-button
                    @click="handleSearch"
                    type="primary"
                    icon="el-icon-search"
                    >搜索</el-button
                >
                <el-button
                    @click="handleAddAccountDialogShow"
                    icon="el-icon-plus"
                    >新增</el-button
                >
            </el-col>
        </el-row>
        <br />
        <el-container>
            <el-table
                :data="search.resultList"
                border
                style="width: 100%"
                :max-height="600"
                ref="table"
            >
                <el-table-column
                    type="index"
                    :index="pageIndex"
                    align="center"
                    label="序号"
                    width="50"
                ></el-table-column>
                <el-table-column
                    prop="entName"
                    label="企业名称"
                    width="350"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    prop="entTaxId"
                    label="企业税号"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    prop="account"
                    label="百望云账号"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    prop="passwd"
                    label="百望云密码"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    prop="createTime"
                    label="创建时间"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    prop="lastUpdateTime"
                    label="最后修改时间"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column label="操作" align="center" width="150">
                    <template slot-scope="scope">
                        <el-button
                            type="primary"
                            @click="handleEntBindAPPKey(scope.row)"
                            >企业绑定APPKey
                        </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="addAccount.dialogVisible"
            width="600px"
            center
            append-to-body
            :close-on-press-escape="false"
            :close-on-click-modal="false"
            @opened="handleAddAccountDialogOpened"
            @closed="handleAddAccountDialogClosed"
        >
            <div
                v-loading="addAccount.loading"
                element-loading-text="拼命加载中......请稍等"
            >
                <el-form
                    :model="addAccount.addAccountForm"
                    :rules="addAccount.addAccountFormRules"
                    ref="addAccountForm"
                    label-width="120px"
                >
                    <el-form-item label="企业税号" prop="entTaxId">
                        <el-input
                            v-model="addAccount.addAccountForm.entTaxId"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="百望云账户" prop="account">
                        <el-input
                            v-model="addAccount.addAccountForm.account"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="百望云账户密码" prop="passwd">
                        <el-input
                            v-model="addAccount.addAccountForm.passwd"
                        ></el-input>
                    </el-form-item>
                </el-form>
                <span style="text-align: center; display: block">
                    <el-button @click="addAccount.dialogVisible = false"
                        >取 消</el-button
                    >
                    <el-button type="primary" @click="handleAddAccount"
                        >确 定</el-button
                    >
                </span>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { queryBWCloudInfo, saveBWCloudInfo } from "@/api/bw";
import ENT_INFO from "@/api/ent-info";

export default {
    name: "baiwang_account_query",
    data() {
        return {
            loading: false,
            search: {
                entTaxId: null,
                entName: null,
                serviceStatus: "", // 企业服务状态
                resultList: [],
                resultMultipleSelection: [],
                resultPagination: {
                    currentPage: 1,
                    pageSizes: [10, 30, 50, 100],
                    pageSize: 10,
                    total: 0,
                },
            },
            addAccount: {
                dialogVisible: false,
                loading: false,
                addAccountForm: {
                    entTaxId: "",
                    account: "",
                    passwd: "",
                },
                addAccountFormRules: {
                    entTaxId: [
                        {
                            required: true,
                            message: "请输入企业税号",
                            trigger: "change",
                        },
                    ],
                    account: [
                        {
                            required: true,
                            message: "请输入百望云账户",
                            trigger: "change",
                        },
                    ],
                    passwd: [
                        {
                            required: true,
                            message: "请输入百望云账户密码",
                            trigger: "change",
                        },
                    ],
                },
            },
        };
    },
    created() {
        this.callQueryBWCloudInfo(
            this.search.resultPagination.currentPage,
            this.search.resultPagination.pageSize
        );
    },
    mounted() {},
    methods: {
        pageIndex(index) {
            let currentPage = this.search.resultPagination.currentPage; // 当前页码，具体看组件取值
            let pageSize = this.search.resultPagination.pageSize; // 每页条数，具体是组件取值
            return index + 1 + (currentPage - 1) * pageSize;
        },
        // 变更每页显示的数据条数
        handleSearchResultSizeChange(val) {
            this.callQueryBWCloudInfo(1, val);
        },
        // 翻页
        handleSearchResultCurrentChange(val) {
            this.callQueryBWCloudInfo(
                val,
                this.search.resultPagination.pageSize
            );
        },
        handleSearch() {
            this.callQueryBWCloudInfo(1, this.search.resultPagination.pageSize);
        },
        callQueryBWCloudInfo(pageNum, pageSize) {
            let _this = this;
            _this.loading = true;
            queryBWCloudInfo(
                _this.search.entTaxId,
                _this.search.entName,
                pageNum,
                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.resultList = val.data.records;
                })
                .catch((err) => {
                    _this.loading = false;
                    _this.$message.error(err);
                });
        },
        handleAddAccountDialogShow() {
            this.addAccount.dialogVisible = true;
        },
        handleAddAccountDialogOpened() {
            this.addAccount.addAccountForm.entTaxId;
            this.addAccount.addAccountForm.account;
            this.addAccount.addAccountForm.passwd;
            this.$refs["addAccountForm"].resetFields();
        },
        handleAddAccountDialogClosed() {
            this.handleSearch();
        },
        handleAddAccount() {
            let _this = this;
            this.$refs["addAccountForm"].validate((valid) => {
                if (valid) {
                    _this.addAccount.loading = true;
                    saveBWCloudInfo(
                        _this.addAccount.addAccountForm.entTaxId,
                        _this.addAccount.addAccountForm.account,
                        _this.addAccount.addAccountForm.passwd
                    )
                        .then((val) => {
                            _this.addAccount.loading = false;
                            _this.addAccount.dialogVisible = false;
                            _this.$message.success(val.msg);
                        })
                        .catch((err) => {
                            _this.addAccount.loading = false;
                            _this.addAccount.dialogVisible = false;
                            _this.$message.error(err);
                        });
                } else {
                    _this.$message.error(
                        "输入信息不合法，请检查您的输入信息！"
                    );
                }
            });
        },
        handleEntBindAPPKey(row) {
            if (row) {
                const _this = this;
                ENT_INFO.bindAPPKey({
                    entTaxId: row.entTaxId,
                    bwCloudAccount: row.account,
                })
                    .then((val) => {
                        _this.$message.success(val.msg);

                        _this.callQueryBWCloudInfo(
                            _this.search.resultPagination.currentPage,
                            _this.search.resultPagination.pageSize
                        );
                    })
                    .catch((err) => {
                        _this.$message.error(err);
                    })
                    .finally(() => {
                        _this.loading = false;
                    });
            }
        },
    },
};
</script>

<style scoped>
.ent_input {
    width: 100%;
}
</style>
