import { Component, Mixins, Vue, Watch } from 'vue-property-decorator'
import Url, { AdminUrl } from "@/utils/Url";
import {
    State,
    Getter,
    Action,
    Mutation,
} from "vuex-class";
import Types from "@/views/admin/store/types";
import HomeParent, { BreadItem } from "@/views/home/Common/HomeParent";
import { EVENT_TYPE, MenuInterface, ProjectInterface } from "@/views/home/Common/Types";
import { Route, RouteRecord } from "vue-router";
import { Menu } from "view-design";



@Component
export default class Layout extends HomeParent {

    public siteLogo: object = {}
    public siteMarquee: object[] = [];
    public visible: boolean = false;
    public myMenus: MenuInterface[] = [];
    public routes: BreadItem[] = [];
    public myProject: ProjectInterface[] = [];


    public created() {
        this._getMyMenu()
        // this._getMyProject()
        // this.$bus.$on(EVENT_TYPE.UPDATE_BREAD_ITEM, this._updateRoutes.bind(this));
        // this.$bus.$on(EVENT_TYPE.UPDATE_MY_PROJECT, this._getMyProject.bind(this));
    }

    @Watch("$route", {immediate: true, deep: true})
    private _watchRoute(route: Route): void {
        this.routes.length = 0;
        route.matched.forEach((item: RouteRecord) => {
            let ret: BreadItem = this.$router.resolve({name: item.name, params: route.params});
            ret.name = item.meta.title;
            this.routes.push(ret);
            // console.log(ret);
        });
    }


    public get isLogin() {
        return this.$store.state.user.token.length > 0;
    }

    public onDropdownEvent(name: string): void {
        switch (name) {
            case "logout" : this.logout();break;
            case "updateName" : this.updateName();break;
        }
    }

    public logout() {
        this.$http.get(Url.LOGOUT).then(res => {
            this._push('/login')
        });
    }

    public updateName(){
        let self = this;
        this.$Modal.confirm({
            title:"修改昵称",
            render: function(h) {
                return h('Input', {
                    props: {
                        value: self.$store.getters.user.name,
                        autofocus: true,
                        placeholder: 'Please enter your name...'
                    },
                    on: {
                        input: (val) => {
                            this.value = val;
                        }
                    }
                })
            },
            onOk :function() {
                self.onVisibleChange(true)
                if (!this.value || this.value == self.$store.getters.user.name || this.value == '') {
                    return;
                }
                let data = {name:this.value};
                self.$http.put(Url.UPDATE_MY_NAME,data).then(res=>{
                    self.success('修改成功',()=>{
                        self.$store.getters.user.name = res.data.name
                        let obj = JSON.parse(window.localStorage.getItem('home'));
                        obj.user.user.name = res.data.name
                        window.localStorage.setItem('home',JSON.stringify(obj));
                    })
                }).catch((err)=>{
                    self.error(err)
                })
            }
        })
    }

    /**
     * 跳转页面时关闭dropdown
     * @param name
     */
    public onMenuChange(name): void {
        this.visible = false;
    }

    /**
     * 切换dropdown显示状态
     * @param st
     */
    public onVisibleChange(st: boolean) : void {
        this.visible = !this.visible;
    }


    private _getMyMenu() {
            this.myMenus = [
                {id:1,name:'用户管理',url:'/user',children:[
                        {id:2,name:'用户列表',url:'/user/list',children:[]},
                        {id:3,name:'用户权限',url:'/user/node',children:[]},
                        {id:4,name:'用户菜单',url:'/user/menu',children:[]},
                    ]},
                {id:5,name:'表格',url:'/table',children:[
                        {id:6,name:'普通表格',url:'/table/base',children:[]},
                        {id:7,name:'复杂表格',url:'/table/complex',children:[]},
                    ]}
            ]
    }

    private _getMyProject() {
        this.$http.get(Url.MY_PROJECT).then(res => {
            this.myProject = res.data;
        });
    }

    private _parseTreeData(list: any[]) {
        return list.map((item: any) => {
            if (item.children.length > 0) {
                item._showChildren = true;
                item.children = this._parseTreeData(item.children);
            }
            return item
        });
    }

    private _updateRoutes(name: string, idx: number): void {
        if (this.routes.length >= idx - 1) {
            this.routes[idx].name = name;
        }
    }
}