<template>
  <ElRadioButton class="RadioButton" v-bind="getBind" v-on="$listeners">
    <slot />
  </ElRadioButton>
</template>

<script>
export default {
  name: 'RadioButton',
  computed: {
    getBind() {
      return {
        border: true,
        ...this.$attrs
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.RadioButton {
  margin: 0;
  height: 27px;

  &:first-child {
    ::v-deep {
      span.el-radio-button__inner {
        border-radius: 0;
        border-left: 1px solid #00B3CC;
        border-top-left-radius: 1px;
        border-bottom-left-radius: 1px;
      }
    }
  }

  &.is-active {
    ::v-deep {
      span.el-radio-button__inner {
        background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
        border-color: rgba(0, 0, 0, 0);
      }
    }
  }

  &:last-child {
    ::v-deep {
      span.el-radio-button__inner {
        border-radius: 0;
        border-right: 1px solid #00B3CC;
        border-top-right-radius: 1px;
        border-bottom-right-radius: 1px;
      }
    }
  }

  ::v-deep {
    span.el-radio-button__inner {
      border: 0;
      border-radius: 0;

      border-top: 1px solid #00B3CC;
      border-bottom: 1px solid #00B3CC;
      font-size: 12px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
    }
  }
}
</style>
