<template>
    <div>
        <el-form :inline="true" :model="filterQuery" class="query-form" size="mini">
            <el-row>
                <el-form-item class="query-form-item">
                    <el-input
                        v-model="filterQuery.companyName"
                        placeholder="企业名称"
                    ></el-input>
                </el-form-item>
                <el-form-item class="query-form-item">
                    <el-select v-model="filterQuery.checkType" placeholder="审核状态">
                        <el-option label="未审核" value="0"></el-option>
                        <el-option label="已审核" value="1"></el-option>
                        <el-option label="未通过" value="2"></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
                label="用户名称"
                prop="nickName"
                width="220"
            ></el-table-column>
            <el-table-column
                label="企业名称"
                prop="companyName"
                width="230"
            ></el-table-column>


            <el-table-column
                label="联系人"
                prop="realName"
                width="160"
            ></el-table-column>
            <el-table-column label="手机" prop="mobile" width="120"></el-table-column>
            <el-table-column label="电话" prop="tel" width="120"></el-table-column>
            <el-table-column label="邮箱" prop="email" width="180"></el-table-column>
            <el-table-column label="企业类型" prop="bussinessStatus">
                <template slot-scope="scope">
                    <span>{{ bussinessFlag[scope.row.bussinessStatus] }}</span>
                </template>
            </el-table-column>
            <el-table-column label="所属地区" prop="area" width="200">
            </el-table-column>
            <el-table-column label="审核状态" prop="checkType" width="120">
                <template slot-scope="scope">
                    <span>{{ checkFlag[scope.row.checkType] }}</span>
                </template>
            </el-table-column>

            <el-table-column label="操作" fixed="right">
                <template slot-scope="scope">
                    <el-button
                        type="text"
                        size="small"
                        v-if="scope.row.checkType !== 1"
                        @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="centerDialogVisible"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            width="70%"
            center
        >
            <el-form :model="rowData" :rules="rowDataRules" ref="rowDataForm" style="margin: 0 20px;">

                <el-row :gutter="20">
                    <el-col :span="3">
                        <div class="div-text">
                            <span>用户名称:&nbsp;</span>
                        </div>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item>
                            <el-input
                                size="small"
                                v-model="rowData.nickName"
                                :disabled="true"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="3">
                        <div class="div-text">
                            <span>企业名称:&nbsp;</span>
                        </div>
                    </el-col>
                    <el-col :span="7">

                        <el-form-item>
                            <el-select
                                v-model="rowData.companyName"
                                filterable
                                remote
                                :disabled="rowData.companyName!=null"
                                clearable="true"
                                reserve-keyword
                                placeholder="请输入企业名称"
                                :remote-method="findMethod"
                                size="small"
                                style="width: 100%"
                                :loading="loading"
                            >
                                <el-option
                                    v-for="item in fromOptions"
                                    :key="item.name"
                                    :label="item.name"
                                    :value="item.name"
                                >
                                    <span style="float: left">{{ item.name }}</span>
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="3">
                        <div class="div-text">
                            <span>联系人:&nbsp;</span>
                        </div>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item>
                            <el-input
                                size="small"
                                v-model="rowData.realName"
                                :disabled="true"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="3">
                        <div class="div-text">
                            <span>企业类型:&nbsp;</span>
                        </div>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item>
                            <el-input
                                size="small"
                                v-model="bussinessFlag[rowData.bussinessStatus]"
                                :disabled="true"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="3">
                        <div class="div-text">
                            <span>电话:&nbsp;</span>
                        </div>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item>
                            <el-input
                                size="small"
                                v-model="rowData.tel"
                                :disabled="true"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="3">
                        <div class="div-text">
                            <span>所属地区:&nbsp;</span>
                        </div>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item>
                            <el-input
                                size="small"
                                v-model="rowData.area"
                                :disabled="true"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="3">
                        <div class="div-text">
                            <span>手机:&nbsp;</span>
                        </div>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item>
                            <el-input
                                size="small"
                                v-model="rowData.mobile"
                                :disabled="true"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="3">
                        <div class="div-text">
                            <span>邮箱:&nbsp;</span>
                        </div>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item>
                            <el-input
                                size="small"
                                v-model="rowData.email"
                                :disabled="true"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="3">
                        <div class="div-text">
                            <span>营业执照:&nbsp;</span>
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <el-button
                            @click.native="openFile(rowData.licenseUrl)"
                            size="small" type="primary">查看文件
                        </el-button>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="3">
                        <div class="div-text">
                            <span>分配角色:&nbsp;</span>
                        </div>
                    </el-col>
                    <el-col :span="7">
                        <el-form :model="checkQuery">
                            <el-form-item label="" style="margin-top: 5px">
                                <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>
                    </el-col>
                </el-row>

            </el-form>

            <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" :disabled="checkQuery.enablePass" @click="passRegister">通过</el-button>
        <el-button type="primary" @click="noPassRegister">不通过</el-button>
      </span>
        </el-dialog>
        <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 {authCustomerRoles} from "../../api/auth/authAdmin";
import {getBasicUnitMaintains2} from "../../api/basic/basicUnitMaintain";
import {getRegisterConfig} from "../../api/warehouse/company";
import {BASE_URL} from "../../config/app";
import {getBasicUnitMaintains} from "../../api/basic/basicUnitMaintain"

export default {
    data() {
        return {
            filterQuery: {
                companyName: "",
                checkType: "0",
                page: 1,
                limit: 20,
            },
            value: "",
            total: 0,
            checkFlag: {
                0: "未审核",
                1: "已通过",
                2: "已拒绝",
            },
            bussinessFlag: {
                1: "生产企业",
                2: "流通企业",
                3: "医疗机构"
            },
            checkQuery: {
                id: "",
                checkType: "",
                roles: "",
                enablePass: false,
            },
            rowDataRules: {
                nickName: [
                    {required: true, message: "请输入用户名称", trigger: "blur"},
                ],
            },
            list: [],
            roles: [],
            addDialogVisible: false,
            centerDialogVisible: false,
            check: "",
            rowData: {},
            sOptions: [],
            sValue: [],
            sList: [],
            sLoading: false,
            sSelectStatus: false,
            registerConfigMap: {
                companyCheckStatus: true
            },
            fileUrl: "",
            fromOptions: [],
        };
    },

    methods: {
        onReset() {
            this.$router.push({
                path: "",
            });
            this.filterQuery = {
                companyName: "",
                checkType: "",
                page: 1,
                limit: 20,
            };
            this.getList();
        },
        onSubmit() {
            this.filterQuery.page = 1;
            this.getList();
        },
        getList() {
            this.loading = true;
            getRegisters(this.filterQuery)
                .then((response) => {
                    this.loading = false;
                    this.list = response.data.list || [];
                    this.total = response.data.total || 0;
                })
                .catch(() => {
                    this.loading = false;
                    this.list = [];
                    this.total = 0;
                });
        },
        selectOne(event) {
            this.rowData.companyName = event.name;
            this.rowData.companyId = event.value;
            this.checkQuery.companyName = event.name;
            this.checkQuery.companyId = event.value;
            this.sSelectStatus = true;
        },
        remoteMethod(query) {
            if (query !== '') {
                this.sLoading = true;
                let tQuery = {
                    key: query,
                    page: 1,
                    limit: 20,
                };
                getBasicUnitMaintains2(tQuery)
                    .then((response) => {
                        this.sLoading = false;
                        this.sOptions = response.data.list;
                    })
                    .catch(() => {
                        this.sLoading = false;
                        this.sOptions = [];
                    });
            } else {
                this.sOptions = [];
            }
        },
        cancelDialog() {
            this.addDialogVisible = false;
        },

        handleCheckedChange(val) {
            if (null != val) {
                this.checkQuery.enablePass = false;
            }
        },

        handleSizeChange(val) {
            this.filterQuery.limit = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.filterQuery.page = val;
            this.getList();
        },
        findMethod(query) {
            this.fromOptions = [];
            let cQuery = {
                key: query,
            };
            getBasicUnitMaintains(cQuery)
                .then((response) => {
                    this.loading = false;
                    this.fromOptions = response.data.page.list || [];
                })
                .catch(() => {
                    this.loading = false;
                });
        },
        checkRegister() {
            this.loading = true;
            checkPass(this.checkQuery)
                .then((response) => {
                    if (response.code === 20000) {
                        this.getList();
                        this.$message({
                            type: "success",
                            message: "更新成功！",
                        });
                    } else {
                        this.$message.warning("更新失败");
                        this.loading = false;
                    }
                })
                .catch(() => {
                });
        },
        checkDialog(row) {
            this.check = row.roles;
            this.checkQuery = {
                id: row.id + "",
                checkType: 1,
                roles: row.roles,
                enablePass: true
            };
            this.rowData = row;
            if (this.registerConfigMap.companyCheckStatus) {
                this.sValue = this.rowData.companyName;
            }
            this.centerDialogVisible = true;
        },

        passRegister() {
            this.checkQuery.roles = this.check;
            if (this.$isBlank(this.checkQuery.roles)) {
                return this.$message.warning("请选择当前供应商角色");
            }
            if (this.$isBlank(this.rowData.companyName)) {
                return this.$message.warning("请输入企业名称");
            }
            this.checkRegister();
            this.centerDialogVisible = false;
        },
        noPassRegister() {
            this.checkQuery.roles = this.check;
            this.checkQuery.checkType = 2;
            this.checkRegister();
            this.centerDialogVisible = false;
        },

        deleteDialog(row) {
            this.$confirm("是否删除该记录?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    let tQuery = {
                        id: row.id,
                    };
                    deleteRe(tQuery).then(() => {
                        this.getList();
                    });
                })
                .catch(() => {
                });
        },
        getRoleList() {
            authCustomerRoles()
                .then((response) => {
                    this.roles = response.data.list || [];
                })
                .catch(() => {
                    this.checkQuery.roles = [];
                });
        },
        registerConfig() {
            getRegisterConfig().then((response) => {
                if (response.code === 20000) {
                    this.registerConfigMap = response.data;
                    this.sSelectStatus = this.registerConfigMap.companyCheckStatus;
                }
            });
        },
        openFile(path) {
            window.open(this.fileUrl + path);
        },
    },

    mounted() {
    },
    created() {
        this.fileUrl = BASE_URL + "/udiwms/image/register/file/getImage?type=image1&name=";
        this.getList();
        this.getRoleList();
        this.registerConfig();
    },
};
</script>

<style>

.div-text {
    float: right;
    text-align: right;
    margin-top: 10px;
}

</style>
