<template>
  <baseTabPane label="流程信息" :showFold="showWfFold" :defaultShowContent="showWfContent">
    <template #default>
      <div class="title-name">
        <b>
          <em>流程主题：</em>
          {{ (wfInfo.createDate ? wfInfo.createDate.substring(0, 10) : '') + wfInfo.name }}
        </b>
        <span v-html="wfInfo.statusStr" class="status"></span>
      </div>

      <div class="title-second" @click="showOpeaImg = !showOpeaImg"
           style="margin: 14px 0 24px;line-height: 29px;cursor: pointer;"><b>流程操作</b>
        <div class="fr" v-if="showOpeaImg == true" style="font-weight: 400;">
          <span>收起</span>
          <i class="el-icon-arrow-up"></i>
        </div>
        <div class="fr" v-else style="font-weight: 400;">
          <span>展开</span>
          <i class="el-icon-arrow-down"></i>
        </div>
      </div>
      <div v-show="showOpeaImg == true">
        <div class="flow-btn-opeaBtn" ref="opeaBtn">
          <el-button type="primary" class="btn" :class="{on:operateType == 'submit'}" @click="openAgreeDialog('submit')"
                     v-show="wfInfo.toSubmit">通过
          </el-button>
          <el-button type="primary" class="btn" :class="{on:operateType == 'interrupt'}"
                     @click="openManualDialog(null)" v-show="wfInfo.toInterrupt">中断
          </el-button>
          <el-button type="primary" class="btn" :class="{on:operateType == 'reject'}"
                     @click="rejectWfTask('reject')" v-show="wfInfo.toReject">驳回
          </el-button>
          <el-button type="primary" class="btn" :class="{on:operateType == 'transfer'}"
                     @click="openChangeWfForm('transfer')" v-show="wfInfo.toSubmit">转办
          </el-button>
          <el-button type="primary" class="btn" :class="{on:operateType == 'urging'}"
                     @click="openUrgingDialog(null)" v-show="wfInfo.toInterrupt">催办
          </el-button>
          <el-button type="primary" class="btn" :class="{on:operateType == 'addIncreaseSign'}"
                     @click="openAddIncreaseSign('addIncreaseSign')" v-show="wfInfo.toAddIncreaseSign">加签
          </el-button>
          <el-button type="primary" class="btn" :class="{on:operateType == 'deleteIncreaseSign'}"
                     @click="openDeleteTaskUserDialog(null)" v-show="wfInfo.toDeleteIncreaseSign">
            减签
          </el-button>
          <el-button type="primary" class="btn" :class="{on:operateType == 'setCandidate'}"
                     @click="openSetCandidateDialog(null)" v-show="wfInfo.toSetCandidate">候选人
          </el-button>
          <el-button type="primary" class="btn" :class="{on:operateType == 'revoke'}"
                     @click="openRevokeDialog('revoke')" v-show="wfInfo.toRevoke">撤回
          </el-button>
          <el-button type="primary" class="btn" :class="{on:operateType == 'talk'}"
                     @click="openTalkDialog(null,null,'talk')" v-if="toTalk && wfInfo.stat!=2">沟通
          </el-button>
        </div>
        <template v-if="operateType == 'submit'">
          <div class="flow-btn-opeaBox">
            <el-form :model="agreeForm">
              <table class="table-detail">
                <tbody>
                <tr v-if="agreeNodes.length>0">
                  <th>
                    <span class="t">
                      通过节点
                    </span>
                  </th>
                  <td>
                    <el-form-item label="" field="nodeId">
                      <el-select v-model="agreeForm.nodeId" placeholder="请选择通过节点">
                        <el-option v-for="(node,index) in agreeNodes" :key="index" :label="node.nodeName"
                                   :value="node.nodeId"></el-option>
                      </el-select>
                    </el-form-item>
                  </td>
                </tr>
                <tr>
                  <th>
                    <span class="t">
                      通过意见
                    </span>
                  </th>
                  <td colspan="3">
                    <el-form-item label="" field="opinion">
                      <el-input type="textarea" :rows="8" placeholder="请填写您的意见~
         注：
         通过默认意见为“同意”
          " v-model="agreeForm.opinion"></el-input>
                    </el-form-item>
                  </td>
                </tr>
                <tr>
                  <th class="no"></th>
                  <td colspan="3">
                    <el-button type="primary" @click="subAgreeForm" class="button-sty">
                      <i class="el-icon-check el-icon"></i>
                      {{ $t2('确 定', 'system.button.confirm2') }}
                    </el-button>
                  </td>
                </tr>
                </tbody>
              </table>
            </el-form>
          </div>
        </template>
        <template v-else-if="operateType == 'interrupt'">
        </template>
        <template v-else-if="operateType == 'reject'">
          <div class="flow-btn-opeaBox">
            <el-form :model="rejectForm">
              <table class="table-detail">
                <tbody>
                <tr>
                  <th>
                    <span class="t">
                      驳回节点
                    </span>
                  </th>
                  <td colspan="5">
                    <el-form-item label="" field="nodeId">
                      <el-select v-model="rejectForm.nodeId" placeholder="请选择驳回节点">
                        <el-option v-for="(rejectNode,index) in rejectNodes" :key="index" :label="rejectNode.nodeName"
                                   :value="rejectNode.nodeId"></el-option>
                      </el-select>
                      <el-radio-group v-if="wfInfo.toRejectNode == false" v-model="rejectForm.rejectSubmitModel"
                                      style="margin-left: 10px;">
                        <el-radio :label="1">驳回的节点提交顺延下一步</el-radio>
                        <el-radio :label="2">驳回的节点提交回本节点</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </td>
                </tr>
                <tr>
                  <th>
                    <span class="t">
                      驳回意见
                    </span>
                  </th>
                  <td colspan="5">
                    <el-form-item label="" field="opinion">
                      <el-input type="textarea" :rows="8" placeholder="请输入内容" v-model="rejectForm.opinion"></el-input>
                    </el-form-item>
                  </td>
                </tr>
                <tr>
                  <th class="no"></th>
                  <td colspan="5">
                    <el-button type="primary" @click="subRejectForm" class="button-sty">
                      <i class="el-icon-check el-icon"></i>
                      {{ $t2('确 定', 'system.button.confirm2') }}
                    </el-button>
                  </td>
                </tr>
                </tbody>
              </table>
            </el-form>
          </div>
        </template>
        <template v-else-if="operateType == 'transfer'">
          <div class="flow-btn-opeaBox">
            <el-form :model="changeWfForm">
              <table class="table-detail">
                <tbody>
                <tr>
                  <th>
                    <span class="t">
                      转办人
                    </span>
                  </th>
                  <td>
                    <el-form-item label="" field="nodeId">
                      <el-input
                        class="search-input"
                        max="200"
                        v-model="changeWfForm.userNickNames"
                        @clear="
                          changeWfForm.userIds = '';
                          changeUserRows = [];
                          $forceUpdate();
                        "
                        v-el-readonly
                        clearable
                      >
                        <i slot="suffix" class="el-input__icon el-icon-search" @click="showUserDialog = true"></i>
                      </el-input>
                    </el-form-item>
                  </td>
                </tr>
                <tr>
                  <th>
                    <span class="t">
                      转办意见
                    </span>
                  </th>
                  <td colspan="3">
                    <el-form-item label="" field="opinion">
                      <el-input type="textarea" :rows="8" placeholder="请输入内容" v-model="changeWfForm.opinion"></el-input>
                    </el-form-item>
                  </td>
                </tr>
                <tr>
                  <th class="no"></th>
                  <td colspan="3">
                    <el-button type="primary" @click="subChangeWfForm" class="button-sty">
                      <i class="el-icon-check el-icon"></i>
                      {{ $t2('确 定', 'system.button.confirm2') }}
                    </el-button>
                  </td>
                </tr>
                </tbody>
              </table>
            </el-form>
          </div>
        </template>
        <template v-else-if="operateType == 'urging'">

        </template>
        <template v-else-if="operateType == 'addIncreaseSign'">
          <div class="flow-btn-opeaBox">
            <el-form :model="addIncreaseSignForm">
              <table class="table-detail">
                <tbody>
                <tr>
                  <th>
                      <span class="t">
                        候选人
                      </span>
                  </th>
                  <td>
                    <el-form-item field="receiverName">
                      <el-input
                        class="search-input"
                        max="200"
                        v-model="addIncreaseSignForm.userNickNames"
                        @clear="
                            addIncreaseSignUsers = [];
                            $forceUpdate();
                          "
                        placeholder="候选人"
                        v-el-readonly
                        clearable
                      >
                        <i slot="suffix" class="el-input__icon el-icon-search"
                           @click="showAddTaskUserDialog = true"></i>
                      </el-input>
                    </el-form-item>
                  </td>
                </tr>
                <tr>
                  <th>
                    <span class="t">
                      加签意见
                    </span>
                  </th>
                  <td colspan="3">
                    <el-form-item field="opinion">
                      <el-input type="textarea" :rows="8" placeholder="请输入内容"
                                v-model="addIncreaseSignForm.opinion"></el-input>
                    </el-form-item>
                  </td>
                </tr>
                <tr>
                  <th class="no"></th>
                  <td colspan="3">
                    <el-button type="primary" @click="submitAddTaskUserForm" class="button-sty">
                      <i class="el-icon-check el-icon"></i>
                      {{ $t2('确 定', 'system.button.confirm2') }}
                    </el-button>
                  </td>
                </tr>
                </tbody>
              </table>
            </el-form>
          </div>
        </template>
        <template v-else-if="operateType == 'deleteIncreaseSign'">

        </template>
        <template v-else-if="operateType == 'revoke'">
          <div class="flow-btn-opeaBox">
            <el-form :model="revokeForm">
              <table class="table-detail">
                <tbody>
                <tr>
                  <th>
                    <span class="t">
                      撤回意见
                    </span>
                  </th>
                  <td colspan="5">
                    <el-form-item label="" field="opinion">
                      <el-input type="textarea" :rows="8" placeholder="请输入内容" v-model="revokeForm.opinion"></el-input>
                    </el-form-item>
                  </td>
                </tr>
                <tr>
                  <th class="no"></th>
                  <td colspan="5">
                    <el-button type="primary" @click="subRevokeForm()" class="button-sty">
                      <i class="el-icon-check el-icon"></i>
                      {{ $t2('确 定', 'system.button.confirm2') }}
                    </el-button>
                  </td>
                </tr>
                </tbody>
              </table>
            </el-form>
          </div>
        </template>
        <template v-else-if="operateType == 'talk'">
          <div class="flow-btn-opeaBox">
            <el-form :model="changeWfForm">
              <table class="table-detail">
                <tbody>
                <tr>
                  <th>
                      <span class="t">
                        接收人
                      </span>
                  </th>
                  <td>
                    <el-form-item field="receiverName">
                      <el-input
                        class="search-input"
                        max="200"
                        v-model="talkForm.receiverName"
                        @clear="
                            changeWfForm.receiver = null;
                            $forceUpdate();
                          "
                        placeholder="接收人"
                        v-el-readonly
                        clearable
                      >
                        <i slot="suffix" class="el-input__icon el-icon-search" @click="openTalkUserDialog"></i>
                      </el-input>
                    </el-form-item>
                  </td>
                  <th class="no"></th>
                  <td></td>
                  <th class="no"></th>
                  <td></td>
                  <th class="no"></th>
                  <td></td>
                </tr>
                <tr>
                  <th>
                      <span class="t">
                        沟通内容
                      </span>
                  </th>
                  <td colspan="3">
                    <el-form-item field="content">
                      <el-input type="textarea" :rows="8" placeholder="请输入内容" v-model="talkForm.content"></el-input>
                    </el-form-item>
                  </td>
                </tr>
                <tr>
                  <th>
                      <span class="t">
                        沟通资料
                      </span>
                  </th>
                  <td colspan="7">
                    <baseUpload accept="file" multi="true" :file.sync="talkForm.attachmentDTOs"></baseUpload>
                  </td>
                </tr>
                <tr>
                  <th class="no"></th>
                  <td colspan="3">
                    <el-button type="primary" @click="submitTalkForm" class="button-sty">
                      <i class="el-icon-check el-icon"></i>
                      {{ $t2('确 定', 'system.button.confirm2') }}
                    </el-button>
                  </td>
                </tr>
                </tbody>
              </table>
            </el-form>
          </div>
        </template>
      </div>

      <div class="title-second" @click="showFlowImg = !showFlowImg"
           style="margin: 14px 0 24px;line-height: 29px;cursor: pointer;"><b>流程图</b>
        <div class="fr" v-if="showFlowImg == true" style="font-weight: 400;">
          <span>收起</span>
          <i class="el-icon-arrow-up"></i>
        </div>
        <div class="fr" v-else style="font-weight: 400;">
          <span>展开</span>
          <i class="el-icon-arrow-down"></i>
        </div>
      </div>
      <div class="flow-tree" style="padding-right:0" v-show="showFlowImg == true">
        <div class="flow-box">
          <img :src="wfImage"/>
          <el-tooltip :enterable="false" class="item" effect="dark" content="放大" placement="bottom">
            <i class="el-icon-zoom-in btn-magnifier" @click="$window.open(wfImage)" style="right:0;"></i>
          </el-tooltip>
        </div>
        <!--<div class="flow-form">
          <el-button type="success" class="btn b" @click="subAgreeForm" v-show="wfInfo.toSubmit">通过</el-button>

        </div>
            <div class="flow-form" style="top:152px;">
               <textarea
                class="txt"
                placeholder="请填写您的意见~
          注：
          通过默认意见为“同意”
           "
                v-model="opinion"
              ></textarea>
              <el-button type="warning" class="btn b" @click="manualEndWf" v-show="wfInfo.toInterrupt">中断</el-button>
              <el-button type="danger" class="btn b" @click="rejectWfTask" v-show="wfInfo.toReject">驳回</el-button>
              <el-button type="primary" class="btn" @click="openChangeWfForm" v-show="wfInfo.toSubmit">转办</el-button>
              <el-button type="primary" class="btn" @click="openUrgingDialog" v-show="wfInfo.toInterrupt">催办</el-button>
            </div> -->
      </div>
      <div class="title-tab">
        <div>
          <b :class="{on:tabIndex=='1'}" @click="tabIndex='1'">任务情况</b>
          <b :class="{on:tabIndex=='2'}" @click="tabIndex='2'" v-if="toTalk">流程沟通</b>
          <b :class="{on:tabIndex=='3'}" @click="tabIndex='3'" v-if="showAllWfOpinon">全部任务情况</b>
        </div>
      </div>
      <div class="task-situation" v-show="tabIndex=='1'" style="max-height: 500px; overflow: hidden auto;">
        <div class="item" v-for="wftaskLineData in wftaskData" :key="wftaskLineData.id">
          <div class="time">
            {{ wftaskLineData.approveTime ? wftaskLineData.approveTime.substring(0, 10) : '' }}
            <br/>
            {{ wftaskLineData.approveTime ? wftaskLineData.approveTime.substring(11) : '' }}
          </div>
          <div class="status" :class="taskStatuses[wftaskLineData.type]?taskStatuses[wftaskLineData.type].class:''">
            {{ taskStatuses[wftaskLineData.type] ? taskStatuses[wftaskLineData.type].value : null }}
          </div>
          <i class="circle"></i>
          <div class="info">
            <p>
              <span class="name">{{ wftaskLineData.taskName }}</span>
              <span>执行人：{{ wftaskLineData.approverName }}</span>
              <span>
                候选人：
                <span class="">{{ wftaskLineData.candidateNames }}</span>
              </span>
            </p>
            <p class="t"><span class="t1">备注/意见：</span><span>{{ wftaskLineData.opinion }}</span></p>
          </div>
        </div>
      </div>
      <div class="task-situation" v-show="toTalk && tabIndex=='2'">
        <vxe-grid
          ref="table-linkup"
          :auto-resize="true"
          v-bind="linkupOption"
          @resizable-change="$vxeTableUtil.onColumnWitchChange"
          @custom="$vxeTableUtil.customHandle"
        >
          <template #form>
            <div style="margin-bottom: 8px;" class="clearfix">
              <div class="fl">
                <el-button type="primary" class="button-sty" @click="openTalkDialog(null, null, 'talk',1)"
                           icon="el-icon-chat-dot-square" v-if="wfInfo.stat!=2">沟通
                </el-button>
              </div>
              <div class="fr">
                <!--                <vxe-button status="warning" icon="el-icon-search" class="button-sty" @click="searchEvent">搜索
                                </vxe-button>-->
              </div>
            </div>
          </template>
          <template #sender="{row}">
            <a
              href="javascript:void(0);"
              class="a-link"
              @click="openTalkDialog(row.sender, row.senderName, 'talk',1)"
              v-if="wfInfo.stat!=2"
            >
              <el-tooltip :enterable="false" effect="dark" content="沟通" placement="top"
                          popper-class="tooltip-skin">
                <div>
                  <i class="el-icon-chat-dot-square"></i>
                  <span>{{ row.senderName }}</span>
                </div>
              </el-tooltip>
            </a>
          </template>
          <template #receiver="{row}">
            <a
              href="javascript:void(0);"
              class="a-link"
              @click="openTalkDialog(row.receiver,row.receiverName,'talk',1)"
              v-if="wfInfo.stat!=2"
            >
              <el-tooltip :enterable="false" effect="dark" content="沟通" placement="top"
                          popper-class="tooltip-skin">
                <div>
                  <i class="el-icon-chat-dot-square"></i>
                  <span>{{ row.receiverName }}</span>
                </div>
              </el-tooltip>
            </a>
            <span v-else>{{ row.receiverName }}</span>
          </template>
        </vxe-grid>
      </div>
      <div class="task-situation" v-show="showAllWfOpinon && tabIndex=='3'"
           style="max-height: 500px; overflow: hidden auto;">
        <div class="item" v-for="wftaskLineData in allWfTaskOpinions" :key="'allWfTaskOpinions'+wftaskLineData.id">
          <div class="time">
            {{ wftaskLineData.approveTime ? wftaskLineData.approveTime.substring(0, 10) : '' }}
            <br/>
            {{ wftaskLineData.approveTime ? wftaskLineData.approveTime.substring(11) : '' }}
          </div>
          <div class="status" :class="taskStatuses[wftaskLineData.type]?taskStatuses[wftaskLineData.type].class:''">
            {{ taskStatuses[wftaskLineData.type] ? taskStatuses[wftaskLineData.type].value : null }}
          </div>
          <i class="circle"></i>
          <div class="info">
            <p>
              <span class="name">{{ wftaskLineData.taskName }}</span>
              <span>执行人：{{ wftaskLineData.approverName }}</span>
              <span>
                候选人：
                <span class="">{{ wftaskLineData.candidateNames }}</span>
              </span>
            </p>
            <p class="t"><span class="t1">备注/意见：</span><span>{{ wftaskLineData.opinion }}</span></p>
          </div>
        </div>
      </div>

      <el-dialog
        v-if="showWfManualDialog"
        :visible.sync="showWfManualDialog"
        :modal-append-to-body="false"
        :close-on-click-modal="false"
        width="501px"
        custom-class="dialog-style tips-dialog warning"
        :append-to-body="true"
        :show-close="false"
        v-el-drag-dialog
        v-el-dialog-center
      >
        <template #title>
          <span class="el-dialog__title">流程中断<span style="margin-left: 10px;margin-right: 10px;">—</span><b
            class="f-red" style="font-size: 12px;">节点：{{
              wfInfo.taskName
            }}</b></span>
        </template>
        <div class="cont">
          您确定要中断流程吗？
        </div>
        <span slot="footer" class="dialog-footer">
	     <el-button type="primary" plain class="button-sty" @click="showWfManualDialog = false"><i
         class="el-icon-close el-icon"></i>{{ $t2('取 消', 'system.button.cancel2') }}</el-button>
	     <el-button type="primary" @click="manualEndWf" class="button-sty"><i
         class="el-icon-check el-icon"></i>{{ $t2('确 定', 'system.button.confirm2') }}</el-button>
	   </span>
      </el-dialog>
      <user-dialog v-if="showUserDialog" :visiable.sync="showUserDialog" @close="showUserDialog = false"
                   @confirm="userConfirm" multi="true" :param.sync="wfUserParam" :rows="changeUserRows"></user-dialog>

      <urgingDialog v-if="urgingDialogVisible" :visiable.sync="urgingDialogVisible" :wfInfo="wfInfo"
                    :current_prefix="current_prefix"
                    @confirm="confirmUrging" multi="true"></urgingDialog>
      <deleteTaskUserDialog v-if="showDeleteTaskUserDialog" :visiable.sync="showDeleteTaskUserDialog" :wfInfo="wfInfo"
                            :current_prefix="current_prefix"
                            @confirm="confirmDeleteTaskUser" multi="true"></deleteTaskUserDialog>
      <addTaskUserdialog v-if="showAddTaskUserDialog" :visiable.sync="showAddTaskUserDialog" :wfInfo="wfInfo"
                         :current_prefix="current_prefix" :rows.sync="addIncreaseSignUsers"
                         @confirm="confirmAddTaskUser" multi="true" :param.sync="wfUserParam"></addTaskUserdialog>
      <user-dialog v-if="showTalkUserDialog" :visiable.sync="showTalkUserDialog" @close="showTalkUserDialog = false"
                   @confirm="confirmTalkUserDialog" multi="false"></user-dialog>
      <setCandidateDialog v-if="showSetCandidateDialog" :visiable.sync="showSetCandidateDialog"
                          @close="closeSetCandidateDialog"
                          :wfInfo="wfInfo"
                          :current_prefix="current_prefix"></setCandidateDialog>

    </template>
  </baseTabPane>
</template>

<script>
import {wfContentMixin} from './wf.js';

export default {
  components: {
    UserDialog: () => import('../../views/user/user/dialog.vue'),
    urgingDialog: () => import('./urgingDialog'),
    deleteTaskUserDialog: () => import('./deleteTaskUserDialog'),
    addTaskUserdialog: () => import('./addTaskUserdialog'),
    setCandidateDialog: () => import('./setCandidateDialog')
  },
  mixins: [wfContentMixin],
  data() {
    return {
      operateType: 'submit'
    }
  },
  methods: {}
};
</script>
