<template>
  <el-dialog
    :close-on-click-modal="false"
    :visible.sync="relatedInformationDialog"
    title="选择目标节点"
    width="800px"
  >
    <div class="record-content">
      <el-table
        :data="selectDesObj.afterNodes"
        :default-sort="{prop: 'createTime', order: 'descending'}"
        border
        header-cell-class-name="todo-header-row"
        row-class-name="todo-row"
        size="medium"
        style="width: 100%;max-height:400px;overflow-y: auto;"
      >
        <el-table-column
          v-if="selectDesObj.jumpType"
          align="left"
          label="选择节点"
        >
          <template slot-scope="scope">
            <el-radio v-model="selectNodeId" :label="scope.row.nodeId">{{
              scope.row.nodeName
            }}</el-radio>
          </template>
        </el-table-column>

        <el-table-column
          v-if="!selectDesObj.jumpType"
          align="left"
          label="目标节点"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.nodeName }} </span>
          </template>
        </el-table-column>

        <el-table-column
          v-if="selectDesObj.choiceExcutor"
          align="left"
          label="选择处理人"
          width="500"
        >
          <template slot-scope="scope">
            <el-select
              v-if="
                selectDesObj.choiceExcutor == 'candidate' &&
                  scope.row.nodeType != 'end'
              "
              v-model="scope.row.selectUserIds"
              clearable
              filterable
              multiple
              placeholder="请选择"
              style="width:300px"
            >
              <el-option
                v-for="item in scope.row.excutorList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
            <ht-user-selector
              v-if="
                selectDesObj.choiceExcutor != 'candidate' &&
                  scope.row.nodeType != 'end'
              "
              v-model="scope.row.selectUsers"
              permission="w"
            />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button
        v-if="
          (selectDesObj.help != '' || selectDesObj.helpGlobal != '') &&
            (selectDesObj.jumpType == 'free' ||
              selectDesObj.jumpType == 'select' ||
              selectDesObj.jumpType == 'free,select' ||
              selectDesObj.jumpType == 'select,free')
        "
        class="help"
        icon="el-icon-question"
        type="text"
        @click="help"
        >帮助
      </el-button>
      <el-button
        :disabled="disabled"
        size="small"
        type="primary"
        @click="confirm"
        >确 定</el-button
      >
      <el-button size="small" @click="closeDailog">取 消</el-button>
    </div>
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="helpDialog"
      append-to-body
      title="帮助"
      width="55%"
    >
      <div style="max-height:600px;overflow: auto;" v-html="valHelp"></div>
    </el-dialog>
  </el-dialog>
</template>

<script>
import {mapState, mapActions} from 'vuex'
import HtUserSelector from '@/components/control/HtUserSelector.vue'
import utils from '@/utils.js'
import {debuglog} from 'util'

export default {
  name: 'taskSelectDestination',
  props: ['taskId', 'defId', 'instId', 'leaderId'],
  components: {HtUserSelector},
  data() {
    return {
      relatedInformationDialog: false,
      helpDialog: false,
      disabled: false,
      selectNodeId: '',
      files: '',
      zfiles: '',
      formData: '',
      opinion: '',
      selectDesObj: {},
      token: utils.getUrlKey('token'),
      valHelp: '',
      proInstId: '' //处理人时传过来的流程实例ID
    }
  },
  computed: mapState({
    curOrgPost: state => state.user.postCharge
  }),
  methods: {
    //帮助
    help() {
      this.helpDialog = true
    },
    //鼠标点击页面其他其他位置不关闭弹框
    showDialog(formData, files, zfiles, opinion, instId, jumpType) {
      if (this.$route.query.type === 'free') {
        jumpType = 'free'
      }
      this.proInstId = instId
      this.files = files
      this.zfiles = zfiles
      this.opinion = opinion
      this.formData = formData
      this.selectNodeId = ''
      this.selectDesObj = {}
      this.jumpType = jumpType
      this.relatedInformationDialog = true
      this.$store
        .dispatch('storeProcess/getAfterJumpNodes', {
          taskId: this.taskId || '',
          data: formData.data || formData,
          defId: this.defId || '',
          instId: this.instId || '',
          type: this.jumpType || ''
        })
        .then(data => {
          let Base64 = require('js-base64').Base64
          this.selectDesObj = data
          //此操作为改节点为设置自由跳转，通过manage端的任务跳转按钮跳过来时可提供自由跳转功能
          if (this.$route.query.type === 'free') {
            this.selectDesObj.jumpType = this.jumpType
            this.selectDesObj.choiceExcutor = this.jumpType
          }
          if (this.selectDesObj.afterNodes.length == 1) {
            this.selectNodeId = this.selectDesObj.afterNodes[0].nodeId
          }
          if (this.selectDesObj.helpGlobal == 'null') {
            this.selectDesObj.helpGlobal = ''
          }
          if (this.selectDesObj.help == 'null') {
            this.selectDesObj.help = ''
          }
          if (
            this.selectDesObj.helpGlobal != '' &&
            this.selectDesObj.help != ''
          ) {
            this.valHelp = Base64.decode(this.selectDesObj.help, 'utf-8')
          } else if (
            this.selectDesObj.helpGlobal == '' &&
            this.selectDesObj.help != ''
          ) {
            this.valHelp = Base64.decode(this.selectDesObj.help, 'utf-8')
          } else if (this.selectDesObj.helpGlobal != '') {
            this.valHelp = Base64.decode(this.selectDesObj.helpGlobal, 'utf-8')
          }
        })
    },
    closeDailog() {
      this.relatedInformationDialog = false
    },
    confirm() {
      let data = {
        data: this.formData.data || this.formData,
        taskId: this.taskId || '',
        defId: this.defId || '',
        proInstId: this.instId || '',
        actionName: 'agree',
        files: this.files,
        zfiles: this.zfiles,
        formType: 'inner',
        opinion: this.opinion,
        agentLeaderId: this.leaderId,
        isSendNodeUsers: '1'
      }
      if (this.formData.businessKey) {
        data.formType = 'frame'
        data.businessKey = this.formData.businessKey
        data.sysCode = this.formData.sysCode
        if (this.formData.vars) {
          data.vars = this.formData.vars
        }
      }
      //如果用户选择看目标节点，则将节点的跳转类也传到后台

      data.destination = this.selectNodeId
      if (
        !data.destination &&
        this.selectDesObj.afterNodes &&
        this.selectDesObj.afterNodes.length == 1
      ) {
        data.destination = this.selectDesObj.afterNodes[0].nodeId
      }
      if (this.selectDesObj.jumpType) {
        data.jumpType =
          this.selectDesObj.jumpType == 'select' ? 'select' : 'free'
      }

      let nodeUsers = []
      //遍历所有的节点将其所选择的节点。
      if (this.selectDesObj && this.selectDesObj.choiceExcutor == 'candidate') {
        for (
          let index = 0;
          index < this.selectDesObj.afterNodes.length;
          index++
        ) {
          const node = this.selectDesObj.afterNodes[index]
          if (node.selectUserIds && node.selectUserIds.length > 0) {
            const excutorList = node.excutorList
            const selectusers = []
            for (let index = 0; index < excutorList.length; index++) {
              const user = excutorList[index]
              if (user && node.selectUserIds.indexOf(user.id) > -1) {
                selectusers.push(user)
              }
            }
            nodeUsers.push({nodeId: node.nodeId, executors: selectusers})
          }
        }
      } else if (this.selectDesObj) {
        for (
          let index = 0;
          index < this.selectDesObj.afterNodes.length;
          index++
        ) {
          const node = this.selectDesObj.afterNodes[index]
          if (node.selectUsers && node.selectUsers.length > 0) {
            const excutorList = node.selectUsers
            const selectusers = []
            for (let index = 0; index < excutorList.length; index++) {
              const user = excutorList[index]
              selectusers.push({
                id: user.id,
                name: user.fullname,
                type: 'user'
              })
            }
            nodeUsers.push({nodeId: node.nodeId, executors: selectusers})
          }
        }
      }

      if (nodeUsers.length > 0) {
        data.nodeUsers = JSON.stringify(nodeUsers)
      }
      if (window.urgentStateValue) {
        data.urgentStateValue = window.urgentStateValue
      }
      if (this.taskId) {
        this.$confirm('确认办理此任务?', '提示', {
          cancelButtonText: '取消',
          confirmButtonText: '确定',
          type: 'warning',
          closeOnClickModal: false
        }).then(() => {
          this.disabled = true
          this.$store
            .dispatch('storeProcess/complete', data)
            .then(() => {
              this.$router.push('/inst/' + this.proInstId + '/doneList')
              // if(this.token!=null){
              //   window.close();
              // }else{
              //   this.$router.go(-1);
              // }
            })
            .catch(() => {
              this.disabled = false
            })
        })
      } else {
        if (this.curOrgPost && this.curOrgPost.org) {
          data.startOrgId = this.curOrgPost.org.id
        }
        this.disabled = true
        data.supportMobile = 1
        this.$store
          .dispatch('storeProcess/start', data)
          .then(() => {
            if (this.token != null) {
              window.close()
            } else {
              this.$router.go(-1)
            }
          })
          .catch(() => {
            this.disabled = false
          })
      }
    }
  }
}
</script>

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

.record-container {
  border-bottom: 1px solid #ebeef5;
  padding: 20px 0 10px;
}

.record-container > span {
  border-left: 3px solid $--theme-color;
  font-weight: bold;
  font-size: 14px;
  padding-left: 10px;
  color: #666;
}

.record-content {
  padding: 10px 0;
}

.form-table {
  width: 100%;
  border-top: 1px solid #ebeef5;
  border-left: 1px solid #ebeef5;
}

.form-table th {
  text-align: right;
  color: #666;
}

.form-table th > span {
  color: #f00;
}

.form-table th,
.form-table td {
  border-right: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;
  padding: 10px;
  min-width: 0;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
}

.recordInformation {
  text-align: right;
  width: 15%;
}

.overstriking {
  font-weight: 700;
}

.help {
  float: left;
}

::v-deep .el-dialog__body {
  padding: 10px 20px;
  color: $--color-text-regular;
  font-size: 14px;
}
</style>
