<!--
 * @Author: zwq
 * @Date: 2022-01-21 14:27:34
 * @LastEditors: zwq
 * @LastEditTime: 2022-01-21 15:55:08
 * @Description:
-->

<template>
  <div class="top-radio-group" style="width:100%;text-align:center;">
    <el-radio-group v-model="radioModel" size="mini" @change="handleChange">
      <el-radio-button v-for="item in radioList" :key="item.value" :label="item.value">
        {{ item.name }}
      </el-radio-button>
    </el-radio-group>
  </div>
</template>

<script>
export default {
  name: 'TopRadioGroup',
  props: {
    dateType: {
      type: Number,
      default: 0
    },
    radioList: {
      type: Array,
      default: () => {
        return [{ value: '0', name: '当天' }, { value: '1', name: '本周' }, { value: '2', name: '本月' }]
      }
    }
  },
  data() {
    return {
      radioModel: 0
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.radioModel = this.dateType
    })
  },
  methods: {
    handleChange(v) {
      this.$emit('change-time-range', v)
    }
  }
}
</script>

<style lang="scss" scoped>
.top-radio-group >>> .el-radio-group {
  display: flex;
  width: 100%;
}

.top-radio-group >>> .el-radio-button {
  flex: 1 1;
}

.top-radio-group >>> .el-radio-button__inner {
  padding: 4px 0;
  text-align: center;
}

::v-deep .el-radio-button__inner {
  width: 100%;
  border: none;
  background: #133648;
  padding: 3px 2em;
  margin-bottom: 1em;
  margin-top: -0.5em;
  color: white;
  line-height: 14px;
  outline: none;
  box-shadow: none;
}
::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
  background: #3eb0ae;
  border: none;
  color: white;
  outline: none;
  box-shadow: none;
}
</style>
