<template>
  <div class="list">
    <div class="item" @click="selectItem(5)" :class="{'active': time == 5}">
      <div class="top">
        <div>5{{ $t('exchange.l61') }}</div>
      </div>
    </div>
    <div class="item" @click="selectItem(15)" :class="{'active': time == 15}">
      <div class="top">
        <div>15{{ $t('exchange.l61') }}</div>
      </div>
    </div>
    <div class="item" @click="selectItem(30)" :class="{'active': time == 30}">
      <div class="top">
        <div>30{{ $t('exchange.l61') }}</div>
      </div>
    </div>
    <div class="item" @click="selectItem(60)" :class="{'active': time == 60}">
      <div class="top">
        <div>60{{ $t('exchange.l61') }}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ['time'],
  data () {
    return {
      
    }
  },
  methods: {
    selectItem(item) {
      this.$emit('success', {
        time: item
      })
    }
  }
}
</script>
<style lang="less" scoped>
.list {
  padding: 15px 18px 46px;
  .item {
    padding: 13px 12px;
    border-radius: 6px;
    font-size: 16px;
    color: var(--color-1-);
    &.active {
      background-color: #F2F3F5;
    }
  }
}
</style>