<template>
  <div class="page" v-loading.body.fullscreen="fullscreenLoading" element-loading-background="rgba(255, 255, 255, 0)">
    <van-row gutter="8" class="section">
      <van-col span="12">
        <div class="box border1">
          <div>
            <div class="flex">
              <img class="icon" src="/img/option/icon1.png?1" alt="极度证券">
              <div class="label">
                <!-- 名义本金 -->
                {{ $t('home.l9') }}({{ currency }})</div>
            </div>
            <div class="number">
              <div>{{ currencyUtil[currency] }} {{ numToW(total.amountTotal * rate) }}</div>
              <div class="number2" v-if="market != 'US'">≈ $ {{ numToW(total.amountTotal) }}</div>
            </div>
          </div>
        </div>
      </van-col>
      <van-col span="12">
        <div class="box border2">
          <div>
            <div class="flex">
              <img class="icon" src="/img/option/icon2.png?1" alt="极度证券">
              <div class="label">
                <!-- 总期权费 -->
                {{ $t('option.l19') }}({{ currency }})</div>
            </div>
            <div class="number">
              <div>{{ currencyUtil[currency] }} {{ numToW(total.commissionTotal * rate) }}</div>
              <div class="number2" v-if="market != 'US'">≈ $ {{ numToW(total.commissionTotal) }}</div>
            </div>
          </div>
        </div>
      </van-col>
    </van-row>
    <div class="list" v-if="list.length">
      <div class="item" :class="{'ru': language != 'zh-CN' && language != 'zh-TW' && language != 'en'}" 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>
            <img class="copy" @click="copyText(item.ordernum)" src="/img/option/copy.png" alt="极度证券">
          </div>
          <div class="btn" v-if="item.status == 4" @click="closeShow(item)">
            <!-- 行权 -->
            {{ $t('option.l38') }}
          </div>
          <div class="btn active" v-if="item.status == 5">
            <!-- 待结算 -->
            {{ $t('option.l39') }}
          </div>
        </div>
        <div class="body" v-if="item.status == 4">
          <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">{{ currencyUtil[item.market] }} {{ (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" :class="{up: getProfit(item) > 0 ,down: getProfit(item)<=0}">{{ getProfit(item) }} {{ serverUtil[item.market] }}</div>
              </div>
            </van-col>
            <van-col span="12"></van-col>
          </van-row>
        </div>
        <div class="body" v-if="item.status == 5">
          <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 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-row>
          <van-row gutter="25">
            <van-col span="12">
              <div class="col">
                <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-col span="12">
              <div class="col1">
                <div class="label">
                  <!-- 名义本金 -->
                  {{ $t('home.l9') }}
                </div>
                <!-- 万 -->
                <div class="val">{{ currencyUtil[item.market] }} {{ (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.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.l33') }}
                </div>
                <div class="val">{{ $handleDigits2(item.close_price) }} {{ 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.l34') }}
                </div>
                <div class="val">{{item.profit > 0 ? $handleDigits(item.profit) : 0.00}} {{ serverUtil[item.market] }}</div>
              </div>
            </van-col>
            <van-col span="12">
              <div class="col1">
                <div class="label">
                  <!-- 净利润 -->
                  {{ $t('option.l35') }}
                </div>
                <div class="val">{{item.profit > 0 ? (item.profit - $bigDecimal.add(item.commission, $bigDecimal.divide($bigDecimal.multiply((item.amount || 0), item.fee), 100))).toFixed(2) : ($bigDecimal.add(item.commission, $bigDecimal.divide($bigDecimal.multiply((item.amount || 0), item.fee), 100)) * -1).toFixed(2)}} {{ 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.l36') }}
                </div>
                <div class="val" :class="{up: item.profit > 0 ,down: item.profit<=0}">{{item.profit > 0 ? (item.profit).toFixed(2) : 0.00}} {{ serverUtil[item.market] }}</div>
              </div>
            </van-col>
            <van-col span="12"></van-col>
          </van-row>
        </div>
      </div>
    </div>
    <div style="background-color: #fff;">
      <!-- 暂无记录 -->
      <NoData :title="$t('common.l45')" v-if="list.length == 0"/>
    </div>
    <van-popup :close-on-click-overlay="false" v-model="closePop" :style="{ width: '292px' }">
      <div class="pop-box">
        <div class="tip">
          <!-- 是否确定提前行权 -->
          {{ $t('option.l37') }} 
          <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>
        </div>
        <div class="btn-box flex">
          <div class="btn ltn" @click="closePop = false">
            <!-- 取消 -->
            {{ $t('common.l2') }}
          </div>
          <div class="btn rtn" @click="closeOptionOrder">
            <!-- 确认 -->
            {{ $t('common.l3') }}
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { closeOptionOrder } from "@/api/option";
import { mapGetters } from "vuex";
import { copyText } from '@/utils/index'
export default {
  props: ['list', 'market'],
  inject: ['getproductDataObj'],
  data () {
    return {
      closePop: false,
      targetInfo: {}
    }
  },
  computed: {
    ...mapGetters(['currencyList']),
    productDataObj() {
      return this.getproductDataObj()
    },
    total() {
      var amountTotal = 0
      var commissionTotal = 0
      this.list.forEach(item => {
        amountTotal = Number(this.$bigDecimal.add(amountTotal, this.$bigDecimal.divide(item.amount, this.currencyList[this.serverUtil[item.market]] || 1)))
        commissionTotal = Number(this.$bigDecimal.add(commissionTotal, this.$bigDecimal.divide(item.commission, this.currencyList[this.serverUtil[item.market]] || 1)))
      })
      return {
        amountTotal,
        commissionTotal
      }
    },
    rate() {
      return (this.currencyList[this.currency] || 1)
    },
    currency() {
      return this.serverUtil[this.market] || 'USD'
    },
    currencyUtil() {
      return {
        'USD': '$',
        'CNY': '¥',
        'HKD': 'HK$',
      }
    }
  },
  methods: {
    closeOptionOrder() {
      this.fullscreenLoading = true
      closeOptionOrder({
        ordernum: this.targetInfo.ordernum,
        amount: this.targetInfo.amount,
        bak: ''
      }).then(res => {
        this.closePop = false
        this.$notify({
          // message: '操作成功',
          message: this.$t('common.l52'),
          type: 'success'
        });
        this.$emit('success')
      }).catch(() => {}).finally(() => {
        this.fullscreenLoading = false;
      })
    },
    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'
    },
    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
    },
    numToW(val) {
      if (!val) {
        return '0.00'
      }
      if (val < 10000) {
        return this.$handleDigits(val)
      }
      var num = val/10000
      return this.$handleDigits(num) + this.$t('home.l11')
    },
    copyText(text) {
      copyText(text)
    }
  }
}
</script>
<style lang="less" scoped>
.page {
  background-color: #F7F8FA;
  padding: 12px 17px 0;
}
.section {
  margin-bottom: 12px;
  .box {
    background-color: var(--bg-);
    padding: 11px 13px 12px;
    border-radius: 5px;
  }
  .border1 {
    border-top: 2px solid #FECB30;
  }
  .border2 {
    border-top: 2px solid #FF6F30;
  }
  .icon {
    height: 15px;
    margin-right: 1px;
  }
  .label {
    font-size: 12px;
    color: #333333;
  }
  .number {
    font-weight: 500;
    font-size: 16px;
    color: var(--color-1-);
    margin-top: 12px;
  }
  .number2 {
    font-size: 12px;
    color: #A6A6A6;
    font-weight: 400;
    margin-top: 12px;
  }
}
.list {
  padding-bottom: 1px;
  .item {
    margin-bottom: 12px;
    background-color: var(--bg-);
    border-radius: 5px;
  }
  .header {
    padding: 14px 93px 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;
    max-width: 120px;
    padding: 3px 10px;
    cursor: pointer;
    border-radius: 3px;
    border: 1px solid #000000;
    text-align: center;
    line-height: 18px;
    color: #000;
    font-size: 14px;
    font-weight: 400;
    &.active {
      border-color: #EBEBEB;
      color: #ABABAB;
    }
  }
  .ru {
    .header {
      padding: 14px 130px 8px 13px;
    }
    .btn {
      padding: 5px;
    }
  }
  .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;
      }
    }
  }
  .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;
    &.up {
      color: #DE2910;
    }
    &.down {
      color: #00B960;
    }
  }
  .bottom {
    font-weight: 400;
    font-size: 12px;
    color: #656568;
    .copy {
      cursor: pointer;
      margin-left: 8px;
      width: 14px;
    }
  }
}
.pop-box {
  padding: 30px 21px 20px;
  color: #000;
  .tip {
    text-align: center;
    font-size: 16px;
  }
  .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>