<template>
  <div class="list">
    <filterBox></filterBox>
    <van-list
      :offset="900"
      v-model="loading"
      :finished="finished"
      :finished-text="''"
      @load="onLoad"
    >
      <div class="li flex" v-for="item in list" :key="item.symbol" @click="$router.push('/product-detail/' + item.symbol + '/6')">
        <div class="left" v-if="productDataObj[item.symbol]">
          <div class="name">{{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].title_en || productDataObj[item.symbol].title }}</div> -->
          <div class="label flex">
            <div class="tag-box">
              <div class="tag" :class="getTagName(item.symbol)">{{ getTagName(item.symbol) }}</div>
            </div>
            <div>{{ item.symbol }}</div>
          </div>
        </div>
        <div class="right flex">
          <div></div>
          <div>
            <div class="flex">
              <div class="table-row" v-if="productDataObj[item.symbol]" :class="productDataObj[item.symbol].spread < 0 ? 'down' : 'up'">
                {{
                  productDataObj[item.symbol].spread > 0
                    ? "+"
                    : ""
                }}{{ productDataObj[item.symbol].percentage }}%
              </div>
              <div class="table-row">
                <div class="div">{{item.info['100'].price_1m}}%</div>
              </div>
              <div class="table-row">
                <div class="div">{{item.info['105'].price_1m}}%</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <NoData v-if="!loading && list.length == 0"/>
    </van-list>
    <div class="more-box" v-if="list.length">
      <div class="more flex" @click="toMore">
        <div>
          <!-- 查看更多 -->
          {{ $t('product.l15') }}
        </div>
        <img class="img" src="/img/home/more.png" alt="极度证券">
      </div>
    </div>
  </div>
</template>
<script>
import filterBox from "./filter-box.vue";
import { getProductShowList } from "@/api/product";
import bus from "@/utils/bus";
export default {
  props: ['market'],
  components: {
    filterBox,
  },
  data() {
    return {
      targetInfo: null,
      operationPopupShow: false,
      loading: false,
      finished: false,
      refreshing: false,
      mounth: '1m',
      pageNum: 1,
      pageSize: 6,
      list: [],
      symbolList: [],
      loaded: true
    };
  },
  inject: ['getproductDataObj'],
  computed: {
    productDataObj() {
      return this.getproductDataObj()
    },
  },
  beforeDestroy() {
    bus.$off('selectLang', this.init)
  },
  deactivated () {
    bus.$off('selectLang', this.init)
  },
  activated () {
    this.init()
  },
  created () {
    bus.$on('selectLang', this.init)
  },
  methods: {
    init() {
      bus.$emit("alterProductData", {
        getData: this.symbolList,
        subscribeList: this.symbolList,
      });
    },
    onLoad() {
      if (this.refreshing) {
        this.list = [];
        this.refreshing = false;
      }
      getProductShowList({
        groupList: JSON.stringify([16]),
      }).then(res => {
        var group = ((res.list || [])[0] || {});
        var productList = (group.productList || []).slice(0, 6);
        var symbols = []
        productList.forEach((item, index) => {
          symbols.push(item.symbol)
        });
        if (symbols.length == 0) {
          this.loading = false;
          this.finished = true;
          return
        }
        this.list = productList;
        this.symbolList = symbols
        this.loading = false;
        this.finished = true;
        bus.$emit("alterProductData", {
          getData: this.symbolList,
          subscribeList: this.symbolList,
        });
      }).catch(() => {
        this.loading = false;
        this.finished = true;
      }).finally(() => {
        this.fullscreenLoading = false
      })
    },
    operationShow(item) {
      this.targetInfo = item;
      this.operationPopupShow = true;
    },
    onRefresh() {
      this.finished = false;
      this.loading = true;
      this.pageNum = 0;
      this.onLoad();
    },
    getPrice(item, index) {
      if (item[`price_${this.mounth}_list`]) {
        var list = item[`price_${this.mounth}_list`].split(',')
        return list[index] ? (Number(list[index]) + '%') : ''
      }
    },
    getTagName(code) {
      if (code) {
        if (this.market == 'US') {
          return 'US'
        }
        if (this.market == 'HK') {
          return 'HK'
        }
        var list = code.split('.')
        return list[1]
      }
    },
    toMore() {
      this.$router.push('/market/options')
    }
  },
};
</script>
<style lang="less" scoped>
.list {
  -moz-user-select: none;
  -khtml-user-select: none;
  user-select: none;
  background-color: #fff;
  padding: 0 18px;
  min-height: 200px;
  position: relative;
}
.li {
  justify-content: space-between;
  height: 57px;
  border-bottom: 1px solid var(--border-);
  position: relative;
  .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;
    line-height: 21px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .label {
    color: #969798;
    font-size: 12px;
    margin-top: 2px;
  }
  .tag-box {
    margin-right: 6px;
    .tag {
      line-height: 14px;
      padding: 0 3px;
      border-radius: 2px;
      color: #979899;
      border: 1px solid #EBEBEB;
    }
  }
  .div {
    color: #4A4A4A;
    font-size: 14px;
  }
  .table-row {
    width: 70px;
    text-align: right;
    color: #EA4A45;
    &.flex {
      justify-content: flex-end;
    }
    &.down {
      color: var(--green-);
    }
    &.up {
      color: var(--red-);
    }
  }
  .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;
    }
  }
}
.more-box {
  display: flex;
  height: 69px;
  background: linear-gradient( 180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.84) 61%, #FFFFFF 100%);
  align-items: flex-end;
  justify-content: center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  .more {
    cursor: pointer;
    background: #FFFFFF;
    border-radius: 15px;
    border: 1px solid #E8E8E8;
    justify-content: center;
    height: 26px;
    padding: 0 14px;
    font-size: 12px;
    color: #4A4A4A;
  }
  .img {
    width: 9px;
    margin-left: 3px;
  }
}
</style>
