<template>
  <div class="home">
    <PlacedTop></PlacedTop>
    <header class="home-header--title" v-if="bannerTypeIds.length < 1">
      首页
    </header>
    <HtSwipeSlide
      v-else
      :showData="bannerTypeIds"
      :isRadius="false"
      :height="220"
      v-cloak
      :showTitle="false"
      :isPublic="1"
    ></HtSwipeSlide>
    <van-row
       class="home-container"
      :class="bannerTypeIds.length >= 1 ? 'bannerTypeIds' : ''"
    >
      <van-pull-refresh
        v-model="isLoading"
        class="pull-refresh__wrap"
        @refresh="onRefresh"
      >
        <van-col span="24" class="home-column__container">
          <ht-column
            v-for="(column, i) in gridList"
            :key="column.alias + i"
            :column-alias="column.alias"
            @click-process="handleClickProcess"
          />
        </van-col>
      </van-pull-refresh>

      <leader-popup ref="LeaderPopup" />
    </van-row>

    <!-- <van-col span="24"> -->
    <tabBar :active-index="0"></tabBar>
    <MessagePrompt ref="MessagePrompt"></MessagePrompt>
    <!-- </van-col> -->
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import { getMyRequestTask } from '@/api/process.js'
  const tabBar = () => import('@/components/TabBar.vue')
  const PlacedTop = () => import('@/components/PlacedTop.vue')
  const MessagePrompt = () => import('@/components/MessagePrompt.vue')
  const LeaderPopup = () => import('./matter/components/LeaderPopup.vue')

  export default {
    name: 'Home',
    components: {
      tabBar,
      PlacedTop,
      LeaderPopup,
      MessagePrompt,
    },
    data() {
      return { bannerTypeIds: [], gridList: [], isLoading: false }
    },
    computed: {
      ...mapState('login', ['currentUser']),
      userName() {
        return this.currentUser.username
      },
      account() {
        return this.currentUser.account
      },
      currentLayout: (state) => {
        return state.index.currentLayout ? state.index.currentLayout : {}
      },
    },
    created() {
      // this.$nextTick(() => {
      //   if (this.$route.params && this.$route.params.fistLogin) {
      //     this.$refs.MessagePrompt.loadPopups()
      //   }
      // })

      this.getLayout()
    },
    mounted() {
      let status = setInterval(() => {
        let MessagePrompt = this.$refs.MessagePrompt
        if (MessagePrompt) {
          this.$refs.MessagePrompt.loadPopups()
          clearInterval(status)
        }
      }, 100)
    },
    methods: {
      onRefresh() {
        this.getLayout()
      },
      getLayout() {
        let Base64 = require('js-base64').Base64
        this.$store
          .dispatch('menu/myMobileHome')
          .then((data) => {
            this.bannerTypeIds = data.value.bannerTypeIds || []
            this.$store.dispatch('index/switchLayout', data.value)
            const layout = JSON.parse(
              Base64.decode(data.value.designHtml) || '{}'
            )
            if (layout && layout.mobileList && layout.mobileList.length > 0) {
              this.gridList = layout.mobileList
            }
          })
          .finally(() => {
            this.isLoading = false
          })
      },

      handleClickProcess(row, type, tableData) {
        if (row.supportMobile == 1) {
          if (
            ['commonProcess', 'processOverview', 'collection'].includes(type)
          ) {
            this.$refs.LeaderPopup.handleNewProcessJumps(row)
          } else if (type === 'todo') {
            this.$refs.LeaderPopup.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') {
            console.log(row)
            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),
            })
          }
        } else {
          this.$notify({
            message: '此流程还未设置手机表单',
            background: '#FFEAD9',
            color: '#FB7A18',
          })
        }
      },
      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>
  .login-info {
    margin-top: 24px;
    font-size: 16px;

    .user {
      color: #409eff;
      font-weight: bold;
    }
  }

  .home {
    position: relative;
    height: 100%;
    overflow-y: auto;
    &-header {
      &--title {
        height: 44px;
        line-height: 44px;
        background: $base-white-color;
        text-align: center;
        font-size: 17px;
        font-weight: 800;
        color: #222222;
        border-bottom: 1px solid #f6f6f6;
      }
    }
    .home-container{
      height: calc(100% - 138px); 
      padding: 16px
    }
    .bannerTypeIds {
      position: absolute;
      top: 180px !important;
      // 距离顶部  、 padding  、导航栏
      height: calc(100% - 148px - 16px - 55px) !important;
      z-index: 2;
      width: calc(100% - 32px);
      padding-top: 5px !important;
      bottom: 55px;
    }
  }

  ::v-deep {
    .home-column__container {
      margin-bottom: 62px;
      & > .box-card:first-child {
        margin-top: 0 !important;
      }
    }
  }

  [v-cloak] {
    display: none !important;
  }

  ::v-deep {
    // 数据列表样式
    .ht-data-sheets {
      .no-tabs {
        padding: 16px 12px !important;
      }
      .form-list--header {
        display: none;
      }
      .template-preview-container {
        .template-content {
          display: block;
        }
        .field-wrap {
          padding: 12px;
        }
        .footer-wrap,
        .form-list--footer {
          display: none !important;
        }
        .van-cell__value {
          background: #f9f9f9;
          border-radius: 8px 8px 8px 8px;
        }
        .field-item--title,
        .field-content {
          padding: 0 !important;
        }

        .field-item--title {
          width: 100% !important;
        }
        .form-list--content {
          height: 100% !important;
          min-height: 150px;
        }
        .van-cell {
          padding: 0 !important;
        }
        .van-list > div:nth-last-of-type(2) {
          margin-bottom: 0 !important;
        }

        .van-cell:nth-last-of-type(1) {
        }
      }
    }
  }
</style>