<template>
  <el-container class="list_main_content fullheight">
    <el-aside
      v-if="!$route.meta.single"
      v-show="asideShow"
      class="aside-tree__wrap"
      width="200px"
    >
      <p class="flow_tree_top_title">待办事项分类</p>
      <FlowTree
        ref="FlowTree"
        :isAsideShow="isAsideShow"
        :loadCount="loadCount"
        @currentTree="getCurrent"
        @switch-change="handleSwitch"
      ></FlowTree>
    </el-aside>
    <div
      v-if="!$route.meta.single"
      :class="{'navbar-collapse-right': !asideShow}"
      class="navbar-collapse"
      @click="asideShow = !asideShow"
    >
      <div class="navbar-collapse-bg">
        <i
          :class="{
            'el-icon-arrow-left': asideShow,
            'el-icon-arrow-right': !asideShow
          }"
          class="navbar-collapse-arrow"
        ></i>
      </div>
    </div>
    <!-- <el-aside width="200px" v-if="!$route.meta.single">
      <b class="top-title el-icon-menu">待办事项分类</b>
      <FlowTree ref="FlowTree" @currentTree="getCurrent" :loadCount="loadCount"></FlowTree>
    </el-aside> -->
    <el-container style="border-left: 1px solid #e7eaec">
      <h3 class="flow_table_title">待办事项列表</h3>
      <div class="content_top_wrap">
        <el-form
          ref="form"
          v-form
          class="content_top_wrap_form"
          data-vv-scope="form"
        >
          <el-input
            v-model="form.tableData"
            class="form_input"
            clearable
            placeholder="标题/编号/流程名称/任务名称/扩展字段"
            prefix-icon="el-icon-search"
            size="small"
            @keyup.enter.native="searchEnterFun"
          ></el-input>
          <el-date-picker
            v-model="form.date"
            :default-time="['00:00:00', '23:59:59']"
            class="form_date_picker"
            end-placeholder="结束日期"
            size="small"
            start-placeholder="开始日期"
            type="datetimerange"
          ></el-date-picker>
          <div>
            <eip-org-selector
              v-model="form.orgName"
              :config="{id: 'form.orgId'}"
              :single="true"
              class="form_org_selector"
              placeholder="发起人组织"
              style="display: inline-block"
            />
          </div>
        </el-form>
        <el-row>
          <el-col :span="24">
            <el-button size="small" type="primary" @click="search('find')"
              >查询
            </el-button>
            <el-button size="small" @click="reset">重置</el-button>
            <el-button size="small" @click="taskToCopyTo()">传阅</el-button>
            <el-button size="small" @click="batchHandle">批量处理</el-button>
          </el-col>
        </el-row>
      </div>
      <el-main class="content">
        <!-- default-sort 默认不排序（排序时查询待办很慢，用户可以点击某列进行排序） -->
        <el-table
          v-if="defaultFiledShowConf"
          ref="htTable"
          v-loading="fullscreenLoading"
          :data="rows"
          header-cell-class-name="todo-header-row"
          row-class-name="todo-row"
          size="medium"
          style="width: 100%"
          @row-click="rowClick"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            align="center"
            type="selection"
            width="50"
          ></el-table-column>
          <el-table-column align="center" label="流程图" width="70">
            <template slot-scope="scope">
              <el-button
                icon="icon-flow1"
                size="mini"
                @click="handleShowTaskImage(scope.row)"
              ></el-button>
            </template>
          </el-table-column>
          <el-table-column
            v-if="defaultFiledShowConf.procInstId.frontShow"
            :label="defaultFiledShowConf.procInstId.desc"
            align="center"
            prop="procInstId"
            show-overflow-tooltip
            width="160"
          ></el-table-column>
          <el-table-column
            v-if="defaultFiledShowConf.subject.frontShow"
            :label="defaultFiledShowConf.subject.desc"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <span
                class="todo-subject"
                @click="handleRowClick(scope.row, false)"
                @contextmenu.prevent="handleRowClick(scope.row, true)"
              >
                {{ scope.row.subject }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            v-if="defaultFiledShowConf.procDefName.frontShow"
            :label="defaultFiledShowConf.procDefName.desc"
            align="center"
            show-overflow-tooltip
            width="120"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.procDefName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            v-if="defaultFiledShowConf.name.frontShow"
            :label="defaultFiledShowConf.name.desc"
            align="center"
            show-overflow-tooltip
            width="120"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column
            v-if="defaultFiledShowConf.createTime.frontShow"
            :label="defaultFiledShowConf.createTime.desc"
            align="center"
            prop="createTime"
            width="150"
          ></el-table-column>
          <el-table-column
            v-if="defaultFiledShowConf.creator.frontShow"
            :label="defaultFiledShowConf.creator.desc"
            align="center"
            prop="creator"
            width="90"
          ></el-table-column>
          <el-table-column
            v-if="defaultFiledShowConf.ownerName.frontShow"
            :label="defaultFiledShowConf.ownerName.desc"
            align="center"
            prop="ownerName"
            width="90"
          ></el-table-column>
          <el-table-column
            v-if="defaultFiledShowConf.assigneeName.frontShow"
            :label="defaultFiledShowConf.assigneeName.desc"
            align="center"
            prop="assigneeName"
            width="90"
          ></el-table-column>
          <el-table-column
            v-if="defaultFiledShowConf.status.frontShow"
            :label="defaultFiledShowConf.status.desc"
            align="center"
            width="100"
          >
            <template slot-scope="{row}">
              <span class="blue-color" size="small">{{
                status[row.status] +
                  (row.instIsForbidden === '1' ? '(挂起)' : '')
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            v-if="defaultFiledShowConf.prop1.frontShow"
            :label="defaultFiledShowConf.prop1.desc"
            align="center"
            prop="prop1"
            width="100"
          ></el-table-column>
          <el-table-column
            v-if="defaultFiledShowConf.prop2.frontShow"
            :label="defaultFiledShowConf.prop2.desc"
            align="center"
            prop="prop2"
            width="100"
          ></el-table-column>
          <el-table-column
            v-if="defaultFiledShowConf.prop3.frontShow"
            :label="defaultFiledShowConf.prop3.desc"
            align="center"
            prop="prop3"
            width="100"
          ></el-table-column>
          <el-table-column
            v-if="defaultFiledShowConf.prop4.frontShow"
            :label="defaultFiledShowConf.prop4.desc"
            align="center"
            prop="prop4"
            width="100"
          ></el-table-column>
          <el-table-column
            v-if="defaultFiledShowConf.prop5.frontShow"
            :label="defaultFiledShowConf.prop5.desc"
            align="center"
            prop="prop5"
            width="100"
          ></el-table-column>
          <el-table-column
            v-if="defaultFiledShowConf.prop6.frontShow"
            :label="defaultFiledShowConf.prop6.desc"
            align="center"
            prop="prop6"
            width="100"
          ></el-table-column>
          <el-table-column label="到期时间" width="140">
            <template slot-scope="scope">
              <span :style="computeColor(scope.row.deadline)">{{
                computeTime(scope.row.deadline)
              }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer height="52px">
        <el-row justify="end" type="flex">
          <el-pagination
            :current-page="pagination.page"
            :page-size="pagination.pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </el-row>
      </el-footer>
      <!-- 流程传阅-->
      <TaskToCopyTo ref="taskToCopyTo" :taskId="ids" />
      <TaskImage
        ref="taskImage"
        :bpmnInstId="selectBpmnInstId"
        :defId="selectDefId"
        :instId="selectInstanceId"
      />
    </el-container>
    <el-dialog
      :visible.sync="batchDialogVisible"
      title="批量处理"
      @close="batchHandleSetting = {}"
      @opened="afterOpen"
    >
      <el-form
        ref="batchHandleForm"
        v-model="batchHandleSetting"
        label-width="120px"
      >
        <el-form-item label="审批意见">
          <el-input
            v-model="batchHandleSetting.opinion"
            maxlength="500"
            placeholder="请输入审批内容"
            show-word-limit
            type="textarea"
          ></el-input>
        </el-form-item>
        <el-form-item label="审批动作" validate="required">
          <el-select v-model="batchHandleSetting.action" validate="required">
            <el-option key="agree" label="同意" value="agree"></el-option>
            <el-option key="reject" label="驳回" value="reject"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="
            batchHandleSetting.action === 'reject' ||
              batchHandleSetting.action === 'backToStart'
          "
          label="驳回重提模式"
          validate="required"
        >
          <el-radio v-model="batchHandleSetting.backHandMode" label="normal"
            >重新审批
          </el-radio>
          <el-radio v-model="batchHandleSetting.backHandMode" label="direct"
            >回到本节点
          </el-radio>
        </el-form-item>
        <el-form-item
          v-if="
            batchHandleSetting.action === 'reject' ||
              batchHandleSetting.action === 'backToStart'
          "
          label="驳回方式"
          validate="required"
        >
          <el-radio v-model="batchHandleSetting.rejectType" label="backToStart"
            >驳回到发起人
          </el-radio>
          <el-radio v-model="batchHandleSetting.rejectType" label="reject"
            >驳回上一步
          </el-radio>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          :loading="batchSubmitBtnLoad"
          type="primary"
          @click="batchHandleSubmit"
          >提交</el-button
        >
        <el-button @click="batchDialogVisible = false">取消</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :visible.sync="batchResultDialog"
      title="处理结果"
      @close="afterResultClose"
    >
      <template>
        <div v-if="batchUnBatchableList.length !== 0">
          <span>以下任务不允许批量办理，请进入页面审批</span>
          <div v-for="task in batchUnBatchableList">
            <el-link type="primary" @click="open(task)"
              >{{ task.subject }}
            </el-link>
          </div>
        </div>
      </template>
      <template>
        <div v-if="batchCompleteList.length !== 0">
          <span>以下任务处理完成</span>
          <div v-for="task in batchCompleteList">
            <el-link type="success" @click="doneView(task.procInstId)"
              >{{ task.subject }}
            </el-link>
          </div>
        </div>
      </template>
      <template>
        <div v-if="batchFailedList.length !== 0">
          <span>以下任务处理失败</span>
          <div v-for="task in batchFailedList">
            <el-link type="danger"
              >{{ task.subject }}({{ failedMsgMap[task.id] }})
            </el-link>
          </div>
        </div>
      </template>
      <template>
        <div v-if="batchNotAuthList.length !== 0">
          <span>以下任务您无权处理</span>
          <div v-for="task in batchNotAuthList">
            <el-link disabled>{{ task.subject }}</el-link>
          </div>
        </div>
      </template>
    </el-dialog>
  </el-container>
</template>

<script>
import {mapState, mapActions} from 'vuex'
import process from '@/api/process'
import FlowTree from '@/components/flow/flowTree.vue'
import utils from '@/utils.js'
import {Message} from 'element-ui'
import TaskImage from '@/components/flow/task/taskImage.vue'
import TaskToCopyTo from '@/components/flow/task/taskToCopyTo.vue'
import eipOrgSelector from '@/components/eipControl/selector/EipOrgSelector.vue'
import req from '@/request.js'

const STATUS = {
  NORMAL: '待办',
  TRANSFORMED: '流转',
  TRANSFORMEDINQU: '征询',
  DELIVERTO: '转办',
  FOLLOW: '跟踪',
  COMMU: '沟通',
  BACK: '驳回',
  ADDSIGN: '会签加签',
  AGENT: '委托',
  SHARE: '共享',
  BACKSHARE: '驳回共享',
  APPROVELINEED: '并行审批',
  SIGNSEQUENCEED: '顺序签署',
  SIGNLINEED: '并行签署',
  USERADDSIGN: '用户加签'
}
export default {
  name: 'todo',
  components: {
    FlowTree,
    TaskToCopyTo,
    eipOrgSelector,
    TaskImage
  },
  props: {
    defKey: {
      type: String,
      default: ''
    },
    orgName: {type: String, default: ''},
    orgId: {type: String, default: ''}
  },
  data() {
    return {
      isAsideShow: false,
      batchHandleIds: [],
      asideShow: false,
      form: {tableData: '', date: '', orgName: '', orgId: ''},
      status: STATUS,
      currentTree: '',
      fullscreenLoading: true,
      sorter: [],
      urgentStateConf: {},
      urgentStateConfList: [],
      urgentStateVal: '',
      ids: '', //待办任务id集合
      defaultFiledShowConf: '',
      defaultFiledShowConfList: [
        {name: 'subject', desc: '标题', frontShow: true},
        {name: 'procInstId', desc: '流程编号', frontShow: true},
        {name: 'procDefName', desc: '流程名称', frontShow: true},
        {name: 'name', desc: '任务名称', frontShow: true},
        {name: 'status', desc: '类型', frontShow: true},
        {name: 'createTime', desc: '创建时间', frontShow: true},
        {name: 'creator', desc: '创建人', frontShow: true},
        {name: 'urgentStateValue', desc: '紧急状态', frontShow: true},
        {name: 'dueExpDate', desc: '到期时间', frontShow: false},
        {name: 'ownerName', desc: '所属人', frontShow: false},
        {name: 'assigneeName', desc: '待审批人', frontShow: false},
        {name: 'prop1', desc: '扩展1', frontShow: false},
        {name: 'prop2', desc: '扩展2', frontShow: false},
        {name: 'prop3', desc: '扩展3', frontShow: false},
        {name: 'prop4', desc: '扩展4', frontShow: false},
        {name: 'prop5', desc: '扩展5', frontShow: false},
        {name: 'prop6', desc: '扩展6', frontShow: false}
      ],
      selectInstanceId: '',
      selectBpmnInstId: '',
      selectDefId: '',
      batchDialogVisible: false,
      batchHandleSetting: {},
      batchResultDialog: false,
      batchCompleteList: [],
      batchFailedList: [],
      batchUnBatchableList: [],
      batchNotAuthList: [],
      failedMsgMap: {},
      batchSubmitBtnLoad: false,
      skipMsg: '',
      unBatchMsg: ''
    }
  },
  watch: {
    'form.orgId': {
      handler(newName, oldName) {
        this.search('find')
      },
      immediate: true
    }
  },
  computed: {
    ...mapState('storeProcess', ['rows', 'pagination', 'total']),
    currentSwitchValue() {
      return (
        localStorage.todoAsideShow === 'true' ||
        localStorage.todoAsideShow === true
      )
    }
  },
  created() {
    this.getTaskList()
    this.asideShow = this.currentSwitchValue
    this.isAsideShow = this.currentSwitchValue
  },
  methods: {
    //将当前展开或者收起的值存在localStorage中
    handleSwitch(val) {
      localStorage.todoAsideShow = val
    },
    getTaskList() {
      this.$http
        .get(
          '${portal}/sys/sysProperties/v1/getDecryptByAlias?alias=taskListFiledConf'
        )
        .then(resp => {
          let tempConf = {}
          if (resp.data) {
            tempConf = JSON.parse(resp.data.value)
          } else {
            tempConf = this.defaultFiledShowConfList
          }
          this.formatConfListToObj(tempConf)
        })

      let querys = []
      if (this.defKey) {
        querys.push({
          property: 'bt.proc_def_key_',
          value: this.defKey,
          operation: 'EQUAL',
          relation: 'AND'
        })
      }
      //判断是否有URL传参
      if (this.orgName && this.orgId) {
        this.form.orgName = this.orgName
        this.form.orgId = this.orgId
        querys.push({
          group: 'orgId',
          property: 'inst.CREATE_ORG_PATH_',
          value: this.orgId,
          operation: 'LIKE',
          relation: 'AND'
        })
      }
      let pageBean = {
        pageBean: {page: '1', pageSize: '10', showTotal: 'true'},
        querys: querys
      } //初次加载默认pageBean
      // this.$store
      //   .dispatch("storeProcess/getUrgentStateConf", { getConf: true })
      //   .then(data => {
      this.$store
        .dispatch('storeProcess/getTodoByPagination', pageBean)
        .then(() => {
          //页面加载调用tudo.js里面的分页方法
          this.fullscreenLoading = false
        })
      // if (data.conf) {
      //   try {
      //     data.conf = JSON.parse(data.conf);
      //   } catch (error) {
      //     data.conf = eval("(" + data.conf + ")");
      //   }
      //   this.urgentStateConfList = data.conf;
      //   let conf = {};
      //   for (let index = 0, c; (c = data.conf[index++]); ) {
      //     if (c.default) {
      //       this.urgentStateConf.defaultValue = c.state;
      //     }
      //     conf[c.state] = c;
      //   }
      //   this.urgentStateConf.conf = conf;
      // }
      // });
    },
    rowClick(row, column, event) {
      //操作列不触发多选按钮
      if (column && column.label == '流程图') {
        return
      }
      this.$refs.htTable.toggleRowSelection(row)
    },
    //流程传阅
    taskToCopyTo() {
      if (this.ids == '') {
        Message.warning('请选择要传阅的流程')
        return
      }
      this.$refs.taskToCopyTo.handleClose() //父组件调用子组件方法
    },
    //批量勾选待办流程获取
    handleSelectionChange(val) {
      this.ids = ''
      if (val.length > 0) {
        for (let i = 0; i < val.length; i++) {
          this.ids = this.ids + val[i].id + ','
        }
        this.ids = this.ids.substring(0, this.ids.length - 1)
      }
    },
    //Loading 加载中
    openFullScreen() {
      this.fullscreenLoading = true
    },
    handleSizeChange: function(size) {
      //每页下拉显示数据
      this.$store.dispatch('storeProcess/setPaginationSize', size)
      this.search()
    },
    handleCurrentChange: function(currentPage) {
      //点击第几页
      this.$store.dispatch('storeProcess/setPaginationPageNum', currentPage)
      this.search()
    },
    //回车查询
    searchEnterFun: function(e) {
      var keyCode = window.event ? e.keyCode : e.which
      if (keyCode == 13) {
        this.search('find')
      }
    },
    // 处理排序
    handleSortChange: function(m) {
      this.sorter.splice(
        this.sorter.findIndex(s => s.property == m.prop),
        1
      )
      if (m.order) {
        this.sorter.push({
          property: m.prop,
          direction: m.order == 'ascending' ? 'ASC' : 'DESC'
        })
      }
      this.search()
    },
    // 查询
    search(str) {
      if (str == 'find') {
        this.$store.dispatch('storeProcess/setPaginationPageNum', 1)
      }
      let querys = [] //查询条件
      let queryFilter = {}
      let pageBean = {pageBean: this.pagination}
      let beginDate = '' //开始时间
      let endDate = '' //结束时间
      let group = 'main' //判断条件
      if (this.form.tableData) {
        querys = [
          {
            property: 'bt.subject_',
            value: this.form.tableData,
            group: 'main',
            operation: 'LIKE',
            relation: 'OR'
          },
          {
            property: 'bt.proc_inst_id_',
            value: this.form.tableData,
            group: 'main',
            operation: 'LIKE',
            relation: 'OR'
          },
          {
            property: 'bt.proc_def_name_',
            value: this.form.tableData,
            group: 'main',
            operation: 'LIKE',
            relation: 'OR'
          },
          {
            property: 'bt.name_',
            value: this.form.tableData,
            group: 'main',
            operation: 'LIKE',
            relation: 'OR'
          }
        ]
        let temp = querys[0]
        for (let index = 1; index < 7; index++) {
          let query = JSON.parse(JSON.stringify(temp))
          query.property = 'prop' + index
          querys.push(query)
        }
      }
      if (this.form.orgId) {
        querys.push({
          property: 'inst.CREATE_ORG_PATH_',
          value: this.form.orgId,
          group: 'orgId',
          operation: 'LIKE',
          relation: 'AND'
        })
      }
      if (this.currentTree) {
        querys.push({
          property: 'bt.type_id_',
          value: this.currentTree,
          group: 'typeId',
          operation: 'IN',
          relation: 'AND'
        })
      }
      if (this.defKey) {
        querys.push({
          property: 'bt.proc_def_key_',
          value: this.defKey,
          operation: 'EQUAL',
          relation: 'AND'
        })
      }
      if (this.form.date) {
        beginDate = utils.formatDate(this.form.date[0].getTime())
        endDate = utils.formatDate(this.form.date[1].getTime())
        querys.push({
          property: 'bt.create_time_',
          value: [beginDate, endDate],
          group: 'time',
          operation: 'BETWEEN',
          relation: 'AND'
        })
      }
      queryFilter = {pageBean: this.pagination, querys, sorter: this.sorter}
      this.openFullScreen()
      this.$store
        .dispatch('storeProcess/getTodoByPagination', queryFilter)
        .then(() => {
          this.fullscreenLoading = false
        })
    },
    //重置
    reset() {
      this.form = {tableData: '', date: '', orgName: '', orgId: ''}
      this.search('find')
    },
    handleRowClick(row, newWin) {
      if (row.status == 'SHARE' || row.status == 'BACKSHARE') {
        if (row.identityList && row.identityList.length == 1) {
          let url = '/task/' + row.id + '/' + row.identityList[0].id
          this.handleOpenUrl(url, newWin)
        } else {
          let html =
            '<select ref=' +
            Math.random() +
            ' id="approvalLeaderSelect" style="width: 200px;height: 30px;border-radius: 4px;margin: 20px 70px;" ><option value="">请选择</option>'
          row.identityList.forEach(identity => {
            html +=
              '<option value="' +
              identity.id +
              '">' +
              identity.name +
              '</option>'
          })
          html += '</select>'
          let this_ = this
          this.$alert(html, '请选择一个领导代为审批', {
            dangerouslyUseHTMLString: true,
            beforeClose: function(action, instance, done) {
              if (action == 'confirm') {
                let se = document.getElementById('approvalLeaderSelect')
                if (se.selectedIndex == 0) {
                  this.$message.warning('请选择代为审批的领导')
                } else {
                  instance.close()
                  this_.handleOpenUrl(
                    '/task/' + row.id + '/' + se[se.selectedIndex].value,
                    newWin
                  )
                }
              } else {
                instance.close()
              }
            }
          })
        }
      } else if (
        row.status == 'AGENT' &&
        row.ownerId != row.assigneeId &&
        row.ownerId == this.$store.state.login.currentUser.userId
      ) {
        //委托任务
        this.handleOpenUrl('/instRead/' + row.procInstId + '/agent', newWin)
      } else if (row.status == 'FOLLOW') {
        //跟踪任务
        this.handleOpenUrl('/taskRead/' + row.id + '/FOLLOW', newWin)
      } else {
        let url = '/task/' + row.id + '/0'
        if (this.defKey) {
          url = '/sysModuleInst/' + row.id + '/0' + '/' + this.defKey + '/true'
        }
        this.handleOpenUrl(url, newWin)
      }
    },
    handleOpenUrl(url, newWin) {
      if (!newWin) {
        this.$router.push(url)
        return
      }
      if (!url) {
        return
      }
      let token = this.$store.state.login.currentUser.token
      if (!url.toLowerCase().startsWith('http')) {
        url = window.context.front + url
      }
      if (url.indexOf('?') == -1) {
        url = url + '?token=' + token
      } else {
        url = url + '&token=' + token
      }
      window.open(url, '_blank')
    },
    //子组件传值父组件(待办分类查询)
    getCurrent(data) {
      if (data.id == 6) {
        this.currentTree = ''
        this.openFullScreen()
        let pageBean = {pageBean: this.pagination}
        this.$store
          .dispatch('storeProcess/getTodoByPagination', pageBean)
          .then(() => {
            this.fullscreenLoading = false
          })
      } else {
        let ids = []
        this.getFlowTrees(data, ids)
        this.currentTree = ids.join(',')
        this.search('find')
      }
    },
    getFlowTrees(data, ids) {
      ids.push(data.id)
      let arr = data.children
      for (var i = 0; i < arr.length; i++) {
        this.getFlowTrees(arr[i], ids)
      }
    },
    formatConfListToObj(tempList) {
      let editConfObj = {}
      tempList.forEach(c => {
        let key = c.name
        editConfObj[key] = c
      })
      this.$set(this, 'defaultFiledShowConf', editConfObj)
    },
    loadCount() {
      return process.getCountByUserId(this.pagination)
    },
    computeTime(deadline) {
      if (deadline) {
        let time = new Date(deadline).getTime()
        let nowTime = new Date().getTime()
        let duration = time - nowTime
        if (duration > 0) return deadline
        else {
          let hour = Math.floor(Math.abs(duration / 3600000))
          let minute = Math.ceil(Math.abs((duration % 3600000) / 60000))
          return '已到期' + hour + '时' + minute + '分'
        }
      }
      return ''
    },
    computeColor(deadline) {
      if (deadline) {
        let time = new Date(deadline).getTime()
        let nowTime = new Date().getTime()
        let day = (time - nowTime) / 86400000
        if (day > 0)
          //绿色
          return {color: '#22870D'}
        else {
          if (Math.ceil(Math.abs(day)) >= 3)
            //红色
            return {color: '#F1300A'}
          //黄色
          else return {color: '#E1A306'}
        }
      }
      return {}
    },
    async handleShowTaskImage(row) {
      await this.changeSeletion(row)
      this.$refs.taskImage.handleOpen()
    },
    changeSeletion(row) {
      this.selectInstanceId = row.procInstId
      this.selectBpmnInstId = row.bpmnInstId
    },
    batchHandle() {
      let selectTasks = this.$refs.htTable.selection
      if (!selectTasks || selectTasks.length == 0) {
        this.$message({type: 'warning', message: '请至少选择一条任务'})
        return
      }
      //忽略掉非待办类型的任务
      let ids = []
      this.skipMsg = ''
      for (let i = selectTasks.length - 1; i >= 0; i--) {
        if (selectTasks[i].status == 'NORMAL') {
          ids.push(selectTasks[i].id)
        } else {
          this.skipMsg += selectTasks[i].subject + '</br>'
          selectTasks.splice(i, 1)
        }
      }
      if (ids.length > 0) {
        req
          .get(
            '${bpmRunTime}/runtime/task/v1/filterUnBatchable?taskIds=' +
              ids.join(',')
          )
          .then(resp => {
            if (resp.data.state && resp.data.value) {
              if (resp.data.value.length != ids.length) {
                ids = resp.data.value
                let unBatchMsg = '以下任务未配置批量处理<br/>'
                for (let i = selectTasks.length - 1; i >= 0; i--) {
                  if (!resp.data.value.includes(selectTasks[i].id)) {
                    unBatchMsg += selectTasks[i].subject + '<br/>'
                    selectTasks.splice(i, 1)
                  }
                }
                //this.$message({type:"warning",dangerouslyUseHTMLString:true,message:unBatchMsg});
                this.unBatchMsg = unBatchMsg
              }
              if (ids && ids.length > 0) {
                this.batchHandleIds = ids
                this.batchDialogVisible = true
              } else {
                this.showMsg()
              }
            }
          })
      } else {
        if (this.skipMsg) {
          this.showMsg()
        }
      }
      this.batchHandleCheck()
    },
    batchHandleCheck() {},
    batchHandleSubmit() {
      let errMsg = ''
      this.batchSubmitBtnLoad = true
      if (!this.batchHandleSetting.opinion || !this.batchHandleSetting.action) {
        errMsg = '完善表单信息'
      }
      if (
        this.batchHandleSetting.action == 'reject' &&
        (!this.batchHandleSetting.backHandMode ||
          !this.batchHandleSetting.rejectType)
      ) {
        errMsg = '请完善驳回设置'
      }
      if (errMsg) {
        this.$message({type: 'warning', message: errMsg})
        this.batchSubmitBtnLoad = false
        return
      }
      let action
      if (this.batchHandleSetting.action == 'agree') {
        action = 'agree'
      } else {
        action =
          this.batchHandleSetting.rejectType || this.batchHandleSetting.action
      }
      this.$http
        .post(window.context.bpmRunTime + '/runtime/task/v1/batchHandle', {
          taskIds: this.batchHandleIds.join(','),
          action: action,
          opinion: this.batchHandleSetting.opinion
        })
        .then(resp => {
          if (resp.data && resp.data.state) {
            this.batchDialogVisible = false
            this.batchSubmitBtnLoad = false
            this.showBatchResult(resp.data.value)
          }
        })
    },
    showBatchResult(taskMaps) {
      this.batchCompleteList = taskMaps['complete']
      this.batchFailedList = taskMaps['failedList']
      this.batchUnBatchableList = taskMaps['unHandleList']
      this.batchNotAuthList = taskMaps['notAuth']
      this.failedMsgMap = taskMaps['failedMsg']
      this.batchResultDialog = true
    },
    afterBatchClose() {
      this.batchDialogVisible = false
      this.batchHandleSetting = {}
    },
    afterResultClose() {
      this.batchCompleteList = []
      this.batchFailedList = []
      this.batchUnBatchableList = []
      this.batchNotAuthList = []
      this.failedMsgMap = []
      this.batchResultDialog = false
      this.search('find')
    },
    open(row) {
      let token = this.$store.state.login.currentUser.token
      if (row.status == 'SHARE' || row.status == 'BACKSHARE') {
        if (row.identityList && row.identityList.length == 1) {
          let url =
            '/task/' + row.id + '/' + row.identityList[0].id + '?token=' + token
          //this.$router.push(url);
          window.open(window.context.front + url, '_blank')
        } else {
          let html =
            '<select ref=' +
            Math.random() +
            ' id="approvalLeaderSelect" style="width: 200px;height: 30px;border-radius: 4px;margin: 20px 70px;" ><option value="">请选择</option>'
          row.identityList.forEach(identity => {
            html +=
              '<option value="' +
              identity.id +
              '">' +
              identity.name +
              '</option>'
          })
          html += '</select>'
          let this_ = this
          this.$alert(html, '请选择一个领导代为审批', {
            dangerouslyUseHTMLString: true,
            beforeClose: function(action, instance, done) {
              if (action == 'confirm') {
                let se = document.getElementById('approvalLeaderSelect')
                if (se.selectedIndex == 0) {
                  this.$message.warning('请选择代为审批的领导')
                } else {
                  instance.close()
                  /*this_.$router.push(
                          "/task/" + row.id + "/" + se[se.selectedIndex].value
                  );*/
                  let url =
                    window.context.front +
                    '/task/' +
                    row.id +
                    '/' +
                    se[se.selectedIndex].value +
                    '?token=' +
                    token
                  window.open(url, '_blank')
                }
              } else {
                instance.close()
              }
            }
          })
        }
      } else if (
        row.status == 'AGENT' &&
        row.ownerId != row.assigneeId &&
        row.ownerId == this.$store.state.login.currentUser.userId
      ) {
        //委托任务
        //this.$router.push("/instRead/" + row.procInstId + "/agent");
        window.open(
          window.context.front +
            '/instRead/' +
            row.procInstId +
            '/agent' +
            '?token=' +
            token,
          '_blank'
        )
      } else if (row.status == 'FOLLOW') {
        //跟踪任务
        //this.$router.push("/taskRead/" + row.id + "/FOLLOW");
        window.open(
          window.context.front +
            '/taskRead/' +
            row.id +
            '/FOLLOW' +
            '?token=' +
            token,
          '_blank'
        )
      } else {
        let url = '/task/' + row.id + '/0'
        if (this.defKey) {
          url += '/noSingle' + '?token=' + token
        }
        //this.$router.push(url);
        window.open(window.context.front + url, '_blank')
      }
    },
    doneView(procId) {
      let token = this.$store.state.login.currentUser.token
      let url =
        window.context.front + '/inst/' + procId + '/doneList?token=' + token
      window.open(url, '_blank')
    },
    afterOpen() {
      this.showMsg()
    },
    showMsg() {
      let message = ''
      if (this.skipMsg) {
        message =
          '以下任务不是待办任务，不支持批量处理:</br>' + this.skipMsg + '<br/>'
      }
      if (this.unBatchMsg) {
        message += this.unBatchMsg
      }

      if (message) {
        this.$message({
          dangerouslyUseHTMLString: true,
          message,
          type: 'warning'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';

.el-table ::v-deep th.todo-header-row {
  background-color: #fafafa;
  font-size: 13px;
}

.el-table ::v-deep tr.todo-row {
  font-size: 13px;
  color: $--color-text-regular;
}

.el-container {
  background-color: #fff;
}

.el-row {
  margin-bottom: 20px;
}

.el-header {
  border-bottom: 1.5px solid #ededed;
}

.todo-subject {
  cursor: pointer;
}

.todo-subject {
  color: $--theme-color;
}

.top-title {
  line-height: 58px;
  margin-left: 20px;
  font-size: 16px;
  color: #a2a2a2;
}

::v-deep .el-tree {
  position: relative;
  cursor: default;
  background: #fff;
  color: $--color-text-primary;
  font-size: 13px;
}

.content {
  padding-top: 0;
}

.content_top_wrap {
  display: flex;
  flex-direction: row;
  margin: 10px 0 0 20px;
  flex-wrap: wrap;
  // height: 32px;
  &_form {
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;

    ::v-deep .el-input__prefix,
    ::v-deep .el-input__suffix {
      height: 32px;
    }

    .form_input {
      margin-right: 10px;
    }

    .form_date_picker,
    .form_org_selector {
      margin-right: 10px;
      min-width: 300px;
    }
  }
}

.el-table ::v-deep .icon-flow1 {
  color: #2761ff;
}
</style>
