<template>
  <div v-loading.body.fullscreen="fullscreenLoading" element-loading-background="rgba(255, 255, 255, 0)">
    <van-sticky class="sticky">
      <div class="header">
        <div class="back">
          <backIcon/>
        </div>
        <!-- 期权持仓列表 -->
        {{ $t('option.l40') }}
        <div class="right">
          <van-popover
            v-model="showPopover"
            placement="bottom-end"
            trigger="click"
          >
            <div class="filter-box">
              <div class="check flex" :class="{active: market === ''}" @click="market = ''">
                <div class="radio"></div>
                <div>
                  <!-- 全部 -->
                  {{ $t('inform.l21') }}
                </div>
              </div>
              <div class="check flex" :class="{active: market === 'CN'}" @click="market = 'CN'">
                <div class="radio"></div>
                <div>
                  <!-- A股 -->
                  {{ $t('common.l61') }}
                </div>
              </div>
              <div class="check flex" :class="{active: market === 'HK'}" @click="market = 'HK'">
                <div class="radio"></div>
                <div>
                  <!-- 港股 -->
                  {{ $t('common.l42') }}
                </div>
              </div>
              <div class="check flex" :class="{active: market === 'US'}" @click="market = 'US'">
                <div class="radio"></div>
                <div>
                  <!-- 美股 -->
                  {{ $t('common.l41') }}
                </div>
              </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('option.l41') }}({{ positionList.length }})</div>
          <div class="line"></div>
        </div>
        <div class="bar" :class="{active: type == '2'}" @click="changeType('2')">
          <div>
            <!-- 待确认 -->
            {{ $t('option.l3') }}({{ confirmedList.length }})</div>
          <div class="line"></div>
        </div>
        <div class="bar" :class="{active: type == '3'}" @click="changeType('3')">
          <div>
            <!-- 历史订单 -->
            {{ $t('exchange.l72') }}</div>
          <div class="line"></div>
        </div>
      </div>
      
    </van-sticky>
    <component @success="getOptionOrderList" :market="market" :list="list" :is="viewList[type - 1]" />
  </div>
</template>
<script>
import positionList from "./components/position.vue";
import confirmedList from "./components/confirmed.vue";
import historyList from "./components/history.vue";
import { getOptionOrderList } from "@/api/option";
import bus from "@/utils/bus";
export default {
  components: {
    positionList,
    confirmedList,
    historyList
  },
  data() {
    return {
      showPopover: false,
      type: '1',
      market: '',
      positionList: [],
      confirmedList: [],
      historyList: [],
      viewList: ['positionList', 'confirmedList', 'historyList']
    }
  },
  computed: {
    list() {
      return (this[['positionList', 'confirmedList', 'historyList'][this.type - 1]]).filter(item => (item.market == this.market || !this.market))
    }
  },
  created () {
    if (this.$route.params.type) {
      this.type = this.$route.params.type
    }
    this.getOptionOrderList()
  },
  methods: {
    getOptionOrderList() {
      this.fullscreenLoading = true
      getOptionOrderList({
        pageNum: 1,
        status:'[4, 5, 10, 11]'
      }).then(res => {
        var list = res.list || []
        this.positionList = list.filter(item => (item.status == 4 || item.status == 5))
        this.confirmedList = list.filter(item => (item.status == 10 || item.status == 11))
        var symbolList = []
        this.confirmedList.forEach(item => {
          if (this.updateSymbolList.indexOf(item.code) == -1) {
            symbolList.push(item.code)
          }
        })
        this.positionList.forEach(item => {
          if (this.updateSymbolList.indexOf(item.code) == -1) {
            symbolList.push(item.code)
          }
        })
        bus.$emit("alterProductData", {
          getData: symbolList,
          subscribeList: symbolList,
        });
      }).catch(() => {}).finally(() => {
        this.fullscreenLoading = false;
      })
    },
    changeType(type) {
      if(this.type == type) {
        return
      }
      this.type = type
      this.$router.replace('/option-records/' + this.type)
    }
  }
}
</script>
<style lang="less" scoped>
.sticky {
  background-color: var(--bg-);
}
.header {
  position: relative;
  text-align: center;
  padding-top: 15px;
  padding-bottom: 9px;
  font-size: 18px;
  font-weight: 600;
  background-color: var(--bg-);
  .back {
    position: absolute;
    left: 9px;
    top: 11px;
  }
  .right {
    position: absolute;
    top: 11px;
    right: 15px;
  }
  .filter {
    display: block;
    width: 22px;
  }
}
.tabbar {
  background-color: var(--bg-);
  padding: 0 35px;
  white-space: nowrap;
  justify-content: space-between;
  border-top: 1px solid #F6FAFE;
  flex-wrap: 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: #000000;
      height: 2px;
      display: none;
    }
  }
}
.filter-box {
  background-color: #FFFFFF;
  color: #292929;
  .check {
    padding: 14px 12px;
    &+.check {
      border-top: 1px solid #E9E9E9;
    }
    &.active {
      font-weight: 600;
      color: #000000;
      .radio {
        border: 4px solid #000000;
      }
    }
  }
  .radio {
    width: 14px;
    height: 14px;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 50%;
    margin-right: 6px;
  }
}
</style>