<template>
  <div>
    <van-sticky class="sticky">
      <div class="header">
        <div class="back">
          <backIcon/>
        </div>
        <!-- 资金记录 -->
        {{ $t('account.l9') }}
        <div class="right" v-if="type != 4">
          <van-popover
            v-model="showPopover"
            placement="bottom-end"
            trigger="click"
          >
            <div class="filter-box">
              <div class="check" v-if="type == 1 || type == 2" @click="statusShow = true;showPopover = false">
                <!-- 所有状态 -->
                {{ statusText[status] || $t('account.l29') }}
              </div>
              <div class="check" v-if="type == 1 || type == 3" @click="accountShow = true;showPopover = false">
                {{ getServerName }}
              </div>
            </div>
            <template #reference>
                <img class="filter" src="/img/icon/filter.png" alt="极度证券"/>
            </template>
          </van-popover>
        </div>
      </div>
      <div class="tabbar flex">
        <div class="bar" :class="{active: type == '1'}" @click="changeType('1')">
          <div>
            <!-- 存入资金 -->
            {{ $t('account.l26') }}
          </div>
          <div class="line"></div>
        </div>
        <div class="bar" :class="{active: type == '2'}" @click="changeType('2')">
          <div>
            <!-- 提取资金 -->
            {{ $t('account.l37') }}
          </div>
          <div class="line"></div>
        </div>
        <div class="bar" :class="{active: type == '3'}" @click="changeType('3')">
          <div>
            <!-- 货币兑换 -->
            {{ $t('account.l38') }}
          </div>
          <div class="line"></div>
        </div>
        <div class="bar" :class="{active: type == '4'}" @click="changeType('4')">
          <div>
            <!-- 资金转账 -->
            {{ $t('account.l39') }}
          </div>
          <div class="line"></div>
        </div>
      </div>
    </van-sticky>
    <keep-alive>
      <component ref="component" :accountInfo="accountInfo" :status="status" :is="viewList[type - 1]" />
    </keep-alive>
    <van-popup v-model="accountShow" round position="bottom">
      <accountList @cancel="accountShow = false" v-if="accountShow" :info="accountInfo" @success="selectAccountBack"/>
    </van-popup>
    <van-popup v-model="statusShow" round position="bottom">
      <statusList @cancel="statusShow = false" v-if="statusShow" :status1="status" @success="selectStatusBack"/>
    </van-popup>
  </div>
</template>
<script>
import depositList from "./components/depositList.vue";
import withdrawList from "./components/withdrawList.vue";
import convertList from "./components/convertList.vue";
import transferList from "./components/transferList.vue";
import accountList from "./components/accountList.vue";
import statusList from "./components/statusList.vue";
import bus from '@/utils/bus'
export default {
  components: {
    depositList,
    withdrawList,
    convertList,
    transferList,
    accountList,
    statusList,
  },
  data() {
    return {
      showPopover: false,
      type: '1',
      viewList: ['depositList', 'withdrawList', 'convertList', 'transferList'],
      accountShow: false,
      statusShow: false,
      status: '',
      accountInfo: {},
      statusText: {
        // '1': '未支付',
        // '2': '待审核',
        // '3': '已驳回',
        // '4': '处理中',
        // '5': '已撤销',
        // '100': '已完成',
        '1': this.$t('ajax.201'),
        '2': this.$t('ajax.350'),
        '3': this.$t('ajax.408'),
        '4': this.$t('ajax.401'),
        '5': this.$t('ajax.404'),
        '100': this.$t('ajax.403'),
      },
    }
  },
  computed: {
    getServerName() {
      if (this.accountInfo.uid) {
        return 'USD'
      }
      if (this.accountInfo.account) {
        return this.serverName[this.accountInfo.server]
      }
      // 所有账户
      return this.$t('account.l27')
    },
  },
  created () {
    if (this.$route.params.type) {
      this.type = this.$route.params.type
    }
    bus.$emit('updateAssets', ['getCash', 'getAccountList'])
  },
  methods: {
    selectAccountBack(val) {
      this.accountShow = false
      if ((this.accountInfo.server == val.server && val.server) || (this.accountInfo.uid == val.uid && val.uid)) {
        return
      }
      this.accountInfo = val
      this.$nextTick(() => {
        this.$refs['component'].reset()
      })
    },
    selectStatusBack(val) {
      this.statusShow = false
      if (this.status == val) {
        return
      }
      this.status = val
      this.$nextTick(() => {
        this.$refs['component'].reset()
      })
    },
    changeType(type) {
      if(this.type == type) {
        return
      }
      this.type = type
      this.$router.replace('/account-records/' + this.type)
    }
  }
}
</script>
<style lang="less" scoped>
.sticky {
  background-color: var(--bg-);
}
.header {
  position: relative;
  font-size: 18px;
  font-weight: 600;
  background-color: var(--bg-);
  padding-top: 14px;
  padding-bottom: 19px;
  text-align: center;
  .back {
    position: absolute;
    top: 11px;
    left: 9px;
  }
  .right {
    position: absolute;
    top: 11px;
    right: 15px;
  }
  .filter {
    display: block;
    width: 22px;
  }
}
.tabbar {
  background-color: var(--bg-);
  padding: 0 20px;
  justify-content: space-between;
  box-shadow: 0px 1px 0px 0px rgba(230,230,230,0.5);
  white-space: nowrap;
  overflow-x: auto;
  column-gap: 12px;
  .bar {
    line-height: 50px;
    position: relative;
    font-size: 16px;
    color: #6C6C6C;
    cursor: pointer;
    &.active {
      color: #000000;
      font-weight: 600;
      .line {
        display: block;
      }
    }
    .line {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #000;
      height: 2px;
      display: none;
    }
  }
}
.filter-box {
  background-color: #FFFFFF;
  color: #000;
  .check {
    padding: 14px 12px;
    text-align: center;
    &+.check {
      border-top: 1px solid #E9E9E9;
    }
  }
}
</style>