<template>
   <Row type="flex" :gutter="0" justify="start" align="middle"> 
        <Col span="14">
            <Row type="flex" :gutter="0" justify="start" align="middle"> 
                <Col  v-if="addDataBtnFlag">
                    <Button  customIcon="iconfont icon-custom-add"  type="primary"  @click="addData" >新增</Button>   
                </Col>
                <Col v-if="addDataBtnFlag ">
                    <Divider  type="vertical" class="dividercommon"/>
                </Col>
                <Col v-for="(item,index) in btnItems" :key="'btn_' + index" v-show="!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>
                <Col v-if="moreFlag">
                    <Dropdown>
                        <Button type="info" icon="ios-arrow-down"> </Button>
                        <template #list>
                            <DropdownMenu>
                                    <DropdownItem v-for="(item,index) in btnItems" :key="'btn_' + index"  v-show="index >= myConfig.showNum" :disabled="item.readOnly">
                                        <Button type="text" :icon="item.icon" :custom-icon="item.customIcon" :size="item.size" @click="action(item.name)" :disabled="!!item.readOnly" >{{item.text}}</Button>
                                    </DropdownItem>
                            </DropdownMenu>
                        </template>
                    </Dropdown>
                </Col>
            </Row>
        </Col>
        <Col span="10">
            <Row type="flex" :gutter="0" justify="end" align="middle"> 
                <Col v-if="billisworkflow">
                    <Button customIcon="iconfont icon-custom-flow" type="info" @click="openWorkFlow">工作流</Button>   
                </Col>
                <Col v-if="billisworkflow">
                    <Divider  type="vertical" class="dividercommon"/>
                </Col>
                <Col v-if="billapproval">
                    <Button customIcon="iconfont icon-custom-baopidan" @click="openBillapproval">报批单</Button>   
                </Col>
               
                <Col v-if="billapproval">
                    <Divider  type="vertical" class="dividercommon"/>
                </Col>
                <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 v-if="printmodel">
                    <Button customIcon="iconfont icon-custom-print" @click="printBillData">打印</Button>   
                </Col>
                <Col v-if="printmodel">
                    <Divider  type="vertical" class="dividercommon"/>
                </Col>
                <Col v-if="showPreNex" style="margin-right:10px">
                <Button style="padding-left:0px;padding-right:0px" customIcon="iconfont icon-custom-pre" type="text"  @click="preBill">上一单</Button>   
                </Col>
                <Col v-if="showPreNex"  >
                <Button style="padding-left:0px;padding-right:0px" customIcon="iconfont icon-custom-next" type="text"   @click="nextBill" >下一单</Button>   
                </Col>
                <Col>
                    <Divider  type="vertical" class="dividercommon"/>
                </Col>
                <Col >
                    <Button style="padding-left:0px;padding-right:0px" customIcon="iconfont icon-custom-back" type="text"  @click="backData">返回</Button>   
                </Col>
            </Row>
        </Col>
    </Row>
</template>

<script>
export default {
    name:'mdetailbtntoolbar',
    data () {
        return {
            myConfig:{
                showNum:5,
                enablePermissions:true,
                items:[]
            },
            addDataBtnFlag:true,
            moreFlag:false,
            showPreNex:true,
            btnItems:[],
            apporval:[{
                name:'submitData',
                text:'提交'
            },{
                name:'revokeData',
                text:'撤回'
            },{
                name:'approveData',
                text:'审批'
            }],
            ignoreModule:['downTemplate'],

            billisworkflow:false,
            billapproval:false,
            billoperlog:false,
            printmodel: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 !== 'addData') {
                            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);
                        }
                    });

                    let addIndex2 = this.myConfig.items.findIndex(el => el.name === 'addData');
                    if (addIndex2 === -1) {
                        this.addDataBtnFlag = false;
                    } else {
                         this.addDataBtnFlag = true;
                    }
            }

            if (this.myConfig.billisworkflow && this.myConfig.billisworkflow.startsWith('Y')) {
                this.billisworkflow = true;
            }

            if (this.myConfig.billapproval) {
                this.billapproval = true;
            }

            if (this.myConfig.billoperlog) {
                this.billoperlog = true;
            }
            if (this.myConfig.showPreNex !== undefined) {
                this.showPreNex = this.myConfig.showPreNex;
            }
            if (this.myConfig.printmodel || this.myConfig.contprintmodel) {
                this.printmodel = true;
            }
            
            if (this.myConfig.enablePermissions) {
                if (this.moduleMethod) {
                    let addIndex = this.moduleMethod.findIndex(el => el.name === 'addData');
                    if (addIndex === -1) {
                        this.addDataBtnFlag = false;
                    } else {
                        this.addDataBtnFlag = true;
                    }
                    let btnItems = [];
                    if (this.moduleMethod.length > 0) {
                        this.moduleMethod.forEach(el =>{
                            let tmp = this.btnItems.find(el2 => el.name === el2.name); 
                            if (tmp) {
                                if(this.billisworkflow) {
                                    if (tmp.name !== 'auditData') {
                                        btnItems.push(tmp);
                                    }
                                } else {
                                    btnItems.push(tmp);
                                }
                            }
                        });
                    }
                    this.ignoreModule.forEach(el => {
                        let culrtmp = btnItems.find(el3 => el3.name === el);
                        if (!culrtmp){
                            let tmp = this.btnItems.find(el2 => el2.name === el);
                            if (tmp) {
                                btnItems.push(tmp);
                            }
                        }
                    });
                    this.btnItems = btnItems;
                }
            }
            if (this.btnItems.length > this.myConfig.showNum){
                this.moreFlag = true;
            }
           
        },
        action(name) {
            let obj = {};
            obj.name = name;
            this.$emit('doAction', obj);
        },

        setAllReadOnly (value) {
            let btn = this.$Method.copy(this.btnItems);
            btn.forEach(el => {
                this.doCommonPro(el.name,'readOnly', value);
            });
        },
        setReadOnly (obj, value) {
            if (obj) {
                if (obj instanceof Array) {
                    obj.forEach(el => {
                        this.doCommonPro(el,'readOnly', value);
                    });
                } else {
                    this.doCommonPro(obj,'readOnly', value);
                }
            }
        },
        doCommonPro (btnName, proName, value) {
            let index = this.btnItems.findIndex(el => el.name === btnName);
            if (index > -1) {
                let index2 = this.ignoreModule.findIndex(el2 => el2 === btnName);
                if (index2 > -1) {
                    return;
                }   
                let pro = {};
                pro[proName] = value;
                let temp = Object.assign({},this.btnItems[index], pro);
                this.btnItems.splice(index,1,temp);
            }
        },
        addData() {
            this.doBtn('addData');
        },
        preBill() {
            this.doBtn('preBill');
        },
        nextBill() {
            this.doBtn('nextBill');
        },
        backData() {
            this.doBtn('backData');
        },
        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);
                        }
                    }
                });
            }
        },
        openWorkFlow() {
            this.doBtn('openWorkFlow');
        },
        openBillapproval() {
            this.doBtn('openBillapproval');
        },
        openBilloperlog() {
            this.doBtn('openBilloperlog');
        },
        printBillData() {
            this.doBtn('printBillData');
        }
            
    }

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