<template>
  <div class="components" v-loading.body.fullscreen="fullscreenLoading" element-loading-background="rgba(255, 255, 255, 0)">
    <div class="title">
      <!-- 推荐股票 -->
      {{ $t('market.l2') }}
    </div>
    <div class="list">
      <div class="item" v-for="(item, index) in symbolList" :key="item.symbol" @click="checkProduct(item, index)">
        <div class="title-box flex">
          <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.name_en || (item.market == 'CFD' ? item.symbol : item.title) }}</div>
          <img v-show="item.checked" class="check" src="/img/icon/check1.png" alt="极度证券">
          <img v-show="!item.checked" class="check" src="/img/icon/check.png" alt="极度证券">
        </div>
        <div class="bottom">
          <div class="symbol">{{ item.symbol }}</div>
          <div class="percentage" :class="productDataObj[item.symbol].spread < 0 ? 'down' : 'up'">
            {{productDataObj[item.symbol].spread > 0
                  ? "+"
                  : ""
              }}{{ productDataObj[item.symbol].percentage }}%
          </div>
        </div>
      </div>
    </div>
    <div class="btn" @click="insertProductUser" v-if="symbolList.length">
      <!-- 一键添加自选 -->
      {{ $t('market.l3') }}
    </div>
  </div>
</template>
<script>
import { insertProductUser } from "@/api/user";
import { getProductList } from "@/api/product";
import bus from "@/utils/bus";
export default {
  data () {
    return {
      symbolList: [],
      list: ['09988.SZ', '00700.SZ', '00388.SZ', '002230.SZ', 'AAPL.US', 'TSLA.US', 'NVDA.US', '600519.SH', '300750.SZ', '002594.SZ', '300059.SZ']
    }
  },
  inject: ['getproductDataObj'],
  computed: {
    productDataObj() {
      return this.getproductDataObj()
    },
  },
  activated () {
    bus.$emit("alterProductData", {
      setData: this.symbolList,
      subscribeList: this.symbolList.map(item => item.symbol),
    });
  },
  created () {
    this.getProductList()
  },
  methods: {
    insertProductUser() {
      var list = []
      this.symbolList.forEach(item => {
        if (item.checked) {
          list.push(item.symbol)
        }
      })
      if (list.length === 0) {
        return
      }
      if (this.isLogin) {
        this.fullscreenLoading = true
        insertProductUser({
          symbol: list.join(',')
        }).then(res => {
          this.$store.dispatch('getProductUserList')
        }).catch(() => {}).finally(() => {
          this.fullscreenLoading = false;
        })
      } else {
        var myFavoriteList = []
        list.forEach(item => {
          myFavoriteList.push({
            symbol: item,
            fixed: 0,
            num: 0
          })
        })
        localStorage.setItem('myFavoriteList', JSON.stringify(myFavoriteList))
        this.$store.dispatch('getProductUserList')
      }
    },
    checkProduct(item, index) {
      this.$set(this.symbolList[index], 'checked', !item.checked)
    },
    getProductList() {
      this.fullscreenLoading = true
      getProductList({
        symbol: JSON.stringify(this.list)
      }).then(res => {
        var list = res.list || [];
        var symbolList = [];
        list.forEach((item, index) => {
          symbolList.push({
            ...item,
            checked: true
          });
        });
        this.symbolList = symbolList;
        this.loading = false;
        if (this.list.length >= res.total) {
          this.finished = true;
        }
        bus.$emit("alterProductData", {
          setData: list,
          subscribeList: this.list,
        });
      }).catch(() => {}).finally(() => {
        this.fullscreenLoading = false;
      })
    }
  }
}
</script>
<style lang="less" scoped>
.components {
  padding: 4px 18px 18px;
}
.box {
  background-color: #FFEFEB;
  border-radius: 8px;
  padding: 16px 10px 6px;
  column-gap: 19px;
  margin-bottom: 24px;
  .img {
    width: 96px;
  }
  .right {
    flex: 1;
    min-width: 10%;
    max-width: 100%;
    color: var(--color-1-);
  }
  .add-box {
    padding-top: 9px;
    .add {
      justify-content: center;
      column-gap: 2px;
      background-color: #000;
      height: 29px;
      border-radius: 4px;
      color: #fff;
      font-size: 11px;
      font-weight: 500;
      padding: 0 17px;
      cursor: pointer;
    }
  }
}
.title {
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-1-);
  padding-bottom: 18px;
}
.list {
  display: flex;
  flex-wrap: wrap;
  column-gap: 10px;
  row-gap: 8px;
  .item {
    width: calc(50% - 5px);
    padding: 10px 8px;
    border: 1px solid #F1F3F4;
    border-radius: 5px;
  }
  .title-box {
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-1-);
    cursor: pointer;
    position: relative;
  }
  .name {
    flex: 1;
    min-width: 10%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .check {
    width: 15px;
  }
  .bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
  }
  .symbol {
    font-size: 11px;
    color: #929292;
  }
  .percentage {
    font-weight: 600;
    &.down {
      color: var(--green-);
    }
    &.up {
      color: var(--red-);
    }
  }
}
.btn {
  text-align: center;
  cursor: pointer;
  margin-top: 16px;
  line-height: 44px;
  color: #fff;
  border-radius: 6px;
  background-color: #000;
  font-size: 16px;
}
</style>