<template>
  <div>
    <div class="section" v-if="allList.length">
      <div class="title">
        <!-- 题材概念 -->
        {{ $t('product.l101') }}
      </div>
      <div class="ul">
        <div class="li" v-for="(item, index) in list" :key="index" :class="{active: activeObj.gntc == item.gntc}" @click="selectItem(item)">
          {{ item.gntc }}
        </div>
      </div>
      <template v-if="allList.length > 9">
        <div class="ul-more flex" v-if="!listMore" @click="listMore = true">
          <!-- 余下全部&nbsp;<van-icon name="arrow-down" /> -->
          {{ $t('product.l107') }}&nbsp;<van-icon name="arrow-down" />
        </div>
        <div class="ul-more flex" v-if="listMore" @click="listMore = false">
          <!-- 收起&nbsp;<van-icon name="arrow-up" /> -->
          {{ $t('product.l108') }}&nbsp;<van-icon name="arrow-up" />
        </div>
      </template>
      <div class="sub" v-if="activeObj.reason">{{ activeObj.gntc }}{{ $t('product.l102') }}</div>
      <div class="des-box" v-if="activeObj.reason">
        <div class="des">
          {{ activeObj.reason }}
        </div>
      </div>
      <template v-if="leadList1.length">
        <div class="sub1">
          <!-- 龙头股 -->
          {{ $t('product.l110') }}
        </div>
        <van-row gutter="5">
          <van-col span="8" v-for="item in leadList1" :key="item.symbol">
            <div class="li" v-if="productDataObj[item.symbol]" @click="switchSymbol(item.symbol)">
              <div class="symbol">
                {{ productDataObj[item.symbol].title }}
              </div>
              <div class="number flex" :class="productDataObj[item.symbol].percentage >= 0 ? 'up' : 'down'">
                <div>{{ $handleDigits(productDataObj[item.symbol].ask, productDataObj[item.symbol].digits) }}</div>
                <div>{{ productDataObj[item.symbol].percentage > 0 ? '+' : ''  }}{{ productDataObj[item.symbol].percentage }}%</div>
              </div>
            </div>
          </van-col>
        </van-row>
      </template>
    </div>
  </div>
</template>
<script>
import { getBoardLead } from "@/api/market";
import bus from '@/utils/bus'
export default {
  props: ['symbol'],
  inject: ['getproductDataObj'],
  data () {
    return {
      allList: [],
      listMore: false,
      activeObj: {},
      leadList: [],
      more: false,
    }
  },
  computed: {
    leadList1() {
      return this.leadList.filter(item => this.productDataObj[item.symbol])
    },
    list() {
      var list = this.allList
      if (!this.listMore) {
        list = this.allList.slice(0, 9)
      }
      return list
    },
    productDataObj() {
      return this.getproductDataObj()
    },
  },
  created () {
    this.getBoardLead()
  },
  methods: {
    selectItem(item) {
      if (item.gntc == this.activeObj.gntc) {
        return
      }
      this.activeObj = item
      this.getBoardLead1()
    },
    switchSymbol(symbol) {
      this.$router.replace('/product-detail/' + symbol)
      this.$router.push('/empty')
    },
    getBoardLead() {
      getBoardLead({
        symbol: this.symbol,
        type: 'board'
      }).then(res => {
        this.allList = (res || []);
        this.activeObj = this.allList[0] || {};
        this.getBoardLead1()
      }).catch(() => {

      })
    },
    getBoardLead1() {
      if (!this.activeObj.gntc) {
        return
      }
      this.leadList = []
      var gntc = this.activeObj.gntc
      if (this.symbol.indexOf('US') !== -1 && gntc.indexOf('US')== -1) {
        gntc += '[US]'
      }
      getBoardLead({
        gntc: gntc,
        type: 'lead'
      }).then(res => {
        this.leadList = (res || []);
        if (this.leadList.length) {
          var list = this.leadList.filter(item => (item.symbol && item.symbol != this.symbol)).map(item => item.symbol)
          bus.$emit("alterProductData", {
            getData: list,
            subscribeList: [...list, this.symbol],
          });
        }
      }).catch(() => {

      })
    }
  }
}
</script>
<style lang="less" scoped>
.section {
  padding: 14px 18px 13px;
  background-color: #fff;
  margin-bottom: 6px;
}
.title {
  font-weight: 600;
  font-size: 16px;
  color: #333333;
  line-height: 18px;
  margin-bottom: 12px;
}
.ul {
  display: flex;
  flex-wrap: wrap;
  white-space: nowrap;
  column-gap: 8px;
  row-gap: 8px;
  margin-bottom: 7px;
  .li {
    cursor: pointer;
    border-radius: 4px;
    border: 1px solid #E4E6EB;
    line-height: 33px;
    min-width: calc(33% - 6px);
    text-align: center;
    padding: 0 5px;
    color: #999BA1;
    &.active {
      background-color: #000000;
      color: #FFFFFF;
      border-color: #000;
    }
  }
}
.ul-more {
  justify-content: center;
  font-size: 12px;
  color: #7C7C7C;
}
.sub {
  font-weight: 500;
  font-size: 14px;
  color: #000000;
  line-height: 20px;
  padding-top: 10px;
  margin-bottom: 7px;
}
.des-box {
  font-size: 12px;
  color: #343434;
  line-height: 18px;
  position: relative;
  margin-bottom: 14px;
  text-indent: 2.4em;
  .more {
    color: #FF6F30;
    cursor: pointer;
    background-color: #fff;
    float: right;
    text-indent: 0;
  }
}

.sub1 {
  color: #999BA1;
  line-height: 20px;
  margin-bottom: 8px;
}
.li {
  border-radius: 5px;
  border: 1px solid #E4E6EB;
  padding: 10px 6px;
  .symbol {
    font-weight: 600;
    font-size: 13px;
    color: #333333;
    margin-bottom: 10px;
  }
  .number {
    justify-content: space-between;
    flex-wrap: wrap;
    column-gap: 4px;
    font-size: 12px;
    &.up {
      color: #F24A40;
    }
    &.down {
      color: #22AF6E;
    }
  }
}
</style>