//相关信息

<template>
  <div>
    <van-popup
      v-model="show"
      round
      safe-area-inset-bottom
      duration="0"
      position="bottom"
      style="max-height: 80%"
    >
      <van-nav-bar
        title="相关信息"
        left-text="关闭"
        @click-left="show = false"
        class="popup_header_fixed"
      />
      <van-row class="information popup_header_margin">
        <div class="colName tit">
          {{ relatedInformation.subject }}
        </div>
        <van-col span="24">
          <span>流程编号：{{ instId }}</span>
        </van-col>
        <van-col span="24">
          <span>发起人：{{ relatedInformation.name }}</span>
        </van-col>
        <van-col span="24">
          <span>所属组织：{{ relatedInformation.deptName }}</span>
        </van-col>
        <van-col span="24">
          <span>审批模板：{{ relatedInformation.template }}</span>
        </van-col>
      </van-row>
      <van-row class="vanRow">
        <div class="colName tit">阅读记录</div>

        <van-steps
          direction="vertical"
          active-color="#409EFF"
          inactive-color="#409EFF"
        >
          <van-step v-for="(item, i) of dataList" :key="i">
            <div slot="active-icon" class="icons"></div>
            <div slot="inactive-icon" class="icons"></div>
            <div>
              <span class="colName">
                {{ item.readerName }}（{{ item.orgPath || '暂无组织' }}）
              </span>
            </div>
            <div class="content_botton">
              <span class="taskName">
                {{ item.taskName }}
              </span>
              <span class="times">
                {{ item.readTime }}
              </span>
            </div>
          </van-step>
        </van-steps>
        <van-empty
          v-if="dataList.length === 0"
          class="custom-image"
          :image="noDataImage"
          description="暂无内容"
        />
      </van-row>
    </van-popup>
  </div>
</template>

<script>
  import { getByRecordInstId, getRelatedInformationById } from '@/api/process'
  export default {
    name: 'RelevantInformation',
    props: {
      instId: {
        type: String,
        default: null,
      },
    },
    data() {
      return {
        show: false,
        relatedInformation: {},
        dataList: [],
        pagination: {},
        noDataImage: require('@/assets/images/no_data_list.png'),
      }
    },
    watch: {
      show: function (newVal) {
        if (newVal) {
          this.getInfoById()
          this.loadData()
        }
      },
    },
    methods: {
      showDialog() {
        this.show = true
      },
      getInfoById() {
        if (!this.instId) {
          return
        }
        getRelatedInformationById(this.instId).then((res) => {
          this.relatedInformation = res
        })
      },
      loadData(param) {
        if (!this.instId) {
          return
        }
        const pageBean = {
          pageBean: {
            page: 1,
            pageSize: 99999999,
            total: 0,
          },
          params: { distinct: '1' },
          querys: [
            {
              operation: 'EQUAL',
              property: 'procInstId',
              relation: 'AND',
              value: this.instId,
            },
          ],
        }
        getByRecordInstId(pageBean).then((response) => {
          this.pagination = {
            page: response.page,
            pageSize: response.pageSize,
            total: response.total,
          }
          this.dataList = response.rows
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  @import '@/styles/matterButton.scss';
  .vanRow {
    padding: 16px;
    & > .van-col {
      padding: 12px;
      margin-bottom: 12px;
      background: #f9f9f9;
    }
  }
  .information {
    padding: 12px 12px 2px;
    border-bottom: 10px solid #f9f9f9;
    .van-col {
      padding-bottom: 12px;
    }
  }
  .van-col {
    font-size: 12px;
    color: #a6a6a6;
    word-wrap: break-word;
    word-break: break-all;
    font-weight: 400;
    border-radius: 8px 8px 8px 8px;
  }
  .colName {
    color: #262626;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 8px;
  }
  .colPeople {
    margin: 1px 0 8px;
  }
  .tit {
    font-size: 16px;
  }
  .icons {
    border: 2px solid #409eff;
    width: 4px;
    height: 4px;
    border-radius: 50%;
  }
  ::v-deep .van-step__line {
    top: calc(0.42667rem + 9px);
    height: calc(100% - 12px);
    background-color: #acd5ff !important;
  }
  .content_botton {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    .taskName {
      font-weight: 400;
      font-size: 12px;
      color: #262626;
    }
    .times {
      font-weight: 400;
      color: #a6a6a6;
      font-size: 12px;
    }
  }
  .van-step--vertical {
    padding-right: 0px;
  }
  .van-steps--vertical {
    padding-left: 21px;
  }
</style>