<template>
  <div class="home">
    <ht-portal
      ref="htPortal"
      :column-layout-alias="columnLayoutAlias"
      :current-user="currentUser"
      @click-process="handleClickProcess"
      @get-column-layout="getColumnLayout"
      @change-layout="changeLayout"
    >
      <template #empty>
        <el-empty
          :image="noDataImg"
          :image-size="380"
          description="此布局暂无栏目，请添加栏目"
        ></el-empty>
      </template>
    </ht-portal>
    <leader-dialog ref="leaderDialog" />
    <!-- 消息提醒弹框 -->
    <remind-pop></remind-pop>
  </div>
</template>

<script>
  import LeaderDialog from '@/views/matter/components/LeaderDialog'
  import RemindPop from '@/components/remindPop/index.vue'
  import moment from 'moment'
  import { getUsername } from '@/utils/username'
  import { getMyRequestTask } from '@/api/process'
  export default {
    name: 'Index',
    components: {
      LeaderDialog,
      RemindPop,
    },
    data() {
      return {
        columnConfig: {},
        noDataImg: require('@/assets/nodata_images/no-draft.png'),
        currentUser: { username: getUsername() || '' },
      }
    },
    computed: {
      columnLayoutAlias() {
        return this.$route.meta.alias || 'default_front'
      },
    },
    mounted() {
      this.$baseEventBus.$on('get-layout-config', () => {
        localStorage.setItem(
          this.columnConfig.id,
          JSON.stringify(this.columnConfig.updateDate)
        )
        if (this.$refs.htPortal) {
          this.$refs.htPortal?.updateColumnLayout()
        }
      })
      this.$baseEventBus.$on('add-column', (layoutId) => {
        if (this.$refs.htPortal) {
          this.$refs.htPortal.addColumn(layoutId)
        }
      })
    },
    methods: {
      getColumnLayout(data) {
        this.columnConfig = data
        sessionStorage.setItem('layoutId', data.id)
        //判断管理端是否修改了栏目布局 identifyChange:0.前台未进行拖拽  1.前台更新后，后台未更新 2.前台更新之后，后台进行更新
        if ([1, 2].includes(data.identifyChange)) {
          localStorage.setItem(`isNewLayout_${data.id}`, true)
          this.$baseEventBus.$emit('change-layout', { isNewLayout: true })
        } else {
          localStorage.setItem(`isNewLayout_${data.id}`, false)
          this.$baseEventBus.$emit('change-layout', { isNewLayout: false })
        }
      },
      changeLayout() {
        localStorage.setItem(`isDragColumn_${this.columnConfig.id}`, true)
        this.$baseEventBus.$emit('change-layout', { isDragColumn: true })
      },
      handleClickProcess(row, type, tableData) {
        if (['commonProcess', 'processOverview', 'collection'].includes(type)) {
          this.$refs.leaderDialog.handleNewProcessJumps(row)
        } else if (type === 'todo') {
          this.$refs.leaderDialog.handleJumpsTodoPage(row, {
            isGetApprovalBtn: true,
            type: 'fromTodoList',
            key: tableData.length === 1 ? 'onlyOneTask' : '',
          })
        } else if (type === 'request') {
          this.handleRequestJump(row)
        } else if (type === 'draft') {
          const path = '/matter/startProcess'
          this.$router.push({
            path,
            query: this.getCurrentQuery(row, type),
          })
        } else if (type == 'done') {
          this.setReaded(row.id)
          const path = '/matter/approvalForm'
          this.$router.push({
            path,
            query: this.getCurrentQuery(row, type),
          })
        } else {
          const path = '/matter/approvalForm'
          this.$router.push({
            path,
            query: this.getCurrentQuery(row, type),
          })
        }
      },
      getCurrentQuery(row, type) {
        const { id, procInstId, nodeId } = row
        const queryMap = {
          done: {
            type: 'done',
            doneTaskId: row.taskId,
            isDefAuthorize: row.isDefAuthorize,
          },
          draft: {
            defId: row.procDefId,
            name: row.subject,
            instStatus: row.status,
          },
          received: {
            readId: row.id, //为知会任务表的id
            receivedStatus: row.status,
            isRead: row.isRead,
          },
          circulated: {
            readId: row.id,
          },
        }
        let query = {
          instId: ['done', 'request', 'draft'].includes(type) ? id : procInstId,
          nodeId,
          from: type,
        }
        if (['done', 'draft', 'received', 'circulated'].includes(type)) {
          query = {
            ...query,
            ...queryMap[type],
          }
        }
        if (['draft', 'done'].includes(type)) {
          delete query.from
        }
        return query
      },
      handleRequestJump(row) {
        getMyRequestTask(row.id).then((res) => {
          let task = res.value
          const path = '/matter/approvalForm'
          let query = {
            instId: row.id,
            // 这个参数用于检查是否有撤回流程权限
            type: 'request',
            myApplication: true,
          }
          if (task && task.id) {
            query = {
              ...query,
              taskId: task.id,
              isGetApprovalBtn: true,
            }
          }
          this.$router.push({
            path,
            query,
          })
        })
      },
      setReaded(id) {
        this.$requestConfig.setReaded({ procInstId: id }).then((resp) => {
          console.log(resp)
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .home {
    ::v-deep {
      .ht-custom-title {
        .custom-title {
          &::before {
            background: var(--themeColor);
          }
        }
      }
      .ht-process-center .subject-name {
        color: var(--themeColor);
      }
      .ht-process-publicity {
        .is-read {
          .email-icon {
            color: rgba(var(--themeColorRgb), 0.5) !important;
          }
          &:hover {
            .email-icon {
              color: var(--themeColor) !important;
            }
          }
        }
      }
    }
  }
</style>