import { Component, Mixins, Vue, Watch } from 'vue-property-decorator'
import Url from "@/utils/Url";
import {
    State,
    Getter,
    Action,
    Mutation
} from "vuex-class";
import HomeParent from "@/views/home/Common/HomeParent";
import { ElTreeDataInterface, UserInterface,NodeGroupInterface  } from "@/views/home/Common/Types";
import CustomPage from "@/components/page.vue";
import {Form, TableColumn} from "view-design";
import {Message, Tree} from "element-ui";
import {Request} from "@/utils/Request";

@Component({
    components : {
        CustomPage
    }
})
export default class Users extends HomeParent {
    name : string = "Users";
    @Getter("user") UserInfo

    public allMenus : ElTreeDataInterface[] = []
    public allNodeGroup : NodeGroupInterface[] = [];
    public users : UserInterface[] = [];

    public columns : TableColumn[] = [{
        width: 80,
        key: 'id'
    }, {
        title : "nickname",
        key : "nickname"
    },{
        title : "account",
        key : "account"
    },{
        title : "操作",
        slot : "operation"
    }];
    public showMenuDialog : boolean = false;
    public showNodeDialog : boolean = false;

    public checkMenuDefault = [];
    public checkNodeDefault = [];


    public total : number = 0;
    public search : { page : number, size : number, keywords? : string } = {
        page : 1, size : 10, keywords : ""
    }
    public currentUser : UserInterface = null;

    @Watch("search.page")
    private _onPageChange() : void {
        this._getData()
    }

    @Watch("search.size")
    private _onPageSizeChange() : void {
        this.search.page = 1;
        this._getData()
    }

    public created() : void {
        this._getData();
    }

    public searchEvent() {
        this.search.page=1
        this._getData();
    }

    public addEmail(row : UserInterface){
        // alert(row.account)
        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 email...'
                    },
                    on: {
                        input: (val) => {
                            this.value = val;
                        }
                    }
                })
            },
            onOk :function() {
                if (!this.value || this.value == self.$store.getters.user.name || this.value == '') {
                    return;
                }
                let data = {email:this.value};
                let url = this.$sprintf(Url.UPDATE_EMAIL, row.id)
                Request('put', url,data).then((res:any)=>{
                    if (res.code == 200){
                        self.success()
                    }else {
                        self.error(res.message)
                    }
                })
            }
        })
    }


    public async initNodeData(row : UserInterface)  {
        this.currentUser = row;
        const res1:any = await Request('get', Url.NODE_GROUP)
        if (res1.code == 200){
            this.allNodeGroup = res1.data.data.map((item : any) => {
                return {id: item.id, label: item.name}
            })
            this.showNodeDialog = true;
        }else {
            console.log(res1.message)
        }
        let url = this.$sprintf(Url.SHOW_USER, row.id)
        const res2:any = await Request('get',url )
        if (res2.code == 200){
            this.checkNodeDefault = await res2.data.node_group.map((val : any)=>{
                return val.id
            });
        }else {
            console.log(res2.message)
        }
    }

    public async initMenuData(row){
        this.currentUser = row;
        const res1:any = await Request('get', Url.MENUS)
        if (res1.code == 200){
            this.allMenus = this._parseElTreeData(res1.data);
            this.showMenuDialog = true;
        }else {
            console.log(res1.message)
        }
        let url = this.$sprintf(Url.SHOW_MENU, row.id)
        const res2:any = await Request('get',url )
        if (res2.code == 200){
            this.checkMenuDefault = await res2.data.menu.map((val : any)=>{
                return val.id
            });
        }else {
            console.log(res2.message)
        }
    }


    public allotNodeGroup() : void {
        let tree : Tree  = this.$refs.treePower as Tree;
        if (this.checkNodeDefault.toString() == tree.getCheckedKeys().toString()){
            this.$Message.warning('未做任何修改');
            return
        }
        let url : string  = this.$sprintf(Url.ALLOT_NODE_GROUP, this.currentUser.id);

        let param = {'node_group_id' : tree.getCheckedKeys()};

        Request('post', url,param).then((res:any)=>{
            this.success()
            if (res.code == 200){
                this.checkNodeDefault =  res.data
            }
        })

    }

    public allotMenu(){
        let tree : Tree  = this.$refs.treeMenu as Tree;
        if (this.checkMenuDefault.toString() == tree.getCheckedKeys().toString()){
            this.$Message.warning('未做任何修改');
            return
        }
        let url : string  = this.$sprintf(Url.ALLOT_MENU, this.currentUser.id);

        let param = {'menu_ids' : tree.getCheckedKeys()};
        Request('post', url,param).then((res:any)=>{
            this.success()
            if (res.code == 200){
                this.checkMenuDefault =  res.data
            }
        })
    }

    public modalClose () {
        this.checkMenuDefault = []
        this.checkNodeDefault = []
    }


    private async _getData()  {
        const res:any = await Request('get', Url.USER,this.search)
        if (res.code == 200){
            this.users = res.data.data
            this.total = res.data.total
        }else {
            this.error(res.message)
        }
    }

    private _parseElTreeData(list : any[]) {
        return list.map((item : any) => {
            return {
                id : item.id, label : item.name,
                children : this._parseElTreeData(item.children)
            };
        });
    }

}