<template>
    <div class="JNPF-common-layout">
        <div class="JNPF-common-layout-center JNPF-flex-main">
            <div class="JNPF-common-layout-main JNPF-flex-main">
                <div class="JNPF-common-head">
                    <div>
                        <el-button type="primary" icon="el-icon-plus"
                            @click="addIcon()">新增</el-button>
                        <el-button icon="el-icon-search" @click="reset()">查询</el-button>
                    </div>

                    <div class="JNPF-common-head-right">
                        <el-tooltip effect="dark" :content="$t('common.refresh')" placement="top">
                            <el-link icon="icon-ym icon-ym-Refresh JNPF-common-head-icon"
                                :underline="false" @click="initData()" />
                        </el-tooltip>
                    </div>
                </div>
                <JNPF-table v-loading="listLoading" :data="tableData">
                    <el-table-column prop="name" label="图标" width="80">
                        <template slot-scope="scope" sortable>
                            <img style="width: 40px;height: 40px;"
                                :src="minioPath+scope.row.icon"></img>
                        </template>
                    </el-table-column>
                    <el-table-column prop="icon" label="路径" />
                    <el-table-column label="操作" width="150" fixed="right">
                        <template slot-scope="scope" sortable>
                            <span style="color: #f56c6c;cursor: pointer;"
                                @click="deleteIcon(scope.row)">删除</span>
                        </template>
                    </el-table-column>
                </JNPF-table>
            </div>
        </div>
        <Form v-if="formVisible" ref="Form" @refreshDataList="getList" @back="getList()" />
    </div>
</template>

<script>
import {
    delSysTeam
} from "@/api/governmentCloud/serviceTeamManage/serviceTeamManage";
import { minioPath } from '@/utils/apiUrl'

import { getIconList, deleteIcon } from "@/api/governmentCloud/iconManagement/iconManagement";

import Form from "./Form";

export default {
    name: "icon-management",
    components: {
        Form
    },
    data() {
        return {
            minioPath: minioPath,
            tableData: [],
            listLoading: false,
            formVisible: false
        };
    },
    watch: {},
    created() {
        this.getList();
    },
    methods: {
        getList() {
            this.tableData = []
            this.listLoading = true;
            getIconList()
                .then(res => {
                    let list = []
                    res.data.forEach(url => {
                        let obj = {
                            icon: url
                        }
                        list.push(obj)
                    });
                    this.tableData = list;
                    this.listLoading = false;
                })
                .catch(() => {
                    this.listLoading = false;
                });
        },
        reset() {
            this.getList()
        },
        addIcon() {
            this.formVisible = true;
            this.$nextTick(() => {
                this.$refs.Form.init();
            });
        },
        deleteIcon(row) {
            const url = row.icon;
            const startIndex = url.indexOf("process/");
            const newUrl = url.substring(startIndex);
            deleteIcon(newUrl).then(res => {
                if (res.code == 200) {
                    this.$message({
                        message: "删除成功",
                        type: "success",
                        duration: 1500
                    });
                    this.getList();
                }
            });
        },
    }
};
</script>
