<template>
    <div class="go-tool-bar"  :id="toolBarId">
        <div class="btn_container">
            <div
                :key="index"
                :btnIndex="index"
                class="btn-item"
                :class="item.id"
                :state="itemState(item)"
                v-show="item.show"
                v-for="(item,index) of btns"
                :style="btnItemStyle"
            >
                <!--普通按钮-->
                <go-btn
                    @btnClick="clickToolBtnEv"
                    v-if="item.type === 'btn' || item.type == null"
                    :btnItem="item"
                    :show="item.show"
                    :disabled="disabled||item.disabled"
                ></go-btn>

                <!--图标-->
                <go-btn-icon
                    @btnClick="clickToolBtnEv" v-if="item.type === 'iconBtn'"
                    :btnItem="item"
                    :disabled="disabled||item.disabled"
                    :content="item.content"
                ></go-btn-icon>

                <!--下拉按钮 鼠标移入下拉-->
                <go-btn-select
                    @btnClick="clickToolBtnEv"
                    v-if="item.type === 'btnSelect'"
                    :item="item"
                    :disabled="disabled||item.disabled"
                ></go-btn-select>

                <!--checkbox按钮-->
                <go-btn-check   :disabled="disabled||item.disabled" @checkClick="checkClick"  :btnItem="item" v-if="item.type === 'checkBox'"></go-btn-check>


                <!--按钮组合-->
                <go-btn-group
                    @btnClick="clickToolBtnEv"
                    v-if="item.type === 'groupBtns'"
                    :item="item"
                    :disabled="disabled||item.disabled"
                ></go-btn-group>

                <!--导入excel的按钮-->
                <go-upload
                    :disabled="disabled||item.disabled"
                    :maxSize="item.maxSize"
                    :multiple="item.multiple || true"
                    @beforeUpload="beforeUpload"
                    :fileType="getFileType(item)"
                    @uploadSuccess="uploadSuccess"
                    v-if="item.type == 'uploadExcel' || item.type === 'upload'||item.type==='uploadImg'"
                    :item="item"
                    :action="item.action"
                ></go-upload>

            </div>
            <Dropdown class="more_icon" @on-click="handleOpen" :placement="mainPlacement">
                <a href="javascript:void(0)">
                    <Badge v-show="showMoreIcon" dot>
                        <div  class="goingicon go-gengduo1" style="margin-left: 8px;float: left;cursor: pointer;"></div>
                    </Badge>
                </a>
                <DropdownMenu slot="list">
                    <!--普通下拉按钮-->
                    <DropdownItem   v-show="sonItem.show!==false"  v-if="sonItem&&(sonItem.type === 'btn' || sonItem.type == null)"  :name="sonItem.id" :disabled="disabled||sonItem.disabled" :key="x" v-for="(sonItem,x) of moreBtns">{{sonItem.text}}</DropdownItem>
                    <!--多按钮集合-->
                    <Dropdown  v-show="sonItem.show!==false"  v-if="sonItem&&(sonItem.type === 'btnSelect'||sonItem.type === 'groupBtns')"  :placement="subPlacement" v-for="(sonItem,x) of moreBtns">
                        <DropdownItem>
                            <div class="left">{{sonItem.text||'组合按钮'}}</div>
                            <div class="right" style="position: absolute;top: 9px;right: 6px;"><Icon type="ios-arrow-forward" style="float: right;"></Icon></div>
                        </DropdownItem>
                        <DropdownMenu slot="list">
                            <DropdownItem  :name="sonItemObj.id"  v-show="sonItemObj.imgType!=='splitLine'"  v-for="sonItemObj in sonItem['btns']">{{sonItemObj.text}}</DropdownItem>
                        </DropdownMenu>
                    </Dropdown>
                </DropdownMenu>
            </Dropdown>
        </div>





        <div class="tool_right_area">
            <slot name="right_area"></slot>
        </div>


    </div>
</template>

<script>
    import {GoingUtils,AssertUtils} from "goingutils";
    import GoBtnGroup from "./go-btn-group";
    import GoBtnIcon from './go-btn-icon';
    import GoBtn from "./go-btn";
    import GoUpload from "./go-upload";
    import goBtnCheck from './go-btn-check';



    export default {
        created: function () {

        },
        name: "go-tool-bar",
        data: function () {
            return {
                showMoreIcon:false,
                rightAreaWid:0,
                toolBarId: GoingUtils.getUUid(12),
                padding:30,
                moreBtns:[],
            };
        },
        props: {
            placement: {
                type:String,
                default: "bottom"
            },
            disabled: {
                type:Boolean,
                default: false
            },
            acl: {
                type:Boolean,
                default: false
            },
            prefix: {
                type:String,
                default: ""
            },
            align: {
                type:String,
                default: "left"
            },
            btns: {
                type: Array,
                default: () => []
            },
            type: {
                type:String,
                default: "customer"
            }
        },
        computed: {
            mainPlacement(){
                if(this.placement!=='bottom'){
                    return 'bottom-end';
                }else{
                    return 'bottom';
                }
            },
            //子菜单 显示到左边
            subPlacement(){
                if(this.placement!=='bottom'){
                    return 'left-start';
                }else{
                    return "right-start";
                }
            },
            //按钮样式
            btnItemStyle() {
                if (this.align === "right") {
                    return {float: "right"};
                }
                return "";
            }
        },
        methods: {
            //设置按钮的显示 隐藏
            hideBtns(btns,flag=true){
                //进行隐藏操作
                if (flag) {
                    btns.forEach((aryEl) => {
                        $("#" + this.toolBarId).find("." + aryEl).hide();
                    });
                } else {
                    //进行显示操作
                    btns.forEach((aryEl) => {
                        $("#" + this.toolBarId).find("." + aryEl).show();
                    });
                }
            },
            //控制按照是否可以点击
            disBtns(btns,flag=true){
                //进行不可以点击操作
                if(flag){
                    btns.forEach((aryEl) => {
                        $("#" + this.toolBarId).find("div[btnid='"+aryEl+"']").attr('disabled',"disabled");
                    });
                }else{
               //进行可以点击操作
                    btns.forEach((aryEl) => {
                        $("#" + this.toolBarId).find("div[btnid='"+aryEl+"']").removeAttr('disabled');
                    });
                }
            },
            //设置按钮的显示隐藏状态
            itemState({show}){
                if(show===false){
                    return 'false';
                }else{
                    return 'true';
                }
            },
            //改变右边区域都宽度
            changeRightArea(appendWidth){
                if(parseFloat(this.rightAreaWid)>0){
                    //变更左侧按钮都样式
                    $("#"+this.toolBarId).find(".btn_container").css("width",`calc(100% - ${parseFloat(this.rightAreaWid+appendWidth)+this.padding}px)`);
                    //变更右侧按钮都样式
                    $("#"+this.toolBarId).find(".tool_right_area").css("width",this.rightAreaWid+appendWidth);
                    setTimeout(()=>{
                        this.setMoreBtns();
                    },300);
                }
            },
            //点击按钮事件
            handleOpen(btnId){
                if(AssertUtils.isNotEmpty(btnId)){
                    this.$emit("clickToolBtn", btnId);
                }
            },
            //checkbox点击事件
            checkClick({btnId,value}){
                this.$emit("checkClick", {btnId,value});
            },
            //获取文件类型
            getFileType(item){
                if (item&&item.type === "uploadExcel") {
                    return 'excel';
                }else if(item&&item.type==='uploadImg'){
                    return 'img';
                }else{
                    return '*';
                }
            },
            //上传之前调用
            beforeUpload({item}) {
                this.$emit("beforeUpload", {item});
            },
            //上传成功后的回调
            uploadSuccess({res,item}) {
                this.$emit("uploadSuccess", {res,item});
            },
            //按钮点击事件回掉
            clickToolBtnEv: function (btnId) {
                if (AssertUtils.isNotEmpty(this.prefix)) {
                    this.$emit("clickToolBtn", this.prefix + "_" + btnId);
                } else {
                    this.$emit("clickToolBtn", btnId);
                }
            },
            setMoreBtns(){
                $("#"+this.toolBarId).find(".btn_container").css("overflow","hidden");
                $("#"+this.toolBarId).find(".btn-item[state='true']").show();
                //如果高度大于30 表示按钮存在分页 则需要分页
                let newBtns=[];let count=0;
                $("#"+this.toolBarId).find(".btn-item[state='true']").each((index,itemObj)=>{
                    if($(itemObj).get(0).offsetTop>10&&$(itemObj).attr("btnIndex")){
                        ++count;
                        $(itemObj).hide();
                        newBtns.push(this.btns[$(itemObj).attr("btnIndex")]);
                    }else{
                        $(itemObj).show();
                    }
                });
                if(count>0){
                    this.showMoreIcon=true;
                }else{
                    this.showMoreIcon=false;
                }
                this.moreBtns=[...newBtns];
                $("#"+this.toolBarId).find(".btn_container").css("overflow","inherit");
            }
        },
        mounted() {
            this.$nextTick(()=>{
                let rightArea=$("#"+this.toolBarId).find(".tool_right_area");
                if(rightArea){
                    let rightAreaWid=rightArea.children(":first").width();
                    if(parseFloat(rightAreaWid)>0){
                        this.rightAreaWid=rightAreaWid;
                        rightArea.width(rightAreaWid);rightArea.children(":first").width("auto").css("float","right");
                        $("#"+this.toolBarId).find(".btn_container").css("width",`calc(100% - ${parseFloat(rightAreaWid)+this.padding}px)`);
                    }
                }
                this.setMoreBtns();
            });
            $(window).resize(()=>{
                this.setMoreBtns();
            });
        },
        components: {
            GoBtn,
            GoUpload,
            GoBtnIcon,
            GoBtnGroup,
            goBtnCheck,
        },
        watch: {

        },
        beforeDestroy() {

        }
    };
</script>
