<template>
  <div class="btngroup-container" :style="btnContainerStyle">
    <ButtonGroup class="button-group">
      <div v-for="(item, index) in btnGroup" :key="index">
        <gms-button :define="item.buttonDefine" :context="context" :billStateDisable="item.billStateDisable"></gms-button>
        <Divider type="vertical" />
      </div>
    </ButtonGroup>
  </div>
</template>
<script>
const ACTIONS = GMS.getContext().getEmconCollector().getElements('billAction')
export default {
  inject: ['tmpBill'],
  props: ['define', 'context'],
  data() {
    return {
      btnContainerStyle: {
        position: '',
        top: '',
        bottom: ''
      },
      btnGroup: [],
    }
  },
  watch: {
    'tmpBill.state': {
      handler() {
        this.getBtnGroup()
      },
      immediate: true,
    },
  },

  mounted() {
    // 判断是否在typesBill组件中
    const location = this.define.layout.adsorption === 'bottom' ? 'bottom' : 'top'
    if (document.querySelector('.initHeight')) {
      if (location === 'top') {
        this.btnContainerStyle = {
          position: 'fixed',
          top: '36px',
        }
      } else {
        this.btnContainerStyle = {
          position: 'fixed',
          bottom: '0px',
        }       
      }
    } else {
      this.btnContainerStyle = {
        position: 'absolute',
        [location]: '0px',
      } 
    }
  },
  methods: {
    getBtnGroup() {
      const keys = this.define.config ? this.define.config.btnConfig : []
      this.btnGroup = keys.map((item) => {
        let btnConfg = {
          buttonDefine: {
            config: {
              action: 'ButtonControl_1_action_gams',
              size: 'default',
              text: '关闭',
              type: 'text',
            },
            layout: {},
            name: 'ButtonControl_1',
            title: '关闭',
          },
          billStateDisable: false
        }
        btnConfg.buttonDefine.config.action = this.define.config.action + item
        btnConfg.buttonDefine.config.text =
          this.define.btnGroupAction &&
          this.define.btnGroupAction[item] &&
          this.define.btnGroupAction[item].btnName
            ? this.define.btnGroupAction[item].btnName
            : ACTIONS[item].title.substring(
                ACTIONS[item].title.indexOf('_') + 1,
                ACTIONS[item].title.indexOf('[')
              )
        btnConfg.billStateDisable = this.getBillStateDisable(
          ACTIONS[item].btnDisable
        )
        btnConfg.buttonDefine.name = this.define.config.action + item
        return btnConfg
      })
    },
    getBillStateDisable(val) {
      if (!val) return false
      let approveState = this.context.bill.getMasterData().getValue('billState')
      let disableState = val.split(';')
      const getBillState = () => {
        if (this.tmpBill.state === '') {
          return disableState.includes('billEdit')
        } else if (this.tmpBill.state === 'readOnly') {
          return disableState.includes('billReadOnly')
        } else {
          return false
        }
      }
      switch (approveState) {
        case 90:
          return disableState.includes('90')
        case 1:
          return disableState.includes('1') || getBillState()
        default:
          return getBillState()
      }
    },
  },
}
</script>
<style scoped lang="less">
.btngroup-container {
  width: 100% !important;
  position: absolute;
  left: 0;
  z-index: 900;
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  border-top: 1px solid #e8e8e8;
  /deep/ .dy-button {
    margin: 0;
    .ivu-tooltip-rel {
      .ivu-btn {
        margin: 0;
        padding: 0 5px;
      }
    }
    .ivu-btn {
      padding: 0 5px;
    }
    .ivu-btn-text:focus {
      box-shadow: none;
    }
  }

  .button-group {
    display: flex;
    padding: 0 10px;
  }
}
</style>
