<template>
    <Row type="flex" :gutter="0" :justify="justify" align="middle"> 
        <template v-for="(item,index) in btnItems" :key="'btn_' + index">
        <Col   v-if="!moreFlag || index < showIndex">
           <Button type="text" :icon="item.icon" size="small" :custom-icon="item.customIcon"   :disabled="!!item.readOnly" @click="action(item.name)"><span :style="fontStyle">{{item.text}}</span></Button>
        </Col>
        <Col  v-if="index < showIndex">
         <Divider  type="vertical"  style=" margin:0 10px 0 10px;height:12px;"/>
        </Col>
        </template>
        <Col v-if="moreFlag">
            <Dropdown  size="small" :transfer="transferFlag" >
                 <Button type="text"><span style="color:#AF292E;">更多</span></Button>
                 <template #list>
                <DropdownMenu>
                     <DropdownItem>
                         <template v-for="(item,index) in btnItems" :key="'btn_' + index">
                            <Button  v-if="index > showIndex" type="text" size="small" :icon="item.icon" :custom-icon="item.customIcon"  :disabled="!!item.readOnly"  @click="action(item.name)" ><span :style="fontStyle">{{item.text}}</span></Button>
                         </template>
                     </DropdownItem>
                </DropdownMenu>
                 </template>
            </Dropdown>
        </Col>
    </Row>
</template>

<script>
export default {
    name:'mrowbtntoolbar',
    data () {
        return {
            myConfig:{
                size:'default',
                items:[]
            },
            moreFlag:false,
            transferFlag:true,
            btnItems:[],
            showNum:3,
            showIndex:3,
            colSpan:24,
            justify:'center',
            fontStyle:'color:#AF292E'
        };
    },
    props:{
        config: {
            type:Object,
            default:null
        },
        rowIndex: {
          type:[String,Number],
          default:null  
        },
        rowData: {
          type:Object,
          default:null  
        }
    },
    created () {
        this.init();
    },
    methods: {
        init () {
            this.myConfig =  Object.assign({},this.myConfig, this.config);
            // 处理按钮
            if (this.myConfig.items && this.myConfig.items.length > 0) {
                 this.btnItems = this.myConfig.items;
            }

            if (this.myConfig.fontStyle !== undefined) {
                this.fontStyle = this.myConfig.fontStyle;
            }

            if (this.myConfig.justify) {
                this.justify = this.myConfig.justify;
            }

            if (this.myConfig.showNum) {
                this.showNum = this.myConfig.showNum;
            }
  
            this.btnItems.forEach(el => {
                if (el.icon && el.icon.startsWith('custom')) {
                    el.customIcon='iconfont icon-' + el.icon;
                    el.icon = null;
                }
            });
            if(this.btnItems.length === 2) {
                this.colSpan = 12;
            }
             if(this.btnItems.length === 3) {
                this.colSpan = 8;
            }
            this.showIndex = this.btnItems.length -1;
        
            if (this.btnItems.length > this.showNum){
                this.moreFlag = true;
                this.showIndex--;
                this.colSpan = 8;
            }
        },
        action(name) {
            let obj = {};
            obj.name = name;
            obj.rowinfo ={};
            obj.rowinfo.index = this.rowIndex;
            obj.rowinfo.row = this.rowIndex;
            this.$emit('doAction', obj);
        },
    },
    watch: {
    config: {
      handler(data) {
          this.$nextTick(() =>{
              this.init();
          })
      },
      deep: true,
      immediate: true
    },
  }

};
</script>
