<template>
  <div class="flex flex-col w-full h-full p-4 bg-white rounded-lg shadow-md overflow-hidden">
    <div class="flex items-center justify-between">
      <el-row>
        <el-tree-select
          v-model="searchForm.nodeId"
          :data="peroidList"
          :props="defaultProps"
          :render-after-expand="false"
          :default-expand-all="false"
          check-strictly
          style="width: 400px"
          @change="nodeChange"
        />
        <el-button class="ml-10px" type="primary" @click="handleAddNode">新建节点</el-button>
      </el-row>
      <el-row>
        <el-button type="info" @click="handleShowOkr(searchForm.nodeId)"> 节点详情 </el-button>
        <el-button
          type="warning"
          v-if="currentUserId == searchForm.creatorId"
          @click="handleEditOkr(searchForm.nodeId)"
        >
          修改当前节点
        </el-button>
        <el-button
          type="success"
          v-if="searchForm.executor?.includes(currentUserId)"
          @click="handleUpdateProcess"
          >更新进度</el-button
        >
      </el-row>
    </div>
    <OkrTable ref="okrTableRef" :canEdit="isCurrentLeafNode" />
    <DialogOkr ref="dialogOkr" @edit="handleEditOkr" />
    <DialogOkrInfo ref="dialogOkrInfo" @success="handleSearchPeroid" />
  </div>
</template>

<script setup name="AllTarget">
import OkrTable from './OkrTable.vue'
import DialogOkrInfo from './DialogOkrInfo.vue'
import DialogOkr from './DialogOkr.vue'

import { getAllNodeTree, getAllOkrPage } from '@/api/okr/okr'
import { listToTree, findNode } from '@/utils/tree'
import { useUserStore } from '@/store/modules/user'

const message = useMessage()
const userStore = useUserStore()
const currentUserId = userStore.getUser.id

const defaultProps = {
  value: 'nodeId',
  label: 'nodeName',
  children: 'children'
}

const okrTableRef = ref(null)
const searchForm = ref({
  nodeId: undefined
})

const peroidList = ref([])

handleSearchPeroid()

// 当前是否是叶子节点
// 如果不是叶子节点，则表格数据不可修改
const isCurrentLeafNode = ref(false)

function handleSearchPeroid() {
  getAllNodeTree().then((resp) => {
    if (resp.nodeId) {
      peroidList.value = listToTree(resp?.tree || [], {
        id: 'nodeId',
        pid: 'parentId',
        children: 'children'
      })
      nodeChange(resp.nodeId)
    } else {
      message.warning('请先创建节点数据')
    }
  })
}

function nodeChange(nodeId) {
  if (nodeId) {
    searchForm.value.nodeId = nodeId
    getOkrList()
    const currentNode = findNode(peroidList.value, (node) => {
      return node.nodeId == nodeId
    })
    searchForm.value.creatorId = currentNode.creatorId
    if (!currentNode.children || currentNode.children.length == 0) {
      isCurrentLeafNode.value = true
    } else {
      isCurrentLeafNode.value = false
    }
  }
}

function getOkrList() {
  getAllOkrPage(searchForm.value).then((resp) => {
    const list = resp
    if (list && list.length > 0) {
      nextTick(() => {
        okrTableRef.value.prepareData(list)
      })
    } else {
      // 如果没有数据，清空表格
      okrTableRef.value.prepareData([])
    }
  })
}

const dialogOkrInfo = ref(null)
function handleAddNode() {
  dialogOkrInfo.value.open('create', null)
}

function handleEditOkr(nodeId = undefined) {
  dialogOkr.value.close()
  dialogOkrInfo.value.open('update', nodeId || searchForm.value.nodeId, 2)
}

function handleUpdateProcess() {
  okrTableRef.value.updateProcess(searchForm.value.nodeId).then(() => {
    message.success('更新成功')
    getOkrList()
  })
}

const dialogOkr = ref(null)
function handleShowOkr(id) {
  dialogOkr.value.open({
    nodeId: id,
    canEdit: isCurrentLeafNode.value,
    queryType: 2
  })
}
</script>

<style lang="scss" scoped>
:deep(.el-overlay-dialog) {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
