<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.key"
                        placeholder="请输入"
                        clearable
                    ></el-input>

                    <el-select style="margin: 0px 15px 0px 15px;" v-model="filterQuery.bussinessStatus" clearable
                               placeholder="企业类型">
                        <el-option label="生产企业" :value="1"></el-option>
                        <el-option label="流通企业" :value="2"></el-option>
                        <el-option label="医疗机构" :value="3"></el-option>
                    </el-select>

                    <el-select v-model="filterQuery.userFlag" clearable placeholder="企业状态">
                        <el-option label="禁用" :value="0"></el-option>
                        <el-option label="正常" :value="1"></el-option>
                    </el-select>

                </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 type="index" label="序号"></el-table-column>
            <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="roleName" width="120"></el-table-column>
            <el-table-column label="最大用户数" prop="userMax" width="120"></el-table-column>
            <el-table-column label="当前用户数" prop="currentUserCount" 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%"
                   :close-on-click-modal="false"
                   :close-on-press-escape="false"
        >
            <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"
                                        @change="verifyUserMax"
                                    ></el-input>
                                </el-form-item>
                            </div>
                        </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-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
            :current-page="filterQuery.page"
            :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: {
                key: "", //支持搜索企业名称，社会统一信用号，所属地区    支持全模糊
                userFlag: null,
                bussinessFlag: null,
                companyName: "",
                checkType: "",
                page: 1,
                limit: 20
            },
            value: "",
            total: 0,
            loading: false,
            checkFlag: {
                0: "未审核",
                1: "已通过",
                2: "已拒绝"
            },
            userflag: {
                0: "禁用",
                1: "正常"
            },
            bussinessFlag: {
                1: "生产企业",
                2: "流通企业",
                3: "医疗机构"
            },
            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(response.message);
                    }
                })
                .catch(() => {
                    this.cancelDialog();
                    this.loading = false;
                });
        },
        onSubmit() {
            this.filterQuery.page = 1;
            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) {
        },
        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();
            this.customerVisible = true;
        },

        closeCustomerDialog() {
            this.currentCustomer = null;
        },
        checkDialog(row) {
            (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));
            this.formVisible = true;
        },

        contractDialog(row) {
            (this.contractData = {
                contacts: row.contacts,
                mobile: row.mobile,
                tel: row.tel,
                email: row.email
            }),
                (this.contractVisible = true);
        },
        verifyUserMax() {
            if (this.formData.userMax < 0) {
                this.$message.warning("最大用户数不能小于0");
                this.formData.userMax = 0;
            }
        },
        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 || [];
                })
                .catch(() => {
                });
        },

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