<template>
  <div>
    <el-row>
      <el-col
        :span="24"
      >
        <el-form :inline="true">
          <el-form-item label="审批人：">
            <el-select
              v-model="approverValue"
              placeholder="请选择审核人员"
              filterable
              clearable
              @change="changeApprover"
              @clear="clearApprover"
            >
              <el-option
                v-for="item in approverList"
                :key="item.ID"
                :label="item.nickName"
                :value="item.ID"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              icon="Plus"
              type="primary"
              @click="openAddDialog"
            >新增</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px">
      <el-col :span="24">
        <el-table
          :data="point.nodeList"
          height="605px"
        >
          <el-table-column
            prop="nodeName"
            label="节点名称"
            align="center"
          />
          <el-table-column
            prop="approver.nickName"
            label="审核人"
            align="center"
          />
          <el-table-column
            label="操作"
            align="center"
          >
            <template #default="scope">
              <el-popover
                placement="top"
                trigger="click"
                :width="200"
                :content="scope.row.nodeDescription"
              >
                <template #reference>
                  <el-button
                    text
                    type="primary"
                    icon="Memo"
                    size="small"
                  >描述</el-button>
                </template>
              </el-popover>
              <el-button
                text
                type="primary"
                icon="Edit"
                size="small"
                @click="editNode(scope.row)"
              >编辑</el-button>
              <el-button
                text
                type="primary"
                icon="Memo"
                size="small"
                @click="deleteNode(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row justify="end">
      <el-pagination
        v-show="approverValue === ''"
        v-model:current-page="condition.page"
        background
        layout="prev, pager, next"
        :total="point.nodeListTotal"
        @change="changeNodePage"
      />
    </el-row>
    <el-dialog
      v-model="addDialogShow"
      :title="identifyType"
    >
      <el-form
        size="large"
        label-width="110"
        label-position="left"
      >
        <el-form-item label="审批节点名称：">
          <el-input
            v-model="createNodeData.nodeName"
            placeholder="请输入审批节点名称"
          />
        </el-form-item>
        <el-form-item label="审批人：">
          <el-select
            v-model="createNodeData.approverId"
            placeholder="请选择审核人员"
            filterable
          >
            <el-option
              v-for="item in approverList"
              :key="item.ID"
              :label="item.nickName"
              :value="item.ID"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="节点描述：">
          <el-input
            v-model="createNodeData.nodeDescription"
            type="textarea"
            maxlength="200"
            show-word-limit
            :rows="6"
            placeholder="请输入节点相关描述"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button
            size="large"
            type="primary"
            @click="createNode"
          >确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, onMounted, ref } from 'vue'
import { delNode, putNode } from '@/api/node'
import { nodeData } from '@/pinia/node/node'
import { ElMessage, ElMessageBox } from 'element-plus'
import { postNode } from '@/api/node'
import { getAllUsers } from '@/api/user'
defineOptions({
  name: 'NodeManage'
})
onMounted(() => {
  queryApprover()
  queryNodeList()
})

const point = nodeData()

const condition = reactive({
  page: 1,
  pageSize: 10
})

const queryNodeList = () => {
  point.queryNodeList(condition)
}
const changeNodePage = (val) => {
  condition.page = val
  point.queryNodeList(condition)
}
// 按审核人查询节点
const approverValue = ref('')

const changeApprover = (val) => {
  approverList.forEach(item => {
    if (item.ID === val) {
      approverValue.value = item.nickName
      point.queryApproverNode(val)
    }
  })
}
const clearApprover = () => {
  point.queryNodeList(condition)
  approverValue.value = ''
}

// 审核人列表
const approverList = reactive([])
const queryApprover = () => {
  getAllUsers().then(res => {
    if (res.code === 0) {
      approverList.length = 0
      approverList.push(...res.data)
    }
  })
}

// 新增、修改节点
const addDialogShow = ref(false)
const identifyType = ref('')
// 新增、修改节点数据
const createNodeData = reactive({
  nodeName: '',
  approverId: 0,
  nodeDescription: ''
})
const openAddDialog = () => {
  addDialogShow.value = true
  createNodeData.approverId = approverList[0].ID
  createNodeData.nodeName = ''
  createNodeData.nodeDescription = ''
  identifyType.value = '新增节点'
}

const editId = ref(0)
const editNode = (row) => {
  editId.value = row.ID
  createNodeData.approverId = row.approverId
  createNodeData.nodeName = row.nodeName
  createNodeData.nodeDescription = row.nodeDescription
  addDialogShow.value = true
  identifyType.value = '修改节点'
}

const createNode = () => {
  if (identifyType.value === '新增节点') {
    postNode(createNodeData).then(res => {
      if (res.code === 0) {
        point.queryNodeList(condition)
        ElMessage.success('新增节点成功')
        createNodeData.nodeName = ''
        createNodeData.approverId = approverList[0].ID
        createNodeData.nodeDescription = ''
        addDialogShow.value = false
      }
    })
  } else {
    const editData = {
      id: editId.value,
      nodeName: createNodeData.nodeName,
      approverId: createNodeData.approverId,
      nodeDescription: createNodeData.nodeDescription
    }
    putNode(editData).then(res => {
      if (res.code === 0) {
        ElMessage.success('修改成功')
        addDialogShow.value = false
        point.queryNodeList(condition)
      }
    })
  }
}

// 删除节点
const deleteNode = (val) => {
  ElMessageBox.confirm(
    '确定要删除此费用记录吗?',
    '删除记录',
    {
      confirmButtonText: '删除',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      const delId = {
        id: val.ID
      }
      delNode(delId).then(res => {
        if (res.code === 0) {
          ElMessage.success('删除成功')
          point.queryNodeList(condition)
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}

const handleCurrentChange = () => {}

const handleSizeChange = () => {}

</script>

<style scoped>

</style>
