<template>
    <div>
        <el-card class="el-card">
            <el-form :inline="true" :model="filterQuery" class="query-form" size="mini">
                <el-form-item class="query-form-item">
                    <el-input
                        v-model="filterQuery.thirdId"
                        placeholder="系统ID"
                    ></el-input>
                </el-form-item>
                <el-form-item class="query-form-item">
                    <el-input
                        v-model="filterQuery.thirdName"
                        placeholder="系统名称"
                    ></el-input>
                </el-form-item>
                <el-form-item class="query-form-item">
                    <el-select v-model="filterQuery.enabled" placeholder="状态">
                        <el-option label="全部" value=""></el-option>
                        <el-option label="已启用" value=1></el-option>
                        <el-option label="未启用" value=0></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="getList">查询</el-button>
                    </el-button-group>
                </el-form-item>
            </el-form>

            <el-table v-loading="loading" :data="list" style="width: 100%" highlight-current-row="true"
                      @current-change="handleCurrentChange">
                <el-table-column label="序号" type="index" width="120" fixed></el-table-column>
                <el-table-column label="系统ID" prop="thirdId" fixed></el-table-column>
                <el-table-column label="系统名称" prop="thirdName" fixed></el-table-column>
                <el-table-column label="是否启用" prop="enabled" fixed>
                    <template slot-scope="scope">
                        <span>{{ enableMap[scope.row.enabled] }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="备注" prop="remark" fixed show-overflow-tooltip></el-table-column>

                <el-table-column label="操作" fixed="right">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            size="small"
                            @click.native.stop="handleModifyClick(scope.row)"
                        >编辑
                        </el-button
                        >
                    </template>
                </el-table-column>
            </el-table>


            <el-dialog
                title="第三方系统设置"
                :visible.sync="modifyDialogVisible"
                width="70%"
                v-if="modifyDialogVisible"
            >
                <modifyDialog :inputQuery="inputQuery"></modifyDialog>
                <div style="text-align: center">
                    <el-button type="primary" size="small" icon="search" @click="onModifySubmit"
                    >提交
                    </el-button
                    >
                    <el-button type="primary" size="small" icon="search" @click="cancelDialog"
                    >取消
                    </el-button
                    >
                </div>
            </el-dialog>

        </el-card>
        <el-card class="el-card">

            <el-table v-loading="loading" :data="detailList" style="width: 100%">
                <el-table-column label="序号" type="index" show-overflow-tooltip="true"></el-table-column>
                <el-table-column label="接口名称" prop="name" show-overflow-tooltip="true"></el-table-column>
                <el-table-column label="接口地址" prop="value" width="400" show-overflow-tooltip></el-table-column>
                <el-table-column label="是否启用" prop="enabled" >
                    <template slot-scope="scope">
                        <span>{{ enableMap[scope.row.enabled] }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="备注" prop="remark" show-overflow-tooltip></el-table-column>

                <el-table-column label="操作" fixed="right">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            size="small"
                            @click.native.stop="handleDetailModifyClick(scope.row)"
                        >编辑
                        </el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog
                title="接口参数设置"
                :visible.sync="modifyDetailDialogVisible"
                width="70%"
                v-if="modifyDetailDialogVisible"
            >
                <modifyDetailDialog :inputDetailQuery="inputDetailQuery"></modifyDetailDialog>
                <div style="text-align: center">
                    <el-button type="primary" size="small" icon="search" @click="onDetailModifySubmit"
                    >提交
                    </el-button
                    >
                    <el-button type="primary" size="small" icon="search" @click="cancelDialog"
                    >取消
                    </el-button
                    >
                </div>
            </el-dialog>
            <el-pagination
                :page-size="filterQuery.limit"
                @current-change="handlePageChange"
                layout="prev, pager, next"
                :total="total"
            ></el-pagination>
        </el-card>

    </div>
</template>
<script>
    import {
        getBasicThirdSys,
        updateBasicThirdSys, getDetailBasicThirdSys, updateDetailBasicThirdSys
    } from "../../api/basic/basicThirdSys";

    import modifyDialog from "./BasicThirdSysModify";
    import modifyDetailDialog from "./BasicThirdSysDetailModify";

    export default {
        data() {
            return {
                filterQuery: {
                    thirdId: "",
                    thirdName: "",
                    enabled: null,
                    page: 1,
                    limit: 20,
                },
                modifyDialogVisible: false,
                modifyDetailDialogVisible: false,
                list: [],
                inputQuery: null,
                inputDetailQuery: null,
                enableMap: {
                    true: "是",
                    false: "否",
                },
                detailList: null,
                total: 0,
            };
        },

        methods: {
            onReset() {
                this.$router.push({
                    path: "",
                });
                this.filterQuery = {
                    thirdId: "",
                    thirdName: "",
                    enabled: null,
                    page: 1,
                    limit: 20,
                };
                this.getList();
            },
            cancelDialog() {
                this.modifyDialogVisible = false;
                this.modifyDetailDialogVisible = false;
            },
            handleCurrentChange(row) {
                this.getDetailList(row);
            },
            getList() {
                this.loading = true;
                getBasicThirdSys(this.filterQuery)
                    .then((response) => {
                        this.loading = false;
                        this.list = response.data.list || [];

                        this.detailList = [];
                        this.total = response.data.total || 0;
                    })
                    .catch(() => {
                        this.loading = false;
                        this.list = [];
                        this.total = 0;
                    });
            },


            getDetailList(row) {
                let query = {
                    thirdSysFk: row.thirdId
                };
                this.loading = true;
                getDetailBasicThirdSys(query)
                    .then((response) => {
                        this.loading = false;
                        this.detailList = response.data.list || [];
                        this.total = response.data.total || 0;
                    })
                    .catch(() => {
                        this.loading = false;
                        this.list = [];
                        this.total = 0;
                    });
            },


            onModifySubmit() {
                updateBasicThirdSys(this.inputQuery)
                    .then((response) => {
                        if (response.code == 20000) {
                            this.loading = false;
                            this.cancelDialog();
                            this.getList();
                            this.$message.success(response.data);
                        }

                    })
                    .catch(() => {
                        this.loading = false;
                        this.cancelDialog();
                    });
            },
            onDetailModifySubmit() {
                updateDetailBasicThirdSys(this.inputDetailQuery)
                    .then((response) => {
                        if (response.code == 20000) {
                            this.loading = false;
                            this.cancelDialog();
                            this.getList();
                            this.$message.success(response.data);
                        } else {
                            this.$message.error(response.message);
                        }

                    })
                    .catch(() => {
                        this.loading = false;
                        this.cancelDialog();
                    });
            },


            handleModifyClick(row) {
                this.modifyDialogVisible = true;
                this.inputQuery = row;
            },
            handleDetailModifyClick(row) {
                this.modifyDetailDialogVisible = true;
                this.inputDetailQuery = row;
            },
        },
        components: {
            modifyDialog, modifyDetailDialog
        },
        mounted() {
        },
        created() {
            this.getList();
        },
    };
</script>
<style scoped>

    .el-card {
        margin-right: 20px;
        /*transition: all .5s;*/
    }

</style>

