<template>
  <div>
    <div class="box">
      <el-row>
        <el-col :span="4">
          <el-form>
            <el-form-item label="审批发起人：">
              <el-select
                v-model="peopleSelect"
                placeholder="请选择人员名称"
                clearable
                filterable
                @change="changePeopleSelect"
                @clear="clearPeopleSelect"
              >
                <el-option
                  v-for="item in userList"
                  :key="item.ID"
                  :label="item.nickName"
                  :value="item.ID"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-row style="margin-top: 10px">
        <el-col :span="24">
          <el-table :data="itemApproveList">
            <el-table-column
              label="项目流程名称"
              align="center"
              prop="projectProcessName"
            />
            <el-table-column
              label="流程名称"
              align="center"
              prop="process.processName"
            />
            <el-table-column
              label="流程类型"
              align="center"
              prop="process.processType"
            />
            <el-table-column
              label="当前流程节点"
              align="center"
              prop="node.nodeName"
            />
            <el-table-column
              label="操作"
              align="center"
            >
              <template>
                <el-button
                  type="primary"
                  icon="Memo"
                  text
                >详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { getItemApproveList } from '@/api/process'
import { getAllUsers } from '@/api/user'
// import { ElMessage, ElMessageBox } from 'element-plus'

defineOptions({
  name: 'ApproveList'
})
onMounted(() => {
  queryItemApproveList()
  getUserList()
})

// 查询项目审批列表
const condition = reactive({
  pageInfo: {
    page: 1,
    pageSize: 10,
  },
  userId: 0
})
const itemApproveList = reactive([])
const queryItemApproveList = () => {
  getItemApproveList(condition).then(res => {
    if (res.code === 0) {
      console.log(res.data.list)
      const list = res.data.list
      itemApproveList.length = 0
      itemApproveList.push(...list)
    }
  })
}

// 查询用户列表
const userList = reactive([])
const peopleSelect = ref('')
const getUserList = () => {
  getAllUsers().then(res => {
    if (res.code === 0) {
      userList.length = 0
      userList.push(...res.data)
    }
  })
}
const changePeopleSelect = (val) => {
  userList.forEach(item => {
    if (item.ID === val) {
      peopleSelect.value = item.nickName
      condition.userId = val
      console.log(peopleSelect.value)
    }
  })
}
const clearPeopleSelect = () => {}

</script>

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