<!--
功能列表
@Author: linqian
@Date: 2021-05-17 16:10
-->
<template>
    <dg-card header="功能列表">
        <!-- 搜索项 -->
        <el-form :inline="true" class="search-form">
            <el-form-item label="功能名称">
                <el-input v-model="form.name.value" clearable></el-input>
            </el-form-item>
            <el-form-item label="在用状态">
                <dg-select v-model="form.isActive.value" clearable code="DM_APPLY_STATUS"></dg-select>
            </el-form-item>
            <el-form-item>
                <dg-button type="primary" @click="handleSearch" icon="el-icon-search">查询</dg-button>
                <!-- <dg-button type="primary" @click="handleReset" icon="el-icon-refresh-right">重置</dg-button> -->
            </el-form-item>
        </el-form>

        <!-- 操作 -->
        <dg-row zebra="10px">
            <dg-button type="primary" icon="el-icon-circle-plus-outline" @click="handleAdd" v-if="appRow.id"
                >新增</dg-button
            >
        </dg-row>
        <!-- 表格 -->
        <dg-table ref="table" :url="tableUrl" :condition="form" border row-key="id" :before-quest="beforeQuest">
            <dg-table-column type="index" width="75" label="序号" align="center"></dg-table-column>
            <dg-table-column prop="code" label="功能编号" align="center"></dg-table-column>
            <dg-table-column prop="name" label="功能名称" align="center"></dg-table-column>
            <dg-table-column prop="parentId" label="上级功能编号" align="center"></dg-table-column>
            <dg-table-column prop="isActive" label="在用状态" align="center" code="DM_APPLY_STATUS"></dg-table-column>
            <dg-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <div class="u-table__operation">
                        <el-tooltip
                            v-for="(item, index) in optList"
                            :key="index"
                            :content="item.tooltip"
                            effect="dark"
                            placement="top-end"
                        >
                            <i :class="item.icon" @click="item.on(scope.row)"></i>
                        </el-tooltip>
                    </div>
                </template>
            </dg-table-column>
        </dg-table>
    </dg-card>
</template>

<script>
import addFuncForm from "./add-func-form";
// import { funcRestApi } from "@/api/application";
export default {
    components: {},
    props: {
        appRow: Object
    },
    data() {
        return {
            form: {
                name: {
                    value: "",
                    op: "like"
                },
                appId: {
                    value: "",
                    op: "="
                },
                isActive: {
                    value: "",
                    op: "="
                }
            },
            optList: [
                { icon: "el-icon-edit", tooltip: "修改", on: this.handleEdit },
                { icon: "el-icon-document", tooltip: "详情", on: this.handleViewDetail },
                { icon: "el-icon-delete", tooltip: "删除", on: this.handleDelete }
            ],
            // tableUrl: funcRestApi.base + "/search"
        };
    },
    computed: {},
    methods: {
        /**
         * 编辑
         */
        handleEdit(row) {
            this.handleOpenForm(row.id, "编辑");
        },
        /**
         * 查看详情
         */
        handleViewDetail(row) {
            this.handleOpenForm(row.id, "详情", true);
        },
        /**
         * 删除
         */
        handleDelete(row) {
            this.$dgConfirm(`是否确认删除该条功能！`, "提示", {}).then(() => {
                 funcRestApi.del(row.id).then((res) => {
                    this.$message.success(res);
                    this.handleSearch();
                });
            });
        },
        /**
         * 查询
         */
        handleSearch() {
            this.$refs.table.searchForm();
        },
        /**
         * 重置
         */
        handleReset() {
            for (const key in this.form) {
                this.form[key].value = "";
            }
        },
        /**
         * 新增
         */
        handleAdd() {
            this.handleOpenForm(void 0, "新增");
        },
        handleOpenForm(id, title, isDetail = false) {
            const vm = this;
            const layer = this.$dgLayer({
                title,
                content: addFuncForm,
                props: {
                    id,
                    isDetail,
                    app: vm.appRow
                },
                btn: ["确定", "取消"],
                btnAlign: "r",
                yes: (index) => {
                    let _layer = layer.$children[0];
                     _layer.saveForm().then((res) => {
                        layer.close(index);
                        vm.handleSearch();
                    });
                },

                area: ["750px", "500px"]
            });
        },
        beforeQuest(res) {
            const { content, totalElements } = res.data;
            const result = {
                data: {
                    content: this.appRow.id ? content : [],
                    totalElements
                }
            };
            return result;
        }
    },
    created() {
        this.form.appId.value = this.appRow.id;
    },
    mounted() {}
};
</script>

<style lang='scss'>
</style>