<!-- add by liuhr7 on 20/12/22. -->

<template>
  <div
    :class="['dof-btn-panel']"
    :style="{'background-color':this.bgColor}"
    :accessible="true"
    :aria-label="text"
  >
    <div class="btn-group-wrap" :style="wrapStyle">
      <text
        v-for="(text, index) in btnGroup" :key="index"
        :class="[
          'btn-text',
          !disabled &&pattern === 'text' &&
          `dof-text-highlight-${type}`          
        ]"
        :data-index="index"
        :style="[index<btnGroup.length-1?verticalLineStyle:'', textStyle, index==selectIndex?textBtnStyle:'']"
        @click="onTextClicked(index)"
        >{{ text }}</text
      >
    </div>
  </div>
</template>

<script>
export default {
  data:()=>({
    
  }),
  props: {
    btnGroup: {
      type: Array,
      default: ()=>[]
    },
    bgColor:{
      type: String,
      default: '#FFFFFF'
    },
    selectIndex:{
      type: Number,
      default: 0
    },

    size: {         //预留备用
      type: String,
      default: 'full'
    },
    disabled: {      //预留备用
      type: Boolean,
      default: false
    }
  },
  computed: {
    wrapStyle(){
      const { bgColor } = this
      if (bgColor == '#ffffff'||bgColor=='#FFFFFF') {
        return {
          borderWidth: '2px',
          borderStyle: 'solid',
          borderColor: '#E5E5E8',
          overflow: 'hidden',
        }
      }else{
        return {
          borderWidth: '2px',
          borderStyle: 'solid',
          borderColor: 'rgba(255, 255, 255, 0.3)',
          overflow: 'hidden',
        }
      }
    },

    textStyle(){
      const { bgColor } = this
      if (bgColor == '#ffffff'||bgColor=='#FFFFFF') {
        return {
          color: '#8E969B',
        }
      }else{
        return {
          color: '#ffffff'
        }
      }
    },

    verticalLineStyle(){
       const { bgColor } = this
      if (bgColor == '#ffffff'||bgColor=='#FFFFFF') {
        return {
          borderRightWidth: '2px',
          borderRightStyle: 'solid',
          borderRightColor: '#E5E5E8'
        }
      }else{
        return {
          borderRightWidth: '2px',
          borderRightStyle: 'solid',
          borderRightColor: 'rgba(255, 255, 255, 0.3)'
        }
      }
    },
    textBtnStyle(){
      const { bgColor } = this
      if (bgColor == '#ffffff'||bgColor=='#FFFFFF') {
        return {
          color:'#1E2E37',
          backgroundColor:'#E5E5E8'
        }
      } else {
        return {
          color:bgColor,
          backgroundColor:'#FFFFFF'
        }
      }
      
    }
  },
  methods: {
    onTextClicked(index) {
      // weex下不能完成事件委托
      this.selectIndex = index
      this.$emit('dofGroupButtonClicked', index)
    }
  }
}
</script>

<style scoped>
.dof-btn-panel {
  width: 750px;
  height: 128px;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  opacity: 1;
}

.btn-group-wrap{
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  /* opacity: 0.3; */
  border-top-left-radius: 64px;
  border-top-right-radius: 64px;
  border-bottom-right-radius: 64px;
  border-bottom-left-radius: 64px;
  overflow: hidden;
}

.btn-text {
  font-family: PingFangSC-Medium;
  color: #ffffff;
  font-size: 28px;
  line-height: 64px;
  /* padding-top: 18px; */
  /* padding-bottom: 18px; */
  padding-left: 32px;
  padding-right: 32px;
}
</style>
