<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 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-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('option.l29') }}({{ currency }})</div>
            </div>
            <div class="number">
              <div>{{ currencyUtil[currency] }} {{ numToW(total.profitTotal * rate) }}</div>
              <div class="number2" v-if="market != 'US'">≈ $ {{ numToW(total.profitTotal) }}</div>
            </div>
          </div>
        </div>
      </van-col>
    </van-row>
    <div class="list" v-if="list.length">
      <!-- 没有更多了 -->
      <van-list
        v-model="loading"
        :finished="finished"
        :finished-text="list.length == 0 ? '' : $t('common.l5')"
        @load="onLoad"
      >
        <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 == 8" @click="$router.push('/product-detail/' + item.code + '/6')">
              <!-- 重新下单 -->
              {{ $t('option.l30') }}
            </div>
            <div class="btn active" v-if="item.status == 6">
              <!-- 已完成 -->
              {{ $t('ajax.403') }}
            </div>
          </div>
          <div class="body" v-if="item.status == 8">
            <van-row gutter="25">
              <van-col span="12">
                <div class="col">
                  <div class="label">
                    <!-- 订单状态 -->
                    {{ $t('option.l2') }}
                  </div>
                  <div class="val red" v-if="item.revoke_type == 10">
                    <!-- 已拒绝 -->
                    {{ $t('option.l31') }}
                  </div>
                  <div class="val red" v-else>
                    <!-- 已撤销 -->
                    {{ $t('ajax.404') }}
                  </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">{{ currencyUtil[item.market] }} {{ (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.l11') }}
                  </div>
                  <div class="val">{{ item.price }}%</div>
                </div>
              </van-col>
            </van-row>
            <van-row gutter="25">
              <van-col span="12">
                <div class="col1">
                  <div class="label">
                    <!-- 浮动上限 -->
                    {{ $t('option.l12') }}
                  </div>
                  <div class="val">{{ getFee(item) }}%</div>
                </div>
              </van-col>
              <van-col span="12">
                <div class="col1">
                  <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-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="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-row>
            <van-row v-if="item.bak">
              <van-col span="24">
                <div class="col">
                  <div class="label1">
                    <!-- 拒绝原因 -->
                    {{ $t('option.l32') }}:
                  </div>
                  <div class="val red tleft">{{ item.bak }}</div>
                </div>
              </van-col>
            </van-row>
          </div>
          <div class="body" v-if="item.status == 6">
            <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.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.l10') }}
                  </div>
                  <div class="val">{{ $handleDigits(item.open_price, (item.market == 'CN') ? 2 : 3) }} {{ serverUtil[item.market] }}</div>
                </div>
              </van-col>
              <van-col span="12">
                <div class="col1">
                  <div class="label">
                    <!-- 行权价格 -->
                    {{ $t('option.l33') }}
                  </div>
                  <div class="val">{{ $handleDigits(item.close_price, (item.market == 'CN') ? 2 : 3) }} {{ 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" :class="{up: item.profit > 0 ,down: item.profit<=0}">{{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" :class="{up: item.profit1>0,down: item.profit1<=0}">{{ $handleDigits(item.profit1) }} {{ serverUtil[item.market] }}</div>
                </div>
              </van-col>
            </van-row>
          </div>
        </div>
      </van-list>
    </div>
    <div style="background-color: #fff;">
      <!-- 暂无记录 -->
      <NoData :title="$t('common.l45')" v-if="list.length == 0"/>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { copyText } from '@/utils/index'
import { getOptionOrderList } from "@/api/option";
export default {
  props: ['market'],
  data () {
    return {
      list: [],
      pageNum: 1,
      pageSize: 15,
      loading: false,
      finished: false,
    }
  },
  watch: {
    'market'() {
      this.pageNum = 1
      this.finished = false
      this.loading = true
      this.getOptionOrderList()
    }
  },
  computed: {
    ...mapGetters(['currencyList']),
    total() {
      var profitTotal = 0
      var commissionTotal = 0
      this.list.forEach(item => {
        if (item.status == 6) {
          commissionTotal = Number(this.$bigDecimal.add(commissionTotal, this.$bigDecimal.divide(item.commission, this.currencyList[this.serverUtil[item.market]] || 1)))
          if (item.profit > 0) {
            profitTotal = Number(this.$bigDecimal.add(profitTotal, this.$bigDecimal.divide(this.$bigDecimal.subtract(item.profit, this.$bigDecimal.add(item.commission, this.$bigDecimal.divide(this.$bigDecimal.multiply((item.amount || 0), item.fee), 100))), this.currencyList[this.serverUtil[item.market]] || 1)))
          } else {
            profitTotal = Number(this.$bigDecimal.add(profitTotal, this.$bigDecimal.divide(this.$bigDecimal.multiply(this.$bigDecimal.add(item.commission, this.$bigDecimal.divide(this.$bigDecimal.multiply((item.amount || 0), item.fee), 100)), -1), this.currencyList[this.serverUtil[item.market]] || 1)))
          }
        }
      })
      return {
        profitTotal,
        commissionTotal
      }
    },
    rate() {
      return (this.currencyList[this.currency] || 1)
    },
    currency() {
      return this.serverUtil[this.market] || 'USD'
    },
    currencyUtil() {
      return {
        'USD': '$',
        'CNY': '¥',
        'HKD': 'HK$',
      }
    }
  },
  created () {
    this.getOptionOrderList()
  },
  methods: {
    onLoad() {
      this.pageNum += 1
      this.getOptionOrderList()
    },
    getOptionOrderList() {
      if (this.pageNum == 1) {
        this.fullscreenLoading = true
      }
      getOptionOrderList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        market: this.market,
        status:'[6, 8]'
      }).then(res => {
        var list = res.list || []
        list.forEach(item => {
          if (item.status != 6) {
            return
          }
          var fee = this.$bigDecimal.add(item.commission,this.$bigDecimal.divide(this.$bigDecimal.multiply((item.amount || 0), item.fee), 100))
          if (item.profit > 0) {
            item.profit1 = item.profit - Number(fee)
          } else {
            item.profit1 = Number(fee) * -1
          }
        })
        if (this.pageNum == 1) {
          this.list = list
        } else {
          this.list = this.list.concat(list)
        }
        // 加载状态结束
        this.loading = false;
        // 数据全部加载完成
        if (this.list.length >= res.total) {
          this.finished = true;
        }
      }).catch(() => {
        this.loading = false;
        this.finished = true;
      }).finally(() => {
        this.fullscreenLoading = false;
      })
    },
    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')
    },
    getFee(item) {
      return Number(this.$bigDecimal.multiply(this.$bigDecimal.divide(this.$bigDecimal.subtract(item.max_price, item.price), item.price), 100)).toFixed(0)
    },
    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 100px 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: #1BCC41;
      color: #1BCC41;
    }
  }
  .ru {
    .header {
      padding: 14px 135px 8px 13px;
    }
  }
  .body {
    padding: 12px 10px 1px 13px;
    font-size: 12px;
  }
  .van-row {
    margin-bottom: 10px;
  }
  .col {
    display: flex;
    align-items: flex-start;
  }
  .col1 {
    display: flex;
    align-items: flex-start;
  }
  .label {
    color: #656568;
    letter-spacing: 0px;
    width: 58px;
    padding-right: 2px;
    &.la1 {
      padding-right: 10px;
    }
    &.flex {
      justify-content: space-between;
    }
  }
  .label1 {
    color: #656568;
    letter-spacing: 0px;
    padding-right: 6px;
  }
  .val {
    flex: 1;
    min-width: 10%;
    max-width: 100%;
    font-weight: 600;
    color: var(--color-1-);
    text-align: right;
    letter-spacing: 0;
    &.red {
      color: #FE2929;
    }
    &.tleft {
      text-align: left;
    }
    &.up {
      color: #DE2910;
    }
    &.down {
      color: #00B960;
    }
  }
  .val1 {
    color: #DE2910;
  }
  .bottom {
    font-weight: 400;
    font-size: 12px;
    color: #656568;
    .copy {
      cursor: pointer;
      margin-left: 8px;
      width: 14px;
    }
  }
}
</style>