<template>
  <div class="relate-info">
    <div class="relate-info-header">
      <h3 class="header-title">{{ relatedInformation.subject }}</h3>
      <div class="header-item">
        <span class="item-label">
          {{ $t('relatedInformation.applicant') }}：
        </span>
        <span class="item-value">{{ relatedInformation.name }}</span>
      </div>
      <div class="header-item">
        <span class="item-label">
          {{ $t('relatedInformation.Organization') }}：
        </span>
        <span class="item-value">{{ relatedInformation.deptName }}</span>
      </div>
      <div class="header-item">
        <span class="item-label">
          {{ $t('relatedInformation.PrcessNumber') }}：
        </span>
        <span class="item-value">{{ instId }}</span>
      </div>
      <div class="header-item">
        <span class="item-label">
          {{ $t('relatedInformation.ApprovalTemplate') }}：
        </span>
        <span class="item-value">{{ relatedInformation.template }}</span>
      </div>
    </div>
    <div class="relate-info-content">
      <div class="top-box">
        <span class="top-left">
          {{ $t('relatedInformation.ReadingRecords') }}
        </span>
      </div>
      <div
        v-infinite-scroll="loadData"
        class="timeline-container"
        infinite-scroll-disabled="disabled"
      >
        <template v-if="rows.length">
          <el-timeline>
            <el-timeline-item v-for="item in rows" :key="item.id">
              <div class="item-box">
                <div class="item-box-top">
                  <span class="reader-name">{{ item.readerName }}</span>
                  <span class="org" :title="item.orgPath">
                    {{ item.orgPath }}
                  </span>
                </div>
                <div class="item-box-bottom">
                  <span class="task-name">{{ item.taskName }}</span>
                  <span class="read-time">{{ item.readTime }}</span>
                </div>
              </div>
            </el-timeline-item>
          </el-timeline>
          <p v-if="loading">加载中...</p>
        </template>
        <div v-else class="empty-image">
          <el-image :src="noDataImg"></el-image>
          <p class="no-data-text">暂无记录</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import storeProcess from '@/api/storeProcess'

  export default {
    name: 'RelatedInformation',
    props: {
      instId: {
        type: String,
        default: null,
      },
    },
    data() {
      return {
        relatedInformation: {},
        rows: [],
        defaultQuerys: [],
        pagination: {
          // 页码
          page: 1,
          pageSize: 10,
          total: 0,
        },
        noMore: false,
        loading: false,
        page: 1,
        noDataImg: require('@/assets/nodata_images/no-data.png'),
      }
    },
    computed: {
      disabled() {
        return this.loading || this.noMore
      },
    },
    created() {
      this.getInfoById()
    },
    methods: {
      getInfoById() {
        if (!this.instId) {
          return
        }
        storeProcess.getRelatedInformationById(this.instId).then((res) => {
          this.relatedInformation = res
        })
      },
      loadData() {
        if (!this.instId) return
        const pageBean = {
          pageBean: {
            ...this.pagination,
            page: this.page,
          },
          params: { distinct: '1' },
          querys: [
            {
              operation: 'EQUAL',
              property: 'procInstId',
              relation: 'AND',
              value: this.instId,
            },
          ],
        }
        storeProcess
          .getByRecordInstId(pageBean)
          .then((response) => {
            this.pagination = {
              page: response.page,
              pageSize: response.pageSize,
              total: response.total,
            }
            this.rows =
              this.page == 1 ? response.rows : [...this.rows, ...response.rows]
            if (this.rows.length >= response.total) {
              this.noMore = true
            } else {
              this.noMore = false
              this.page++
            }
          })
          .finally(() => {
            this.loading = false
          })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .relate-info {
    padding: 24px;
    height: 100%;
    .header-title {
      margin: 0;
      font-size: 14px;
      color: #262626;
      font-weight: 550;
      padding-bottom: 12px;
    }
    .header-item {
      padding-bottom: 8px;
      &:last-child {
        padding-bottom: 24px;
        border-bottom: 1px solid #ebebeb;
      }
      .item-label {
        width: 70px;
        display: inline-block;
        white-space: nowrap;
        text-align: right;
        color: #8c8c8c;
      }
      .item-value {
        color: #262626;
        padding-left: 8px;
      }
    }
    .relate-info-content {
      padding-top: 24px;
      height: calc(100% - 142px);
      .top-box {
        display: flex;
        justify-content: space-between;
        .top-left {
          color: #262626;
          font-weight: 550;
        }
        ::v-deep {
          .el-checkbox__label {
            color: #262626;
          }
        }
      }
      .timeline-container {
        height: calc(100% - 16px);
        overflow: auto;
        ::v-deep {
          .el-timeline-item {
            padding-top: 16px;
            .item-box {
              .item-box-top {
                padding-bottom: 8px;
                display: flex;
              }
              .reader-name {
                color: #262626;
                padding-right: 8px;
                font-weight: 550;
                white-space: nowrap;
              }
              .org {
                color: #8c8c8c;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
              .item-box-bottom {
                display: flex;
                justify-content: space-between;
                .task-name,
                .read-time {
                  font-size: 12px;
                  color: #8c8c8c;
                }
              }
            }
            .el-timeline-item__tail {
              top: 37px;
              left: 7px;
              height: 70%;
              border-left-color: #0080fe;
            }
            .el-timeline-item__node--normal {
              width: 14px;
              height: 14px;
              background-color: #fff;
              border: 2px solid #0080fe;
              left: 0;
            }
          }
        }
      }
    }
    .empty-image {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100%;
      ::v-deep {
        .el-image {
          width: 240px;
        }
      }
    }
  }
</style>