<template>
  <div class="my-revoke" :class="{'ibps-fixed-toolbar':checkMode}">
    <van-sticky>
      <van-nav-bar
        :title="generateTitle($route.name,$route.params.title||$route.meta.title)"
        :left-text="$t('common.button.back')"
        :right-text="$utils.isNotEmpty(listData)?rightText:''"
        left-arrow
        @click-left="$router.push({ name: 'dashboard' })"
        @click-right="toCheckMode()"
      />

      <van-search
        v-model="subject"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
      >
        <template #left>
          <van-icon name="bars" :class="{'ibps-active':$utils.isNotEmpty(typeId)}" class="ibps-pr-5" @click="clickType" />
        </template>
        <template #action>
          <van-icon name="filter-o" :class="{'ibps-active':stateActive}" @click="clickMoreSearch" />
        </template>
      </van-search>
    </van-sticky>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" @load="loadData">
        <van-cell
          v-for="(item,index) in listData"
          :key="item.id+index"
          class="ibps-p-0"
        >
          <van-swipe-cell
            :key="item.id+index"
            :right-width="65"
          >
            <van-checkbox-group v-model="checkedIds">
              <van-cell
                :key="item.id+index"
                :title="item.procDefName"
                :label="getTaskDesc(item.subject)"
                @click="onClick(item,index)"
              >
                <template slot="icon">
                  <van-checkbox
                    v-if="checkMode"
                    ref="checkboxes"
                    :name="item.taskId"
                    class="ibps-mr-10"
                  />
                  <ibps-avatar
                    v-else
                    :icon="_randomIcon(index)"
                    :text="item.procDefName"
                    :bg-color="_randomColor(index)"
                    radius="4"
                    icon-prefix="ibps-icon"
                    class="ibps-mr-10"
                  />
                </template>
                <span>{{ item.createTime|formatRelativeTime }}</span>
                <div>
                  <!-- <van-tag plain :type=" item.status | optionsFilter(bpmnStatusOptions,'type')">{{ item.status | optionsFilter(bpmnStatusOptions) }}</van-tag> -->
                  <van-tag
                    size="medium"
                    :color="item.status | optionsFilter(bpmnStatusOptions,'type') | optionsFilter(colorOptions,'color','type')"
                    :text-color="item.status | optionsFilter(bpmnStatusOptions,'type') | optionsFilter(colorOptions,'textColor','type')"
                  >
                    {{ item.status| optionsFilter(bpmnStatusOptions) }}</van-tag>
                </div>
              </van-cell>
            </van-checkbox-group>
            <van-button
              slot="right"
              type="danger"
              :text="$t('common.button.revoke')"
              class="ibps-swipe-button"
              @click.stop="onRevoke(item.taskId)"
            />
          </van-swipe-cell>
        </van-cell>
      </van-list>
      <ibps-list-result-page
        :result-type="resultType"
        :error-type="errorType"
        :result-message="resultMessage"
      />
    </van-pull-refresh>
    <approve-popup
      :visible="approvePopup"
      :task-id="taskId "
      :action="actionName"
      @close="(visible)=>{approvePopup =visible}"
      @callback="onRefreshPage"
    />

    <ibps-toolbar
      v-show="checkMode"
      :actions="mainActions"
    />
    <!--高级查询-->
    <ibps-more-search
      :show="moreSearchPopup"
      :search-forms="searchForms"
      @callback="onMoreSearch"
      @close="callback => moreSearchPopup = callback"
      @reset-form="resetForm"
    />

    <ibps-type-tree
      v-model="typeTreePopup"
      title="流程分类"
      category-key="FLOW_TYPE"
      @node-click="clickTypeNode"
      @close="visible => typeTreePopup = visible"
    />

    <ibps-bpmn-formrender-dialog
      :visible="formrenderVisible"
      :title="formrenderTitle"
      :inst-id="instId"
      @close="visible => formrenderVisible = visible"
    />
  </div>
</template>
<script>
import { revokable } from '@/api/platform/office/bpmReceived'

import ActionUtils from '@/utils/action'
import i18n from '@/utils/i18n'
import random from '@/mixins/random'
import bpmnStatus from '@/mixins/bpmnStatus'

import ApprovePopup from '@/business/platform/bpmn/form-ext/approve'
import IbpsMoreSearch from '@/components/ibps-more-search'
import IbpsAvatar from '@/components/ibps-avatar'
import IbpsToolbar from '@/components/ibps-toolbar'
import IbpsListResultPage from '@/components/ibps-list-result-page'
import IbpsTypeTree from '@/business/platform/cat/type/tree'
import IbpsBpmnFormrenderDialog from '@/business/platform/bpmn/form/dialog'

export default {
  components: {
    ApprovePopup,
    IbpsMoreSearch,
    IbpsAvatar,
    IbpsListResultPage,
    IbpsTypeTree,
    IbpsToolbar,
    IbpsBpmnFormrenderDialog
  },
  mixins: [random, bpmnStatus],
  data() {
    return {
      stateActive: false,
      moreSearchPopup: false,
      typeTreePopup: false,
      searchForms: {
        forms: [
          { prop: 'Q^wfInst.subject_^SL', label: '请求标题', fieldType: 'text' },
          { prop: 'Q^wfInst.proc_def_name_^SL', label: '流程名称', fieldType: 'text' },
          { prop: ['Q^ec.end_time_^DL', 'Q^ec.end_time_^DG'], label: '审批时间', fieldType: 'dateRange', options: { datefmt: 'yyyy-MM-dd' }}
        ]
      },

      subject: '',
      typeId: '',
      moreParams: {},

      listData: [],
      pagination: {},
      sorts: {},

      loading: false,
      finished: false,
      refreshing: false,
      resultType: 'init',
      errorType: null,
      resultMessage: null,

      approvePopup: false,
      actionName: 'revoke',
      taskId: '',

      checkMode: false,
      checkedIds: [],
      mainActions: [{
        'name': this.$t('common.button.revoke'),
        'type': 'danger',
        'callback': this.onRevoke
      }],

      instId: '',
      formrenderVisible: false,
      formrenderTitle: ''
    }
  },
  computed: {
    rightText() {
      return this.checkMode ? this.$t('common.button.cancel') : this.$t('common.button.manage')
    }
  },
  methods: {
    generateTitle(name, title) { // generateTitle by vue-i18n
      return i18n.generateTitle(name, title)
    },
    /**
     * 加载数据
     */
    loadData() {
      this.loading = true
      revokable(this.getSearcFormData()).then(response => {
        // 处理数据
        ActionUtils.handleListData(this, response.data)
      }).catch((e) => {
        ActionUtils.handleErrorData(this, e)
      })
    },
    /**
     * 获取格式化参数
     */
    getSearcFormData() {
      let params = {}
      if (this.$utils.isNotEmpty(this.subject)) {
        params['Q^subject_^SL'] = this.subject
      }
      if (this.$utils.isNotEmpty(this.moreParams)) {
        params = Object.assign(params, this.moreParams)
      }

      return ActionUtils.formatParams(
        params,
        this.pagination,
        this.sorts)
    },
    onRefreshPage() {
      this.checkedIds = []
      this.checkMode = false
      this.onRefresh()
    },
    /**
     * 下拉刷新
     */
    onRefresh() {
      this.refreshing = true
      this.finished = false
      this.loading = true
      this.onSearch()
    },
    /**
     * 查询
     */
    onSearch() {
      this.stateActive = false
      ActionUtils.initListData(this)
      this.loadData()
    },
    /**
     * 高级查询
     */
    onMoreSearch(params) {
      if (this.$utils.isNotEmpty(this.typeId)) {
        params['Q^type_id_^SL'] = this.typeId
      }
      this.moreParams = params
      this.onSearch()
      if (this.$utils.isNotEmpty(params)) {
        this.stateActive = true
      }
    },
    /**
     * 弹窗更多查询条件
     */
    clickMoreSearch() {
      this.moreSearchPopup = true
      this.stateActive = false
    },
    /**
     * 重置表单
     */
    resetForm() {
      this.typeId = ''
    },
    clickType() {
      this.typeTreePopup = true
    },
    clickTypeNode(data) {
      this.typeId = data.id
      this.onMoreSearch({})
    },
    onClick(item, index) {
      if (this.checkMode) {
        this.$refs.checkboxes[index].toggle()
      } else {
        this.instId = item.id
        this.formrenderTitle = item.procDefName
        this.formrenderVisible = true
      }
    },
    onRevoke(item) {
      if (item.name) {
        if (this.checkedIds.length === 0) {
          this.$notify({
            type: 'warning',
            message: this.$t('common.dialog.selectedRecords')
          })
          return
        }
        if (this.checkedIds.length > 1) {
          this.$notify({
            type: 'warning',
            message: this.$t('common.dialog.multipleSelected')
          })
          return
        }
        this.taskId = this.checkedIds[0]
      } else {
        this.taskId = item
      }
      this.approvePopup = true
    },
    toCheckMode() {
      if (this.$utils.isEmpty(this.listData)) {
        return
      }
      if (this.checkMode) {
        this.show = true
        this.checkedIds = []
      }
      this.checkMode = !this.checkMode
    },
    getTaskDesc(v) {
      if (!v.includes('#')) {
        return ''
      }
      return v.split('#')[1] || ''
    }
  }

}
</script>
<style lang="scss" scoped>
::v-deep .van-cell__title{
  width: 65%;
  .van-cell__label{
    overflow-wrap: break-word;
  }
}
</style>
