<template>
  <a-card class="back-card">
    <div class="pad-12">
      <a-table
          class="with-page"
          bordered
          :scroll="{ x: 1000 }"
          size="small"
          :pagination="pagination"
          :rowKey="(record, index) => {
              return index;
          }"
          :columns="reviewCommentsColumns"
          :dataSource="reviewCommentsData"
          :loading="loading"
          @change="handleTableChange">
        <template slot="sortNumber" slot-scope="text, row, index">
          {{ (pagination.pageNo - 1) * pagination.pageSize + 1 + index }}
        </template>
        <template slot="fmeaCommentsFileBOS" slot-scope="text, record">
          <ul class="file-list">
            <li v-for="item in record.fmeaCommentsFileBOS" :key="item.id">
              <a :href="$api.requestUrl +'/DFMEA/file/downloadFile.do?id=' + item.id + '&fileType=01'">
                {{ item.fileName }}
              </a>
            </li>
          </ul>
        </template>
      </a-table>
    </div>
  </a-card>
</template>
<script>

import { replaceNullName } from "@/utils/util";
import { getUrlParam } from "@/common/common";

export default {
  name: "ReviewComments",
  components: {},
  props: {},
  data() {
    return {
      pagination: {
        pageNo: 1,
        pageSize: 10, // 默认每页显示数量
        showTotal: (total) => this.$t('global-constant.table.show-total', {total:`${total}`}), // 显示总数
        showSizeChanger: true, // 显示可改变每页数量
        pageSizeOptions: ["10", "20", "50", "100", "200"], // 每页数量选项
        onShowSizeChange: (current, pageSize) => (this.pageSize = pageSize), // 改变每页数量时更新显示
        // onChange: (page, pageSize) => self.changePage(page, pageSize), //点击页码事件
        total: 0, //总条数
        position: 'top',
      },

      reviewCommentsColumns: [
        // 序号
        {
          title: () => this.$t('base.info.serial-number'),
          align: "center",
          width: 50,
          ellipsis: true,
          scopedSlots: {
            customRender: "sortNumber"
          }
        },
        // 评审意见
        {
          title: () => this.$t('base.info.review-comments.review-comments'),
          align: "center",
          dataIndex: "comments",
          width: 500,
          key: "comments",
          ellipsis: true
        },
        // 试验车用途
        {
          title: () => this.$t('base.info.review-comments.test-vehicle-usage'),
          align: "center",
          width: 300,
          dataIndex: "struName",
          key: "struName",
          ellipsis: true
        },
        // 评审时间
        {
          title: () => this.$t('base.info.review-comments.review-time'),
          align: "center",
          width: 150,
          dataIndex: "insertTime",
          key: "insertTime",
          ellipsis: true
        },
        // 评审人
        {
          title: () => this.$t('base.info.review-comments.reviewer'),
          align: "center",
          width: 150,
          dataIndex: "userName",
          key: "userName",
          ellipsis: true
        },
        // 附件
        {
          title: () => this.$t('base.info.review-comments.attachments'),
          align: "center",
          width: 240,
          dataIndex: "fmeaCommentsFileBOS",
          scopedSlots: {
            customRender: "fmeaCommentsFileBOS"
          },
          ellipsis: true
        }
      ],
      reviewCommentsData: [],
      loading: false
    };
  },
  methods: {
    // 分页触发
    handleTableChange(pagination) {
      this.pagination.pageNo = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.getReviewCommentsPageList();
    },
    // 评审意见初始化
    async getReviewCommentsPageList() {
      var data = {
        dvpId: getUrlParam("dvpId"),
        pageNo: this.pagination.pageNo,
        pageSize: this.pagination.pageSize
      };
      this.loading = true;
      await this.$api
          .post("/DFMEA/plan/getComments.do", data)
          .then((response) => {
            this.loading = false;
            if (response.flag) {
              this.reviewCommentsData = response.data.data;
              if (this.reviewCommentsData && this.reviewCommentsData.length > 0) {
                this.reviewCommentsData.forEach(item => {
                  item.struName = replaceNullName({name: item.struName, struTypeCode: item.structureType});
                });
              }
              this.pagination.total = response.data.total;
            } else {
              this.reviewCommentsData = [];
              this.pagination.total = 0;
            }
          });
    }
  },
  mounted() {
    this.getReviewCommentsPageList();
  }
};
</script>
<style lang="less" scoped>
.file-list {
  max-height: 62px;
  width: 100%;
  overflow-y: auto;
  margin: 0 !important;

  li {
    width: 100%;
    height: 20px;
    line-height: 20px;
    text-align: left;
    margin: 0 !important;

    a {
      color: #40a9ff;
    }
  }
}

.comments-container {
  width: 100%;

  .comments {
    display: -webkit-box;
    /*重点，不能用block等其他，将对象作为弹性伸缩盒子模型显示*/
    -webkit-box-orient: vertical;
    /*从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）*/
    -webkit-line-clamp: 3;
    /*行数，超出三行隐藏且多余的用省略号表示...*/
    line-clamp: 3;
    word-break: break-all;
    overflow: hidden;
    max-width: 100%;
    max-height: 60px;
  }
}
.back-card {
  border: hidden;
  border-radius: 0px;
}
.pad-12 {
  padding: 12px;
}
</style>
