<template>
  <div>
    <div class="box">
      <el-row>
        <el-col :span="2">
          <el-button
            icon="Plus"
            type="primary"
            @click="openAddDrawer"
          >
            新增流程
          </el-button>
        </el-col>
        <el-col :span="3">
          <el-button
            icon="Edit"
            type="primary"
            @click="openNodeManage"
          >节点编辑</el-button>
        </el-col>
      </el-row>
      <el-row style="margin-top: 20px">
        <el-col :span="23">
          <el-table
            :data="processList"
            height="650px"
          >
            <el-table-column
              prop="processName"
              label="流程名称"
              align="center"
              width="250"
            />
            <el-table-column
              prop="processType"
              label="流程类型"
              align="center"
              width="250"
            />
            <el-table-column
              label="节点数量"
              align="center"
              prop="nodes.length"
              width="250"
            />
            <el-table-column
              label="流程开关"
              align="center"
              width="180"
            >
              <template #default="scope">
                <el-switch
                  v-model="scope.row.isUse"
                  class="ml-2"
                  style="--el-switch-on-color: #13ce66;"
                  @change="changeProcessSwitch(scope.row)"
                />
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
            >
              <template #default="scope">
                <el-button
                  icon="Picture"
                  text
                  type="primary"
                  @click="openRender(scope.row)"
                >效果图</el-button>
                <el-popover
                  placement="top"
                  :width="250"
                  trigger="click"
                  :content="scope.row.processContent"
                >
                  <template #reference>
                    <el-button
                      icon="Memo"
                      text
                      type="primary"
                    >流程内容</el-button>
                  </template>
                </el-popover>
                <el-button
                  icon="Edit"
                  text
                  type="primary"
                  @click="openModifyDrawer(scope.row)"
                >修改</el-button>
                <el-button
                  icon="Delete"
                  text
                  type="primary"
                  @click="deleteProcess(scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-drawer
        v-model="nodeManageShow"
        title="节点管理"
        size="55%"
      >
        <node-manage />
      </el-drawer>
      <el-drawer
        v-model="editProcessShow"
        :title="processDrawerTitle"
        size="37%"
      >
        <el-form
          label-position="left"
          label-width="100"
          size="large"
        >
          <el-form-item label="流程名称：">
            <el-input
              v-model="editProcessData.process.processName"
              placeholder="请输入审核流程名称"
            />
          </el-form-item>
          <el-form-item label="流程内容：">
            <el-input
              v-model="editProcessData.process.processContent"
              placeholder="请输入审核流程内容"
            />
          </el-form-item>
          <el-form-item label="流程类型：">
            <el-select
              v-model="editProcessData.process.processType"
              placeholder="请选择流程类型"
            >
              <el-option
                v-for="item in processType"
                :key="item.id"
                :label="item.value"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <el-row
          style="margin-top: 20px"
          justify="end"
        >
          <el-col :span="4">
            <el-button
              type="primary"
              icon="Notebook"
              @click="openEffectDialog"
            >效果图</el-button>
          </el-col>
          <el-col :span="4">
            <el-button
              type="primary"
              icon="Plus"
              @click="openProcessNodeDialog()"
            >添加节点</el-button>
          </el-col>
        </el-row>
        <el-row style="margin-top: 20px">
          <el-col :span="24">
            <el-table
              height="470"
              :data="intermediary"
            >
              <el-table-column
                label="节点顺序"
                align="center"
                width="180"
                prop="nodeOrder"
              />
              <el-table-column
                label="节点名称"
                align="center"
                prop="nodeName"
              />
              <el-table-column
                label="节点审核人"
                align="center"
                prop="nodeHead"
              />
              <el-table-column
                label="操作"
                align="center"
              >
                <template #default="scope">
                  <el-button
                    icon="Delete"
                    type="primary"
                    text
                    @click="deleteProcessNode(scope.row)"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <el-row
          style="margin-top: 50px"
          justify="end"
        >
          <el-button
            type="primary"
            size="large"
            @click="editProcess"
          >确认</el-button>
        </el-row>
      </el-drawer>
      <el-dialog
        v-model="processNodeDialog"
        :title="processNodeTitle"
        width="40%"
      >
        <el-form
          size="large"
          label-position="left"
          label-width="90"
          style="margin-top: 20px"
        >
          <el-form-item label="节点名称：">
            <el-select
              v-model="addProcessNodeData.nodeId"
              @change="changeNodeName"
            >
              <el-option
                v-for="item in nodeList"
                :key="item.ID"
                :label="item.nodeName"
                :value="item.ID"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="节点顺序：">
            <el-select v-model="addProcessNodeData.nodeOrder">
              <el-option
                v-for="(item,index) in orderList"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button
            size="large"
            type="primary"
            @click="addProcessNodes"
          >确认</el-button>
        </template>
      </el-dialog>
      <el-dialog
        v-model="processEffectShow"
        title="流程效果图"
        width="45%"
        align-center
      >
        <el-row
          style="margin-top: 20px;height: 150px"
        >
          <el-col :span="24">
            <el-steps
              v-show="intermediary.length > 1"
              :active="processActive"
              space="20%"
              align-center
            >
              <el-step
                v-for="item in intermediary"
                :key="item.nodeId"
                :title="item.nodeName"
                :description="item.nodeHead"
              />
            </el-steps>
          </el-col>
        </el-row>
      </el-dialog>
      <el-dialog
        v-model="renderShow"
        title="流程效果图"
      >
        <el-row
          style="margin-top: 20px;height: 150px"
        >
          <el-col :span="24">
            <el-steps
              v-show="renderNodeList.length > 1"
              :active="renderNodeList.length"
              space="20%"
              align-center
            >
              <el-step
                v-for="item in renderNodeList"
                :key="item.ID"
                :title="item.nodeName"
                :description="item.approver.nickName"
              />
            </el-steps>
          </el-col>
        </el-row>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import NodeManage from './components/nodeManage.vue'
import { ref, onMounted, reactive } from 'vue'
import { getAllNode } from '@/api/node'
import { ElMessage, ElMessageBox } from 'element-plus'
import { postProcess, getProcessList, delProcess, putProcess, switchProcess } from '@/api/process'
defineOptions({
  name: 'FlowManage'
})
onMounted(() => {
  queryAllNode()
  // 查看流程
  queryProcessList()
})

// .....................................节点
const nodeManageShow = ref(false)
const openNodeManage = () => {
  nodeManageShow.value = true
}
const nodeList = reactive([])
// 查询所有节点
const queryAllNode = () => {
  getAllNode().then(res => {
    if (res.code === 0) {
      nodeList.length = 0
      nodeList.push(...res.data)
    }
  })
}

// .....................................流程
const editProcessShow = ref(false)

const processDrawerTitle = ref('新增流程')

// 添加流程数据
const editProcessData = reactive({
  process: {
    processName: '',
    processContent: '',
    processType: ''
  },
  processNodes: []
})
const openAddDrawer = () => {
  editProcessShow.value = true
  const initial = reactive({
    process: {
      processName: '',
      processContent: '',
      processType: ''
    },
    processNodes: []
  })
  Object.assign(editProcessData, initial)
  intermediary.value = []
}

// 为流程添加、编辑节点
const processNodeDialog = ref(false)
const processNodeTitle = ref('新增流程节点')
const orderList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
const processType = [{ id: 1, value: '立项' }, { id: 2, value: '费用' }]
const addProcessNodeData = reactive({
  nodeId: 0,
  nodeOrder: 1,
  nodeName: '',
  nodeHead: ''
})
const openProcessNodeDialog = () => {
  processNodeDialog.value = true
  addProcessNodeData.nodeId = nodeList[0].ID
  addProcessNodeData.nodeName = nodeList[0].nodeName
  addProcessNodeData.nodeHead = nodeList[0].approver.nickName
}
const intermediary = ref([])
const changeNodeName = (val) => {
  addProcessNodeData.nodeId = val
  nodeList.forEach(item => {
    if (item.ID === val) {
      addProcessNodeData.nodeName = item.nodeName
      addProcessNodeData.nodeHead = item.approver.nickName
    }
  })
}
const addProcessNodes = () => {
  const obj = {}
  Object.assign(obj, addProcessNodeData)
  intermediary.value.push(obj)
  processActive.value = intermediary.value.length
  processNodeDialog.value = false
}
const deleteProcessNode = (row) => {
  intermediary.value.forEach((item, index) => {
    if (row.nodeId === item.nodeId) {
      intermediary.value.splice(index, 1)
    }
  })
}

// 编辑流程
const editProcess = () => {
  const arr = intermediary.value
  arr.forEach(item => {
    const obj = {
      nodeId: item.nodeId,
      nodeOrder: item.nodeOrder,
    }
    editProcessData.processNodes.push(obj)
  })
  for (const key in editProcessData) {
    if (key === 'processNodes') {
      if (editProcessData[key].length < 2) {
        ElMessage.error('节点的个数不足以构成流程（最少为2）')
        return
      }
    } else {
      if (editProcessData[key] === '') {
        ElMessage.error('请将流程的基本信息填写完整')
        return
      }
    }
  }
  if (processDrawerTitle.value === '新增流程') {
    postProcess(editProcessData).then(res => {
      if (res.code === 0) {
        ElMessage.success('新增流程成功')
        editProcessShow.value = false
        queryProcessList()
      }
    })
  } else {
    const { process, processNodes } = editProcessData
    const editData = {
      process: {
        id: processId.value,
        processName: process.processName,
        processContent: process.processContent,
        processType: process.processType
      },
      processNodes: processNodes
    }
    putProcess(editData).then(res => {
      if (res.code === 0) {
        ElMessage.success('修改流程成功')
        editProcessShow.value = false
        queryProcessList()
      }
    })
  }
}

// 流程效果图
const processActive = ref(0)

const processEffectShow = ref(false) // 弹窗显示

const openEffectDialog = () => {
  processActive.value = intermediary.value.length
  processEffectShow.value = true
} // 打开弹窗

// 查看流程列表
const processPag = reactive({
  page: 1,
  pageSize: 1000
})
const processList = reactive([])
const queryProcessList = () => {
  getProcessList(processPag).then(res => {
    if (res.code === 0) {
      processList.length = 0
      processList.push(...res.data.list)
    }
  })
}

// 已完成的流程效果图
const renderShow = ref(false)
const renderNodeList = reactive([])
const openRender = (row) => {
  renderShow.value = true
  renderNodeList.length = 0
  renderNodeList.push(...row.nodes)
}

// 修改流程
const processId = ref(0)// 流程id
const openModifyDrawer = (row) => {
  processId.value = row.ID
  editProcessShow.value = true
  processDrawerTitle.value = '修改流程'
  const { process, processNodes } = editProcessData
  process.processContent = row.processContent
  process.processName = row.processName
  process.processType = row.processType
  processNodes.length = 0
  const nodes = row.nodes
  intermediary.value.length = 0
  nodes.forEach(item => {
    const obj = {
      nodeId: item.ID,
      nodeName: item.nodeName,
      nodeOrder: item.order,
      nodeHead: item.approver.nickName
    }
    intermediary.value.push(obj)
  })
}

// 删除流程
const deleteProcess = (row) => {
  ElMessageBox.confirm(
    '确定要删除此流程吗?',
    '删除流程',
    {
      confirmButtonText: '删除',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      const delId = {
        id: row.ID
      }
      delProcess(delId).then(res => {
        if (res.code === 0) {
          ElMessage.success('删除成功')
          queryProcessList()
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}

const changeProcessSwitch = (val) => {
  const obj = {
    id: val.ID,
    processType: val.processType,
    isUse: val.isUse
  }
  switchProcess(obj).then(res => {
    if (res.code === 0) {
      ElMessage.success('操作成功')
      queryProcessList()
    }
  })
}

</script>

<style scoped>
.box{
  width: 1550px;
  height: 700px;
  background-color: #ffffff;
  padding: 20px;
}
</style>
