<template>
  <div class="fullheight">
    <ht-table
      @load="loadData"
      :data="data"
      :pageResult="pageResult"
      :pageSizes="curPageSizes"
      :selection="true"
      :show-export="false"
      :quick-search-props="[
        {prop: 'subject', label: '流程标题'},
        {prop: 'procDefName', label: '流程名称'},
        {prop: 'ID_', label: '流程编号'}
      ]"
      ref="htTable"
      @row-click="rowClick"
      :header-cell-class-name="headerCellClassName"
      @selection-change="handleSelectionChange"
    >
      <template v-slot:toolbar>
        <el-button-group>
          <ht-delete-button
            :url="deleteUrl"
            :htTable="$refs.htTable"
            @after-delete="afterDelete"
            :disabled="isDisabled"
            >删除</ht-delete-button
          >
          <!-- <el-button icon="el-icon-document-add" @click="batchRestore()">恢复</el-button> -->
        </el-button-group>
      </template>
      <template v-slot:search>
        <ht-table-search-panel
          :divide="3"
          :label-width="100"
          display-style="block"
        >
          <ht-table-search-field label="流程编号" prop="ID_" />
          <ht-table-search-field label="流程标题" prop="subject">
          </ht-table-search-field>
          <ht-table-search-field label="流程名称" prop="procDefName">
          </ht-table-search-field>
          <ht-table-search-field label="发起人" prop="creator" />
          <ht-table-search-field
            type="daterange"
            label="创建时间"
            prop="createTime"
            operation="BETWEEN"
          />
        </ht-table-search-panel>
      </template>

      <template>
        <ht-table-column type="index" width="50" align="center" label="序号" />
        <ht-table-column
          prop="id"
          label="流程编号"
          :hiden="true"
          width="160"
          show-overflow-tooltip
          :sortable="true"
        />
        <ht-table-column
          prop="subject"
          label="流程标题"
          :show-overflow-tooltip="true"
        >
          <template v-slot="{row}">
            <el-link
              @click="handleCommand({row: row, command: 'detail'})"
              type="primary"
              title="实例详情"
              >{{ row.subject }}</el-link
            >
          </template></ht-table-column
        >
        <ht-table-column
          prop="procDefName"
          label="流程名称"
          hidden
          width="150"
          :sortable="true"
        >
          <template v-slot="{row}">
            <el-link
              v-if="row.canJumpInstance"
              @click="showprocDefNameDialog(row)"
              type="primary"
              title="流程设计编辑"
              >{{ row.procDefName }}</el-link
            >
            <div v-else>
              {{ row.procDefName }}
            </div>
          </template>
        </ht-table-column>
        <ht-table-column
          prop="status"
          label="实例状态"
          width="115"
          :render-header="renderHeaderMethod"
          :filters="statusArray"
        >
          <template v-slot="{row}">
            <el-tag
              v-show="row.status == s.value"
              :type="s.type"
              v-for="s in statusArray"
              :key="s.value"
              >{{ s.text }}</el-tag
            >
          </template>
        </ht-table-column>
        <ht-table-column
          prop="createTime"
          label="创建时间"
          width="160"
          :sortable="true"
        />
        <ht-table-column
          prop="endTime"
          label="结束时间"
          width="160"
          :sortable="true"
        />
        <ht-table-column
          prop="isForbidden"
          label="是否挂起"
          width="100"
          :render-header="renderHeaderMethod"
          :filters="isForbidden"
        >
          <template v-slot="{row}">
            <el-tag
              v-show="row.isForbidden == s.value"
              :type="s.type"
              v-for="s in isForbidden"
              :key="s.value"
              >{{ s.text }}</el-tag
            >
          </template>
        </ht-table-column>
        <ht-table-column prop="creator" label="发起人" width="115" />
        <ht-table-column align="left" label="操作" width="200">
          <template v-slot="{row}">
            <el-button
              v-for="item in row.caozuo"
              :key="item.id"
              type="text"
              @click="handleCommand({row: row, command: item.command})"
              >{{ item.title }}</el-button
            >
            <el-dropdown
              v-if="row.gengduo.length"
              size="mini"
              class="more-operate-btn__dropdown"
              trigger="click"
              @command="handleCommand"
            >
              <span class="more-operate-btn"
                >更多操作<i class="el-icon-caret-bottom"></i>
              </span>
              <el-dropdown-menu
                slot="dropdown"
                class="operate-dropdown__button"
              >
                <el-dropdown-item
                  v-for="(itemn1, index) in row.gengduo"
                  :key="index"
                  :command="{row: row, command: itemn1.command}"
                  >{{ itemn1.title }}</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
            <!-- <el-button
              type="text"
              @click="handleCommand({row: row, command: 'detail'})"
              >查看</el-button
            >  -->
            <!-- <el-button
              type="text"
              @click="handleCommand({row: row, command: 'isForbidden'})"
              v-if="row.isDele != '1' && row.isForbidden == '1'"
              >取消挂起</el-button
            >
            <el-button
              type="text"
              @click="handleCommand({row: row, command: 'isForbidden'})"
              v-if="
                row.isDele != '1' &&
                row.isForbidden == '0' &&
                row.status != 'end' &&
                row.status != 'draft' &&
                row.status != 'manualend' &&
                row.status != 'adminmanualend'
              "
              >挂起</el-button
            > -->
            <!-- <el-dropdown
              size="mini"
              class="more-operate-btn__dropdown"
              trigger="click"
              @command="handleCommand"
            >
              <span class="more-operate-btn"
                >更多操作<i class="el-icon-caret-bottom"></i>
              </span> -->
            <!-- <el-dropdown-menu
                slot="dropdown"
                class="operate-dropdown__button"
              >
                <el-dropdown-item
                  :command="{row: row, command: 'instanceUrgent'}"
                  v-if="
                    row.isDele != '1' &&
                    row.status != 'manualend' &&
                    row.status != 'adminmanualend' &&
                    row.status != 'end' &&
                    row.status != 'draft'
                  "
                  >催办</el-dropdown-item
                >
                <el-dropdown-item
                  :command="{row: row, command: 'restore'}"
                  v-if="row.isDele == '1'"
                  >恢复</el-dropdown-item
                > -->
            <!-- <el-dropdown-item
                  v-if="row.isDele!='1' && row.isForbidden=='1'"
                  :command="{row:row,command:'isForbidden'}"
                >取消挂起</el-dropdown-item> -->
            <!-- <el-dropdown-item
                  v-if="row.isDele!='1' && row.isForbidden=='0' && row.status !='end' && row.status !='draft' && row.status !='manualend' && row.status !='adminmanualend'"
                  :command="{row:row,command:'isForbidden'}"
                >挂起</el-dropdown-item> -->
            <!-- <el-dropdown-item
                  v-if="
                    row.isDele != '1' &&
                    row.status != 'end' &&
                    row.status != 'draft' &&
                    row.status != 'manualend' &&
                    row.status != 'adminmanualend'
                  "
                  :command="{row: row, command: 'end'}"
                  >终止流程</el-dropdown-item
                >

                <el-dropdown-item
                  v-if="
                    row.isDele != '1' &&
                    (row.status == 'manualend' ||
                      row.status == 'adminmanualend')
                  "
                  :command="{row: row, command: 'renew'}"
                  >终止恢复</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown> -->
          </template>
        </ht-table-column>
      </template>
    </ht-table>

    <ht-sidebar-dialog
      width="100%"
      :close-on-click-modal="false"
      :visible="dialogVisible"
      :before-close="handleClose"
      :append-to-body="true"
      title="查看明细"
      class="detail-dialog"
    >
      <!-- <el-button
        style="float: right; z-index: 15000; position: relative"
        @click="dialogVisible = false"
        type="danger"
        icon="el-icon-refresh-left"
        >返回</el-button
      > -->
      <InstanceDetail
        v-if="dialogVisible"
        @dialogVisible="
          val => {
            dialogVisible = val
          }
        "
        :instance="curInstance"
      />
    </ht-sidebar-dialog>
    <!-- 流程催办 -->
    <InstanceUrgent ref="instanceUrgent" />
    <!-- 流程编辑 -->
    <DefManager
      v-show="showDefManager"
      ref="DefManager"
      @handleDefManagerClose="
        () => {
          showDefManager = false
        }
      "
    ></DefManager>
  </div>
</template>
<script>
import flow from '@/api/flow.js'
import portal from '@/api/portal.js'
import utils from '@/hotent-ui-util.js'
import req from '@/request.js'
const InstanceUrgent = () => import('@/views/flow/InstanceUrgent.vue')
import EipUserDialog from '@/components/dialog/EipUserDialog.vue'
const InstanceDetail = () => import('@/views/flow/InstanceDetail.vue')
import tableHeaderFilter from '@/mixins/tableHeaderFilter.js'
import DefManager from './DefManager.vue'
export default {
  components: {
    EipUserDialog,
    InstanceDetail,
    InstanceUrgent,
    DefManager
  },
  mixins: [tableHeaderFilter],
  data() {
    return {
      data: [],
      pageResult: {
        page: 1,
        pageSize: 50,
        total: 0
      },
      curPageSizes: [10, 20, 50, 100, 200, 300],
      querys: [
        {
          property: 'isDele',
          value: 0,
          operation: 'EQUAL',
          group: 'queryStr',
          relation: 'AND'
        }
      ],
      loadDataUrl: '',
      dialogVisible: false,
      showDefManager: false,
      statusArray: [
        {text: '运行中', value: 'running', type: 'success'},
        {text: '结束', value: 'end', type: 'info'},
        {text: '草稿', value: 'draft', type: 'info'},
        {text: '驳回', value: 'back', type: 'danger'},
        {text: '驳回到发起人', value: 'backToStart', type: 'danger'},
        {text: '撤回', value: 'revoke', type: 'warning'},
        {text: '撤回到发起人', value: 'revokeToStart', type: 'warning'},
        {text: '人工终止', value: 'manualend', type: 'info'},
        {text: '管理员结束', value: 'adminmanualend', type: 'info'}
      ],
      curInstance: '',
      isDisabled: true, //按钮的禁用
      selectedList: [],
      isForce: true
    }
  },
  watch: {
    // 监听选中下
    selectedList: {
      handler(val) {
        this.isDisabled = val.length < 1 ? true : false
      },
      deep: true
    }
  },
  computed: {
    isForbidden: function() {
      return [
        {text: '正常', value: 0, type: 'info'},
        {text: '挂起', value: 1, type: 'danger'}
      ]
    },
    deleteUrl: function() {
      return window.context.bpmRunTime + '/runtime/instance/v1/remove'
    },
    saveRoleUrl: function() {
      let preUrl = window.context.uc + '/api/role/v1/role'
      if (this.role.id) {
        preUrl += '/updateRole'
      } else {
        preUrl += '/addRole'
      }
      return preUrl
    }
  },

  mounted() {
    this.$validator = this.$root.$validator
  },
  methods: {
    showprocDefNameDialog(params) {
      flow.getMainByDefKey(params.procDefKey).then(res => {
        if (res.status == 200 && res.data) {
          this.showDefManager = true
          let dataList = {
            command: 'edit',
            row: res.data
          }
          this.$refs.DefManager.handleCommand(dataList)
        }
      })
    },

    handleSelectionChange(selection) {
      this.selectedList = selection
    },
    rowClick(row, column, event) {
      this.$refs.htTable.$refs.htTable.toggleRowSelection(row)
    },
    batchRestore() {
      let elTable = this.$refs.htTable
      if (this.$refs.htTable.$refs && this.$refs.htTable.$refs.htTable) {
        elTable = this.$refs.htTable.$refs.htTable
      }
      if (elTable && elTable.selection && elTable.selection.length == 0) {
        this.$message.warning('请选择至少一项记录')
        return
      }

      let ids = []

      for (let item of elTable.selection) {
        if (item.isDele == 1) {
          ids.push(item['id'])
        }
      }

      if (ids.length == 0) {
        this.$message.warning('所选记录不包含已删除记录，无需恢复')
        return
      }
      this.restore(ids.join(','))
    },
    handleClose() {
      this.dialogVisible = false
    },
    handleCloseMenuPerm() {
      this.dialogVisibleMenuPerm = false
    },
    dialogCancle(dialogVisible) {
      this[dialogVisible] = false
    },
    loadData(param, cb) {
      if (!param.querys) {
        param.querys = this.querys
      } else {
        param.querys = [...param.querys, ...this.querys]
      }
      flow
        .getInstPage(param)
        .then(response => {
          response.rows.forEach(e => {
            e.caozuo = []
            // e.caozuo.push({
            //   title: '查看',
            //   command: 'detail'
            // })
            if (e.isDele != '1' && e.isForbidden == '1') {
              e.caozuo.push({
                title: '取消挂起',
                command: 'isForbidden'
              })
            }
            if (
              e.isDele != '1' &&
              e.isForbidden == '0' &&
              e.status != 'end' &&
              e.status != 'draft' &&
              e.status != 'manualend' &&
              e.status != 'adminmanualend'
            ) {
              e.caozuo.push({
                title: '挂起',
                command: 'isForbidden'
              })
            }
            if (
              e.isDele != '1' &&
              e.status != 'manualend' &&
              e.status != 'adminmanualend' &&
              e.status != 'end' &&
              e.status != 'draft'
            ) {
              e.caozuo.push({
                title: '催办',
                command: 'instanceUrgent'
              })
            }
            if (e.isDele == '1') {
              e.caozuo.push({
                title: '恢复',
                command: 'restore'
              })
            }
            if (
              e.isDele != '1' &&
              e.status != 'end' &&
              e.status != 'draft' &&
              e.status != 'manualend' &&
              e.status != 'adminmanualend'
            ) {
              e.caozuo.push({
                title: '终止流程',
                command: 'end'
              })
            }
            if (
              e.isDele != '1' &&
              (e.status == 'manualend' || e.status == 'adminmanualend')
            ) {
              e.caozuo.push({
                title: '终止恢复',
                command: 'renew'
              })
            }
          })
          response.rows.forEach(e => {
            if (e.caozuo.length < 2) {
              e.gengduo = []
            } else {
              e.gengduo = e.caozuo.splice(2)
            }
          })
          this.data = response.rows
          this.pageResult = {
            page: response.page,
            pageSize: response.pageSize,
            total: response.total
          }
        })
        .finally(() => cb())
    },
    async handleCommand(params) {
      if (params.row.id) {
        const param = {}
        let result = true
        param.querys = [
          {
            property: 'isDele',
            value: 0,
            operation: 'EQUAL',
            group: 'queryStr',
            relation: 'AND'
          },
          {
            property: 'authFilterId',
            value: params.row.id,
            operation: 'IN',
            group: 'queryStr',
            relation: 'AND'
          }
        ]
        await flow.getInstPage(param).then(response => {
          if (response.total == 0) {
            this.$message.error('当前用户权限已改变，请刷新后再进行操作!')
            result = false
          }
        })
        if (!result) {
          return
        }
      }
      switch (params.command) {
        case 'detail': //查看
          this.curInstance = params.row
          this.dialogVisible = true
          break
        case 'restore': //恢复
          this.restore(params.row.id)
          break
        case 'isForbidden': //挂起/取消挂起
          this.forbiddenOrUnForbiddenInst(params.row)
          break
        case 'instanceUrgent': //实例ID催办
          this.instanceUrgent(params.row)
          break
        case 'end': //终止流程
          this.endProcess(params.row)
          break
        case 'renew': //终止流程
          this.renewProcess(params.row)
          break
        default:
          break
      }
    },
    //终止流程
    endProcess(row) {
      let this_ = this
      this.$prompt('', '请输入终止原因', {
        inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,
        showCancelButton: false,
        inputErrorMessage: '终止原因不能为空'
      })
        .then(({value}) => {
          this_.$http
            .get(
              '${bpmRunTime}/runtime/instance/v1/doEndProcessById?id=' +
                row.id +
                '&reason=' +
                value +
                '' +
                '&isForce=' +
                this_.isForce
            )
            .then(function(resp) {
              let data = resp.data
              if (data.state) {
                this_.$message.success('操作成功')
                this_.$refs.htTable.load()
              } else {
                this_.$message.error(data.mesage || '操作失败')
              }
            })
        })
        .catch(() => {})
    },
    //终止恢复流程
    renewProcess(row) {
      let this_ = this
      this.$prompt('', '请输入终止恢复原因', {
        inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,
        showCancelButton: false,
        inputErrorMessage: '终止恢复原因不能为空'
      })
        .then(({value}) => {
          this_.$http
            .get(
              '${bpmRunTime}/runtime/instance/v1/renewProcess?id=' +
                row.id +
                '&reason=' +
                value
            )
            .then(function(resp) {
              let data = resp.data
              if (data.state) {
                this_.$message.success('操作成功')
                this_.$refs.htTable.load()
              } else {
                this_.$message.error(data.mesage || '操作失败')
              }
            })
        })
        .catch(() => {})
    },
    //流程催办
    instanceUrgent(row) {
      this.$refs.instanceUrgent.handleOpen(row.id, row.procDefId, row.subject) //父组件调用子组件方法
    },
    forbiddenOrUnForbiddenInst(row) {
      let this_ = this
      flow.forbiddenOrUnForbiddenInst(row).then(response => {
        if (response.state) {
          this_.$message.success(response.message)
          let data = _.cloneDeep(row.isForbidden)
          row.isForbidden = data == '1' ? '0' : '1'
          this_.$refs.htTable.load()
        }
      })
    },
    restore(id) {
      let this_ = this
      req
        .get(
          window.context.bpmRunTime + '/runtime/instance/v1/restore?id=' + id
        )
        .then(function(response) {
          let data = response.data
          if (data.state) {
            this_.$message.success(data.message)
            this_.$refs.htTable.load(true)
          } else {
            this_.$message.fail(data.message)
          }
        })
    },
    afterDelete() {
      this.$refs.htTable.load()
    }
  }
}
</script>
<style lang="scss" scoped>
div[aria-invalid='true'] >>> .el-input__inner,
div[aria-invalid='true'] >>> .el-input__inner:focus {
  border-color: #f56c6c;
}

div >>> .el-dialog__header {
  display: none;
}
div >>> .el-dialog__header,
div >>> .el-dialog__body {
  height: calc(100% - 10px);
  padding: 10px;
}
.detail-dialog >>>.el-dialog__body {
  height: 100%;
  padding: 0px;
}

div >>> .el-tabs__content > .el-tab-pane {
  height: 100%;
}

::v-deep {
  .cell > .el-table__column-filter-trigger {
    display: none;
  }
}
</style>
