<template>
  <div>
    <div class="section">
      <div class="title flex">
        <div>
          <!-- 公司简介 -->
          {{ $t('product.l16') }}
        </div>
        <!-- <van-icon size="12" color="#CACACA" name="arrow" /> -->
      </div>
      <div class="des"></div>
      <div class="row">
        <div class="col flex">
          <div class="label">
            <!-- 公司名称 -->
            {{ $t('product.l17') }}
          </div>
          <div class="val" v-if="language == 'zh-CN' ||  language == 'zh-TW'">{{ companyInfo.cnComName || companyInfo.enComName }}</div>
          <div class="val" v-else>{{ companyInfo.enComName || companyInfo.cnComName }}</div>
        </div>
        <div class="col flex">
          <div class="label">
            <!-- 证劵代码 -->
            {{ $t('product.l95') }}
          </div>
          <div class="val">{{ companyInfo.symbol }}</div>
        </div>
        <div class="col flex" v-if="companyInfo.market">
          <div class="label">
            <!-- 上市场所 -->
            {{ $t('product.l113') }}
          </div>
          <div class="val">{{ companyInfo.market }}</div>
        </div>
        <div class="col flex">
          <div class="label">
            <!-- 上市日期 -->
            {{ $t('product.l18') }}
          </div>
          <div class="val">{{ listDateForm(companyInfo.listDate) }}</div>
        </div>
        <div class="col flex" v-if="companyInfo.comAddress">
          <div class="label">
            <!-- 所在地 -->
            {{ $t('product.l99') }}
          </div>
          <div class="val val1">{{ companyInfo.comAddress }}</div>
        </div>
        <div class="col flex" v-if="companyInfo.chairman || companyInfo.chairman_en">
          <div class="label">
            <!-- 董事长 -->
            {{ $t('product.l19') }}
          </div>
          <div class="val" v-if="language == 'zh-CN' ||  language == 'zh-TW'">{{ companyInfo.chairman || companyInfo.chairman_en }}</div>
          <div class="val" v-else>{{ companyInfo.chairman_en || companyInfo.chairman }}</div>
        </div>
        <div class="col flex" v-if="companyInfo.a">
          <div class="label">
            <!-- 公司简介 -->
            {{ $t('product.l100') }}
          </div>
          <div class="val val1">{{ companyInfo.a }}</div>
        </div>
      </div>
    </div>
    <themeConcept v-if="language == 'zh-CN'" :symbol="symbolInfo.symbol" />
    <mainBusinessComposition :colorList="colorList" :symbolInfo="symbolInfo" />
    <majorList :colorList="colorList" :symbolInfo="symbolInfo" />
    <!-- <structList :symbolInfo="symbolInfo" /> -->
  </div>
</template>
<script>
import majorList from "./components/majorList.vue";
// import structList from "./components/structList.vue";
import themeConcept from "./components/themeConcept.vue";
import mainBusinessComposition from "./components/mainBusinessComposition.vue";
export default {
  props: ['symbolInfo', 'companyInfo'],
  components: {
    majorList,
    themeConcept,
    // structList,
    mainBusinessComposition,
  },
  data () {
    return {
      colorList: ['#3A74F2', '#52DD75', '#FFC22A', '#D72AFF', '#552AFF', '#FF2A5A', '#FF6F30', '#FFA882', '#FFD1BD', '#FFEAE1'],
    }
  },
  methods: {
    listDateForm(value) {
      if (value && value != '0') {
        return value.replace(new RegExp(/-/gm), "/")
      }
      return ''
    }
  }
}
</script>
<style lang="less" scoped>
.title {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  color: var(--color-1-);
}
.section {
  background-color: var(--bg-);
  padding: 8px 18px 19px;
  margin-bottom: 6px;
  .title {
    justify-content: space-between;
  }
  .des {
    margin-top: 4px;
  }
  .row {
    margin-top: 15px;
  }
  .col {
    font-size: 12px;
    justify-content: space-between;
    color: #343434;
    align-items: flex-start;
    &+.col {
      margin-top: 13px;
    }
    .label {
      color: #999BA1;
      width: 71px;
      word-break: break-all;
    }
    .val {
      color: #343434;
      flex: 1;
      min-width: 10%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      &.val1 {
        overflow: inherit;
        white-space: normal;
        line-height: 1.3;
      }
    }
  }
}
.section1 {
  padding: 12px 18px;
  background-color: var(--bg-);
  margin-bottom: 6px;
  justify-content: space-between;
  color: #090909;
  font-size: 13px;
  >.flex {
    column-gap: 11px;
  }
}
</style>