<template>
   <Row type="flex" :gutter="0" justify="start" align="middle">
    <Col span="18">
        <Row v-if="!notpowerFlag" type="flex" :gutter="0" justify="start" align="middle">
            <Col  v-if="addDataBtnFlag">
                <Button  :custom-icon="mainButtonCustomIcon" :icon="mainButtonIcon"  type="primary" class="mainBtn" :disabled="!!addReadOnly"  @click="addData" >{{myConfig.mainButtonText}}</Button>
            </Col>
            <Col v-if="addDataBtnFlag">
                <Divider  type="vertical" class="dividercommon"/>
            </Col>
            <template v-for="(item,index) in btnItems"  :key="'btn_' + index">
            <Col  v-if="!moreFlag || index < myConfig.showNum"  style="margin-right:10px">
            <Button :icon="item.icon" :custom-icon="item.customIcon"   @click="action(item.name)" :disabled="!!item.readOnly">{{item.text}}</Button>
            </Col>
            </template>
            <Col v-if="moreFlag">
                <Dropdown>
                    <Button type="info" icon="ios-arrow-down"  > </Button>
                     <template #list>
                    <DropdownMenu>
                        <template  v-for="(item,index) in btnItems" :key="'btn_' + index">
                        <DropdownItem v-if="index > myConfig.showNum" :disabled="item.readOnly">
                            <Button :type="item.type" :icon="item.icon" :custom-icon="item.customIcon" :size="item.size" @click="action(item.name)" :disabled="!!item.readOnly">{{item.text}}</Button>
                        </DropdownItem>
                        </template>
                    </DropdownMenu>
                     </template>
                </Dropdown>
            </Col>
        </Row>
        <Row v-else type="flex" :gutter="0" justify="start" align="middle">
              <Icon custom="iconfont icon-custom-tishi"   size="20" color="#F3B352"/> <span style="margin-left: 12px;font-size:18px;color:#F3B352;font-weight:bold">注意：当前页面您没有操作权限</span>
        </Row>
    </Col>
    <Col span="6">
        <Row type="flex" :gutter="0" justify="end" align="middle">
            <Col v-if="billoperlog">
                <Button customIcon="iconfont icon-custom-baopidan" @click="openBilloperlog">操作日志</Button>
            </Col>
            <Col v-if="billoperlog">
                <Divider type="vertical" class="dividercommon"/>
            </Col>
            <Col>
                <PromptMessages modetype="2"  style="height:100%"/>
            </Col>
        </Row>

    </Col>
    </Row>
</template>

<script>
import PromptMessages from './promptmessage.vue';
export default {
    name:'listbtntoolbar',
    components:{
        PromptMessages
    },
    data () {
        return {
            myConfig:{
                showNum:10,
                enablePermissions:true,
                curHelpUrl:'',
                modulecode:'',
                items:[],
                mainButton:'addData',
                mainButtonText:'新增',
                mainButtonIcon:null,
                mainButtonCustomIcon:'iconfont icon-custom-add'
            },
            addDataBtnFlag:true,
            addReadOnly:false,
            showHelpBtn:false,
            showModuleCode:false,
            moreFlag:false,
            btnItems:[],
            ignoreModule:['downTemplate'],
            notpowerFlag:true,
            billoperlog:false,
        };
    },
    props:{
        config: {
            type:Object,
            default:null
        },
        moduleMethod:{
            type:Array,
            default: () => {
                return [];
            }
        },
    },
    created () {
        this.init();
    },
    methods: {
        init () {
            this.myConfig =  Object.assign({},this.myConfig, this.config);
            if (this.myConfig.ignoreModule) {
                let ignoreModule = this.$Method.copy(this.ignoreModule);
                let flag = true;
                this.myConfig.ignoreModule.forEach(el => {
                    flag = false;
                    this.ignoreModule.some(el2 => {
                        if (el2 == el) {
                            flag = true;
                            return true;
                        }
                    });
                    if (!flag) {
                        ignoreModule.push(el);
                    }
                });
            }
            if (this.myConfig.items && this.myConfig.items.length > 0) {
                    this.myConfig.items.forEach(el => {
                        if (el.name !== this.myConfig.mainButton) {
                            let tmp = this.$Method.copy(el);
                            if (tmp.readOnly === undefined) {
                                tmp.readOnly = false;
                            }
                            if (tmp.icon && tmp.icon.startsWith('custom')) {
                               tmp.customIcon='iconfont icon-' + tmp.icon;
                               tmp.icon = null;
                            }
                            this.btnItems.push(tmp);
                        } else {
                            if (el.icon && el.icon.startsWith('custom')) {
                                this.mainButtonCustomIcon = 'iconfont icon-' + el.icon;
                                this.mainButtonIcon = null;
                            } else {
                                this.mainButtonIcon = el.icon;
                                this.mainButtonCustomIcon = null;
                            }

                        }
                    });
            }

            if (this.myConfig.curHelpUrl) {
                this.showHelpBtn = true;
            }
            if (this.myConfig.modulecode) {
                this.showModuleCode = true;
            }

            if (this.myConfig.enablePermissions) {
                if (this.moduleMethod && this.moduleMethod.length > 0) {
                    let addIndex = this.moduleMethod.findIndex(el => el.name === this.myConfig.mainButton);
                    if (addIndex === -1) {
                        this.addDataBtnFlag = false;
                    } else {
                        this.addDataBtnFlag = true;
                    }
                    let btnItems = [];
                    this.moduleMethod.forEach(el =>{
                        let tmp = this.btnItems.find(el2 => el.name === el2.name);
                        if (tmp) {
                            btnItems.push(tmp);
                        }
                    });
                    if (btnItems.length === 0) {
                        this.btnItems = [];
                        this.notpowerFlag = true;
                    } else{
                        this.ignoreModule.forEach(el => {
                            let tmp = btnItems.find(el2 => el2.name === el)
                            if (!tmp) {
                                let tmp2 = this.btnItems.find(el3 => el3.name === el);
                                if (tmp2) {
                                    btnItems.push(tmp2);
                                }
                            }
                        });
                        let mainIndex = this.ignoreModule.findIndex(el => el === this.myConfig.mainButton);
                        if (mainIndex > -1) {
                            this.addDataBtnFlag = true;
                        }
                        this.btnItems = btnItems;
                        this.notpowerFlag = false;
                    }
                } else {
                    this.notpowerFlag = true;
                }
            } else {
                this.notpowerFlag = false;
            }
            if (this.btnItems.length > this.myConfig.showNum){
                this.moreFlag = true;
            }

            if (this.myConfig.billoperlog) {
                this.billoperlog = true;
            }
        },
        action(name) {
            let obj = {};
            obj.name = name;
            this.$emit('doAction', obj);
        },
        openBilloperlog() {
            this.doBtn('openBilloperlog');
        },

        setAllReadOnly (value) {
            let btn = this.$Method.copy(this.btnItems);
            this.addReadOnly = value;
            btn.forEach(el => {
                this.doCommonPro(el.name,'readOnly', value);
            });
        },
        setReadOnly (obj, value) {
            if (obj) {
                if (obj instanceof Array) {
                    obj.forEach(el => {
                        if (el === this.myConfig.mainButton) {
                            this.addReadOnly = value;
                        } else {
                            this.doCommonPro(el,'readOnly', value);
                        }
                    });
                } else {
                    if (obj === this.myConfig.mainButton) {
                        this.addReadOnly = value;
                    } else {
                        this.doCommonPro(obj,'readOnly', value);
                    }
                }
            }
        },
        doCommonPro (btnName, proName, value) {
            let index = this.btnItems.findIndex(el => el.name === btnName);
            if (index > -1) {
                let pro = {};
                pro[proName] = value;
                let temp = Object.assign({},this.btnItems[index], pro);
                this.btnItems.splice(index,1,temp);
            }
        },
        addData() {
            this.doBtn(this.myConfig.mainButton);
        },
        doBtn(name) {
            let obj = {};
            obj.name = name;
            this.$emit('doAction', obj);
        },
        changedStatus(value) {
            if (this.myConfig.status && this.myConfig.status[value]) {
                let btn = this.$Method.copy(this.btnItems);
                btn.forEach(el => {
                    let tmp = this.myConfig.status[value].find(el2 => el2 === el.name);
                    if (tmp) {
                        if (el.readOnly !== false) {
                            this.doCommonPro(el.name,'readOnly', false);
                        }
                    } else {
                        if (el.readOnly !== true) {
                            this.doCommonPro(el.name,'readOnly', true);
                        }
                    }
                });
            }
        }
    }

};
</script>
<style lang="less" scoped>
        .dividercommon {
            margin:1px 12px 0 12px;
            height:32px;
        }
</style>
