<!-- @desc:工具栏组件按钮  @auth:周兴  @time:2022/11/15 9:55 -->
<template>
  <Button ref="button" :loading="loading"
          :disabled="disabledFlag"
          :icon="'iconfont iconfont icon-' + (!this.$config.button[name]?'':this.$config.button[name].icon)"
          :type="name.startsWith('add')?'primary':(name.startsWith('search')?'info':'default')" @click="handleClick">
    {{ setButtonName(name) }}
    <Poptip popper-class="base-button-class" trigger="hover" transfer placement="bottom" v-model="visible">
      <Icon type="ios-arrow-down" v-if="childOptions.length > 0 && !visible"></Icon>
      <Icon type="ios-arrow-up" v-if="childOptions.length > 0 && visible"></Icon>
      <!--下拉按钮-->
      <div slot="content" class="child-class">
        <div v-for="(item,index) in childOptions" :key="index"
             :class="item.disabled?'child-item-disabled-class':'child-item-class'" :ref="'child_' + item.name"
             v-if="vm.$libaray.checkButtonHasRight(item.rightButton,this)"
             :id="item.name" @click="handleChildClick(item)">
          <div style="display: flex;align-items: center">
            <Icon style="margin-right: 10px"
                  :type="'iconfont iconfont icon-' +  (!$config.button[item.name]?'':$config.button[item.name].icon)"></Icon>
            {{ item.title ? item.title : vm.$t(item.name) }}
          </div>
        </div>
      </div>
    </Poptip>
  </Button>
  <!--  v-if="vm.$libaray.checkButtonHasRight(rightButton,this)"-->
</template>

<script>

export default {
  name: 'BaseIndexButton',
  inject: ['buttonGroup'],
  props: {
    name: {
      type: String,
      default: ''
    },
    // 加载中
    loading: {
      type: Boolean,
      default: false
    },
    //验证权限按钮的名称
    rightButton: {
      type: String,
      default: ''
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false,
    },
    // 是否选择
    isMustChooseFlag: {
      type: Boolean,
      default: true,
    },
    // 子级下拉的数据源
    childOptions: {
      type: Array,
      default: () => []
    }
  },
  data() {
    const vm = window.vm;
    let self = this;
    return {
      vm: vm,
      visible: false,
      disabledFlag: self.disabled
    }
  },
  watch: {
    disabled(n) {
      this.disabledFlag = n;
      this.visible = false;
    }
  },
  methods: {
    /**
     * @desc   : 设置快捷键
     * @author : 周兴
     * @date   : 2024/1/30 11:44
     */
    setButtonName(name){
      let title = vm.$t(name)
      if(this.$config.button[name] && this.$config.button[name].hotKey){
        return title + '(' + this.$config.button[name].hotKey + ')';
      }else{
        return title;
      }
    },
    /**
     * @desc   : 鼠标进入事件
     * @author : 周兴
     * @date   : 2023/10/31 9:06
     */
    handleMouseEnter(e) {
      // console.log('ee',e)
      if (this.childOptions && this.childOptions.length > 0) {
        this.visible = true;
      }
    },
    /**
     * @desc   : 点击事件
     * @author : 周兴
     * @date   : 2022/4/24 20:12
     */
    handleClick() {
      if (this.childOptions && this.childOptions.length > 0) {
        this.visible = true;
      } else {
        this.$refs.button.$el.focus();
        this.$emit('click')
      }
    },
    /**
     * @desc   : 点击子级按钮事件
     * @author : 周兴
     * @date   : 2023/7/13 9:34
     */
    handleChildClick(item) {
      this.$refs.button.$el.focus();
      this.$emit('item-click', item)
      this.visible = false;
    },
    /**
     * @desc   : 添加到组中
     * @author : 周兴
     * @date   : 2023/3/3 17:26
     */
    addGroup() {
      if (this.buttonGroup) {
        this.buttonGroup.items.push(this);
      }
    },
  },
  mounted() {
    this.addGroup();  // 添加到组中
  },
  created() {
  }
}
</script>
<style scoped>
.ivu-btn-primary{
  background: #139BE8;
  border-color: #139BE8;
}
.ivu-btn-info{
  background: rgba(62, 105, 246, 1);
  border-color:rgba(62, 105, 246, 1);
}
.right-l {
  position: relative;
}

.right-l:after {
  content: ' ';
  border-right: 1px solid #d0ccdc;
  height: 20px;
  border-radius: 10px;
  position: absolute;
  right: 0;
  /*top: 3px;*/
}

.ivu-btn-group button {
  margin-left: 2px !important;
  height: 30px !important;
  padding: 0 8px 0 8px !important;
}

.ivu-btn {
  margin-top: 2px !important;
}

.ivu-btn:hover {
  background-color: rgba(62, 105, 246, 0.15);
  border-color:transparent!important;
  color:#515a6e;
  outline:none!important;  /*去除点击时的蓝色边框*/
  box-shadow:none!important; /*同时去除阴影的蓝色边框*/
  /*color: #fff;*/
  /*background: #2E406B;*/
  /*border-color: #2E406B;*/
  /*border: #2E406B;*/
  /*padding: 0 8px 0 8px !important;*/
}

.child-item-disabled-class {
  height: 28px;
  line-height: 28px;
  cursor: pointer;
  padding: 0 16px;
  background-color: #F7F7F7;
  color: #C5C8CE;
}


.child-item-class {
  height: 28px;
  line-height: 28px;
  cursor: pointer;
  padding: 0 16px;
}

.child-item-class:hover {
  color: #fff;
  background: #2E406B;
  border-color: #2E406B;
}

.child-class {
  overflow: hidden;
  padding: 5px 0;
}

/*/deep/ .ivu-icon {*/
/*  color: #606266 ;*/
/*}*/

/*/deep/ .ivu-icon:hover {*/
/*  color: #fff !important;*/
/*}*/

</style>

