<template>
    <div class="op-page sms-template-page i-table">
        <Row class="i-table-top-btns">
            <Button type="primary" icon="md-add" @click="clickEvent('save',0)">增加</Button>
        </Row>
        <tree-table
                expand-key="name"
                :show-index="true"
                :expand-type="false"
                :selectable="false"
                :border="true"
                :columns="columns"
                :data="data"
                :stripe="true"
                :row-dblclick="dbclick"
                v-if="menuList.length>0" 
        >
            <template slot="likes" slot-scope="scope">
                <cs-button
                        :actions="parentMenus"
                        :data="scope.row"
                        styleCss="marginRight:5px"
                        size="small"
                        :click="clickEvent"
                        v-if="scope.row.level!=3"
                ></cs-button>
                <cs-button
                        :actions="childMenus"
                        :data="scope.row"
                        styleCss="marginRight:5px"
                        size="small"
                        :click="clickEvent"
                        v-else
                ></cs-button>
            </template>
        </tree-table>
        <Modal v-model="smsModal" :title="title"
                 width="50" @on-cancel="closeModal">
            <template-form @close-modal="closeModal" :tableVm="this" :model="model" :action="action"
                           ref="forms"></template-form>
            <div slot="footer"></div>
        </Modal>
    </div>
</template>
<script lang="ts">
    import {Component, Prop, Vue, Emit} from "vue-property-decorator";
    import {State , Mutation, Getter } from "vuex-class";
    import TemplateForm from "./menu-form.vue";
    import TreeTable from 'tree-table-vue'

    @Component({
        components: {
            TemplateForm, TreeTable
        }
    })
    export default class SmsTemplate extends Vue {
        @State private menuList! : Array<any>;

        title:string = "增加";
        smsModal: boolean = false;
        action: string = ";"
        model: any = {
            name: "",
            template: ""
        };
        columns: Array<any> = [
            {
                title: "菜单名称",
                key: "name",
                minWidth: "150px",
                align: "left"
            },
            {
                title: "菜单链接",
                key: "url",
                minWidth: "250px"
            },

            {
                title: "操作",
                key: "likes",
                minWidth: "200px",
                type: "template",
                template: "likes"
            }
        ];

        parentMenus: Array<any> = [
            {
                icon: "ios-eye",
                action: "detail",
                label: "详情",
                type: "info"
            },
            {
                icon: "ios-create-outline",
                action: "update",
                label: "编辑",
                type: "primary"
            },
            {
                icon: "md-trash",
                action: "delete",
                label: "删除",
                type: "error"
            },
            {
                icon: "md-add",
                action: "add",
                label: "新增子菜单",
                type: "success"
            }
        ];

        childMenus: Array<any> = [
            {
                icon: "ios-eye",
                action: "detail",
                label: "详情",
                type: "info"
            },
            {
                icon: "ios-create-outline",
                action: "update",
                label: "编辑",
                type: "primary"
            },
            {
                icon: "md-trash",
                action: "delete",
                label: "删除",
                type: "error"
            }
        ];
        data: Array<any> = [];

        showModal() {
            this.smsModal = !0;
        }

        closeModal() {
            (this.$refs["forms"] as any).resetFields();
            this.smsModal = !1;
        }

        deleteSuccessBack() {
            this.getData()
        }

        clickEvent(name: string, obj: any) {
            if (name == "delete") {
                this.$tools.deleteEntity(this, this.$msPrefix.base + "/api/v1/data/delete/menu/" + obj.id, this.deleteSuccessBack)
            } else {
                this.action = name;
                if (obj) {
                    if (name == "add") {   
                        this.title = "新增子菜单";               
                        this.model = {parentId: obj.id, name: "", template: "", priority: ""}
                    } else {
                        if(name == "update"){
                            this.title = "编辑";
                        }else{
                              this.title = "详情";
                        }                     
                      this.model = _.cloneDeep(obj);
                    }
                } else {
                    this.model = {
                        name: "",
                        template: ""
                    };
                }
                this.showModal();
            }

        }

        getData() {
            let url = this.$msPrefix.base + "/api/v1/data/list/menu?size=1000&page=0";
            this.getApiData("post", url, {}, res => {
                if (res.data.content.length > 0) {
                    let parentData = res.data.content.filter(item => {
                        return !item.parentId;
                    }).sort((item1, item2) => {
                        return item1.sort - item2.sort;
                    });
                    this.rescureData(parentData,1);

                    console.error('dasdada',parentData)
                    this.data = parentData;
                }
            });
        }

        rescureData(data,index){
            data.forEach(element => {
                element.level=index;
                if(element.children&&element.children.length>0){
                    this.rescureData(element.children,index+1)
                }
            });
        }

        dbclick() {
        }

        mounted() {
            this.getData();
        }
    }
</script>

