<template>
  <div :class="{ 'border-bottom': showBottomLine }">
    <el-radio-group v-model="modelValue" @change="handleChange">
      <el-radio v-if="allText" class="no-cicrle" :style="{'margin-bottom': gutter}" label="全部">全部</el-radio>
      <el-radio v-for="(item,index) in list" :key="index" class="no-cicrle" :style="{'margin-bottom': gutter}" :label="item[name]">
        {{ item[label] }}
      </el-radio>
    </el-radio-group>
  </div>
</template>

<script>
export default {
  props: {
    value: [String, Number],
    allText: {
      // 是否展示 "全部"，有字则展示
      type: String,
      default: ''
    },
    showBottomLine: {
      // 是否展示底部下划线，类似tab标签页
      type: Boolean,
      default: false
    },
    list: {
      type: Array,
      default: () => []
    },
    label: {
      // key
      type: String,
      default: 'label'
    },
    name: {
      // value
      type: String,
      default: 'value'
    },
    gutter: {
      // 上下间隔
      type: String,
      default: '0'
    }
  },
  data() {
    return {
      modelValue: undefined
    };
  },
  watch: {
    value: {
      handler(val) {
        this.modelValue = val === undefined ? '全部' : val;
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    handleChange(value) {
      this.$emit('input', this.modelValue === '全部' ? undefined : this.modelValue);
      this.$emit('change', this.modelValue === '全部' ? undefined : this.modelValue);
    }
  }
};
</script>

<style lang="scss" scoped>
.border-bottom {
  width: 100%;
  border-bottom: 2px solid rgba($color: #000000, $alpha: 0.08);
  ::v-deep .is-checked .el-radio__label {
    position: relative;
    &::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -10.5px;
      right: 0;
      height: 2px;
      background-color: #0075ff;
    }
  }
}
.no-cicrle {
  ::v-deep .el-radio__input,
  .el-checkbox__input {
    display: none;
  }
  ::v-deep .el-radio__label {
    padding-left: 0;
    font-size: 14px;
    line-height: 14px;
    color: rgba($color: #000000, $alpha: 0.6);
  }
}
.no-cicrle.is-checked ::v-deep .el-radio__label {
  color: #0075ff;
  font-weight: bold;
}
</style>
