<template>
  <div class="list">
    <div class="item" @click="selectItem(7)" :class="{'active': cycle == 7}">
      <!-- 近7天 -->
      {{ $t('follow.l73') }}
    </div>
    <div class="item" @click="selectItem(30)" :class="{'active': cycle == 30}">
      <!-- 近一月 -->
      {{ $t('follow.l74') }}
    </div>
    <div class="item" @click="selectItem(90)" :class="{'active': cycle == 90}">
      <!-- 近三月 -->
      {{ $t('follow.l75') }}
    </div>
    <div class="item" @click="selectItem(180)" :class="{'active': cycle == 180}">
      <!-- 近半年 -->
      {{ $t('follow.l76') }}
    </div>
    <div class="item" v-if="showAll" @click="selectItem('')" :class="{'active': cycle == ''}">
      <!-- 全部 -->
      {{ $t('inform.l21') }}
    </div>
    <div class="cancel" @click="cancel">
      <!-- 取消 -->
       {{ $t('common.l2') }}
    </div>
  </div>
</template>
<script>
export default {
  props: {
    cycle: {
      default: 7
    },
    showAll: {
      default: false
    }
  },
  data () {
    return {
      
    }
  },
  methods: {
    selectItem(item) {
      this.$emit('success', item)
    },
    cancel() {
      this.$emit('cancel')
    }
  }
}
</script>
<style lang="less" scoped>
.list {
  .item {
    cursor: pointer;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    color: #888888;
    text-align: center;
    padding: 17px 10px;
    border-bottom: 1px solid #F6F6F6;
    &.active {
      color: #000;
    }
  }
  .cancel {
    cursor: pointer;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    color: #888888;
    text-align: center;
    padding: 17px 10px;
    border-top: 3px solid #F6F6F6;
  }
}
</style>