<template>
  <div>
    <div class="components" v-if="list.length">
      <div class="title">
        <!-- 股东变动 -->
        {{ $t('product.l10') }}
      </div>
      <el-table :data="list" class="market-table list-table" style="width: 100%">
        <!-- 变动日期 -->
        <el-table-column prop="dateOfChange" :label="$t('product.l11')">
          <template slot-scope="scope">
            <div>
              {{ listDateForm(scope.row.dateOfChange || scope.row.changeDate) }}
            </div>
          </template>
        </el-table-column>
        <!-- 原因 -->
        <el-table-column prop="reasonOfChange" :label="$t('product.l12')">
          <template slot-scope="scope">
            <!-- 定期报告 -->
            <div>{{ scope.row.reasonOfChange || scope.row.changeReason || $t('product.l13') }}</div>
          </template>
        </el-table-column>
        <!-- 变动数量 -->
        <el-table-column align="right" prop="totalShares" :label="$t('product.l14')">
          <template slot-scope="scope">
            <div>
              {{ holdingNumberForm(scope.row.totalShares || scope.row.issuedShare || scope.row.issueNormal) }}
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="more" @click="more" v-if="!loading && list.length !== total">
        <!-- 查看更多 -->
        {{ $t('product.l15') }}
        <van-icon name="arrow-down" />
      </div>
    </div>
  </div>
</template>
<script>
import { getStruct } from "@/api/market";
export default {
  props: ['symbolInfo'],
  data () {
    return {
      list: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      loading: false,
    }
  },
  created () {
    this.getStruct()
  },
  methods: {
    getStruct() {
      if (this.loading) {
        return
      }
      this.loading = true
      getStruct({
        symbol: this.symbolInfo.symbol,
        market: this.symbolInfo.market,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then((res) => {
        if (this.pageNum == 1) {
          this.list = res.list || []
        } else {
          this.list = this.list.concat(res.list || [])
        }
        this.total = res.total
      }).catch(() => {}).finally(() => {
        this.loading = false
      })
    },
    more() {
      this.pageNum += 1
      this.getStruct()
    },
    holdingNumberForm(value) {
      if (value) {
        if (value > 1000000000000) {
          return Number((value / 1000000000000).toFixed(2)) + 'T'
        }
        if (value > 1000000000) {
          return Number((value / 1000000000).toFixed(2)) + 'B'
        }
        if (value > 1000000) {
          return Number((value / 1000000).toFixed(2)) + 'M'
        }
        return Number((value).toFixed(2))
      }
      return '--'
    },
    listDateForm(value) {
      if (value && value != '0') {
        return value.replace(new RegExp(/-/gm), "/")
      }
      return ''
    }
  }
}
</script>
<style lang="less" scoped>
.components {
  background-color: var(--bg-);
  padding: 20px 18px;
}
.title {
  font-size: 16px;
  line-height: 18px;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--color-1-);
}
.more {
  text-align: center;
  cursor: pointer;
  line-height: 23px;
  color: #878787;
}
</style>