<template>
  <el-dialog
    title="催办记录"
    :visible.sync="urgentRecordDialogVisible"
    :close-on-click-modal="false"
    append-to-body
  >
    <ht-table
      ref="urgentRecordTable"
      :data="rows"
      :page-result="pagination"
      :default-querys="defaultQuerys"
      :show-export="false"
      :show-custom-column="false"
      :is-load-table="false"
      @loading="loadData"
    >
      <ht-table-column
        show-overflow-tooltip
        width="100"
        label="任务名称"
        align="center"
      >
        <template #default="{ row }">
          <span>{{ row.nodeName }}</span>
        </template>
      </ht-table-column>

      <ht-table-column show-overflow-tooltip label="催办内容" align="center">
        <template #default="{ row }">
          <span>{{ row.content }}</span>
        </template>
      </ht-table-column>
      <ht-table-column width="150" label="催办日期" align="center">
        <template #default="{ row }">
          <span>{{ row.urgrntDate }}</span>
        </template>
      </ht-table-column>
      <ht-table-column
        show-overflow-tooltip
        width="120"
        label="被催办人"
        align="center"
      >
        <template #default="{ row }">
          <span>{{ row.appointee }}</span>
        </template>
      </ht-table-column>
      <ht-table-column
        show-overflow-tooltip
        width="90"
        label="催办人"
        align="center"
      >
        <template #default="{ row }">
          <span>{{ row.promoter }}</span>
        </template>
      </ht-table-column>

      <ht-table-column width="80" align="center" label="催办类型">
        <template #default="{ row }">
          <el-tag size="small">
            {{ typeMap[row.type] }}
          </el-tag>
        </template>
      </ht-table-column>
    </ht-table>
  </el-dialog>
</template>

<script>
  import storeProcess from '@/api/storeProcess'
  import { mapState } from 'vuex'

  const TYPE_MAP = {
    mail: '邮件',
    sms: '短信',
    smsApproval: '短信审批',
    inner: '内部消息',
    voice: '语音',
    wxEnterprise: '微信',
    dingTalk: '钉钉',
    flyBook: '飞书',
  }
  export default {
    name: 'UrgentRecord',
    props: {
      instId: {
        type: String,
        default: null,
      },
    },
    data() {
      return {
        urgentRecordDialogVisible: false,
        defaultQuerys: [],
        typeMap: TYPE_MAP,
        pagination: {
          // 页码
          page: 1,
          pageSize: 20,
          total: 0,
        },
        rows: [], // 表格数据
      }
    },
    computed: {
      ...mapState('user', ['userInfo']),
    },
    methods: {
      // 加载表格中数据方法
      loadData(param, cb) {
        const currentUserId = this.userInfo.user?.id
        if (!this.instId || !currentUserId) {
          cb()
          return
        }
        const pageBean = {
          pageBean: param.pageBean,
          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.pagination = {
              page: response.page,
              pageSize: response.pageSize,
              total: response.total,
            }
            this.rows = response.rows
          })
          .finally(() => cb())
      },
      //鼠标点击页面其他其他位置不关闭弹框
      handleOpen() {
        this.urgentRecordDialogVisible = true
        this.$nextTick(() => {
          this.$refs.urgentRecordTable.load()
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  ::v-deep .ht-table {
    height: auto !important;
    height: 400px !important;
  }
  ::v-deep .el-table__body-wrapper {
    // max-height: unset !important;
    overflow-x: hidden;
  }
  ::v-deep el-table th.todo-header-row {
    font-size: 13px;
    background-color: #fafafa;
  }

  ::v-deep .el-table tr.todo-row {
    font-size: 13px;
  }

  ::v-deep .el-container {
    background-color: #fff;
  }

  ::v-deep .el-row {
    margin-bottom: 20px;
  }

  ::v-deep .el-header {
    border-bottom: 1.5px solid #ededed;
  }

  .top-title {
    margin-left: 20px;
    font-size: 16px;
    line-height: 58px;
    color: #a2a2a2;
  }
  ::v-deep .el-tree {
    position: relative;
    font-size: 13px;
    // color: $--color-text-primary;
    cursor: default;
    background: #fff;
  }
  ::v-deep .el-dialog__body {
    padding: 10px 20px;
    font-size: 14px;
    // color: $--color-text-regular;
  }
  ::v-deep .ht-table-panel {
    .pagination-panel {
      .el-row--flex {
        justify-content: end;
      }
    }
  }
</style>