<template>
  <div class="popup">
    <div class="title">
      <!-- 订单明细 -->
      {{ $t('option.l44') }}
    </div>
    <div class="cell flex">
      <div class="label">
        <!-- 标的 -->
        {{ $t('home.l7') }}
      </div>
      <div v-if="language == 'zh-CN'">{{ info.title }}</div>
      <div v-else-if="language == 'zh-TW'">{{ info.name_cht || info.title }}</div>
      <div v-else>{{ info.title_en || info.title }}</div>
    </div>
    <div class="cell flex">
      <div class="label">
        <!-- 代码 -->
        {{ $t('exchange.l39') }}
      </div>
      <div>{{ info.code }}</div>
    </div>
    <div class="cell flex">
      <div class="label">
        <!-- 期限 -->
        {{ $t('exchange.l47') }}
      </div>
      <div>{{ info.cycle }}M</div>
    </div>
    <div class="cell flex">
      <div class="label">
        <!-- 期权结构 -->
        {{ $t('option.l5') }}
      </div>
      <!-- 平值  虚值  -->
      <div>{{ info.standard == 100 ? $t('download.l42') : ($t('option.l6') + info.standard) }}</div>
    </div>
    <div class="cell flex">
      <div class="label">
        <!-- 名义本金 -->
        {{ $t('home.l9') }}
      </div>
      <div>{{ currencyUtil[symbolInfo.margin_currency] }} {{ info.amount }} {{ $t('home.l11') }}</div>
    </div>
    <div class="cell flex">
      <div class="label">
        <!-- 期权费率 -->
        {{ $t('option.l11') }}
      </div>
      <div>{{ optionFee }}%</div>
    </div>
    <!-- <div class="cell flex">
      <div class="label">咨  询  费</div>
      <div>{{ optionFee }}%</div>
    </div> -->
    <div class="cell flex">
      <div class="label">
        <!-- 费率波动 -->
        {{ $t('option.l42') }}
      </div>
      <div>{{ fee }}%</div>
    </div>
    <div class="cell flex">
      <div class="label">
        <!-- 预估期权费 -->
        {{ $t('option.l43') }}
      </div>
      <div>{{ currencyUtil[symbolInfo.margin_currency] }} {{ $handleDigits2(Number($bigDecimal.multiply((info.amount || 0) * 100, optionFee))) }}</div>
    </div>
    <div class="cell flex">
      <div class="label">
        <!-- 下单时间 -->
        {{ $t('option.l4') }}
      </div>
      <div>{{ $parseTime(new Date()) }}</div>
    </div>
    <!-- <div class="cell flex">
      <div class="label">报单价格</div>
      <div>{{ optionFee }}%</div>
    </div> -->
    <div class="btn-box flex">
      <div class="btn ltn" @click="cancel">
        <!-- 取消 -->
        {{ $t('common.l2') }}
      </div>
      <div class="btn rtn" @click="submit">
        <!-- 确认 -->
        {{ $t('common.l3') }}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ['info', 'optionFee', 'symbolInfo', 'fee'],
  data () {
    return {
      
    }
  },
  computed: {
    currencyUtil() {
      return {
        'USD': '$',
        'CNY': '¥',
        'HKD': 'HK$',
      }
    }
  },
  methods: {
    cancel() {
      this.$emit('cancel')
    },
    submit() {
      this.$emit('submit')
    }
  }
}
</script>
<style lang="less" scoped>
.popup {
  padding: 23px 19px 18px;
}
.title {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  padding-bottom: 17px;
}
.cell {
  padding-bottom: 14px;
  color: #333333;
  font-size: 14px;
  justify-content: space-between;
  line-height: 1;
  .label {
    color: #A6A6A6;
  }
}
.btn-box {
  padding: 14px 2px 0;
  font-size: 16px;
  font-weight: 600;
  .btn {
    flex: 1;
    text-align: center;
    line-height: 38px;
    border-radius: 6px;
    &+.btn {
      margin-left: 16px;
    }
  }
  .ltn {
    border: 1px solid #DEDEDE;
    color: #000;
  }
  .rtn {
    border: 1px solid var(--color-);
    color: #fff;
    background-color: var(--color-);
  }
}
</style>