<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="12">
        <el-button
          size="small"
          @click="divertClick"
          icon="icon-zhuanyi"
          type="primary"
          >转移</el-button
        >
        <el-button
          size="small"
          v-if="data.type == 'user'"
          @click="copyClick"
          icon="icon-fuzhi"
          >复制</el-button
        ></el-col
      >
      <el-col
        :span="12"
        style="display: flex;
    align-items: center;
    justify-content: flex-end;"
      >
        <el-input
          size="small"
          clearable
          placeholder="请输入流程名称"
          prefix-icon="el-icon-search"
          style="margin-right: 10px;"
          v-model="tableData"
          @keyup.enter.native="searchEnterFun"
        ></el-input>
        <el-button
          size="small"
          type="primary"
          @click="search"
          icon="el-icon-search"
          >搜索</el-button
        >
        <el-button size="small" @click="reset" icon="icon-my-todo-reset"
          >重置</el-button
        >
      </el-col></el-row
    >
    <br />
    <el-table
      ref="defTable"
      :data="defListRow"
      style="width: 100%;"
      :max-height="500"
      border
      header-cell-class-name="todo-header-row"
      row-class-name="todo-row"
      size="medium"
      v-loading="fullscreenLoading"
    >
      <el-table-column
        type="selection"
        width="50"
        align="center"
      ></el-table-column>
      <el-table-column
        type="index"
        width="50"
        align="center"
        label="序号"
      ></el-table-column>
      <el-table-column
        prop="defName"
        label="流程名称"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="defKey"
        label="流程Key"
        align="center"
        width="130"
      ></el-table-column>
      <el-table-column
        prop="nodeName"
        label="任务节点名称"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="nodeId"
        label="任务节点key"
        align="center"
        width="150"
      ></el-table-column>
      <el-table-column
        prop="nodeType"
        label="任务节点类型"
        align="center"
        width="120"
      >
        <template v-slot="{row}">
          <el-tag type="warning" v-if="row.nodeType == 'signTask'"
            >会签任务</el-tag
          >
          <el-tag type="success" v-if="row.nodeType == 'userTask'"
            >用户任务</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="isMain"
        label="是否主版本"
        align="center"
        width="100"
      >
        <template v-slot="{row}">
          <el-tag type="success" v-if="row.isMain == 'Y'">是</el-tag>
          <el-tag type="warning" v-if="row.isMain == 'N'">否</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="bpmStatus"
        label="流程状态"
        align="center"
        width="80"
      >
        <template v-slot="{row}">
          <el-tag type="success" v-if="row.bpmStatus == 'deploy'">发布</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="version"
        label="所属版本"
        align="center"
        width="80"
      ></el-table-column>
    </el-table>
    <el-footer height="50px" style="padding:10px 0">
      <el-row type="flex" justify="end">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="currentChange"
          :current-page="pageResult.page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageResult.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageResult.total"
        ></el-pagination>
      </el-row>
    </el-footer>
    <!--用户选择对话框  -->
    <ht-user-dialog
      ref="eipUserDialog"
      @on-confirm="eipUserDialogOk"
      append-to-body
    />
    <!-- 组织选择对话框  -->
    <ht-org-post-dialog
      ref="eipOrgDialog"
      @on-confirm="eipOrgDialogOk"
      single
      append-to-body
    />
    <!-- 岗位选择对话框  -->
    <ht-post-dialog
      ref="eipPostDialog"
      @on-confirm="eipPostDialogOk"
      single
      append-to-body
    />
    <!-- 角色选择对话框  -->
    <ht-role-dialog
      ref="eipRoleDialog"
      @on-confirm="eipRoleDialogOk"
      single
      append-to-body
    />
  </div>
</template>

<script>
import req from '@/request.js'
const eipUserDialog = () => import('@/components/dialog/EipUserDialog.vue')
const eipOrgDialog = () => import('@/components/dialog/EipOrgDialog.vue')
const eipPostDialog = () => import('@/components/dialog/EipPostDialog.vue')
const eipRoleDialog = () => import('@/components/dialog/EipRoleDialog.vue')
export default {
  components: {eipUserDialog, eipOrgDialog, eipPostDialog, eipRoleDialog},
  name: 'def-setting',
  props: ['data'],
  data() {
    return {
      type: '', //1、转移，2、复制
      selectDefs: [], //选择的要转移或复制流程配置信息
      type: '',
      maxHeight: '500', //列表高度
      tableData: '', //查询条件内容
      defList: [], //查询出来的全部数据
      defListRow: [], //设置每页列表的显示数据
      fullscreenLoading: true,
      pageResult: {
        page: 1,
        pageSize: 20,
        total: 0
      }
    }
  },
  watch: {
    data: {
      handler(newValue, oldValue) {
        this.$nextTick(() => {
          this.search()
        })
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    //转移
    divertClick() {
      this.type = ''
      this.selectDefs = []
      let selectSelection = this.$refs.defTable.selection
      if (selectSelection && selectSelection.length == 0) {
        this.$message.error('请选择要转移的数据')
        return
      }
      for (let k = 0; k < selectSelection.length; k++) {
        let objDef = {}
        objDef.defId = selectSelection[k].defId
        objDef.nodeId = selectSelection[k].nodeId
        objDef.nodeName = selectSelection[k].nodeName
        objDef.nodeType = selectSelection[k].nodeType
        this.selectDefs.push(objDef)
      }
      this.type = '1'
      if (this.data.type == 'user') {
        this.$refs['eipUserDialog'].showDialog()
      }
      if (this.data.type == 'org') {
        this.$refs['eipOrgDialog'].showDialog()
      }
      if (this.data.type == 'post') {
        this.$refs['eipPostDialog'].showDialog()
      }
      if (this.data.type == 'role') {
        this.$refs['eipRoleDialog'].showDialog()
      }
    },
    //复制
    copyClick() {
      this.type = ''
      this.selectDefs = []
      let selectSelection = this.$refs.defTable.selection
      if (selectSelection && selectSelection.length == 0) {
        this.$message.error('请选择要复制的数据')
        return
      }
      for (let k = 0; k < selectSelection.length; k++) {
        let objDef = {}
        objDef.defId = selectSelection[k].defId
        objDef.nodeId = selectSelection[k].nodeId
        objDef.nodeName = selectSelection[k].nodeName
        objDef.nodeType = selectSelection[k].nodeType
        this.selectDefs.push(objDef)
      }
      this.type = '2'
      this.$refs['eipUserDialog'].showDialog()
    },
    operatingDefSetting(map) {
      req
        .post(`${window.context.bpmModel}/flow/def/v1/operatingDefSetting`, map)
        .then(res => {
          if (res.data.state) {
            this.$message.success(res.data.message)
            this.search()
          }
          this.fullscreenLoading = false
        })
        .catch(() => {
          this.fullscreenLoading = false
        })
    },
    //选择用户确认事件
    eipUserDialogOk(data) {
      if (data && data.length > 0) {
        let userArray = []
        for (let k = 0; k < data.length; k++) {
          if (data[k].account != this.data.typeValue.account) {
            userArray.push({
              account: data[k].account,
              fullname: data[k].fullname
            })
          }
        }
        if (userArray.length == 0) {
          if (this.type == '1') {
            this.$message.error('选择的要转移的用户不能是自己')
          } else if (this.type == '2') {
            this.$message.error('选择的要复制的用户不能是自己')
          }
          return
        }
        let oldUserObj = {
          oldAccount: this.data.typeValue.account,
          oldUserName: this.data.typeValue.fullname
        }
        let map = {
          oldUserObj: oldUserObj,
          paType: this.data.type,
          userArray: userArray,
          selectDefs: this.selectDefs,
          type: this.type
        }
        this.operatingDefSetting(map)
      }
    },
    //选择所属组织确认事件
    eipOrgDialogOk(data) {
      if (data[0]) {
        if (data[0].id == this.data.typeValue.id) {
          this.$message.error('选择的要转移的组织不能是自己')
          return
        }
        let teamObj = {code: data[0].code, name: data[0].name}
        let oldTeamObj = {
          oldCode: this.data.typeValue.code,
          oldName: this.data.typeValue.name
        }
        let map = {
          oldTeamObj: oldTeamObj,
          paType: this.data.type,
          teamObj: teamObj,
          selectDefs: this.selectDefs,
          type: this.type
        }
        this.operatingDefSetting(map)
      }
    },
    //选择所属岗位确认事件
    eipPostDialogOk(data) {
      if (data[0]) {
        if (data[0].id == this.data.typeValue.id) {
          this.$message.error('选择的要转移的岗位不能是自己')
          return
        }
        let teamObj = {code: data[0].code, name: data[0].name}
        let oldTeamObj = {
          oldCode: this.data.typeValue.code,
          oldName: this.data.typeValue.name
        }
        let map = {
          oldTeamObj: oldTeamObj,
          paType: this.data.type,
          teamObj: teamObj,
          selectDefs: this.selectDefs,
          type: this.type
        }
        this.operatingDefSetting(map)
      }
    },
    //选择所属角色确认事件
    eipRoleDialogOk(data) {
      if (data[0]) {
        if (data[0].id == this.data.typeValue.id) {
          this.$message.error('选择的要转移的角色不能是自己')
          return
        }
        let teamObj = {code: data[0].code, name: data[0].name}
        let oldTeamObj = {
          oldCode: this.data.typeValue.code,
          oldName: this.data.typeValue.name
        }
        let map = {
          oldTeamObj: oldTeamObj,
          paType: this.data.type,
          teamObj: teamObj,
          selectDefs: this.selectDefs,
          type: this.type
        }
        this.operatingDefSetting(map)
      }
    },
    //重置
    reset() {
      this.tableData = ''
      this.search()
    },
    //查询
    search() {
      const this_ = this
      this_.defList = []
      this_.defListRow = []
      let querys = []
      let val = this_.data.typeValue.account
      if (this_.data.type != 'user') {
        val = this_.data.typeValue.code
      }
      let map = {
        val: val,
        type: this_.data.type,
        tableData: this_.tableData
      }
      //初次加载默认pageBean
      req
        .post(
          `${window.context.bpmModel}/flow/def/v1/getDefNodeUserByTeam`,
          map
        )
        .then(response => {
          if (response.data.state) {
            let res = JSON.parse(response.data.value.results)
            this_.defList = [...res] //全部数据
            this_.pageResult.page = 1
            this_.pageResult.pageSize = 10
            this_.pageResult.total = res.length
            for (let i = 0; i < 10; i++) {
              if (res[i]) {
                this_.defListRow.push(res[i])
              } else {
                continue
              }
            }
          }
          //页面加载调用tudo.js里面的分页方法
          this_.fullscreenLoading = false
        })
        .catch(() => {
          this_.fullscreenLoading = false
        })
    },
    currentChange: function(currentPage) {
      this.defListRow = []
      this.pageResult.page = currentPage
      let num =
        currentPage * this.pageResult.pageSize - this.pageResult.pageSize
      for (let i = num; i < currentPage * this.pageResult.pageSize; i++) {
        if (this.defList[i]) {
          this.defListRow.push(this.defList[i])
        } else {
          continue
        }
      }
    },
    handleSizeChange(val) {
      this.pageResult.pageSize = val
      this.currentChange(1)
    },
    //回车查询
    searchEnterFun: function(e) {
      var keyCode = window.event ? e.keyCode : e.which
      if (keyCode == 13) {
        this.search()
      }
    },
    //动态计算列表高度
    setMaxHeight(item) {
      const this_ = this
      setTimeout(() => {
        if (window.innerHeight) {
          this_.maxHeight = window.innerHeight
        } else if (document.body && document.body.clientHeight) {
          this_.maxHeight = document.body.clientHeight
        }
        this_.maxHeight = this_.maxHeight - item
      }, 10)
    }
  },
  created() {
    const this_ = this
    if (JSON.stringify(this_.data) == '{}') {
      return '请选择查询对象'
    }
    this_.setMaxHeight(350) //动态计算列表高度
  }
}
</script>

<style lang="scss" scoped>
.el-col_three {
  text-align: right;
}
</style>
