<template>
  <div :class="$style.content">
    <sd-header :class="$style.leaderHead">
      <div slot="left" :class="$style.title">
        <h3>待审批列表</h3>
      </div>
    </sd-header>
    <div
      v-infinite-scroll="loadMore"
      :infinite-scroll-disabled="busy"
      infinite-scroll-immediate-check="true"
      :class="$style.list"
    >
      <a-list v-if="task" :loading="!task" :data-source="task" :split="false">
        <a-list-item slot="renderItem" slot-scope="item">
          <a-card
            size="small"
            bordered
            :class="{ [$style.task]: true, [$style.checked]: item.id === checkedId }"
            @click="check(item.id)"
          >
            <div slot="title" :class="$style.title">
              {{ item.title }}
              <a-tag v-if="item.urgencyLevel" color="red">
                {{ item.urgencyLevelName }}
              </a-tag>
              <a-tag v-if="item.reminder" color="blue">
                催
              </a-tag>
              <a-tag v-if="item.srcTrustId" color="purple">
                兼
              </a-tag></div
            >
            <ul :class="$style.item">
              <li>业务类型: {{ item.appCat }}</li>
              <li>发起部门: {{ item.creatorDeptName }}</li>
              <li>发起人: {{ item.creatorName }}</li>
              <li>创建时间: {{ item.creationTime | sdDateFormat }}</li>
            </ul>
          </a-card>
        </a-list-item>
      </a-list>
      <div v-if="loading && !busy" :class="$style.spin">
        <a-spin />
      </div>
    </div>
    <iframe :key="checkedId" :class="$style.iframe" name="sdEasyflowIframe"></iframe>
  </div>
</template>

<script>
import axios from '@/common/services/axios-instance'
import TodoListService from '@/todo/todo-list-service'
import infiniteScroll from 'vue-infinite-scroll'
import components from './_import-components/sd-easy-webflow-import'

export default {
  name: 'SdEasyWebflow',
  directives: { infiniteScroll },
  metaInfo: {
    title: '极简审批',
  },
  components,
  data() {
    return {
      task: [],
      checkedId: '',
      nextId: '',
      startPosition: 0,
      loading: true,
      busy: false,
    }
  },
  watch: {
    checkedId(id) {
      const item = this.task.find((item) => item.id === this.checkedId)
      if (!item) return
      this.$nextTick().then(() => {
        TodoListService.openTaskItem(item, '', 'sdEasyflowIframe').then((res) => {
          this.getList(id).then(() => {
            if (this.task.length <= 1) window.close()
            this.check(this.nextId)
            this.$nextTick().then(this.updateScroll)
          })
        })
      })
    },
  },
  mounted() {
    this.getList().then(() => {
      const hasItem = this.task.find((item) => item.id === this.$route.query.id)
      if (!hasItem) {
        this.getTodoList(-1, [
          {
            dataType: 'str',
            name: 'id',
            op: 'eq',
            stringValue: this.$route.query.id,
          },
        ]).then((res) => {
          this.task = [...(res?.data?.datas || []), ...this.task]
          this.check(this.$route.query.id)
          this.$nextTick().then(this.updateScroll)
        })
      } else {
        this.check(this.$route.query.id)
        this.$nextTick().then(this.updateScroll)
      }
      this.loading = false
    })
  },
  methods: {
    getList(id) {
      if (id) {
        this.startPosition = this.task.findIndex((item) => item.id === this.checkedId)
      }
      return this.getTodoList(this.startPosition, []).then((res) => {
        this.totalSize = res?.data?.total
        this.task = [
          ...(id ? this.task.slice(0, this.startPosition) : this.task),
          ...(res?.data?.datas || []),
        ].filter((s, i, arr) => i === arr.findIndex((a) => a.id === s.id))
      })
    },
    getTodoList(startPosition, expressions = []) {
      return axios.post('api/flow-mobile/v1/user-tasks/todo-with-trustor', {
        startPosition,
        maxResults: 10,
        creatorDeptLevel: 'GROUP',
        expressions,
      })
    },
    check(id) {
      this.checkedId = (this.task.find((item) => item.id === id) || this.task[0]).id
      const index = this.task.findIndex((item) => item.id === this.checkedId)
      this.nextId = this.task[index + 1]?.id
    },
    updateScroll() {
      const index = this.task.findIndex((item) => item.id === this.checkedId)
      if (index === -1) return
      const toTopHight = index * 168 // 当前选中的框离顶部的距离
      const el = document.getElementsByClassName(this.$style.list)[0] // scroll容器
      if (toTopHight > el.clientHeight + el.scrollTop - 168) {
        // 如果当前选中的点在滚动区域之外，自动滚动一下
        el.scrollTo(0, toTopHight)
      }
    },
    loadMore() {
      this.startPosition += 10
      this.loading = true
      if (this.task?.length >= this.totalSize) {
        this.busy = true
        this.loading = false
        return
      }
      this.getList().then(() => {
        this.loading = false
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.content {
  height: 100%;
}
.leader-head {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  &:global(.ant-layout-header) {
    background: $primary-color;
  }
  h3 {
    color: $white;
  }
  .button {
    &:global.ant-btn-link {
      color: $white;
      &:hover {
        color: $primary-2;
      }
      &:active {
        background-color: $disabled-color-dark;
      }
    }
    :global(.anticon):last-child {
      margin-left: 2px;
    }
  }
}
.list-title {
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
  :global(.ant-divider-vertical) {
    width: 5px;
    height: 26px;
    margin: 0 15px;
    background-color: $primary-6;
    border-radius: 2px;
  }
  .text {
    font-weight: bold;
    color: $primary-6;
  }
}
.list {
  float: left;
  width: 280px;
  height: calc(100% - 64px);
  margin-top: 64px;
  overflow-y: scroll;
  background: #f0f2f5;
  :global(.ant-list-items) {
    margin-bottom: 10px;
  }
  :global(.ant-list-item) {
    justify-content: center;
    padding: 3px 0;
    background: #f0f2f5;
  }
  :global(.ant-spin-spinning) {
    top: 100px;
  }
  .task {
    width: 250px;
    border-radius: 7px;
    .title {
      white-space: break-spaces;
    }
    .item {
      padding: 0;
      list-style: none;
      padding-inline-start: 0;
    }
    :global(.ant-card-head-title) > div {
      white-space: pre-line;
    }
    :global(.ant-card-head) {
      border: none;
      :global(.ant-card-head-wrapper) {
        border-bottom: 1px solid #e8e8e8;
        :global(.ant-tag) {
          margin: 0 0 0 4px;
          &:nth-child(1) {
            margin-left: 8px;
          }
        }
      }
    }
  }
  .checked {
    border-color: $primary-6;
    border-width: 2px;
    > :global(.ant-card-head) {
      border: none;
      > :global(.ant-card-head-wrapper) {
        color: $primary-6;
        border-bottom: 1px solid $primary-6;
      }
    }
  }
}

.iframe {
  float: right;
  width: calc(100% - 280px);
  height: 100%;
  background: $background-color-base;
  border: none;
}
.spin {
  text-align: center;
}
</style>
