<template>
  <div>
    <el-row>
      <el-col
        :span="24"
      >
        <el-form :inline="true">
          <el-form-item label="审批人：">
            <el-select
              v-model="approverValue"
              placeholder="请选择审核人员"
              filterable
              clearable
              @click="changeApprover"
              @clear="clearApprover"
            >
              <el-option
                v-for="item in approverList"
                :key="item.ID"
                :label="item.user.nickName"
                :value="item.ID"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              icon="Search"
              type="primary"
              @click="queryApproverNode"
            >查询</el-button>
          </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">
          <el-table-column
            prop="nodeName"
            label="节点名称"
            align="center"
          />
          <el-table-column
            prop="approver.nickName"
            label="审核人"
            align="center"
          />
          <el-table-column
            prop="nodeOrder"
            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="Memo"
                size="small"
                @click="deleteNode(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-dialog
      v-model="addDialogShow"
      title="新增节点"
    >
      <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.user.nickName"
              :value="item.ID"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="节点顺序：">
          <el-select v-model="createNodeData.nodeOrder">
            <el-option
              v-for="(item,index) in orderList"
              :key="index"
              :label="item"
              :value="item"
            />
          </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 { getApprovePerson } from '@/api/approver'
import { getApproverNode, delNode } from '@/api/node'
import { nodeData } from '@/pinia/node/node'
import { ElMessage, ElMessageBox } from 'element-plus'
import { postNode } from '@/api/node'
defineOptions({
  name: 'NodeManage'
})
onMounted(() => {
  queryApprover()
})
const point = nodeData()
// 按审核人查询节点
const condition = reactive({
  approverId: 0
})
const approverValue = ref('')

const changeApprover = (val) => {
  condition.approverId = val
  approverList.forEach(item => {
    if (item.ID === val) {
      approverValue.value = item.user.nickName
    }
  })
}
const clearApprover = () => {
  condition.approverId = 0
  approverValue.value = ''
}
const queryApproverNode = () => {
  getApproverNode(condition).then(res => {
    if (res.code === 0) {
      console.log(res)
    }
  })
}

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

// 新增节点
const addDialogShow = ref(false)
const orderList = reactive([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20])
const createNodeData = reactive({
  nodeName: '',
  approverId: 0,
  nodeOrder: 0,
  nodeDescription: ''
})
const openAddDialog = () => {
  addDialogShow.value = true
  createNodeData.approverId = approverList[0].ID
  createNodeData.nodeOrder = orderList[0]
}
const createNode = () => {
  postNode(createNodeData).then(res => {
    console.log(res)
    if (res.code === 0) {
      point.queryNodeList()
      ElMessage.success('新增节点成功')
    }
  })
}

// 删除节点
const deleteNode = (val) => {
  console.log(val)
  // ElMessageBox.confirm(
  //   '确定要删除此费用记录吗?',
  //   '删除记录',
  //   {
  //     confirmButtonText: '删除',
  //     cancelButtonText: '取消',
  //     type: 'warning',
  //   }
  // )
  //   .then(() => {})
  //   .catch(() => {
  //     ElMessage({
  //       type: 'info',
  //       message: '取消删除',
  //     })
  //   })
}
</script>

<style scoped>

</style>
