<template>
  <div v-loading.body.fullscreen="fullscreenLoading" element-loading-background="rgba(255, 255, 255, 0)">
    <div class="list" v-if="list.length">
      <div class="item" v-for="item in list" :key="item.id">
        <div class="header">
          <div class="left flex">
            <div class="title" v-if="language == 'zh-CN'">{{item.title }}</div>
            <div class="title" v-else-if="language == 'zh-TW'">{{ item.name_cht || item.title }}</div>
            <div class="title" v-else>{{ item.title_en || item.title }}</div>
            <div class="code">{{ item.code }}</div>
          </div>
          <div class="bottom flex">
          <div class="ordernum">
              <!-- 订单号 -->
              {{ $t('option.l21') }}:{{ item.ordernum }}</div>
            <div class="copy" @click="copyText(item.ordernum)">
              <!-- 复制 -->
              {{ $t('option.l22') }}
            </div>
          </div>
          <div class="btn active" v-if="item.status == 11">
            <!-- 行权确认中 -->
            {{ $t('option.l1') }}
          </div>
          <div class="btn" v-if="item.status == 10" @click="closeShow(item)">
            <!-- 取消 -->
            {{ $t('common.l2') }}
          </div>
        </div>
        <div class="body" v-if="item.status == 10">
          <van-row gutter="25">
            <van-col span="12">
              <div class="col">
                <div class="label">
                  <!-- 订单状态 -->
                  {{ $t('option.l2') }}
                </div>
                <div class="val">
                  <!-- 待确认 -->
                  {{ $t('option.l3') }}
                </div>
              </div>
            </van-col>
            <van-col span="12">
              <div class="col1">
                <div class="label">
                  <!-- 下单时间 -->
                  {{ $t('option.l4') }}
                </div>
                <div class="val">{{ $parseTime(item.insert_datetime, '{y}/{m}/{d}') }}</div>
              </div>
            </van-col>
          </van-row>
          <van-row gutter="25">
            <van-col span="12">
              <div class="col">
                <div class="label la1 flex">
                  <!-- <div>期</div><div>限</div> -->
                  <template v-if="language == 'zh-CN' || language == 'zh-TW'">
                    <div>{{ $t('option.l26') }}</div><div>{{ $t('option.l27') }}</div>
                  </template>
                  <template v-else>
                    {{ $t('exchange.l47') }}
                  </template>
                </div>
                <div class="val">{{ item.cycle }}M</div>
              </div>
            </van-col>
            <van-col span="12">
              <div class="col1">
                <div class="label">
                  <!-- 期权结构 -->
                  {{ $t('option.l5') }}
                </div>
                <!-- 平值  虚值  -->
                <div class="val">{{ item.standard == 100 ? $t('download.l42') : ($t('option.l6') + item.standard) }}</div>
              </div>
            </van-col>
          </van-row>
          <van-row gutter="25">
            <van-col span="12">
              <div class="col">
                <div class="label">
                  <!-- 名义本金 -->
                  {{ $t('home.l9') }}
                </div>
                <!-- 万 -->
                <div class="val">{{ (item.amount / 10000).toFixed(2) }}{{ $t('home.l11') }}  {{ serverUtil[item.market] }}</div>
              </div>
            </van-col>
            <van-col span="12">
              <div class="col1">
                <div class="label">
                  <!-- 报单价格 -->
                  {{ $t('option.l7') }}
                </div>
                <!-- 市价 -->
                <div class="val">{{ item.expected_open_price ? (`${$handleDigits(item.expected_open_price, productDataObj[item.code] ? productDataObj[item.code].digits : 2)} ${serverUtil[item.market]}`) : $t('option.l8') }}</div>
              </div>
            </van-col>
          </van-row>
          <van-row gutter="25">
            <van-col span="12">
              <div class="col">
                <div class="label">
                  <!-- 实时价格 -->
                  {{ $t('option.l9') }}
                </div>
                <div class="val">{{ productDataObj[item.code] ? ($handleDigits(productDataObj[item.code].bid, productDataObj[item.code].digits) + ' ' + serverUtil[item.market]) : '--' }}</div>
              </div>
            </van-col>
            <van-col span="12">
              <div class="col1">
                <div class="label">
                  <!-- 开仓价格 -->
                  {{ $t('option.l10') }}
                </div>
                <div class="val green">
                  <!-- 待确认 -->
                  {{ $t('option.l3') }}
                </div>
              </div>
            </van-col>
          </van-row>
          <van-row gutter="25">
            <van-col span="12">
              <div class="col">
                <div class="label">
                  <!-- 期权费率 -->
                  {{ $t('option.l11') }}
                </div>
                <div class="val">{{ item.price }}%</div>
              </div>
            </van-col>
            <van-col span="12">
              <div class="col1">
                <div class="label">
                  <!-- 浮动上限 -->
                  {{ $t('option.l12') }}
                </div>
                <div class="val">{{ getFee(item) }}%</div>
              </div>
            </van-col>
          </van-row>
          <van-row gutter="25">
            <van-col span="12">
              <div class="col">
                <div class="label">
                  <!-- 预估费用 -->
                  {{ $t('option.l13') }}
                </div>
                <div class="val">{{ $handleDigits2(Number($bigDecimal.divide($bigDecimal.multiply((item.amount || 0), item.price), 100))) }} {{ serverUtil[item.market] }}</div>
              </div>
            </van-col>
            <van-col span="12">
              <div class="col1">
                <div class="label">
                  <!-- 咨询费率 -->
                  {{ $t('option.l14') }}
                </div>
                <div class="val">{{ item.fee }}%</div>
              </div>
            </van-col>
          </van-row>
          <van-row gutter="25">
            <van-col span="12">
              <div class="col">
                <div class="label">
                  <!-- 咨询费 -->
                  {{ $t('option.l15') }}
                </div>
                <div class="val">{{ $handleDigits2(Number($bigDecimal.divide($bigDecimal.multiply((item.amount || 0), item.fee), 100))) }} {{ serverUtil[item.market] }}</div>
              </div>
            </van-col>
            <van-col span="12"></van-col>
          </van-row>
        </div>
        <div class="body" v-if="item.status == 11">
          <van-row gutter="25">
            <van-col span="12">
              <div class="col">
                <div class="label">
                  <!-- 开仓时间 -->
                  {{ $t('option.l28') }}
                </div>
                <div class="val">{{ $parseTime(item.open_time, '{y}/{m}/{d}') }}</div>
              </div>
            </van-col>
            <van-col span="12">
              <div class="col1">
                <div class="label">
                  <!-- 到期时间 -->
                  {{ $t('option.l16') }}
                </div>
                <div class="val">{{ $parseTime(item.end_datetime, '{y}/{m}/{d}') }}</div>
              </div>
            </van-col>
          </van-row>
          <van-row gutter="25">
            <van-col span="12">
              <div class="col">
                <div class="label la1 flex">
                  <!-- <div>期</div><div>限</div> -->
                  <template v-if="language == 'zh-CN' || language == 'zh-TW'">
                    <div>{{ $t('option.l26') }}</div><div>{{ $t('option.l27') }}</div>
                  </template>
                  <template v-else>
                    {{ $t('exchange.l47') }}
                  </template>
                </div>
                <div class="val">{{ item.cycle }}M</div>
              </div>
            </van-col>
            <van-col span="12">
              <div class="col1">
                <div class="label">
                  <!-- 剩余时间 -->
                  {{ $t('option.l17') }}
                </div>
                <!-- 天 -->
                <div class="val">{{ endDay(item.end_datetime) }}{{ $t('option.l18') }}</div>
              </div>
            </van-col>
          </van-row>
          <van-row gutter="25">
            <van-col span="12">
              <div class="col">
                <div class="label">
                  <!-- 开仓价格 -->
                  {{ $t('option.l10') }}
                </div>
                <div class="val">{{ productDataObj[item.code] ? $handleDigits(item.open_price, productDataObj[item.code].digits) : $handleDigits2(item.open_price) }} {{ serverUtil[item.market] }}</div>
              </div>
            </van-col>
            <van-col span="12">
              <div class="col1">
                <div class="label">
                  <!-- 产品结构 -->
                  {{ $t('option.l5') }}
                </div>
                <!-- 平值  虚值  -->
                <div class="val">{{ item.standard == 100 ? $t('download.l42') : ($t('option.l6') + item.standard) }}</div>
              </div>
            </van-col>
          </van-row>
          <van-row gutter="25">
            <van-col span="12">
              <div class="col">
                <div class="label">
                  <!-- 实时价格 -->
                  {{ $t('option.l9') }}
                </div>
                <div class="val">{{ productDataObj[item.code] ? ($handleDigits(productDataObj[item.code].bid, productDataObj[item.code].digits) + ' ' + serverUtil[item.market]) : '--' }}</div>
              </div>
            </van-col>
            <van-col span="12">
              <div class="col1">
                <div class="label">
                  <!-- 名义本金 -->
                  {{ $t('home.l9') }}
                </div>
                <!-- 万 -->
                <div class="val">{{ (item.amount / 10000).toFixed(2) }}{{ $t('home.l11') }}  {{ serverUtil[item.market] }}</div>
              </div>
            </van-col>
          </van-row>
          <van-row gutter="25">
            <van-col span="12">
              <div class="col">
                <div class="label">
                  <!-- 期权费率 -->
                  {{ $t('option.l11') }}
                </div>
                <div class="val">{{ item.price }}%</div>
              </div>
            </van-col>
            <van-col span="12">
              <div class="col1">
                <div class="label">
                  <!-- 总期权费 -->
                  {{ $t('option.l19') }}
                </div>
                <div class="val">{{ $handleDigits2(item.commission) }} {{ serverUtil[item.market] }}</div>
              </div>
            </van-col>
          </van-row>
          <van-row gutter="25">
            <van-col span="12">
              <div class="col">
                <div class="label">
                  <!-- 咨询费率 -->
                  {{ $t('option.l14') }}
                </div>
                <div class="val">{{ item.fee }}%</div>
              </div>
            </van-col>
            <van-col span="12">
              <div class="col1">
                <div class="label">
                  <!-- 咨询费 -->
                  {{ $t('option.l15') }}
                </div>
                <div class="val">{{ $handleDigits2(Number($bigDecimal.divide($bigDecimal.multiply((item.amount || 0), item.fee), 100))) }} {{ serverUtil[item.market] }}</div>
              </div>
            </van-col>
          </van-row>
          <van-row gutter="25">
            <van-col span="12">
              <div class="col">
                <div class="label">
                  <!-- 获利估算 -->
                  {{ $t('option.l20') }}
                </div>
                <div class="val">{{ getProfit(item) }} {{ serverUtil[item.market] }}</div>
              </div>
            </van-col>
            <van-col span="12"></van-col>
          </van-row>
        </div>
      </div>
    </div>
    <!-- 暂无记录 -->
    <NoData :title="$t('common.l45')" v-if="list.length == 0"/>
    <van-popup :close-on-click-overlay="false" v-model="closePop" :style="{ width: '292px' }">
      <div class="pop-box">
        <div class="tip">
          <!-- 是否确定取消 -->
          {{ $t('option.l24') }}
          <span class="green" v-if="language == 'zh-CN'">{{ targetInfo.title }}</span>
          <span class="green" v-else-if="language == 'zh-TW'">{{ targetInfo.name_cht || targetInfo.title }}</span>
          <span class="green" v-else>{{ targetInfo.title_en || targetInfo.title }}</span>
          {{ $t('option.l25') }}
          <!-- 的期权订单? -->
        </div>
        <div class="btn-box flex">
          <div class="btn ltn" @click="closePop = false">
            <!-- 取消 -->
            {{ $t('common.l2') }}
          </div>
          <div class="btn rtn" @click="revokeOptionOrder">
            <!-- 确认 -->
            {{ $t('common.l3') }}
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { revokeOptionOrder } from "@/api/option";
import { copyText } from '@/utils/index'
export default {
  props: ['list', 'market'],
  inject: ['getproductDataObj'],
  data () {
    return {
      closePop: false,
      targetInfo: {}
    }
  },
  computed: {
    productDataObj() {
      return this.getproductDataObj()
    },
    currencyUtil() {
      return {
        'US': '$',
        'CN': '¥',
        'HK': 'HK$',
      }
    }
  },
  methods: {
    revokeOptionOrder() {
      this.fullscreenLoading = true
      revokeOptionOrder({
        ordernum: this.targetInfo.ordernum
      }).then(res => {
        this.closePop = false
        this.$notify({
          // message: '取消成功',
          message: this.$t('option.l23'),
          type: 'success'
        });
        this.$emit('success')
      }).catch(() => {}).finally(() => {
        this.fullscreenLoading = false;
      })
    },
    closeShow(item) {
      this.targetInfo = item
      this.closePop = true
    },
    endDay(time) {
      var nowT = new Date().getTime()
      if (time - nowT > 0) {
        var a = time - nowT
        return Math.ceil(a/(1000 * 60 * 60 * 24))
      }
      return 0
    },
    getFee(item) {
      return Number(this.$bigDecimal.multiply(this.$bigDecimal.divide(this.$bigDecimal.subtract(item.max_price, item.price), item.price), 100)).toFixed(0)
    },
    getProfit(item) {
      if (this.productDataObj[item.code]) {
        var rate = (this.productDataObj[item.code].bid - item.open_price) / item.open_price
        if (item.standard == 105) {
          rate -= 0.05
        }
        var profit = item.amount * rate
        return profit > 0 ? profit.toFixed(2) : '0.00'
      }
      return '0.00'
    },
    copyText(text) {
      copyText(text)
    }
  },
}
</script>
<style lang="less" scoped>
.list {
  background-color: #F7F8FA;
  padding: 12px 17px;
  .item {
    margin-bottom: 12px;
    background-color: var(--bg-);
    border-radius: 5px;
  }
  .header {
    padding: 14px 65px 8px 13px;
    position: relative;
    color: #0D0D0D;
    font-weight: 600;
    .left {
      margin-bottom: 6px;
    }
  }
  .title {
    min-width: 10%;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .btn {
    position: absolute;
    top: 9px;
    right: 9px;
    min-width: 50px;
    padding: 0 10px;
    cursor: pointer;
    border-radius: 3px;
    border: 1px solid #000000;
    text-align: center;
    line-height: 24px;
    color: #000;
    font-size: 14px;
    font-weight: 400;
    &.active {
      border-color: #EBEBEB;
      color: #ABABAB;
    }
  }
  .body {
    padding: 12px 10px 1px 13px;
    font-size: 12px;
  }
  .van-row {
    margin-bottom: 10px;
  }
  .col {
    display: flex;
    align-items: flex-start;
    .label {
      width: 58px;
      padding-right: 2px;
      &.la1 {
        padding-right: 10px;
      }
    }
  }
  .col1 {
    display: flex;
    align-items: flex-start;
    .label {
      width: 68px;
      padding-right: 3px;
      &.la1 {
        padding-right: 20px;
      }
      &.label1 {
        padding-right: 0;
      }
    }
  }
  .label {
    color: #656568;
    letter-spacing: 0px;
    &.flex {
      justify-content: space-between;
    }
  }
  .val {
    flex: 1;
    min-width: 10%;
    max-width: 100%;
    font-weight: 600;
    color: var(--color-1-);
    text-align: right;
    &.green {
      color: var(--color-);
    }
  }
  .bottom {
    font-weight: 400;
    font-size: 12px;
    color: #656568;
    .copy {
      cursor: pointer;
      color: var(--color-);
      margin-left: 8px;
    }
  }
}
.pop-box {
  padding: 30px 21px 20px;
  color: #000;
  .tip {
    text-align: center;
    font-size: 16px;
    letter-spacing: 0px;
  }
  .green {
    color: var(--color-);
  }
  .btn-box {
    padding-top: 29px;
    column-gap: 16px;
    .btn {
      flex: 1;
      cursor: pointer;
      text-align: center;
      line-height: 38px;
      border-radius: 6px;
      font-size: 16px;
      font-weight: 600;
    }
  }
  .ltn {
    border: 1px solid #DEDEDE;
  }
  .rtn {
    border: 1px solid #000000;
    background-color: #000000;
    color: #fff;
  }
}
</style>