<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.name"
                        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 type="primary" icon="search" @click="handleAddClick"
                        >添加自助平台信息
                        </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="序号" type="index"></el-table-column>
            <el-table-column
                label="自助平台名称"
                prop="name"
                width="260"
            ></el-table-column>
            <el-table-column
                label="自助平台访问地址"
                prop="host"
                width="260"
            ></el-table-column>
            <el-table-column label="操作" width="220">
                <template slot-scope="scope">
                    <el-button
                        type="text"
                        size="small"
                        @click.native.stop="handleModifyClick(scope.row)"
                    >编辑
                    </el-button
                    >
                    <el-button
                        type="text"
                        size="small"
                        @click.native.stop="deleteDialog(scope.row)"
                    >删除
                    </el-button
                    >
                    <el-button
                        type="text"
                        size="small"
                        @click.native.stop="testConnection(scope.row)"
                    >测试连通
                    </el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <el-dialog :title=editTypeMap[editType] :visible.sync="formVisible" width="30%"
                   :close-on-click-modal="false"
                   :close-on-press-escape="false">
            <el-form :model="formData" :rules="formRules" 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="name">
                                <el-input
                                    v-model="formData.name"
                                    style="width: 200%"
                                    size="small"
                                ></el-input>

                            </el-form-item>
                        </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="host">
                                <el-input
                                    v-model="formData.host"
                                    style="width: 200%"
                                    size="small"
                                ></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
            </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-pagination
            :current-page="filterQuery.page"
            :page-size="filterQuery.limit"
            @current-change="handleCurrentChange"
            layout="prev, pager, next"
            :total="total"
        ></el-pagination>
    </div>
</template>

<script>
import {
    getPlatform,
    updatePlatform,
    deletePlatform,
    testPlatformConnection
} from "../../api/auth/platform";

export default {
    data() {
        return {
            filterQuery: {
                name: "",
                page: 1,
                limit: 20
            },
            value: "",
            total: 0,
            list: [],
            formVisible: false,
            loading: false,
            timer: "",
            formData: {
                id: "",
                name: "",
                host: ""
            },
            check: "",
            roles: [],
            formRules: {
                name: [{required: true, message: "请输入平台名称", trigger: "blur"}],
                host: [{required: true, message: "请输入平台访问地址", trigger: "blur"}]
            },
            editTypeMap: {
                "add": "新增自助平台",
                "edit": "平台信息编辑"
            },
            editType: null
        };
    },
    methods: {
        onReset() {
            this.$router.push({
                path: ""
            });
            this.filterQuery = {
                name: "",
                page: 1,
                limit: 20
            };
            this.getList();
        },
        resetForm() {
            this.$nextTick(() => {
                if (this.editType === "add") {
                    this.$refs["dataForm"].resetFields();
                }
                this.$refs["dataForm"].clearValidate();
            });
        },
        formSubmit() {
            this.$refs["dataForm"].validate((valid) => {
                if (valid) {
                    //验证连通性
                    testPlatformConnection({host: this.formData.host}).then((res) => {
                        if (res.code === 20000) {
                            this.loading = true;
                            updatePlatform(this.formData)
                                .then((response) => {
                                    if (response.code === 20000) {
                                        this.loading = false;
                                        this.cancelDialog();
                                        this.getList();
                                    } else {
                                        this.$message.error(response.message);
                                        this.loading = false;
                                    }
                                })
                                .catch(() => {
                                    this.cancelDialog();
                                    this.loading = false;
                                });
                        } else {
                            this.$message.error("连通失败，请检查自助平台访问地址！")
                        }
                    })
                }
            });
        },
        onSubmit() {
            this.filterQuery.page = 1;
            this.getList();
        },
        getList() {
            this.loading = true;
            getPlatform(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;
                });
        },

        cancelDialog() {
            this.formVisible = false;
        },
        handleAddClick() {
            this.editType = "add";
            this.formVisible = true;
            this.formData = {
                id: null,
                name: null,
                host: null
            };
        },
        handleModifyClick(row) {
            this.editType = "edit";
            this.formData = {
                id: row.id,
                name: row.name,
                host: row.host
            };
            this.resetForm();
            this.formVisible = true;
        },
        handleCurrentChange(val) {
            this.filterQuery.page = val;
            this.getList();
        },
        deleteDialog(row) {
            this.$confirm("确认删除该自助平台信息?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    let tQuery = {
                        id: row.id
                    };
                    deletePlatform(tQuery).then(() => {
                        this.getList();
                    });
                })
                .catch(() => {
                });
        },
        testConnection(row) {
            let params = {host: row.host};
            testPlatformConnection(params).then((res) => {
                if (res.code === 20000) {
                    this.$message.success("连接成功");
                    return true;
                } else {
                    this.$message.error("连通失败，请检查自助平台访问地址！");
                    return false;
                }
            })
        },
    },
    mounted() {
    },
    created() {
        this.getList();
    }
};
</script>
