<template>
  <div>
    <div class="filter-box flex">
      <div class="list flex">
        <div class="item" :class="{ active: bar == 1 }" @click="getStartDate(1)">
          <!-- 日 -->
          {{ $t('common.l29') }}
        </div>
        <div class="line"></div>
        <div class="item" :class="{ active: bar == 2 }" @click="getStartDate(2)">
          <!-- 周 -->
          {{ $t('common.l30') }}
        </div>
        <div class="line"></div>
        <div class="item" :class="{ active: bar == 3 }" @click="getStartDate(3)">
          <!-- 月 -->
          {{ $t('common.l31') }}
        </div>
        <div class="line"></div>
        <div class="item" :class="{ active: bar == 4 }" @click="dateShow = true">
          <!-- 自定义 -->
          {{ $t('common.l32') }}
        </div>
      </div>
    </div>
    <div class="ul" v-if="list.length">
      <div class="li" v-for="item in list" :key="item.ticket" @click="rowClick(item)">
        <div class="cmd flex" v-if="item.cmd == 6" :class="item.profit > 0 ? 'cmd0' : 'cmd1'">
          <!-- 余额 -->
          {{ $t('common.l33') }}
        </div>
        <div class="cmd flex" v-else :class="'cmd' + item.cmd">
          {{ cmdText1[item.cmd] }}
        </div>
        <div class="body" v-if="item.cmd != 6">
          <div class="left">
            <div class="top flex">
              <div>#{{ item.ticket }}</div>
              <div class="flex">
                <div class="label">
                  <!-- 手数 -->
                  {{ $t('exchange.l16') }}
                </div>
                <div class="val">{{ $handleDigits2(Number($bigDecimal.divide(item.volume, 100))) }}</div>
              </div>
            </div>
            <div class="title">{{ item.productBean.title }}</div>
            <!-- <div class="title" v-else-if="language == 'zh-TW'">{{ item.productBean.name_cht || item.productBean.title }}</div> -->
            <!-- <div class="title" v-else>{{ item.productBean.name_en || (item.productBean.market == 'CFD' ? item.productBean.symbol : item.productBean.title) }}</div> -->
            <div class="symbol">{{ item.symbol }}</div>
          </div>
          <div class="right" v-if="(item.cmd == 0 || item.cmd == 1)">
            <div class="col1 flex">
              <div class="label">
                <!-- 数量 -->
                {{ $t('common.l25') }}
              </div>
              <div class="val">{{ $handleDigits($bigDecimal.multiply($bigDecimal.divide(item.volume, 100), item.productBean.contract_size)) }}</div>
            </div>
            <div class="profit" :class="(item.profit > 0) ? 'up' : 'down'">
              {{ item.profit > 0 ? '+' : "" }}{{ $handleDigits(item.profit) }} {{ serverUtil[item.productBean.market] }}
            </div>
          </div>
          <div class="right" v-else>
            <div class="col">
              <div class="flex">
                <div class="label">
                  <!-- 数量 -->
                  {{ $t('common.l25') }}
                </div>
                <div class="val">{{ $handleDigits($bigDecimal.multiply($bigDecimal.divide(item.volume, 100), item.productBean.contract_size)) }}</div>
              </div>
              <div class="flex">
                <div class="label lab">
                  <!-- 方向 -->
                  {{ $t('exchange.l18') }}
                </div>
                <div class="val">{{ cmdText[item.cmd] }}</div>
              </div>
              <div class="flex">
                <div class="label">
                  <!-- 状态 -->
                  {{ $t('common.l34') }}
                </div>
                <div class="val">
                  <!-- 已撤销 -->
                  {{ $t('ajax.404') }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-else>
          <div class="ticket">#{{ item.ticket }}</div>
          <div class="balance flex">
            <div v-if="item.comment && item.comment.indexOf('card-') != -1">{{ getComment(item.comment) }}</div>
            <!-- <div v-else>{{item.profit >= 0 ? '资金转入' : '资金转出'}}</div> -->
            <div v-else>{{item.profit >= 0 ? $t('exchange.l24') : $t('exchange.l25')}}</div>
            <div class="profit1" :class="(item.profit >= 0) ? 'up' : 'down'">{{ $numToThousand(item.profit) }} {{ serverUtil[item.mt_code] }}</div>
          </div>
          <div class="flex">
            <div class="label label1">
              <!-- 时间 -->
              {{ $t('common.l24') }}
            </div>
            <div class="val val1">{{ item.close_time.replace(new RegExp(/-/gm), "/") }}</div>
          </div>
        </div>
        <template v-if="(item.cmd == 0 || item.cmd == 1)">
          <div class="flex price">
            <div>{{ $handleDigits(item.open_price, item.productBean.digits) }}</div>
            &gt;
            <div :class="(item.cmd == 0) ? 'up' : 'down'">{{ $handleDigits(item.close_price, item.productBean.digits) }}</div>
          </div>
        </template>
        <template v-else-if="item.cmd != 6">
          <div class="flex">
            <div class="label label1">
              <!-- 挂单价格 -->
              {{ $t('exchange.l17') }}
            </div>
            <div class="val val1">{{ $handleDigits(item.open_price, item.productBean.digits) }}</div>
          </div>
          <div class="time flex">
            <div class="flex">
              <div class="label label1">
                <!-- 挂单 -->
                {{ $t('exchange.l23') }}
              </div>
              <div class="val val1">{{ item.open_time.replace(new RegExp(/-/gm), "/") }}</div>
            </div>
            <div class="flex">
              <div class="label label1">
                <!-- 撤销 -->
                {{ $t('exchange.l26') }}
              </div>
              <div class="val val1">{{ item.close_time.replace(new RegExp(/-/gm), "/") }}</div>
            </div>
          </div>
        </template>
      </div>
    </div>
    <NoData pTop="20px" v-if="list.length == 0"></NoData>
    <div class="row flex">
      <div class="label">
        <!-- 利润 -->
        {{ $t('exchange.l27') }}
      </div>
      <div>{{ info.profit }}</div>
    </div>
    <div class="row flex">
      <div class="label">
        <!-- 结余 -->
        {{ $t('exchange.l28') }}
      </div>
      <div>{{ $numToThousand(info.balance) }}</div>
    </div>
    <van-popup class="order-popup" v-model="operateShow" round position="bottom">
      <operateView @cancel="operateShow = false" v-if="operateShow" :info="targetInfo"/>
    </van-popup>
    <van-calendar v-model="dateShow" :default-date="[date1, date2]" :min-date="minDate" :max-date="maxDate" type="range" @confirm="onConfirm" />
  </div>
</template>
<script>
import operateView from "./components/operateView.vue";
import { parseTime } from "@/utils/index";
import { getTransactionBalanceList } from '@/api/exchange'
import bus from '@/utils/bus'
export default {
  props: ['accountInfo'],
  components: {
    operateView
  },
  data () {
    return {
      list: [],
      bar: '',
      startDate: '',
      endDate: '',
      date1: '',
      date2: '',
      dateShow: false,
      minDate: new Date(1),
      maxDate: new Date(),
      operateShow: false,
      targetInfo: {},
      info: {
        profit: '',
        balance: ''
      }
    }
  },
  computed: {
    cmdText() {
      return {
        // '2': '低价买入',
        // '3': '高价卖出',
        // '4': '高价买入',
        // '5': '低价卖出',
        '2': this.$t('exchange.l7'),
        '3': this.$t('exchange.l8'),
        '4': this.$t('exchange.l9'),
        '5': this.$t('exchange.l10'),
      }
    },
    cmdText1() {
      return {
        // '0': '买多',
        // '1': '卖空',
        '0': this.$t('exchange.l21'),
        '1': this.$t('exchange.l22'),
        // '2': '买多委托',
        // '3': '卖空委托',
        // '4': '买多委托',
        // '5': '卖空委托',
        '2': this.$t('exchange.l29'),
        '3': this.$t('exchange.l30'),
        '4': this.$t('exchange.l29'),
        '5': this.$t('exchange.l30'),
      }
    }
  },
  created() {
    this.getStartDate(1)
    this.date2 = new Date()
    this.date1 = new Date()
    this.date1.setDate(this.date1.getDate() - 6)
    bus.$on('updateCloseOrder', this.updateOrder)
  },
  methods: {
    rowClick(row) {
      if (row.cmd == 6) {
        return
      }
      this.targetInfo = row
      this.operateShow = true
    },
    onConfirm(date) {
      this.bar = 4
      this.date1 = date[0]
      this.date2 = date[1]
      this.dateShow = false
      this.startDate = parseTime(this.date1, '{y}-{m}-{d}')
      this.endDate = parseTime(this.date2, '{y}-{m}-{d}')
      this.getCloseOrderList()
    },
    updateOrder() {
      if (this.bar == 1) {
        this.getCloseOrderList()
      }
    },
    getStartDate(timeType) {
      if (this.bar == timeType) {
        return
      }
      this.bar = timeType
      var n = new Date()
      if (timeType === 3) {
        n = n.setDate(n.getDate()-30);
        this.startDate = parseTime(n, '{y}-{m}-{d}')
        this.endDate = parseTime(new Date(), '{y}-{m}-{d}')
      }
      if (timeType === 2) {
        n = n.setDate(n.getDate()-7);
        this.startDate = parseTime(n, '{y}-{m}-{d}')
        this.endDate = parseTime(new Date(), '{y}-{m}-{d}')
      }
      if (timeType === 1) {
        // n = n.setDate(n.getDate()-1);
        this.startDate = parseTime(new Date(), '{y}-{m}-{d}')
        this.endDate = ''
      }
      this.getCloseOrderList()
    },
    getCloseOrderList() {
      getTransactionBalanceList({
        startDate: this.startDate,
        endDate: this.endDate,
        pageNum: 1,
        account: this.accountInfo.account,
        server: this.accountInfo.server
      }).then(res => {
        var list = res.list || []
        // if (this.bar == 1) {
        //   var n = parseTime(new Date(), '{y}-{m}-{d}')
        //   list = list.filter(item => {
        //     return parseTime(new Date(item.close_time.replace(new RegExp(/-/gm), "/") + ' GMT'), '{y}-{m}-{d}') == n
        //   })
        // }
        var profit = 0
        var balance = 0
        list.forEach((item) => {
          if (item.cmd !== 6) {
            profit += ((item.profit) || 0)
            profit += ((item.commission) || 0)
            profit += ((item.swaps) || 0)
          } else {
            balance += item.profit
          }
        })
        balance += profit
        this.info.profit = profit.toFixed(2)
        this.info.balance = balance.toFixed(2)
        this.list = list
      }).catch(() => {})
    },
    getComment(comment) {
      var card = comment.slice(0, 7)
      var text = {
        // 'card-1-': '抵扣券返现',
        // 'card-2-': '减息券返现',
        // 'card-10': '现金券返现',
        'card-1-': this.$t('exchange.l31'),
        'card-2-': this.$t('exchange.l32'),
        'card-10': this.$t('exchange.l33'),
      }
      return text[card] || this.$t('exchange.l24')
    },
    marketAll(item) {
      return this.$handleDigits(this.$bigDecimal.multiply(item.close_price, this.$bigDecimal.divide(item.volume, 100)))
    },
    lots(item) {
      return this.$handleDigits2(Number(this.$bigDecimal.divide(item.volume, 100)))
    },
  },
}
</script>
<style lang="less" scoped>
.ul {
  padding-top: 7px;
}
.li {
  border-radius: 8px;
  border: 1px solid #E2E2E2;
  position: relative;
  padding: 9px 9px 8px 25px;
  overflow: hidden;
  background-color: #fff;
  &+.li {
    margin-top: 8px;
  }
  .cmd {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    justify-content: center;
    width: 15px;
    font-size: 10px;
    text-align: center;
    color: #fff;
    line-height: 12px;
    word-break: break-word;
  }
  .left {
    flex: 1;
    min-width: 20%;
    max-width: 100%;
    padding-right: 5px;
  }
  .cmd0,.cmd2,.cmd4 {
    background-color: #EA4A45;
  }
  .cmd1,.cmd3,.cmd5 {
    background-color: #07AC3A;
  }
  .body {
    display: flex;
    align-items: flex-start;
  }
  .balance {
    justify-content: space-between;
    font-size: 14px;
    font-weight: 600;
    color: #333333;
    line-height: 15px;
    margin-bottom: 17px;
  }
  .top {
    font-size: 12px;
    color: #6C6C6C;
    column-gap: 21px;
    margin-bottom: 6px;
  }
  .ticket {
    font-size: 12px;
    color: #6C6C6C;
    margin-bottom: 19px;
  }
  .title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-1-);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 21px;
  }
  .symbol {
    color: #6C6C6C;
    font-size: 12px;
  }
  .col1 {
    justify-content: flex-end;
  }
  .col {
    .flex {
      margin-bottom: 9px;
      justify-content: space-between;
    }
  }
  .profit {
    padding-top: 18px;
    font-size: 17px;
    font-weight: 600;
    text-align: right;
  }
  .profit1 {
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
  }
  .price {
    font-size: 12px;
    color: #333333;
    padding-top: 11px;
    column-gap: 4px;
  }
  .label {
    font-size: 12px;
    color: #6C6C6C;
    padding-right: 4px;
    &.lab {
      padding-right: 8px;
    }
    &.label1{
      font-size: 11px;
    }
  }
  .val {
    font-size: 12px;
    color: #333333;
    &.val1{
      font-size: 11px;
    }
  }
  .time {
    justify-content: space-between;
    margin-top: 5px;
  }
  .up {
    color: #EA4A45;
  }
  .down {
    color: #07AC3A;
  }
}
.filter-box {
  justify-content: center;
  padding-top: 9px;
  padding-bottom: 7px;
  .list {
    background-color: #F2F2F2;
    border-radius: 4px;
    padding: 2px;
  }
  .item {
    line-height: 24px;
    border-radius: 4px;
    padding: 0 14px;
    cursor: pointer;
    font-size: 12px;
    color: #6A6A6A;
    &.active {
      background-color: rgba(255, 255, 255, 0.82);
      color: #000;
    }
  }
  .line {
    height: 12px;
    width: 1px;
    background-color: #D0D0D0;
  }
}
.row {
  justify-content: space-between;
  font-size: 15px;
  color: var(--color-1-);
  height: 40px;
  &+.row {
    border-top: 1px solid #F0F0F0;
  }
  .label {
    color: #7C7C7C;
  }
}
</style>