<template>
  <div class="list">
    <div class="item flex" @click="selectItem(1)" :class="{'active': type == 1}">
      <div>
        <div>
          <!-- 限价单 -->
          {{ $t('exchange.l42') }}
        </div>
        <div class="tip">
          <!-- 以指定价格买入/卖出 -->
          {{ $t('exchange.l58') }}
        </div>
      </div>
    </div>
    <div class="item flex" @click="selectItem(2)" :class="{'active': type == 2}">
      <div>
        <div>
          <!-- 市价单 -->
          {{ $t('exchange.l43') }}
        </div>
        <div class="tip">
          <!-- 以目前市场价格买入/卖出 -->
          {{ $t('exchange.l59') }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ['type'],
  data () {
    return {
      
    }
  },
  methods: {
    selectItem(type) {
      this.$emit('success', type)
    }
  }
}
</script>
<style lang="less" scoped>
.list {
  padding: 15px 18px 46px;
  .item {
    height: 54px;
    padding: 0 12px;
    border-radius: 6px;
    column-gap: 6px;
    font-size: 16px;
    color: var(--color-1-);
    &.active {
      background-color: #F2F3F5;
    }
  }
  .tip {
    font-size: 13px;
    color: #A4A4A4;
    margin-top: 6px;
  }
}
</style>