<template>
  <div>
    <div class="section">
      <div class="title">
        <!-- 题材概念 -->
        {{ $t('product.l101') }}
      </div>
      <div class="ul">
        <div class="li" v-for="item in list" :key="item" :class="{active: activeName == item}" @click="activeName = item">
          {{ item }}
        </div>
      </div>
      <div class="sub" v-if="reason">{{ activeName }}{{ $t('product.l102') }}</div>
      <div class="des-box" v-if="reason">
        <div class="des">
          {{ reason }}
        </div>
      </div>
      <!-- <div class="sub1">龙头股</div>
      <van-row gutter="5">
        <van-col span="8" v-for="item in 3" :key="item">
          <div class="li">
            <div class="sybmol">
              英伟达
            </div>
            <div class="number flex up">
              <div>785.38</div>
              <div>16.4%</div>
            </div>
          </div>
        </van-col>
      </van-row> -->
    </div>
  </div>
</template>
<script>
export default {
  props: ['companyInfo'],
  data () {
    return {
      activeName: '',
      more: false,
      textLength: 115,
    }
  },
  computed: {
    reason() {
      var reason = this.companyInfo.reason || []
      var text = ''
      reason.forEach(item => {
        if (item.key == this.activeName) {
          text = item.val
        }
      })
      return text
    },
    list() {
      var gntc = (this.language == 'zh-CN' || this.language == 'zh-TW') ? (this.companyInfo.gntc || this.companyInfo.gntc_en) : (this.companyInfo.gntc_en || this.companyInfo.gntc)
      var list = gntc.split(',').filter(item => item)
      if (!this.activeName && list[0]) {
        this.activeName = list[0]
      }
      return list
    }
  }
}
</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: 17px;
  .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;
    }
  }
}
.sub {
  font-weight: 500;
  font-size: 14px;
  color: #000000;
  line-height: 20px;
  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;
  .sybmol {
    font-weight: 600;
    font-size: 13px;
    color: #333333;
    margin-bottom: 14px;
  }
  .number {
    justify-content: space-between;
    flex-wrap: wrap;
    column-gap: 4px;
    &.up {
      color: #F24A40;
    }
    &.down {
      color: #22AF6E;
    }
  }
}
</style>