<template>
  <div class="page" v-loading.body.fullscreen="fullscreenLoading" element-loading-background="rgba(255, 255, 255, 0)">
    <van-sticky>
      <div class="sticky">
        <div class="header">
          <div class="back">
            <backIcon/>
          </div>
          <!-- USD钱包收支 -->
          {{ $t('account.l79') }}
          <div class="flex right">
            <img class="search" @click="$router.push('/search')" src="/img/icon/search.svg" alt="极度证券"/>
            <van-popover
              v-model="showPopover"
              placement="bottom-end"
              trigger="click"
            >
              <div class="popover-body">
                <div class="item flex" @click="goDepositUrl('/deposit')">
                  <img class="icon14" src="/img/account/icon14.png" alt="极度证券">
                  <div>
                    <!-- 存款 -->
                    {{ $t('home.l13') }}
                  </div>
                </div>
                <div class="item flex" @click="$router.push('/convert')">
                  <img class="icon14" src="/img/account/icon15.png" alt="极度证券">
                  <div>
                    <!-- 划转 -->
                    {{ $t('home.l15') }}
                  </div>
                </div>
                <div class="item flex" @click="$router.push('/chat')">
                  <img class="icon14" src="/img/account/icon17.png" alt="极度证券">
                  <div>
                    <!-- 客服 -->
                    {{ $t('home.l16') }}
                  </div>
                </div>
                <div class="item flex" @click="$router.replace('/')">
                  <img class="icon14" src="/img/account/icon16.png" alt="极度证券">
                  <div>
                    <!-- 首页 -->
                    {{ $t('tab.tab1') }}
                  </div>
                </div>
              </div>
              <template #reference>
                <img class="more" src="/img/icon/more.png" alt="极度证券"/>
              </template>
            </van-popover>
          </div>
        </div>
        <div class="filter-box flex">
          <div class="filter flex" @click="timePop = true">
            <!-- 选择时间 -->
            {{ $t('account.l80') }}
            <i class="el-icon-caret-bottom"></i>
          </div>
          <div class="filter flex" @click="filterPop = true">
            <!-- 筛选 -->
            {{ $t('option.l') }}
            <i class="el-icon-caret-bottom"></i>
          </div>
        </div>
      </div>
    </van-sticky>
    <!-- 没有更多了 -->
    <van-list
      v-model="loading"
      :finished="finished"
      :finished-text="listLength == 0 ? '' : $t('common.l46')"
      @load="onLoad"
    >
      <div class="item" v-for="(li, key) in dataObj" :key="key">
        <div class="top flex">
          <div>{{ getMounth(key) }}{{ $t('common.l31') }}
            <!-- 月 -->
          </div>
          <div class="right">
            <div class="total">
              <!-- 收 -->
              {{ $t('account.l81') }} <span class="red">${{ $numToThousand((amountObj[key].in)) }}</span></div>
            <div class="total">
              <!-- 支 -->
              {{ $t('account.l82') }} <span class="green">${{ $numToThousand((amountObj[key].out)) }}</span></div>
          </div>
        </div>
        <div class="body" v-for="(item, index) in li" :key="index" @click="$router.push('/usd-record-detail/' + item.ordernum)">
          <div class="left">
            <div>{{ getDate(item.insert_datetime) }}</div>
            <div class="week">{{ getWeek(item.insert_datetime) }}</div>
          </div>
          <div class="right">
            <img v-if="item.path == 1" class="icon" src="/img/account/icon19.png" alt="极度证券">
            <img v-if="item.path == 2" class="icon" src="/img/account/icon20.png" alt="极度证券">
            <div class="content">
              <div class="flex box">
                <div>{{ getType(item) }}</div>
                <div class="amount" :class="{red: item.path == 1, green: item.path == 2}">{{item.path == 1 ? '+' : '-'}}{{ $handleDigits(item.amount) }}</div>
              </div>
              <div class="flex box1">
                <div>{{ getMethod(item) }}</div>
                <!-- <div class="currency">{{ item.pay_currency }}</div> -->
                <div class="currency">
                  <!-- 美元 -->
                  {{ $t('common.l20') }}
                </div>
              </div>
              <div class="flex box2">
                <div>{{ getTime(item.insert_datetime) }}</div>
                <div class="balance">
                  <!-- 余额 -->
                  {{ $t('common.l33') }}:{{ $numToThousand((item.balance)) }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="no-box" v-if="listLength == 0 && !loading">
        <NoData :title="$t('common.l45')"/>
      </div>
    </van-list>
    <van-popup v-model="filterPop" round position="bottom">
      <filterBox @cancel="filterPop = false" :filterObj="filterObj" :maxAmount="max_amount" :minAmount="min_amount" @filterBack="filterBack" v-if="filterPop"/>
    </van-popup>
    <van-popup v-model="timePop" round position="bottom">
      <timeBox @cancel="timePop = false" :endDate="endDate" :startDate="startDate" @timeBack="timeBack"/>
    </van-popup>
    <van-popup v-model="depositPopShow" position="right" :style="{ width: '100%' }">
      <depositPop :url="depositUrl" @cancel="depositPopShow = false" />
    </van-popup>
  </div>
</template>
<script>
import { getCashRecordList } from "@/api/list";
import filterBox from "./components/filterBox.vue";
import timeBox from "./components/timeBox.vue";
import selectDepositPop from "@/mixins/selectDepositPop";
export default {
  components: {
    filterBox,
    timeBox
  },
  mixins: [selectDepositPop],
  data () {
    return {
      dataObj: {
      },
      amountObj: {
      },
      filterObj: {
        path: '',
        currency: '',
        type: '',
        min_amount: '',
        max_amount: '',
      },
      min_amount: '',
      max_amount: '',
      startDate: '',
      endDate: '',
      filterPop: false,
      timePop: false,
      listLength: 0,
      loading: false,
      finished: false,
      showPopover: false,
      pageNum: 0,
      pageSize: 10,
    }
  },
  computed: {
    payName() {
      return {
        // '1': '银行汇款',
        // '2': '国际电汇',
        // '3': '数字货币',
        // '4': '数字货币',
        '1': this.$t('account.l31'),
        '2': this.$t('account.l32'),
        '3': this.$t('account.l33'),
        '4': this.$t('account.l33'),
      }
    },
  },
  methods: {
    onLoad() {
      this.pageNum += 1
      var data = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        status: 100,
        ...this.filterObj,
        startDate: this.startDate,
        endDate: this.endDate,
      }
      if (this.min_amount) {
        data.min_amount = this.min_amount
      }
      if (this.max_amount) {
        data.max_amount = this.max_amount
      }
      getCashRecordList(data).then(res => {
        var list = res.list || []
        list.forEach(item => {
          item.from = item.from ? JSON.parse(item.from) : {}
          item.to = item.to ? JSON.parse(item.to) : {}
          if (item.insert_datetime) {
            var date = this.$parseTime(new Date(item.insert_datetime.replace(new RegExp(/-/gm), "/")), '{y}/{m}')
            if (this.dataObj[date]) {
              this.dataObj[date].push(item)
            } else {
              this.$set(this.dataObj, date, [item])
              this.$set(this.amountObj, date, {
                out: 0,
                in: 0,
              })
            }
            if (item.path == 2) {
              this.amountObj[date].out = Number(this.$bigDecimal.add(this.amountObj[date].out, item.amount))
            }
            if (item.path == 1) {
              this.amountObj[date].in = Number(this.$bigDecimal.add(this.amountObj[date].in, item.amount))
            }
          }
        })
        if (this.pageNum == 1) {
          this.listLength = list.length;
        } else {
          this.listLength += list.length;
        }
        this.loading = false;
        if (this.listLength >= res.total) {
          this.finished = true;
        }
      }).catch(() => {
        this.loading = false;
        this.finished = true;
      })
    },
    filterBack(a, b, c) {
      this.filterObj = a
      this.min_amount = b
      this.max_amount = c
      this.filterPop = false
      this.reset()
    },
    timeBack(startDate, endDate) {
      this.startDate = this.$parseTime(new Date(startDate.replace(new RegExp(/-/gm), "/")), '{y}-{m}-{d}')
      if (endDate) {
        this.endDate = endDate
      } else {
        var now = new Date(startDate.replace(new RegExp(/-/gm), "/"))
        now.setMonth(now.getMonth() + 1)
        now.setDate(now.getDate() - 1)
        this.endDate = this.$parseTime(now, '{y}-{m}-{d}')
      }
      this.timePop = false
      this.reset()
    },
    reset() {
      this.loading = true
      this.pageNum = 0
      this.finished = false
      this.dataObj = {}
      this.amountObj = {}
      this.onLoad()
    },
    getMethod(item) {
      if (item.type == 100) {
        // 第三方支付
        return (item.pay_type > 100 ? this.$t('account.l30') : this.payName[item.pay_type]) || '--'
      }
      if (item.type == 200) {
        // return 'OTC USD支付'
        return this.$t('account.l49')
      }
      if (item.type == 300) {
        // return '期权'
        return this.$t('home.l5')
      }
      if ([1,2,3,4,5].indexOf(item.type) !== -1) {
        if (item.path == 1) {
          var text = {
            // 'HK': '港元兑换美元',
            // 'SZ': '人民币兑换美元',
            // 'CFD': 'USD支付',
            // 'follow': 'USD支付',
            'HK': this.$t('account.l50'),
            'CN': this.$t('account.l51'),
            'SH': this.$t('account.l51'),
            'SZ': this.$t('account.l51'),
            'CFD': this.$t('account.l52'),
            'US': this.$t('account.l52'),
            'follow': this.$t('account.l52'),
          }
          return text[item.from.server]
        }
        if (item.path == 2) {
          var text = {
            // 'HK': '美元兑换港元',
            // 'CN': '美元兑换人民币',
            // 'CFD': 'USD支付',
            // 'follow': 'USD支付',
            'HK': this.$t('account.l53'),
            'CN': this.$t('account.l54'),
            'SH': this.$t('account.l54'),
            'SZ': this.$t('account.l54'),
            'US': this.$t('account.l52'),
            'CFD': this.$t('account.l52'),
            'follow': this.$t('account.l52'),
          }
          return text[item.to.server]
        }
      }
    },
    getType(item) {
      if (item.type == 100 && item.path == 1) {
        // 存款
        return this.$t('home.l13')
      }
      if (item.type == 100 && item.path == 2) {
        // 取款
        return this.$t('home.l14')
      }
      var text = {
        // '1': '兑换',
        // '2': '兑换',
        // '3': '兑换',
        // '4': '兑换',
        // '5': '兑换',
        // '200': '外部转账',
        // '300': '期权',
        // '400': '现金券奖励',
        // '900': '佣金',
        // '1000': '销售佣金',
        '1': this.$t('account.l28'),
        '2': this.$t('account.l28'),
        '3': this.$t('account.l28'),
        '4': this.$t('account.l28'),
        '5': this.$t('account.l28'),
        '200': this.$t('account.l8'),
        '300': this.$t('account.l55'),
        '400': this.$t('account.l77'),
        '900': this.$t('account.l78'),
        '1000': this.$t('account.l121'),
      }
      return text[item.type]
    },
    getDate(val) {
      return new Date(val.replace(new RegExp(/-/gm), "/")).getDate()
    },
    getWeek(val) {
      var num = new Date(val.replace(new RegExp(/-/gm), "/")).getDay()
      // var list = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
      var list = [this.$t('product.l83'), this.$t('product.l84'), this.$t('product.l85'), this.$t('product.l86'), this.$t('product.l87'), this.$t('product.l88'), this.$t('product.l89')]
      return list[num]
    },
    getTime(val) {
      return val.split(' ')[1]
    },
    getMounth(val) {
      return Number(val.split('/')[1])
    }
  }
}
</script>
<style lang="less" scoped>
.page {
  min-height: 100vh;
  background-color: #F9FAFB;
}
.sticky {
  background-color: #F9FAFB;
}
.header {
  position: relative;
  font-size: 18px;
  font-weight: 600;
  background-color: var(--bg-);
  padding: 14px 40px 10px;
  text-align: center;
  margin-bottom: 2px;
  .back {
    position: absolute;
    top: 11px;
    left: 9px;
  }
  .right {
    position: absolute;
    top: 14px;
    right: 12px;
    column-gap: 18px;
  }
  .search {
    width: 19px;
  }
  .more {
    width: 20px;
    display: block;
  }
}
.filter-box {
  background-color: var(--bg-);
  padding: 8px 11px;
  column-gap: 16px;
  .filter {
    background-color: #F3F4F5;
    height: 30px;
    border-radius: 15px;
    min-width: 68px;
    padding-left: 12px;
    padding-right: 13px;
    justify-content: center;
    column-gap: 5px;
    font-size: 13px;
    color: #323334;
    letter-spacing: 0;
  }
}
.item {
  .top {
    justify-content: space-between;
    padding-left: 11px;
    padding-right: 15px;
    height: 67px;
    background-image: url('@/assets/img/usd_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    font-size: 18px;
    color: #323334;
    .right {
      font-size: 14px;
      line-height: 16px;
      color: #202020;
    }
    .red {
      color: #D62619;
    }
    .green {
      color: #329D81;
    }
  }
  .total + .total {
    margin-top: 7px;
  }
}
.body {
  display: flex;
  .left {
    width: 39px;
    text-align: center;
    padding-top: 24px;
    text-align: center;
    color: #79889B;
    font-size: 16px;
    font-weight: 500;
  }
  .week {
    font-size: 10px;
    line-height: 14px;
    margin-top: 7px;
    padding: 0 2px;
    word-break: break-all;
  }
  .right {
    flex: 1;
    min-width: 10%;
    max-width: 100%;
    background-color: #fff;
    padding: 18px 16px 0;
    position: relative;
    .icon {
      position: absolute;
      top: 29px;
      left: 9px;
      width: 28px;
    }
  }
  .content {
    padding-left: 30px;
    padding-bottom: 23px;
    border-bottom: 1px solid #EEF0F0;
  }
  .box {
    margin-bottom: 5px;
    font-weight: 500;
    color: var(--color-1-);
    justify-content: space-between;
    .amount {
      font-size: 23px;
      line-height: 32px;
    }
    .red {
      color: #D62619;
    }
    .green {
      color: #359E82;
    }
  }
  .box1 {
    font-size: 12px;
    color: #333435;
    margin-bottom: 14px;
    justify-content: space-between;
    .currency {
      color: #828282;
    }
  }
  .box2 {
    justify-content: space-between;
    color: #828282;
    font-size: 11px;
    .balance {
      font-size: 12px;
      line-height: 17px;
    }
  }
}
.no-box {
  padding-bottom: 20px;
}

.popover-body {
  .item {
    cursor: pointer;
    height: 42px;
    padding-left: 16px;
    padding-right: 8px;
    color: #2C2C2C;
    font-size: 14px;
    min-width: 122px;
    max-width: 180px;
    line-height: 1;
    &+.item {
      border-top: 1px solid #E9E9E9;
    }
  }
  .icon14 {
    width: 22px;
    margin-right: 8px;
  }
}
</style>