<!--
  @description:采购人-报价大厅-未开启-邀请的供应商展示
  @Modifier:gmy
  @date:2020/8/12-14:07
-->
<template>
  <div>
    <el-table
      :data="tableData"
      max-height="420"
    >
      <el-table-column
        header-align="center"
        type="index"
        label="序号"
        align="center"
        width="50"
      />
      <el-table-column
        header-align="center"
        prop="supplierName"
        label="供应商名称"
        align="left"
        min-width="180"
      />
      <el-table-column
        header-align="center"
        align="center"
        label="报价时间"
      >
        <template slot-scope="scope">
          <p>{{ scope.row.negRecordTime }}</p>
        </template>
      </el-table-column>
    </el-table>
    <div class="more">
      <span v-if="is_show" class="pointer" @click="viewMore('00')">
        收起更多（0）
        <i class="el-icon-arrow-up" />
      </span>
      <span v-else class="poimoreLengthnter" @click="viewMore('01')">
        展开更多（{{ moreLength }}）
        <i class="el-icon-arrow-down" />
      </span>
    </div>
  </div>
</template>

<script>
/* 公用参数 */
import { paging } from '@/assets/js/utils/index.js'
export default {
  name: 'OfferSupplierListListVue',
  props: {
    supplistData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      tableData: [],
      moreLength: 0,
      is_show: false // 不足五家标段信息展示状态

    }
  },
  watch: {
    'supplistData'(val) {
      if (val) {
        this.loadData()
      }
    }
  },
  methods: {
    async  loadData() {
      const paginationData = {
        pageNo: 1,
        pageSize: 5
      }
      await this.pageData(paginationData)
    },
    // 分页
    pageData(paginationData) {
      this.tableData = paging({}, this.supplistData, paginationData)// 分页功能
      if (this.supplistData.length > 0 && this.tableData.length > 0) {
        this.moreLength = this.supplistData.length - this.tableData.length
      }
    },
    // 01展开/00收起更多
    viewMore(type) {
      const paginationData = {
        pageNo: 1,
        pageSize: 5
      }
      if (type === '00') {
        this.is_show = false
        this.pageData(paginationData)
      } else {
        this.is_show = true
        paginationData.pageNo = 1
        paginationData.pageSize = 100
        this.pageData(paginationData)
      }
    }
  }
}
</script>

<style scoped lang="less">
@import "~@assets/style/common/maincommon.less";
  /* 所有展开更多*/
.more {
  text-align: center;
  font-size: 12px;
  padding: 6px;
  border: 1px solid #dfe6ec;
  line-height: 20px;
  border-top: 0px;
  color: @hyacinthine;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
</style>
