<template>
  <div class="list">
    <filterBox></filterBox>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <!-- 没有更多了 -->
      <van-list
        :offset="900"
        v-model="loading"
        :finished="finished"
        :finished-text="list.length ? $t('common.l5') : ''"
        @load="onLoad"
      >
        <div class="li flex" v-for="item in list" :key="item.code">
          <div
            class="mask"
            @click="$router.push('/product-detail/' + item.code + '/6')"
          ></div>
          <div class="left">
            <div class="name" v-if="language == 'zh-CN'">{{item.title }}</div>
            <div class="name" v-else-if="language == 'zh-TW'">{{ item.name_cht || item.title }}</div>
            <div class="name" v-else>{{ item.title_en || item.title }}</div>
            <div class="label flex">
              <div class="tag">{{ getTagName(item.code) }}</div>
              <div>{{ item.code }}</div>
            </div>
          </div>
          <div class="right flex">
            <div></div>
            <div>
              <div class="flex">
                <div class="table-row" v-if="productDataObj[item.code]" :class="productDataObj[item.code].percentage < 0 ? 'down' : 'up'">
                  {{
                    productDataObj[item.code].percentage > 0
                      ? "+"
                      : ""
                  }}{{ productDataObj[item.code].percentage }}%
                </div>
                <div class="table-row">
                  <div class="div">{{ getPrice(item, 100) }}</div>
                </div>
                <div class="table-row">
                  <div class="div">{{ getPrice(item, 105) }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <NoData v-if="!loading && list.length == 0"/>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
import filterBox from "./filter-box.vue";
import { getOptionProductListGroup } from "@/api/option";
import bus from "@/utils/bus";
export default {
  props: ['market', 'mounth'],
  components: {
    filterBox,
  },
  data() {
    return {
      targetInfo: null,
      operationPopupShow: false,
      loading: false,
      finished: false,
      refreshing: false,
      pageNum: 0,
      pageSize: 30,
      list: [],
      symbolList: [],
      loaded: true
    };
  },
  inject: ['getproductDataObj'],
  computed: {
    productDataObj() {
      return this.getproductDataObj()
    },
  },
  watch: {
    'market'() {
      this.onRefresh()
    }
  },
  created () {
  },
  activated () {
    bus.$emit("alterProductData", {
      getData: this.symbolList,
      subscribeList: this.symbolList,
    });
  },
  methods: {
    onLoad() {
      if (this.refreshing) {
        this.list = [];
        this.refreshing = false;
      }
      this.pageNum += 1;
      if (this.pageNum == 1) {
        this.fullscreenLoading = true
      }
      var data = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        market: this.market == '1' ? '' : this.market
      }
      // if (this.market == '1') {
      //   data.recommend = 1
      // }
      getOptionProductListGroup(data)
        .then((res) => {
          var list = res.list || [];
          var symbolList = [];
          list.forEach((item, index) => {
            var standard_list = item.standard_list.split(',')
            var standardIndex = {}
            standard_list.forEach((item, i) => {
              standardIndex[Number(item)] = i
            })
            item.standardIndex = standardIndex
            symbolList.push(item.code)
          });
          if (this.pageNum == 1) {
            this.list = list;
            this.symbolList = symbolList
          } else {
            this.list = this.list.concat(list);
            this.symbolList = this.symbolList.concat(symbolList);
          }
          this.loading = false;
          if (this.list.length >= res.total) {
            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(',');
        var num = ''
        if (item.standardIndex[index] !== undefined) {
          num = list[item.standardIndex[index]]
        }
        return num ? (Number(num) + '%') : ''
      }
    },
    getTagName(code) {
      if (code) {
        if (this.market == 'US') {
          return 'US'
        }
        if (this.market == 'HK') {
          return 'HK'
        }
        var list = code.split('.')
        return list[1]
      }
    }
  },
};
</script>
<style lang="less" scoped>
.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;
  border-bottom: 1px solid var(--border-);
  position: relative;
  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;
  }
  .div {
    color: #4A4A4A;
    font-size: 14px;
  }
  .table-row {
    width: 70px;
    text-align: right;
    color: var(--red-);
    font-size: 16px;
    &.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;
    }
  }
}
</style>
