<template>
    <div>
        <el-form :inline="true" :model="filterQuery" class="query-form" size="mini">
            <el-row>
                <el-form-item class="query-form-item">
                    <el-select v-model="filterQuery.isCheck" placeholder="审核状态">
                        <el-option label="全部" value=""></el-option>
                        <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 type="primary" icon="search" @click="qrCodeGeneration"
                        >手持终端地址配置
                        </el-button
                        >
                    </el-button-group>
                </el-form-item>
            </el-row>
        </el-form>
        <el-dialog title="手持终端服务IP地址设置" :visible.sync="qrCodeVisible" width="27%">
            <div id="qrCodeUrl"></div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="qrCodeVisible = false">取消</el-button>
            </span>
        </el-dialog>

        <el-table v-loading="loading" :data="list" style="width: 100%">
            <el-table-column label="序号" type="index"></el-table-column>
            <el-table-column label="IMEI唯一识别码" prop="imei" width="230"></el-table-column>
            <el-table-column
                label="登记说明"
                prop="remark"
            ></el-table-column>

            <el-table-column
                label="申请人"
                prop="companyName"
            ></el-table-column>

            <el-table-column label="审核状态" prop="isCheck" width="120">
                <template slot-scope="scope">
                    <span>{{ checkFlag[scope.row.isCheck] }}</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.isCheck !== 1"
                        @click.native.stop="checkDialog(scope.row)"
                    >审核
                    </el-button
                    >

                    <el-button
                        type="text"
                        size="small"
                        @click.native.stop="editDialog(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="审核"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :visible.sync="centerDialogVisible"
            width="30%"
            center
        >
            <el-row :gutter="20" class="el-row" type="flex">
                <el-col :span="6">
                    <div class="ao-text">
                        <span>IMEI：</span>
                    </div>
                </el-col>
                <el-col :span="12">
                    <el-input
                        size="small"
                        placeholder=""
                        v-model="checkQuery.imei"
                        disabled
                    ></el-input>
                </el-col>
            </el-row>
            <el-row :gutter="20" class="el-row" type="flex" style="margin-top: 10px">
                <el-col :span="6">
                    <div class="ao-text">
                        <span>登记说明：</span>
                    </div>
                </el-col>
                <el-col :span="12">
                    <el-input
                        size="small"
                        placeholder=""
                        v-model="checkQuery.remark"
                    ></el-input>
                </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer" style="margin-top: 40px">
                <el-button @click="centerDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="passRegister">通过</el-button>
                <el-button type="primary" @click="noPassRegister">不通过</el-button>
            </span>
        </el-dialog>
        <el-dialog
            title="编辑"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :visible.sync="editDialogVisible"
            width="30%"
            center
        >
            <el-row :gutter="20" class="el-row" type="flex">
                <el-col :span="6">
                    <div class="ao-text">
                        <span>IMEI：</span>
                    </div>
                </el-col>
                <el-col :span="12">
                    <el-input
                        size="small"
                        placeholder=""
                        v-model="checkQuery.imei"
                        disabled
                    ></el-input>
                </el-col>
            </el-row>
            <el-row :gutter="20" class="el-row" type="flex" style="margin-top: 10px">
                <el-col :span="6">
                    <div class="ao-text">
                        <span>登记说明：</span>
                    </div>
                </el-col>
                <el-col :span="12">
                    <el-input
                        size="small"
                        placeholder=""
                        v-model="checkQuery.remark"
                    ></el-input>
                </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer" style="margin-top: 40px">
                <el-button @click="editDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="confirmEdit">确定</el-button>
            </span>
        </el-dialog>
        <el-pagination
            :page-size="filterQuery.limit"
            @current-change="handleCurrentChange"
            layout="prev, pager, next"
            :total="total"
        ></el-pagination>
    </div>
</template>

<script>
import {registerList, check, deleterKey} from "../../../api/auth/deviceCheck";
import QRCode from 'qrcodejs2'
import axios from "axios";

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

            list: [],

            addDialogVisible: false,
            centerDialogVisible: false,
            check: "",
            checkQuery: {
                imei: null,
                remark: null,
            },
            editDialogVisible: false,
            qrCodeVisible: false,
            serverUrl: false,
        };
    },

    methods: {
        onReset() {
            this.$router.push({
                path: "",
            });
            this.filterQuery = {
                isCheck: "",
                page: 1,
                limit: 20,
            };
            this.getList();
        },

        onSubmit() {
            this.getList();
        },
        getList() {
            this.loading = true;
            registerList(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;
                });
        },
        editDialog(row) {
            this.checkQuery = row;
            this.editDialogVisible = true;
        },
        cancelDialog() {
            this.addDialogVisible = false;
        },

        handleCheckedChange(val) {
            console.log(val);
        },

        handleSizeChange(val) {
            this.filterQuery.limit = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.filterQuery.page = val;
            this.getList();
        },

        checkRegister() {
            this.loading = true;

            check(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.checkQuery = row;
            this.centerDialogVisible = true;
        },
        confirmEdit() {
            this.ch
            this.checkRegister();
        },

        deleteDialog(row) {
            let query = {
                id: row.id,
            }
            deleterKey(query)
                .then((response) => {
                    if (response.code === 20000) {
                        this.getList();
                        this.$message({
                            type: "success",
                            message: "删除成功！",
                        });
                    } else {
                        this.$message.warning("删除失败");
                        this.loading = false;
                    }
                })
                .catch(() => {
                });
        },


        passRegister() {
            this.checkQuery.isCheck = 1;
            this.checkRegister();
            this.centerDialogVisible = false;
        },
        noPassRegister() {
            this.checkQuery.isCheck = 2;
            this.checkRegister();
            this.centerDialogVisible = false;
        },
        qrCodeGeneration() {
            this.qrCodeVisible = true;
            this.$nextTick(function () {
                document.getElementById("qrCodeUrl").innerHTML = "";
                let qrCodeUrl = new QRCode("qrCodeUrl", {
                    width: 200,
                    height: 200,
                    text: this.serverUrl,
                    colorDark: "#409EFF",
                    colorLight: "#fff"
                });
            });
        }

    },

    mounted() {
    },
    created() {
        this.getList();
        axios.get("./config.json").then(res => {
            // 基础地址
            this.serverUrl = res.data.BASE_URL;
        });
    },

};
</script>
