<template>
  <el-drawer
    :visible.sync="isShowDrawer"
    direction="rtl"
    :size="380"
    :modal="false"
    append-to-body
    :wrapper-closable="false"
    class="process-info right-drawer-wrap"
    :class="{
      'dialog-model-drawer': isDialog && isGetApprovalBtn && !isFromTaskManager,
      'horizontal-layout-drawer': layout === 'horizontal',
      'flow-module-drawer': isFromApplicationModule,
    }"
    :before-close="handleClose"
  >
    <template #title>
      <el-tabs v-model="activeName">
        <el-tab-pane label="处理记录" name="record"></el-tab-pane>
        <el-tab-pane
          v-if="isShowUrgeInfo"
          label="催办记录"
          name="urge"
        ></el-tab-pane>
        <el-tab-pane label="相关信息" name="relatedInfo"></el-tab-pane>
      </el-tabs>
    </template>
    <ht-historical-approval
      v-show="activeName === 'record'"
      :inst-id="instId"
    ></ht-historical-approval>

    <div
      v-if="activeName === 'urge'"
      v-infinite-scroll="loadData"
      infinite-scroll-disabled="disabled"
      class="urge-box"
    >
      <template v-if="urgeList.length">
        <div v-for="item in urgeList" :key="item.id" class="urge-items">
          <div class="urge-header">{{ item.nodeName }}</div>
          <div class="urge-content">
            <div class="urge-item">
              <div class="item-box left">
                <span class="item-label">催办人：</span>
                <span class="item-value" :title="item.promoter">
                  {{ item.promoter }}
                </span>
              </div>
              <div class="item-box right">
                <span class="item-label">被催办人：</span>
                <span class="item-value" :title="item.appointee">
                  {{ item.appointee.replaceAll(',', '/') }}
                </span>
              </div>
            </div>
            <div class="urge-item">
              <div class="item-box left">
                <span class="item-label">催办类型：</span>
                <span class="item-value">{{ typeMap[item.type] }}</span>
              </div>
              <div class="item-box right">
                <span class="item-label">催办日期：</span>
                <span class="item-value" :title="item.urgrntDate">
                  {{ item.urgrntDate }}
                </span>
              </div>
            </div>
            <div class="urge-item urge-detail">
              {{ item.content }}
            </div>
          </div>
        </div>
        <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>
    <related-information
      v-if="activeName === 'relatedInfo'"
      :inst-id="instId"
    ></related-information>
  </el-drawer>
</template>

<script>
  import { mapState, mapMutations } from 'vuex'
  import storeProcess from '@/api/storeProcess'
  import RelatedInformation from './RelatedInformation.vue'

  const TYPE_MAP = {
    mail: '邮件',
    sms: '短信',
    smsApproval: '短信审批',
    inner: '内部消息',
    voice: '语音',
    wxEnterprise: '微信',
    dingTalk: '钉钉',
    flyBook: '飞书',
  }
  export default {
    name: 'ProcessInfo',
    components: {
      RelatedInformation,
    },
    props: {
      show: {
        type: Boolean,
        default: false,
      },
      instId: {
        type: String,
        default: '',
      },
      isShowUrgeInfo: {
        type: Boolean,
        default: true,
      },
      isGetApprovalBtn: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        activeName: 'record',
        isShowDrawer: false,
        isDialog: false,
        typeMap: TYPE_MAP,
        urgeList: [],
        pageBean: {
          page: 1,
          pageSize: 20,
          total: 0,
        },
        page: 1,
        loading: false,
        noMore: false,
        noDataImg: require('@/assets/nodata_images/no-data.png'),
      }
    },
    computed: {
      ...mapState('matter', [
        'currentShowDialogAlias',
        'isFromApplicationModule',
      ]),
      ...mapState('settings', ['layout']),
      ...mapState('user', ['userInfo']),

      disabled() {
        return this.loading || this.noMore
      },
      isFromTaskManager() {
        return this.$route.query.isDefAuthorize
      },
    },

    watch: {
      show(val) {
        this.isShowDrawer = val
      },
    },
    created() {
      this.isDialog = JSON.parse(localStorage.getItem('isDialog'))
    },
    methods: {
      ...mapMutations('matter', ['setCurrentShowDialogAlias']),
      loadData() {
        this.loading = true
        const currentUserId = this.userInfo.user?.id
        if (!this.instId || !currentUserId) {
          return
        }
        const pageBean = {
          pageBean: {
            ...this.pageBean,
            page: this.page,
          },
          querys: [
            {
              property: 'PROMOTER_ID_',
              value: currentUserId,
              operation: 'EQUAL',
              relation: 'OR',
              group: 'sub',
            },
            {
              property: 'APPOINTEE_ID_',
              value: currentUserId,
              operation: 'EQUAL',
              relation: 'OR',
              group: 'sub',
            },
            {
              property: 'INST_ID_',
              value: this.instId,
              operation: 'EQUAL',
              relation: 'AND',
            },
          ],
        }
        storeProcess
          .getUrgentById(pageBean)
          .then((response) => {
            this.pageBean = {
              page: response.page,
              pageSize: response.pageSize,
              total: response.total,
            }
            this.urgeList = [...this.urgeList, ...response.rows]
            if (this.urgeList.length >= response.total) {
              this.noMore = true
            } else {
              this.noMore = false
              this.page++
            }
          })
          .finally(() => {
            this.loading = false
          })
      },

      handleClose() {
        this.isShowDrawer = false
        this.$emit('update:show', false)
        this.setCurrentShowDialogAlias('')
      },
    },
  }
</script>

<style lang="scss" scoped>
  .urge-box {
    padding: 0 24px 24px;

    height: calc(100% - 24px);
    overflow: auto;
    .urge-items {
      padding-bottom: 24px;
      border-bottom: 1px solid #ebebeb;
      .urge-header {
        color: #262626;
        font-weight: 550;
        padding-top: 24px;
      }
      .urge-content {
        padding-top: 12px;
      }
      .urge-item {
        display: flex;
        justify-content: space-between;
        padding-bottom: 12px;
        .item-box {
          display: flex;
          .item-label {
            width: 70px;
            display: inline-block;
            text-align: right;
            white-space: nowrap;
            color: #8c8c8c;
          }
          .item-value {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-left: 8px;
          }
        }
        .left {
          padding-right: 24px;
          width: 136px;
        }
        .right {
          width: calc(100% - 168px);
          color: #262626;
        }
      }
      .urge-detail {
        background: #f9f9f9;
        padding: 8px 12px;
        border-radius: 4px;
        line-height: 22px;
        white-space: normal;
        word-break: break-all;
      }
    }
  }
  .empty-image {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    ::v-deep {
      .el-image {
        width: 240px;
      }
    }
  }
</style>