<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="mainSys" fixed>
                    <template slot-scope="scope">
                        <span>{{ enableMap[scope.row.mainSys] }}</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="第三方系统设置"
                :close-on-click-modal="false"
                :close-on-press-escape="false"
                :visible.sync="modifyDialogVisible"
                width="60%"
                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="enabled">
                    <template slot-scope="scope">
                        <span>{{ enableMap[scope.row.enabled] }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="数据来源" prop="enabled">
                    <template slot-scope="scope">
                        <span>{{ dataMap[scope.row.fromType] }}</span>
                    </template>
                </el-table-column>

                <!--<el-table-column label="本地缓存" prop="itrCache">-->
                <!--<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="接口地址" prop="value" width="400" 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="接口参数设置"
                :close-on-click-modal="false"
                :close-on-press-escape="false"
                :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"
                :current-page="filterQuery.page"
            ></el-pagination>


            <div style="margin-top: 18px ;  color: #F71616;">
                <span>重要提示：本页功能仅供技术提供方修改&nbsp;</span>
            </div>
        </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: "1",
                page: 1,
                limit: 20,
            },
            modifyDialogVisible: false,
            modifyDetailDialogVisible: false,
            list: [],
            inputQuery: null,
            inputDetailQuery: null,
            enableMap: {
                true: "是",
                false: "否",
            },
            dataMap: {
                0: "接口实时获取",
                1: "文件缓存",
                2: "第三方上传缓存",
                3: "接口本地缓存"
            },
            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) {
            if (row.mainSys) {
                this.detailList = [];
            } else {
                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;
                    // this.getDetailList(this.list[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);
                    } else {
                        this.$message.error(response.message);
                    }

                })
                .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>

