<template>
  <div class="list">
    <div class="box" :class="{no: !isLogin}">
      <div class="btns flex">
        <div class="btn" :class="{active: market === ''}" @click="market = ''">
          <!-- 全部 -->
          {{ $t('inform.l21') }}
          <div class="line"></div>
        </div>
        <div class="btn" :class="{active: market === 'US'}" @click="market = 'US'">
          <!-- 美股 -->
          {{ $t('common.l41') }}
          <div class="line"></div>
        </div>
        <div class="btn" :class="{active: market === 'CN'}" @click="market = 'CN'">
          <!-- A股 -->
          {{ $t('common.l61') }}
          <div class="line"></div>
        </div>
        <div class="btn" :class="{active: market === 'HK'}" @click="market = 'HK'">
          <!-- 港股 -->
          {{ $t('common.l42') }}
          <div class="line"></div>
        </div>
        <div class="btn" :class="{active: market === 'CFD'}" @click="market = 'CFD'">
          <!-- 综合 -->
          {{ $t('market.l10') }}
          <div class="line"></div>
        </div>
      </div>
      <div class="icon-box">
        <img class="edit" @click="$router.push('/optional/edit')" src="/img/market/edit.png" alt="极度证券">
        <img v-if="isLogin" class="setting" @click="settingPop = true" src="/img/market/setting.png" alt="极度证券">
      </div>
    </div>
    <filterBox :percentageSort="percentageSort" :priceSort="priceSort" @priceFilter="priceFilter" @percentageFilter="percentageFilter"></filterBox>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <template v-for="(item, index) in myFavoriteFilterList">
        <div class="li flex" :key="index" 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">{{ productDataObj[item.symbol].title }}</div>
            </template>
            <div class="label flex">
              <div class="tag" v-if="productDataObj[item.symbol]" :class="getTagName(productDataObj[item.symbol])">{{ getTagName(productDataObj[item.symbol]) }}</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].spread < 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].spread > 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>
    <van-popup get-container="body" v-model="settingPop" round position="bottom">
      <settingView @cancel="settingPop = false" v-if="settingPop" />
    </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";
import settingView from "./setting.vue";
export default {
  props: ['activeName'],
  mixins: [longPress],
  components: {
    filterBox,
    listOperation,
    settingView,
  },
  data() {
    return {
      targetInfo: {},
      priceSort: 0,
      percentageSort: 0,
      market: '',
      operationPopupShow: false,
      isLoading: false,
      settingPop: false,
    };
  },
  inject: ['getproductDataObj'],
  computed: {
    ...mapGetters(["myFavoriteList"]),
    myFavoriteListCopy() {
      var symbolList = []
      var fixedList = []
      var list = this.myFavoriteList.sort((a, b) => a.num - b.num)
      list.forEach((item, index) => {
        if (item.fixed) {
          fixedList.push(item)
        } else {
          symbolList.push(item)
        }
      })
      return [...fixedList, ...symbolList]
    },
    myFavoriteFilterList() {
      if (this.priceSort || this.percentageSort) {
        var myFavoriteList = deepCopy(this.myFavoriteListCopy).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.myFavoriteListCopy.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() {
      var symbolList = []
      this.myFavoriteList.forEach((item, index) => {
        symbolList.push(item.symbol);
      })
      bus.$emit("alterProductData", {
        getData: symbolList,
        subscribeList: symbolList,
      });
    },
    operationShow(item) {
      this.targetInfo = item;
      this.operationPopupShow = true;
    },
    onRefresh() {
      this.getProductUserList()
    },
    getTagName(item) {
      if (item.market == 'CN') {
        var 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>
.box {
  position: sticky;
  top: 50px;
  z-index: 4;
  background-color: #fff;
  padding-right: 87px;
  &.no {
    padding-right: 50px;
  }
  .icon-box {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: flex-start;
    padding: 13px 16px 0 8px;
    background-color: #ffff;
    column-gap: 20px;
  }
  .edit {
    width: 20px;
    cursor: pointer;
  }
  .setting {
    width: 21px;
    cursor: pointer;
  }
}
.btns {
  width: 100%;
  height: 52px;
  padding-left: 16px;
  align-items: flex-end;
  white-space: nowrap;
  flex-wrap: nowrap;
  overflow-x: auto;
  &::-webkit-scrollbar {
    display: none;
  }
  .btn {
    cursor: pointer;
    font-size: 14px;
    color: #888888;
    padding-bottom: 18px;
    position: relative;
    &+.btn {
      margin-left: 24px;
    }
    &.active {
      font-size: 16px;
      font-weight: 600;
      color: #000;
      .line {
        display: block;
      }
    }
  }
  .line {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    width: 12px;
    height: 2px;
    border-radius: 1px;
    background-color: #000;
    display: none;
  }
}
.list {
  -moz-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}
.van-pull-refresh {
  height: calc(100vh - 195px);
  overflow-y: auto;
}
.li {
  justify-content: space-between;
  height: 60px;
  position: relative;
  border-bottom: 1px solid var(--border-);
  padding: 0 16px;
  .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 {
    font-size: 16px;
    line-height: 22px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .label {
    color: #B6B6B6;
    font-size: 12px;
    margin-top: 3px;
  }
  .tag {
    color: #888888;
    margin-right: 6px;
  }
  .down {
    color: var(--green-);
    .div {
      background-color: var(--green-);
    }
  }
  .up {
    color: var(--red-);
    .div {
      background-color: var(--red-);
    }
  }
  .div {
    color: #fff;
    line-height: 28px;
    width: 72px;
    text-align: center;
    border-radius: 2px;
  }
  .table-row {
    width: 84px;
    text-align: right;
    font-size: 16px;
    &.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>
