<template>
  <van-radio-group v-model="radio">
    <van-cell-group>
      <van-cell title="最新发布" clickable @click="radio = '1'">
        <van-radio name="1">
          <template #icon="props">
            <span v-html="props.checked ? activeIcon : inactiveIcon"></span>
          </template>
        </van-radio>
      </van-cell>
      <van-cell title="最高讨论" clickable @click="radio = '2'">
        <van-radio name="2">
          <template #icon="props">
            <span v-html="props.checked ? activeIcon : inactiveIcon"></span>
          </template>
        </van-radio>
      </van-cell>
      <van-cell title="最高阅读" clickable @click="radio = '3'">
        <van-radio name="3">
          <template #icon="props">
            <span v-html="props.checked ? activeIcon : inactiveIcon"></span>
          </template>
        </van-radio>
      </van-cell>
      <van-cell title="最高评分" :style="activeColor ? 'color:#378dec;' : ''" clickable @click="radio = '4'">
        <van-radio name="4">
          <template #icon="props">
            <span v-html="props.checked ? activeIcon : inactiveIcon"></span>
          </template>
        </van-radio>
      </van-cell>
    </van-cell-group>
  </van-radio-group>
</template>

<script>
  export default {
    name: 'radio',
    data () {
      return {
        radio: '1',
        activeColor: '',
        inactiveColor: '',
        activeIcon: '<i class="awsui-iconfont" style="color:#378dec;margin-right:5px;">&#xe639;</i>',
        inactiveIcon: '<i class="awsui-iconfont" style="color:#fefefe;margin-right:5px;">&#xe639;</i>'
      }
    },
    methods: {}
  }
</script>

<style scoped>

  .van-cell__value {
    margin-left: 10px;
    margin-right: 5px;
  }

  .van-cell {
    padding: 10px 0 10px 17px !important;
  }

  .van-cell__title, .van-cell__value {
    -webkit-box-flex: none;
    -webkit-flex: none;
    flex: none;
  }
</style>
