<template>
  <div class="common-page-content">
    <div class="common-search-container" ref="contentPanel">
      <el-form
        ref="form"
        v-form
        data-vv-scope="form"
        label-width="auto"
        label-position="right "
        :inline="true"
      >
        <el-form-item label="标题/项目名称">
          <el-input
            size="small"
            clearable
            placeholder="标题/任务名称"
            prefix-icon="el-icon-search"
            v-model="form.tableData"
            @keyup.enter.native="searchEnterFun"
          ></el-input>
        </el-form-item>

        <el-form-item label="创建时间">
          <el-date-picker
            size="small"
            v-model="form.date"
            type="datetimerange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <div class="container-btn">
        <el-button
          size="small"
          type="danger"
          icon="el-icon-search"
          @click="search('find')"
          >搜索</el-button
        >
        <el-button size="small" icon="el-icon-refresh" @click="reset"
          >重置</el-button
        >
      </div>
    </div>
    <el-row
      class="common-table-container flex searchPanel"
      :style="SearchPanel"
    >
      <el-col :span="24" class="common-table-wrapper">
        <div class="common-table-content btn-pagenation" ref="contentPanel">
          <!-- default-sort 默认不排序（排序时查询待办很慢，用户可以点击某列进行排序） -->
          <el-table
            border
            stripe
            fit
            size="mini"
            v-loading="fullscreenLoading"
            :data="rows"
            ref="multipleSelection"
            style="width: 100%;height :100%"
            :cell-style="{'text-align': 'center'}"
            :header-cell-style="{'text-align': 'center'}"
            @row-click="rowClick"
            @selection-change="handleSelectionChange"
            v-if="defaultFiledShowConf"
          >
            <el-table-column
              :label="defaultFiledShowConf.subject.desc"
              v-if="defaultFiledShowConf.subject.frontShow"
              min-width="150"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span>
                  {{ scope.row.subject }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              :label="defaultFiledShowConf.orgName.desc"
              v-if="defaultFiledShowConf.orgName.frontShow"
              min-width="150"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span>
                  {{ scope.row.orgName }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              :label="defaultFiledShowConf.projectName.desc"
              v-if="defaultFiledShowConf.projectName.frontShow"
              align="center"
              width="180"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span>{{ scope.row.bizNoticeName }}</span>
              </template>
            </el-table-column>
            <el-table-column
              :label="defaultFiledShowConf.procDefName.desc"
              v-if="defaultFiledShowConf.procDefName.frontShow"
              show-overflow-tooltip
              align="center"
              width="150"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.procDefName }}</span>
              </template>
            </el-table-column>
            <el-table-column
              :label="defaultFiledShowConf.name.desc"
              v-if="defaultFiledShowConf.name.frontShow"
              show-overflow-tooltip
              align="center"
              width="150"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="提现金额(元)"
              show-overflow-tooltip
              v-if="show"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.amount }}</span>
              </template>
            </el-table-column>
            <el-table-column label="处理待办" width="100">
              <template slot-scope="scope">
                <el-button @click="handleRowClick(scope.row)"
                  >处理待办</el-button
                >
              </template>
            </el-table-column>
            <el-table-column
              prop="createTime"
              :label="defaultFiledShowConf.createTime.desc"
              v-if="defaultFiledShowConf.createTime.frontShow"
              align="center"
              width="150"
            ></el-table-column>
            <el-table-column
              prop="creator"
              :label="defaultFiledShowConf.creator.desc"
              v-if="defaultFiledShowConf.creator.frontShow"
              align="center"
              width="120"
            ></el-table-column>
            <el-table-column
              prop="ownerName"
              :label="defaultFiledShowConf.ownerName.desc"
              v-if="defaultFiledShowConf.ownerName.frontShow"
              align="center"
              width="90"
            ></el-table-column>
            <el-table-column
              prop="assigneeName"
              :label="defaultFiledShowConf.assigneeName.desc"
              v-if="defaultFiledShowConf.assigneeName.frontShow"
              align="center"
              width="90"
            ></el-table-column>
            <el-table-column
              prop="prop1"
              :label="defaultFiledShowConf.prop1.desc"
              v-if="defaultFiledShowConf.prop1.frontShow"
              align="center"
              width="100"
            ></el-table-column>
            <el-table-column
              prop="prop2"
              :label="defaultFiledShowConf.prop2.desc"
              v-if="defaultFiledShowConf.prop2.frontShow"
              align="center"
              width="100"
            ></el-table-column>
            <el-table-column
              prop="prop3"
              :label="defaultFiledShowConf.prop3.desc"
              v-if="defaultFiledShowConf.prop3.frontShow"
              align="center"
              width="100"
            ></el-table-column>
            <el-table-column
              prop="prop4"
              :label="defaultFiledShowConf.prop4.desc"
              v-if="defaultFiledShowConf.prop4.frontShow"
              align="center"
              width="100"
            ></el-table-column>
            <el-table-column
              prop="prop5"
              :label="defaultFiledShowConf.prop5.desc"
              v-if="defaultFiledShowConf.prop5.frontShow"
              align="center"
              width="100"
            ></el-table-column>
            <el-table-column
              prop="prop6"
              :label="defaultFiledShowConf.prop6.desc"
              v-if="defaultFiledShowConf.prop6.frontShow"
              align="center"
              width="100"
            ></el-table-column>
            <el-table-column label="流程图" width="70" align="center">
              <template slot-scope="scope">
                <el-button
                  @click="handleShowTaskImage(scope.row)"
                  icon="el-icon-connection"
                  size="mini"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="common-pagenation">
          <el-pagination
            ref="paginationPanel"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.page"
            :page-sizes="[10, 20, 30, 40, 50]"
            :page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </el-col>
    </el-row>
    <TaskImage
      ref="taskImage"
      :bpmnInstId="selectBpmnInstId"
      :instId="selectInstanceId"
      :defId="selectDefId"
    />
  </div>
</template>

<script>
import {mapState, mapActions} from 'vuex'
import process from '@/api/process'
import utils from '@/utils.js'
import {Message} from 'element-ui'
import TaskImage from '@/components/flow/task/taskImage.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: {
    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: '',
      show: false,
      fullscreenLoading: true,
      sorter: [],
      urgentStateConf: {},
      urgentStateConfList: [],
      urgentStateVal: '',
      ids: '', //待办任务id集合
      defaultFiledShowConf: '',
      defaultFiledShowConfList: [
        {name: 'subject', desc: '标题', frontShow: true},
        {name: 'procInstId', desc: '流程编号', frontShow: true},
        {name: 'orgName', desc: '发起企业', frontShow: true},
        {name: 'projectName', 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: '',
      tableMaxHeight: 600
    }
  },
  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
      )
    },
    SearchPanel() {
      return {
        '--searchPanel': this.searchPanel + 'px'
      }
    }
  },
  created() {
    this.getTaskList()
    this.asideShow = this.currentSwitchValue
    this.isAsideShow = this.currentSwitchValue
  },
  mounted() {
    this.calcTableHeight()
    this.$root.$on('resize', () => {
      this.calcTableHeight(500)
    })
  },
  methods: {
    calcTableHeight(delay) {
      // 动态计算表格的高度，自适应当前容器
      setTimeout(() => {
        if (!this.$refs.contentPanel) {
          return
        }
        const contentPanelHeight =
          this.$refs.contentPanel && this.$refs.contentPanel.clientHeight
        const btnPanelHeight =
          (this.$refs.btnPanel && this.$refs.btnPanel.clientHeight) || 0
        const paginationPanelHeight =
          this.$refs.paginationPanel && this.$refs.paginationPanel ? 32 : 0
        // (this.$refs.paginationPanel &&
        //     this.$refs.paginationPanel.clientHeight) ||
        // 0;
        this.tableMaxHeight =
          contentPanelHeight - btnPanelHeight - paginationPanelHeight - 42
      }, delay || 0)
    },
    //将当前展开或者收起的值存在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/getTodoByPagination', pageBean)
        .then(() => {
          //页面加载调用tudo.js里面的分页方法
          this.fullscreenLoading = false
        })
    },
    rowClick(row, column, event) {
      //操作列不触发多选按钮
      if (column && column.label == '流程图') {
        return
      }
      this.$refs.multipleSelection.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: 'bizNoticeName',
            value: this.form.tableData,
            group: 'main',
            operation: 'LIKE',
            relation: 'OR'
          },
        ]
      }
      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.rows.forEach(item => {
            if (item.procDefKey == 'yetx') {
              this.show = true
            } else {
              this.show = false
            }
          })
          this.fullscreenLoading = false
        })
    },
    //重置
    reset() {
      this.form = {tableData: '', date: '', orgName: '', orgId: ''}
      this.search('find')
    },
    handleRowClick(row, newWin) {
      console.log(row, 'row')
      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.multipleSelection.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>
.common-table-container {
  height: calc(100% - 10px);
}
.common-table-content.btn-pagenation {
  height: calc(100% - 60px);
}
.cloumn-btn {
  border: 1px solid #2761ff;
  padding: 3px 10px;
  border-radius: 5px;
  &:nth-child(1) {
    margin-right: 5px;
  }
  &:nth-child(2) {
    margin-right: 5px;
  }
  &:nth-child(1):hover {
    background-color: #2761ff;
    color: #fff;
  }
  &:nth-child(2):hover {
    background-color: #2761ff;
    color: #fff;
  }
  /deep/ i,
  span {
    font-size: 16px;
  }
}

/deep/ .el-tree-node__content {
  padding: 5px 0;
}
/deep/.el-table--group::after,
.el-table--border::after,
.el-table::before {
  background-color: rgba($color: #000000, $alpha: 0);
}
/deep/ .el-table thead tr th {
  background-color: #eee !important;
  border-right: 1px solid #dfe2e8 !important;
}
/deep/ .el-table {
  border-collapse: collapse !important;
}
</style>
