<template>
  <div>
    <PlacedTop :nodeId="'myDelegateIndex'"></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>
    <div class="task-content-container">
      <div class="roadWrapper" id="myDelegateIndex">
        <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="没有更多了"
              :immediate-check="false"
              :offset="20"
              @load="onLoad"
            >
              <van-cell
                v-for="(item, index) in itemList"
                :key="`${item.id}${index}`"
                class="task_list_item"
                :class="[item.supportMobile == 1 ? 'task_mobile' : 'task_pc']"
                @click="showItem(item)"
              >
                <div class="task_state">
                  <div class="task_list_name">
                    {{ item.taskSubject }}
                  </div>
                </div>
                <div class="task_list_word">
                  <div class="task_list_flowname">
                    <div class="task_list_flex">
                      <div class="task_list_time">
                        <i class="icon-time-circle" style="font-size: 16px"></i>
                        {{ item.createTime }}
                      </div>
                      <div
                        class="task_list_procDefName"
                        style="margin-left: 40px"
                      >
                        <i
                          class="icon-dangqianjiedian"
                          style="font-size: 16px"
                        ></i>
                        {{ item.taskName }}
                      </div>
                    </div>
                    <div>
                      <i class="icon-liuchengbianhao"></i>
                      {{ item.procInstId }}
                      <i
                        class="icon-fuzhi"
                        style="color: #409eff"
                        @click.stop="
                          (event) => clipboard(item.procInstId, event)
                        "
                      ></i>
                    </div>
                  </div>
                  <div class="task_list_user_box">
                    <div class="task_list_user">
                      <div class="left-img-box">
                        <img
                          v-if="item.imgSrc"
                          class="image"
                          :src="item.imgSrc"
                        />
                        <span v-else class="text">
                          {{
                            item.assigneeName.replace(/,/g, '/').substr(0, 1)
                          }}
                        </span>
                      </div>
                      <span>{{ item.assigneeName }}</span>
                    </div>
                    <div class="task_list_operation" v-if="!item.finishTime">
                      <van-button
                        type="info"
                        size="small"
                        :disabled="item.supportMobile != 1"
                        @click.stop="delBpmTaskMyDelegateById(item)"
                      >
                        收回
                      </van-button>
                    </div>
                  </div>
                </div>
              </van-cell>
            </van-list>
          </van-pull-refresh>
          <van-empty
            v-if="itemList.length == 0 && finished"
            class="custom-image"
            :image="noDataImage"
            description="暂无内容"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  const PlacedTop = () => import('@/components/PlacedTop.vue')
  import flow from '@/api/flow.js'
  import { takeBackTask } from '@/api/process.js'
  import { Dialog, Notify } from 'vant'
  import clipboard from '@/utils/clipboard'
  import vanListCommon from '@/mixins/vanListCommon.js'
  import callBackScroll from '@/mixins/callBackScroll.js'
  export default {
    name: 'MyDelegate',
    mixins: [vanListCommon, callBackScroll],
    components: { PlacedTop },
    data() {
      return {
        active: 0,
        noDataImage: require('@/assets/images/no_data_list.png'),
      }
    },
    created() {
      this.onRefresh()
    },
    methods: {
      //上拉加载
      //异步请求数据 ，我们的项目时封装好的方法，此处只是调用
      onLoad() {
        let params = {
          pageBean: {
            page: this.page,
            pageSize: this.pageSize,
            showTotal: true,
          },
          querys: [],
        }
        if (this.searchValue) {
          params.querys.push({
            property: 'subject_',
            value: this.searchValue,
            operation: 'LIKE',
            relation: 'OR',
            group: 'quickSearch',
          })
          params.querys.push({
            property: 'proc_inst_id_',
            value: this.searchValue,
            operation: 'LIKE',
            relation: 'OR',
            group: 'quickSearch',
          })
        }
        let _self = this
        flow
          .getMobileDelegate(params)
          .then((response) => {
            _self.loadData(response, _self)
          })
          .catch((error) => {})
          .finally(() => {
            _self.isDownLoading = false
            _self.isUpLoading = false
          })
      },
      //进入审批页面
      showItem(row) {
        if (row.supportMobile != 1) {
          this.$toast.fail('此转办未绑定手机表单')
          return
        }
        this.$router.push({
          path: '/matter/approvalForm',
          query: {
            instId: row.procInstId,
            from: 'delegate',
            nodeId: row.nodeId,
            status: row.status,
          },
        })
      },
      //根据任务ID收回转办任务
      delBpmTaskMyDelegateById(row) {
        Dialog.confirm({
          title: '提示',
          message: '确认收回此流程?',
          beforeClose: (action, done) => {
            if (action === 'confirm') {
              takeBackTask(row.taskId).then((res) => {
                done()
                if (!res.state)
                  return Notify({ type: 'danger', message: res.message })
                Notify({ type: 'success', message: res.message })
                this.onRefresh()
              })
            } else {
              done()
            }
          },
        }).then(() => {})
      },
      clipboard,
      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} - 104px);
    overflow: scroll;
  }
  .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;
    }
  }
  .task_state {
    display: flex;
    align-items: center;
    justify-self: start;
    white-space: nowrap;
    .task_list_name {
      word-break: break-all;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      font-size: $base-font-size-big;
      font-weight: bold;
      color: $base-text-color;
    }
  }
  .task_list_word {
    font-size: $base-font-size-small;
    i {
      font-size: $base-font-size-big;
    }
    .task_list_flowname {
      padding: 7px 0;
      color: $base-gray-text-color;
      border-bottom: 1px solid $base-gray-line-color;
      .task_list_flex {
        display: flex;
      }
      .task_list_procDefName {
        word-break: break-all;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        max-width: 140px;
      }
    }
    .task_list_user_box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      white-space: nowrap;
      padding-top: 12px;

      .task_list_user {
        display: flex;
        align-items: center;
        .left-img-box {
          width: 30px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          border-radius: 50%;
          margin-right: 4px;
          background: $--color-primary;
          .text {
            color: $base-white-color;
          }
          .span {
            color: $base-text-color;
          }
        }
      }
    }
  }
  .task_list_operation {
    float: right;
    .van-button--small {
      width: 78px;
      border-radius: 8px;
    }
  }
</style>