<template>
    <div>
        <el-form :inline="true" :model="filterQuery" class="query-form" size="mini">
            <el-row>
                <el-form-item class="query-form-item">
                    <el-input
                        style="width: 400px"
                        v-model="filterQuery.companyName"
                        placeholder="客户名称"
                    ></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button-group>
                        <el-button
                            type="primary"
                            icon="el-icon-refresh"
                            @click="onReset"
                        ></el-button>
                        <el-button type="primary" icon="search" @click="onSubmit"
                        >查询
                        </el-button
                        >
                    </el-button-group>
                </el-form-item>
            </el-row>
        </el-form>

        <el-table v-loading="loading" :data="list" style="width: 100%">
            <el-table-column
                label="企业名称"
                prop="companyName"
                width="230"
            ></el-table-column>
            <el-table-column
                label="社会统一信用号"
                prop="creditNum"
                width="160"
            ></el-table-column>
            <el-table-column label="所属地区" prop="area" width="180">
            </el-table-column>
            <el-table-column
                label="详细地址"
                prop="detailAddr"
                width="230"
                :show-overflow-tooltip="true"
            >
            </el-table-column>

            <el-table-column label="企业类型" prop="bussinessStatus" width="120">
                <template slot-scope="scope">
                    <span>{{ bussinessFlag[scope.row.bussinessStatus] }}</span>
                </template>
            </el-table-column>
            <el-table-column label="客户状态" prop="userFlag" width="120">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.userFlag | statusFilterType">{{
                            scope.row.userFlag | statusFilterName
                        }}
                    </el-tag>
                </template>
            </el-table-column>

            <!--            <el-table-column label="真实姓名" prop="userName" width="120"></el-table-column>-->
            <!--            <el-table-column label="手机" prop="employeeName" width="120"></el-table-column>-->
            <!--            <el-table-column label="联系电话" prop="tel" width="120"></el-table-column>-->
            <!--            <el-table-column label="邮箱" prop="email" width="120"></el-table-column>-->

            <!--            <el-table-column label="是否弹窗" prop="isInfoLink" width="120">-->
            <!--                <template slot-scope="scope">-->
            <!--                    <span>{{ isTip[scope.row.isInfoLink] }}</span>-->
            <!--                </template>-->
            <!--            </el-table-column>-->
            <!--            <el-table-column-->
            <!--                label="弹窗链接"-->
            <!--                prop="infoLink"-->
            <!--                width="180"-->
            <!--                :show-overflow-tooltip="true"-->
            <!--            >-->
            <!--            </el-table-column>-->

            <el-table-column label="角色" prop="role" width="120"></el-table-column>
            <!--            <el-table-column label="打印模板" prop="pdfTemplateName" width="120"></el-table-column>-->
            <el-table-column label="最大用户数" prop="userMax" width="120">
            </el-table-column>
            <el-table-column label="当前用户数" prop="count" width="120">
            </el-table-column>

            <el-table-column label="操作" width="120" fixed="right">
                <template slot-scope="scope">
                    <el-button-group>
                        <el-button
                            type="text"
                            size="mini"
                            @click.native.stop="customerkDialog(scope.row)"
                        >查看用户
                        </el-button
                        >

                        <el-button
                            type="text"
                            size="mini"
                            @click.native.stop="contractDialog(scope.row)"
                        >查看联系人
                        </el-button
                        >
                    </el-button-group>
                </template>
            </el-table-column
            >
            <el-table-column label="操作" fixed="right" width="120">
                <template slot-scope="scope">
                    <el-button
                        type="text"
                        size="small"
                        @click.native.stop="checkDialog(scope.row)"
                    >编辑
                    </el-button
                    >

                    <el-button
                        type="text"
                        size="small"
                        @click.native.stop="deleteDialog(scope.row)"
                    >删除
                    </el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="客户信息编辑" :visible.sync="formVisible" width="60%">
            <el-form :model="formData" ref="dataForm">
                <el-row :gutter="20" class="el-row" type="flex">
                    <el-col :span="10" class="el-col" type="flex">
                        <div class="text item">
                            <el-form-item label="客户名称" prop="userName">
                                <el-input
                                    v-model="formData.customerName"
                                    style="width: 60%"
                                    size="small"
                                    :disabled="true"
                                ></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="10" class="el-col">
                        <div class="text item">
                            <div class="text item">
                                <el-form-item label="最大用户数" prop="employeeName">
                                    <el-input
                                        v-model="formData.userMax"
                                        size="small"
                                        style="width: 40%"
                                        type="number"
                                    ></el-input>
                                </el-form-item>
                            </div>
                        </div>
                    </el-col>
                </el-row>

                <!--                <el-row :gutter="20" class="el-row" type="flex">-->
                <!--                    <el-col :span="10" class="el-col" type="flex">-->
                <!--                        <div class="text item">-->
                <!--                            <el-form-item label="是否弹窗提示" prop="isInfoLink">-->
                <!--                                <el-select-->
                <!--                                    v-model="formData.isInfoLink"-->
                <!--                                    placeholder="是否弹窗提示"-->
                <!--                                >-->
                <!--                                    <el-option label="否" value="0"></el-option>-->
                <!--                                    <el-option label="是" value="1"></el-option>-->
                <!--                                </el-select>-->
                <!--                            </el-form-item>-->
                <!--                        </div>-->
                <!--                    </el-col>-->
                <!--                    <el-col :span="10" class="el-col">-->
                <!--                        <div class="text item">-->
                <!--                            <div class="text item">-->
                <!--                                <el-form-item label="弹窗提示窗口链接" prop="infoLink">-->
                <!--                                    <el-input-->
                <!--                                        style="width: 60%"-->
                <!--                                        size="small"-->
                <!--                                        v-model="formData.infoLink"-->
                <!--                                    ></el-input>-->
                <!--                                </el-form-item>-->
                <!--                            </div>-->
                <!--                        </div>-->
                <!--                    </el-col>-->
                <!--                </el-row>-->

                <!--                <el-row :gutter="20" class="el-row" type="flex">-->
                <!--                    <el-col :span="10" class="el-col" type="flex">-->
                <!--                        <div class="text item">-->
                <!--                            <el-form-item label="选择打印模板" prop="pdfTemplateId">-->
                <!--                                <el-select-->
                <!--                                    v-model="formData.pdfTemplateId"-->
                <!--                                    placeholder="选择打印模板"-->
                <!--                                >-->
                <!--                                    <el-option-->
                <!--                                        v-for="item in pdfTemplates"-->
                <!--                                        :key="item.idStr"-->
                <!--                                        :label="item.name"-->
                <!--                                        :value="item.idStr">-->
                <!--                                    </el-option>-->
                <!--                                </el-select>-->
                <!--                            </el-form-item>-->
                <!--                        </div>-->
                <!--                    </el-col>-->
                <!--                </el-row>-->

                <el-form-item label="状态：" prop="userFlag">
                    <el-radio-group v-model="formData.userFlag">
                        <el-radio :label="0">禁用</el-radio>
                        <el-radio :label="1">正常</el-radio>
                        <el-radio :label="2">未验证</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="分配角色：">
                    <el-radio-group v-model="check" @change="handleCheckedChange">
                        <el-radio v-for="item in roles" :key="item.id" :label="item.id">{{
                                item.name
                            }}
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click.native="cancelDialog" size="small">取消</el-button>
                <el-button type="primary" size="small" @click.native="formSubmit()"
                >提交
                </el-button
                >
            </div>
        </el-dialog>

        <el-dialog title="客户联系人" :visible.sync="contractVisible" width="60%">
            <el-form :model="contractData" ref="dataForm">
                <el-row :gutter="20" class="el-row" type="flex">
                    <el-col :span="10" class="el-col" type="flex">
                        <div class="text item">
                            <el-form-item label="真实姓名" prop="userName">
                                <el-input
                                    v-model="contractData.contacts"
                                    style="width: 80%"
                                    size="small"
                                    :disabled="true"
                                ></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="10" class="el-col">
                        <div class="text item">
                            <div class="text item">
                                <el-form-item label="手机" prop="employeeName">
                                    <el-input
                                        v-model="contractData.mobile"
                                        size="small"
                                        style="width: 80%"
                                        type="number"
                                        :disabled="true"
                                    ></el-input>
                                </el-form-item>
                            </div>
                        </div>
                    </el-col>
                </el-row>

                <el-row :gutter="20" class="el-row" type="flex">
                    <el-col :span="10" class="el-col" type="flex">
                        <div class="text item">
                            <el-form-item label="联系电话" prop="tel">
                                <el-input
                                    v-model="contractData.tel"
                                    style="width: 80%"
                                    size="small"
                                    :disabled="true"
                                ></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="10" class="el-col">
                        <div class="text item">
                            <div class="text item">
                                <el-form-item label="邮箱" prop="email">
                                    <el-input
                                        v-model="contractData.email"
                                        size="small"
                                        style="width: 80%"
                                        :disabled="true"
                                    ></el-input>
                                </el-form-item>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click.native="cancelDialog" size="small">确定</el-button>
            </div>
        </el-dialog>

        <div v-if="customerVisible">
            <el-dialog
                title="客户用户"
                :visible.sync="customerVisible"
                width="70%"
                append-to-body
                :modal-append-to-body="false"
                @close="closeCustomerDialog"
            >
                <customerUser :currentCustomer="currentCustomer"></customerUser>
            </el-dialog>
        </div>
        <el-pagination
            :page-size="filterQuery.limit"
            @current-change="handleCurrentChange"
            layout="prev, pager, next"
            :total="total"
        ></el-pagination>
    </div>
</template>

<script>
import {getRegisters, checkPass, deleteRe} from "../../api/auth/register";
import {authAdminRoleList, authCustomerRoles} from "../../api/auth/authAdmin";
import {getSystemPDFTemplates} from "../../api/param/systemPDFTemplate";
import {
    getCustomers,
    updateCustomers,
    deleteCustomers,
} from "../../api/auth/customer";
import customerUser from "./customerUser";

export default {
    data() {
        return {
            filterQuery: {
                companyName: "",
                checkType: "",
                page: 1,
                limit: 20,
            },
            value: "",
            total: 0,
            checkFlag: {
                0: "未审核",
                1: "已通过",
                2: "已拒绝",
            },

            userflag: {
                0: "禁用",
                1: "正常",
                2: "未验证",
            },
            bussinessFlag: {
                1: "医院",
                2: "经营企业"
            },
            list: [],
            isTip: {
                0: "否",
                1: "是",
            },
            formVisible: false,
            contractVisible: false,
            customerVisible: false,
            timer: "",
            formData: {
                customerName: "111",
                userMax: "",
                isInfoLink: "",
                infoLink: "",
                customerId: "",
                userFlag: "",
                roleId: "",
                pdfTemplateId: "",
            },
            contractData: {
                contacts: "",
                mobile: "",
                tel: "",
                email: "",
            },
            currentCustomer: "",
            check: "",
            roles: [],
            pdfTemplates: [],
        };
    },
    filters: {
        statusFilterType(status) {
            const statusMap = {
                0: "gray",
                1: "success",
                2: "danger",
            };
            return statusMap[status];
        },
        statusFilterName(status) {
            const statusMap = {
                0: "禁用",
                1: "正常",
                2: "未验证",
            };
            return statusMap[status];
        },
    },
    methods: {
        onReset() {
            this.$router.push({
                path: "",
            });
            this.filterQuery = {
                companyName: "",
                page: 1,
                limit: 20,
            };
            this.getList();
        },
        formSubmit() {
            this.formData.roleId = this.check;
            updateCustomers(this.formData)
                .then((response) => {
                    this.loading = false;
                    this.cancelDialog();
                    this.getList();
                    if (response.code === 20000) {
                        this.$message({
                            type: "success",
                            message: "更新成功！",
                        });
                    } else {
                        this.$message.warning("更新失败");
                    }
                })
                .catch(() => {
                    this.cancelDialog();
                    this.loading = false;
                });
        },
        onSubmit() {
            this.getList();
        },
        getList() {
            this.loading = true;
            getCustomers(this.filterQuery)
                .then((response) => {
                    this.loading = false;
                    this.list = response.data.list || [];
                    for (let i = 0; i < this.list.length; i++) {
                        if (this.$isNotBlank(this.list[i].pdfTemplateId)) {
                            for (let j = 0; j < this.pdfTemplates.length; j++) {
                                if (this.list[i].pdfTemplateId === this.pdfTemplates[j].idStr) {
                                    this.list[i].pdfTemplateName = this.pdfTemplates[j].name;
                                    break;
                                }
                            }
                        }
                    }
                    this.total = response.data.total || 0;
                })
                .catch(() => {
                    this.loading = false;
                    this.list = [];
                    this.total = 0;
                });
        },
        hideForm() {
            this.customerVisible = false;
        },
        cancelDialog() {
            this.formVisible = false;
            this.contractVisible = false;
        },

        handleSizeChange(val) {
            this.filterQuery.limit = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.filterQuery.page = val;
            this.getList();
        },
        handleCheckedChange(val) {
            console.log(val);
            console.log(this.check);
        },
        checkRegister(tquery) {
            this.loading = true;
            checkPass(tquery)
                .then((response) => {
                    if (response.code === 20000) {
                        this.getList();
                        this.$message({
                            type: "success",
                            message: "更新成功！",
                        });
                    } else {
                        this.$message.warning("更新失败");
                        this.loading = false;
                    }
                })
                .catch(() => {
                });
        },
        customerkDialog(row) {
            this.currentCustomer = row.customerId;
            this.timer = new Date().getTime();
            console.log("this.currentCustomer = " + this.currentCustomer);
            this.customerVisible = true;
        },

        closeCustomerDialog() {
            console.log("this.currentCustomer 关闭 = " + this.currentCustomer);

            this.currentCustomer = null;
        },
        checkDialog(row) {
            console.log(row);
            console.log(row.customerName);
            (this.formData = {
                customerName: row.companyName,
                userMax: row.userMax,
                isInfoLink: row.isInfoLink + "",
                infoLink: row.infoLink,
                customerId: row.customerId,
                userFlag: row.userFlag,
                pdfTemplateId: row.pdfTemplateId,
            }),
                (this.check = parseInt(row.roleId));
            console.log(this.check);
            this.formVisible = true;
        },

        contractDialog(row) {
            (this.contractData = {
                contacts: row.contacts,
                mobile: row.mobile,
                tel: row.tel,
                email: row.email,
            }),
                (this.contractVisible = true);
        },

        deleteDialog(row) {
            this.$confirm("删除后将清空该客户下所有用户?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    let tQuery = {
                        id: row.customerId,
                    };
                    deleteCustomers(tQuery).then(() => {
                        this.getList();
                    });
                })
                .catch(() => {
                });
        },

        getRoleList() {
            authCustomerRoles()
                .then((response) => {
                    this.roles = response.data.list || [];
                    console.log("888---" + this.checkQuery.roles);
                })
                .catch(() => {
                });
        },

        getPDFTemplateList() {
            getSystemPDFTemplates()
                .then((response) => {
                    this.pdfTemplates = response.data.list;
                })
                .catch(() => {
                });
        },
    },
    components: {
        customerUser,
    },
    mounted() {
    },
    created() {
        // this.getPDFTemplateList();
        this.getList();
        this.getRoleList();
    },
};
</script>
