<template>
  <div class="list">
    <div class="btns flex">
      <div class="btn" :class="{active: market === ''}" @click="market = ''">
        <!-- 全部 -->
        {{ $t('inform.l21') }}
      </div>
      <div class="btn" :class="{active: market === 'US'}" @click="market = 'US'">
        <!-- 美股 -->
        {{ $t('common.l41') }}
      </div>
      <div class="btn" :class="{active: market === 'CN'}" @click="market = 'CN'">
        <!-- 沪深 -->
        {{ $t('market.l9') }}
      </div>
      <div class="btn" :class="{active: market === 'HK'}" @click="market = 'HK'">
        <!-- 港股 -->
        {{ $t('common.l42') }}
      </div>
      <div class="btn" :class="{active: market === 'CFD'}" @click="market = 'CFD'">
        <!-- 综合 -->
        {{ $t('market.l10') }}
      </div>
    </div>
    <filterBox :percentageSort="percentageSort" :priceSort="priceSort" @priceFilter="priceFilter" @percentageFilter="percentageFilter"></filterBox>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <template v-for="item in myFavoriteFilterList">
        <div class="li flex" :key="item.symbol" v-if="(appParams.uncrypto || (productDataObj[item.symbol] && productDataObj[item.symbol].market != 'CFD'))">
          <div
            class="mask"
            @click="$router.push('/product-detail/' + item.symbol)"
            @touchstart="gtouchstart(item, 'operationShow')"
            @touchmove="gtouchmove()"
            @touchend="showDeleteButton(item)"
          ></div>
          <div class="left">
            <template v-if="productDataObj[item.symbol]">
              <div class="name" v-if="language == 'zh-CN'">{{ productDataObj[item.symbol].title }}</div>
              <div class="name" v-else-if="language == 'zh-TW'">{{ productDataObj[item.symbol].name_cht || productDataObj[item.symbol].title }}</div>
              <div class="name" v-else>{{ productDataObj[item.symbol].name_en || (productDataObj[item.symbol].market == 'CFD' ? productDataObj[item.symbol].symbol : productDataObj[item.symbol].title) }}</div>
            </template>
            <div class="label flex">
              <div class="tag-box">
                <div class="tag" v-if="productDataObj[item.symbol]" :class="getTagName(productDataObj[item.symbol])">{{ getTagName(productDataObj[item.symbol]) }}</div>
              </div>
              <div>{{ item.symbol }}</div>
            </div>
          </div>
          <div class="right flex" v-if="productDataObj[item.symbol]">
            <div></div>
            <div>
              <div class="flex" :class="productDataObj[item.symbol].percentage < 0 ? 'down' : 'up'">
                <div class="table-row">{{ $handleDigits(productDataObj[item.symbol].ask, productDataObj[item.symbol].digits) }}</div>
                <div class="table-row flex">
                  <div class="div">{{ productDataObj[item.symbol].percentage > 0 ? '+' : ''  }}{{productDataObj[item.symbol].percentage}}%</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
      <NoData v-if="myFavoriteFilterList.length == 0" />
    </van-pull-refresh>
    <van-popup get-container="body" v-model="operationPopupShow">
      <listOperation @cancel="operationPopupShow = false" :symbol="targetInfo.symbol"></listOperation>
    </van-popup>
  </div>
</template>
<script>
import filterBox from "./filter-box.vue";
import longPress from "@/mixins/longPress";
import listOperation from "./list-operation.vue";
import { mapGetters } from "vuex";
import bus from '@/utils/bus'
import { deepCopy } from "@/utils/index";
export default {
  props: ['activeName'],
  mixins: [longPress],
  components: {
    filterBox,
    listOperation,
  },
  data() {
    return {
      targetInfo: {},
      priceSort: 0,
      percentageSort: 0,
      market: '',
      operationPopupShow: false,
      isLoading: false,
    };
  },
  inject: ['getproductDataObj'],
  computed: {
    ...mapGetters(["myFavoriteList"]),
    myFavoriteFilterList() {
      if (this.priceSort || this.percentageSort) {
        let myFavoriteList = deepCopy(this.myFavoriteList).filter(item => ((this.productDataObj[item.symbol] && this.productDataObj[item.symbol].market == this.market) || !this.market))
        if (this.priceSort == 1) {
          return myFavoriteList.sort((a, b) => {
            return (this.productDataObj[b.symbol] ? this.productDataObj[b.symbol].ask : 0) - (this.productDataObj[a.symbol] ? this.productDataObj[a.symbol].ask : 0)
          })
        }
        if (this.priceSort == 2) {
          return myFavoriteList.sort((a, b) => {
            return (this.productDataObj[a.symbol] ? this.productDataObj[a.symbol].ask : 0) - (this.productDataObj[b.symbol] ? this.productDataObj[b.symbol].ask : 0)
          })
        }
        if (this.percentageSort == 1) {
          return myFavoriteList.sort((a, b) => {
            return (this.productDataObj[b.symbol] ? this.productDataObj[b.symbol].percentage : 0) - (this.productDataObj[a.symbol] ? this.productDataObj[a.symbol].percentage : 0)
          })
        }
        if (this.percentageSort == 2) {
          return myFavoriteList.sort((a, b) => {
            return (this.productDataObj[a.symbol] ? this.productDataObj[a.symbol].percentage : 0) - (this.productDataObj[b.symbol] ? this.productDataObj[b.symbol].percentage : 0)
          })
        }
      }
      return this.myFavoriteList.filter(item => ((this.productDataObj[item.symbol] && this.productDataObj[item.symbol].market == this.market) || !this.market))
    },
    productDataObj() {
      return this.getproductDataObj()
    },
  },
  methods: {
    getProductUserList() {
      this.$store.dispatch('getProductUserList').then(() => {
        this.updateSubscribe()
        this.isLoading = false;
      }).catch(() => {})
    },
    updateSubscribe() {
      let symbolList = []
      this.myFavoriteList.forEach((item, index) => {
        symbolList.push(item.symbol);
      })
      bus.$emit('updateSubscribe', symbolList, true)
    },
    operationShow(item) {
      this.targetInfo = item;
      this.operationPopupShow = true;
    },
    onRefresh() {
      this.getProductUserList()
    },
    getTagName(item) {
      if (item.market == 'CN') {
        let list = item.symbol.split('.')
        return list[1]
      }
      return item.market
    },
    priceFilter() {
      this.percentageSort = 0
      if (this.priceSort == 2) {
        this.priceSort = 0
      } else {
        this.priceSort += 1
      }
    },
    percentageFilter() {
      this.priceSort = 0
      if (this.percentageSort == 2) {
        this.percentageSort = 0
        return
      }
      this.percentageSort += 1
    }
  },
};
</script>
<style lang="less" scoped>
.btns {
  padding: 13px 18px 0;
  white-space: nowrap;
  flex-wrap: nowrap;
  overflow-x: auto;
  &::-webkit-scrollbar {
    display: none;
  }
  .btn {
    cursor: pointer;
    margin-right: 6px;
    border-radius: 4px;
    border: 1px solid #EBEBEB;
    font-size: 14px;
    color: #6F6F6F;
    padding: 8px 10px;
    &.active {
      border-color: #000;
      color: #000000;
    }
  }
}
.list {
  -moz-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}
.van-pull-refresh {
  height: calc(100vh - 195px);
  overflow-y: auto;
  padding: 0 18px;
}
.li {
  justify-content: space-between;
  height: 57px;
  position: relative;
  border-bottom: 1px solid var(--border-);
  .mask {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
    background-color: transparent;
  }
  .left {
    flex: 1;
    min-width: 10%;
    max-width: 100%;
  }
  .name {
    color: var(--color-1-);
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .label {
    color: #959697;
    font-size: 12px;
    margin-top: 5px;
  }
  .tag-box {
    margin-right: 6px;
    .tag {
      line-height: 14px;
      padding: 0 3px;
      border-radius: 2px;
      color: #979899;
      border: 1px solid #EBEBEB;
    }
  }
  .down {
    // color: var(--green-);
    .div {
      background-color: #22AF6E;
    }
  }
  .up {
    // color: var(--red-);
    .div {
      background-color: #EA4A45;
    }
  }
  .div {
    color: #fff;
    line-height: 23px;
    width: 72px;
    text-align: center;
    border-radius: 2px;
  }
  .table-row {
    width: 84px;
    color: #4A4A4A;
    text-align: right;
    &.flex {
      justify-content: flex-end;
    }
  }
  .bottom {
    font-size: 12px;
    margin-top: 5px;
    color: var(--color-1-);
    justify-content: flex-end;
    column-gap: 4px;
    .border {
      width: 4px;
      height: 12px;
      border: 6px solid #e9eff7;
      border-left-color: transparent;
      border-right-color: transparent;
      border-top: transparent;
    }
    .text {
      line-height: 14px;
      font-size: 10px;
      background-color: #e9eff7;
      padding: 0 4px;
    }
  }
}
</style>
