<template>
  <div>
    <PlacedTop :nodeId="'circulateMatterIndex'"></PlacedTop>
    <NavBar :is-custom="true" @go-back="handleGoBack">
      <template slot="title">传阅事项</template>
    </NavBar>
    <van-search
      v-model="searchValue"
      show-action
      placeholder="请输入标题或流程编号来搜索..."
      @search="onSearchChange"
      @clear="onSearch"
    >
      <template #action>
        <div @click="onSearch" style="color: #409eff">搜索</div>
      </template>
    </van-search>
    <van-tabs
      v-model="active"
      title-active-color="#409EFF"
      color="#409EFF"
      @change="onChangeTabs"
    >
      <div class="task-content-container">
        <van-tab
          v-for="(tab, index) in categories"
          :key="tab.id"
          :title="tab.name"
        >
          <div
            class="roadWrapper"
            id="circulateMatterIndex"
            v-if="status == tab.id"
          >
            <div class="road">
              <van-pull-refresh v-model="isDownLoading" @refresh="onRefresh()">
                <van-list
                  v-if="itemList && itemList.length > 0"
                  v-model="loading"
                  :finished="finished"
                  finished-text=""
                  @load="onLoad(1)"
                  :immediate-check="false"
                  :offset="20"
                >
                  <van-cell
                    v-for="item in itemList"
                    :key="item.id"
                    class="task_list_item task_mobile"
                    @click="showItem(item)"
                  >
                    <MyNoticeListItem
                      :item="item"
                      :status="status"
                      :searchValue="searchValue"
                      @revoke="handleRevoke"
                    ></MyNoticeListItem>
                  </van-cell>
                </van-list>
              </van-pull-refresh>
              <van-collapse
              v-model="activeNames"
              v-if="finished && PCitemList && PCitemList.length > 0 "
              class="pc_process"
            >
              <van-collapse-item
                title="不可使用任务"
                name="PCProcess"
                :border="false"
                :is-link="false"
              >
                <template #title>
                  不可使用任务
                  <i class="van-icon van-icon-arrow van-cell__right-icon"></i>
                </template>
                <van-list
                  v-if="PCitemList && PCitemList.length > 0"
                  v-model="PCloading"
                  :finished="PCfinished"
                  finished-text="没有更多了"
                  @load="onLoad(0)"
                  :immediate-check="false"
                  :offset="50"
                >
                <van-cell
                    v-for="item in PCitemList"
                    :key="item.id"
                    class="task_list_item task_pc"
                    @click="showItem(item)"
                  >
                    <MyNoticeListItem
                      :item="item"
                      :status="status"
                      :searchValue="searchValue"
                      @revoke="handleRevoke"
                    ></MyNoticeListItem>
                  </van-cell>
                </van-list>
              </van-collapse-item>
            </van-collapse>
              <van-empty
               v-if="itemList.length == 0 && finished && PCitemList.length == 0 && PCfinished "
                class="custom-image"
                :image="noDataImage"
                description="暂无内容"
              />
            </div>
          </div>
        </van-tab>
      </div>
    </van-tabs>
  </div>
</template>

<script>
  const PlacedTop = () => import('@/components/PlacedTop.vue')
  const MyNoticeListItem = () => import('./MyNoticeListItem.vue')
  import flow from '@/api/flow.js'
  import { Dialog, Notify } from 'vant'
  import { revokeProcessById } from '@/api/process.js'
  import vanListCommon from '@/mixins/vanListCommon.js'
  import callBackScroll from '@/mixins/callBackScroll.js'
  import tabActiveMemory from '@/mixins/tabActiveMemory'
  export default {
    name: 'CirculateMatter',
    mixins: [vanListCommon, tabActiveMemory, callBackScroll],
    components: {
      MyNoticeListItem,
      PlacedTop,
    },
    data() {
      return {
        active: 0,
        status: 'wait',
        noticeTyle: 'getNoticeTodoReadList',
        categories: [
          {
            id: 'wait',
            name: '我收到的',
          },
          {
            id: 'mine',
            name: '我传阅的',
          },
        ],
        noDataImage: require('@/assets/images/no_data_list.png'),
      }
    },
    methods: {
      init() {
        this.onChangeTabs()
      },
      //根据ID主键ID删除传阅任务
      handleRevoke(id) {
        Dialog.confirm({
          title: '提示',
          message: '确认撤回此任务?',
          beforeClose: (action, done) => {
            if (action === 'confirm') {
              revokeProcessById(id)
                .then((res) => {
                  if (!res.state)
                    return Notify({ type: 'danger', message: res.message })
                  Notify({ type: 'success', message: res.message })
                  this.onRefresh()
                })
                .finally(() => {
                  done()
                })
            } else {
              done()
            }
          },
        }).then(() => {})
      },
      onChangeTabs(event) {
        switch (this.active) {
          case 0:
            this.status = 'wait'
            this.noticeTyle = 'getNoticeTodoReadList'
            break
          case 1:
            this.noticeTyle = 'getMyNoticeReadList'
            this.status = 'mine'
            break
          default:
            this.noticeTyle = 'getNoticeTodoReadList'
            this.status = 'wait'
            break
        }
        this.searchValue = ''
        this.onRefresh()
      },
      //上拉加载
      //异步请求数据 ，我们的项目时封装好的方法，此处只是调用
      onLoad(supportMobile) {
        let params = {
          pageBean: {
            page:supportMobile==1?this.page:this.PCpage,
            pageSize: this.pageSize,
            showTotal: true,
          },
          querys: [{
          property:'bpm_task_notice.support_mobile_',
          value: supportMobile,
          group: 'main',
          relation: 'AND',
          operation: 'EQUAL',
          }],
        }
        if (this.searchValue) {
          params.querys.push({
            property: 'bpm_pro_inst.subject_',
            value: this.searchValue,
            operation: 'LIKE',
            relation: 'OR',
            group: 'main1',
          })
          params.querys.push({
            property: 'bpm_pro_inst.proc_def_name_',
            value: this.searchValue,
            operation: 'LIKE',
            relation: 'OR',
            group: 'main1',
          })
          params.querys.push({
            property: 'bpm_task_notice.owner_name_',
            value: this.searchValue,
            operation: 'LIKE',
            relation: 'OR',
            group: 'main1',
          })
          params.querys.push({
            group: 'main1',
            operation: 'LIKE',
            property: 'bpm_task_notice.proc_inst_id_',
            relation: 'OR',
            value: this.searchValue,
          })
        }
        let _self = this
        flow
          .getNoticesList(params, this.noticeTyle)
          .then((response) => {
            if(supportMobile===1){
              _self.loadData(response, _self)
            }else{
              _self.loadPCData(response, _self)
            }
          })
          .catch((error) => {})
          .finally(() => {
            _self.isDownLoading = false
            _self.isUpLoading = false
          })
      },
      showItem(row) {
        if (row.supportMobile == 1) {
        if (this.status == 'wait') {
          this.$router.push({
            path: '/matter/approvalForm',
            query: {
              readId: row.id, //为知会任务表的id
              instId: row.procInstId,
              from: 'received',
              receivedStatus: row.status,
              isRead: row.isRead,
              nodeId: row.nodeId,
              status: row.status,
            },
          })
        } else if (this.status == 'mine') {
          this.$router.push({
            path: '/matter/approvalForm',
            query: {
              readId: row.id,
              instId: row.procInstId,
              from: 'circulate',
              nodeId: row.nodeId,
              status: row.status,
            },
          })
        }}else{
          this.$toast.fail('此任务未绑定手机表单')
        }
      },
      handleGoBack() {
        const from = this.$route.query.from
        if (from === 'worker') {
          this.$router.push('/worker')
        } else {
          this.$router.push({
            path: '/home',
          })
        }
      },
    },
  }
</script>
<style lang="scss" scoped>
  .roadWrapper {
    height: calc(#{$vh} - 164px);
    overflow: scroll;
  }
  ::v-deep .van-tab {
    font-size: 16px;
  }
  .van-search {
    padding: 16px 8px 8px 16px;
    .van-search__content {
      border-radius: 8px;
    }
  }
  .task_list_item {
    margin-bottom: 16px;
    border-radius: 12px;
    padding: 16px;
    .van-cell__title {
      width: 100%;
    }
  }
  .task-content-container {
    padding: 16px 0;
    .road {
      padding: 0 16px;
    }
  }
  .pc_process ::v-deep .van-collapse-item__content {
    padding: 0;
    background: #f5f5f5;
  }
  .pc_process ::v-deep .van-collapse-item__title{
    text-align: center;
    background: #f5f5f5;
    color: #409eff;
    border: none;
    .van-icon{
      color: #409eff;
    }
  }
  .van-hairline--top-bottom::after, 
  .van-hairline-unset--top-bottom::after {
    border-width:0;
  }
</style>