<template>
    <div>
      <el-card>
        <el-form  :model="filterQuery"  label-width="100px" size="mini">
            <el-row>
              <el-col :span="6">
                <el-form-item label="自助平台名称:" class="query-form-item">
                    <el-input v-model="filterQuery.name" placeholder="请输入自助平台名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <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-col>
            </el-row>
        </el-form>

        <el-table v-loading="loading" :data="list" border highlight-current-row 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" label-width="120px" :rules="formRules" ref="dataForm">
                <el-row :gutter="20" class="el-row" type="flex">
                    <el-col :span="12" class="el-col" type="flex">
                        <div>
                            <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="12" 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>

        <pagination
            v-show="total>0"
            :total="total"
            :limit.sync="filterQuery.limit"
            :page.sync="filterQuery.page"
            @pagination="handleCurrentChange"
        ></pagination>
      </el-card>
    </div>
</template>

<script>
import {
  getPlatform,
  updatePlatform,
  deletePlatform,
  testPlatformConnection, deletePlatforms
} from "@/api/userManage/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
                    };
                  deletePlatforms(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>
