<template>
  <div class="choose-deps-page">
    <zPaging ref="zPaging" :show-scrollbar="false">
      <template #top>
        <customNavbar :title="$t('pageTitle.select.department')"></customNavbar>
      </template>
      <div class="choose-deps">
        <div class="w-full pl-[32rpx] pr-[32rpx] overflow-y-auto">
          <div class="pl-[16rpx] pr-[16rpx] pt-[22rpx] pb-[24rpx] bg-[#FFFFFF]">
            <tm-input
              placeholder="请输入…"
              color="#F9F9FD"
              :round="1"
              prefix="tmicon-search"
              prefixColor="#46299D"
              searchBgColor="#F9F9FD"
              focusColor="#F9F9FD"
              v-model="searchVal"
            ></tm-input>
            <div
              v-if="crumbs.length"
              class="w-full overflow-x-auto mt-[22rpx] leading-[48rpx] text-[#2F2F2F] flex items-center no-scrollbar"
              ref="crumbsContainer"
            >
              <div
                v-for="(item, index) in crumbs"
                class="flex items-center text-[28rpx] leading-[48rpx] whitespace-nowrap"
                :class="[
                  index === crumbsIndex ? 'text-[#747474]' : 'text-[#46299D]',
                  index === 0 ? '' : 'ml-[12rpx]',
                ]"
                @click="handleCrumbsClick(index)"
              >
                <div>{{ item.name }}</div>
                <div
                  v-if="index !== crumbs.length - 1"
                  class="ml-[20rpx] flex items-center mb-[2rpx]"
                >
                  <tm-icon
                    name="tmicon-angle-right"
                    :font-size="20"
                    :color="index !== crumbs.length - 1 ? '#7A58DE' : '#C1B4EA'"
                  ></tm-icon>
                </div>
              </div>
            </div>
          </div>
          <div
            class="pl-[32rpx] bg-[#FFFFFF] mt-[20rpx] h-[110rpx] flex items-center"
            @click="() => allCheck(allCheckStatus)"
          >
            <div>
              <checkBox
                :disabled="currentCrumbs?.sons?.length === 0"
                :modelValue="allCheckStatus"
              ></checkBox>
            </div>
            <div class="font-bold text-[28rpx] leading-[54rpx] ml-[20rpx]">
              全选
            </div>
          </div>
          <div
            v-if="currentCrumbs?.sons?.length"
            v-for="item in currentCrumbs?.sons"
            class="pl-[32rpx] bg-[#FFFFFF] mt-[20rpx] h-[110rpx] flex items-center"
          >
            <div class="w-full flex items-center justify-between">
              <div class="flex items-center">
                <div>
                  <checkBox
                    :disabled="!item?.sons?.length"
                    v-model="item.checkStatus"
                    @change="(val) => checkItemChange(item, val)"
                  ></checkBox>
                </div>
                <div class="font-bold text-[28rpx] leading-[54rpx] ml-[20rpx]">
                  {{ item.name }}
                </div>
              </div>
              <div
                v-if="item.sons?.length"
                class="flex items-center mr-[32rpx]"
              >
                <div class="vDivider mr-[32rpx]"></div>
                <div @click="() => toNextLevel(item)" class="flex items-center">
                  <div class="mr-[12rpx]">
                    <tm-image
                      :width="26"
                      :height="26"
                      :src="
                        item.checkStatus !== 'checked' ? downDep : downDepDis
                      "
                    ></tm-image>
                  </div>
                  <div
                    class="text-[28rpx] leading-[54rpx] font-bold"
                    :class="
                      item.checkStatus !== 'checked'
                        ? 'text-[#46299D]'
                        : 'text-[#C1B4EA]'
                    "
                  >
                    下级
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <template #bottom>
        <div class="h-[162rpx] pl-[32rpx] pr-[32rpx] bg-[#FFFFFF]">
          <div class="mt-[14rpx] flex justify-between">
            <div class="flex flex-col">
              <div
                @click="openDrawer"
                class="flex items-center text-[28rpx] leading-[60rpx] text-[#000000] font-bold"
              >
                <div>已选择部门数：</div>
                <div>{{ allCheckedList.length }}</div>
                <div class="ml-[28rpx]">
                  <tm-icon
                    :fontSize="24"
                    color="#46299D"
                    name="tmicon-angle-up"
                  ></tm-icon>
                </div>
              </div>
              <div
                class="text-[24rpx] leading-[24rpx] text-[#7A58DE] w-[280rpx] truncate"
              >
                {{ allCheckedList.map((v) => v.name).toString() }}
              </div>
            </div>
            <div class="btnBox">
              <tm-button
                @click="handleConfirm"
                color="#46299D"
                :disabled="!allCheckedList.length"
                disabledColor="#E6E6E6"
                :margin="[0]"
                :shadow="0"
                :width="264"
                :height="76"
                size="large"
                label="确定"
              ></tm-button>
            </div>
          </div>
        </div>
        <tm-drawer
          placement="bottom"
          v-model:show="showWin"
          :height="800"
          :hideHeader="true"
          :round="5"
        >
          <div
            class="flex flex-col w-full h-full pt-[36rpx] pl-[32rpx] pr-[32rpx] leading-[60rpx]"
          >
            <div
              class="text-[32rpx] font-bold flex items-center justify-between"
            >
              <div class="flex items-center ml-[10rpx]">
                <div>已选择部门数：</div>
                <div>{{ allCheckedList.length }}</div>
              </div>
              <div
                class="text-[#7A58DE] mr-[10rpx]"
                @click="() => (showWin = false)"
              >
                确定
              </div>
            </div>
            <div class="flex-1 pb-[20rpx] overflow-y-auto pt-[30rpx]">
              <div
                v-for="(item, index) in allCheckedList"
                class="flex flex-col"
              >
                <div v-if="index === 0" class="divider"></div>
                <div
                  class="flex items-center justify-between mt-[36rpx] font-bold text-[#000000] leading-[54rpx] mb-[34rpx]"
                >
                  <div class="text-[28rpx] ml-[10rpx]">{{ item.name }}</div>
                  <div class="diyBtn">
                    <tm-button
                      @click="() => deleteNode(item)"
                      :disabled="userDepIds.includes(item.ID)"
                      :margin="[10]"
                      :shadow="0"
                      text
                      size="small"
                      :width="106"
                      :height="50"
                      outlined
                      label="移除"
                    ></tm-button>
                  </div>
                </div>
                <div class="divider"></div>
              </div>
            </div>
          </div>
        </tm-drawer>
      </template>
    </zPaging>
  </div>
</template>
<script setup>
import zPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
import { ref, watch, computed, onMounted, nextTick } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import { useChatList } from '@/store/chatList/index.js'
import { useAuth } from '@/store/auth'
import { useTalkStore, useUserStore } from '@/store'
import { useGroupTypeStore } from '@/store/groupType'
import downDep from '@/static/image/chatList/downDep.png'
import downDepDis from '@/static/image/chatList/downDepDis.png'
import checkBox from '@/components/checkBox/index.vue'
import lodash from 'lodash'

const {
  groupActiveIndex,
  getDepsTreeMy,
  depTreeMyList,
  crumbs,
  crumbsIndex,
  depCheckedKeys,
} = useGroupTypeStore()
const userStore = useUserStore()

const searchVal = ref('')
const crumbsContainer = ref(null)
const showWin = ref(false)

const getAllCheckedNodes = (node, checkedNodes = []) => {
  if (node.checkStatus === 'checked') {
    checkedNodes.push(node)
  }
  if (node.sons && Array.isArray(node.sons)) {
    node.sons.forEach((son) => getAllCheckedNodes(son, checkedNodes))
  }
  return checkedNodes
}

const userDepIds = computed(() => {
  return userStore.deps.map((v) => v.dept_id)
})

const allCheckedList = computed(() => {
  const checkedNodes = []
  depTreeMyList.value.forEach((node) => getAllCheckedNodes(node, checkedNodes))
  console.log('checkedNodes', checkedNodes)

  return checkedNodes
})

const currentCrumbs = computed(() => {
  if (crumbs.value[crumbsIndex.value]) {
    if (searchVal.value && searchVal.value !== '') {
      let filterSons = crumbs.value[crumbsIndex.value].sons.filter((item) =>
        item.name.includes(searchVal.value),
      )
      return {
        ...crumbs.value[crumbsIndex.value],
        sons: filterSons,
      }
    }
    console.log('allCheckedList', crumbs.value[crumbsIndex.value])
    return crumbs.value[crumbsIndex.value]
  }
  return {}
})

const allCheckStatus = computed(() => {
  if (!currentCrumbs.value.sons) {
    return 'noChecked'
  }
  const allChecked = currentCrumbs.value.sons.every(
    (son) => son.checkStatus === 'checked',
  )
  const someChecked = currentCrumbs.value.sons.some(
    (son) => son.checkStatus === 'checked' || son.checkStatus === 'halfChecked',
  )
  if (allChecked) {
    return 'checked'
  } else if (someChecked) {
    return 'halfChecked'
  } else {
    return 'noChecked'
  }
})

const findNodeById = (node, targetId) => {
  if (node.ID === targetId) {
    return node
  }
  if (node.sons && Array.isArray(node.sons)) {
    for (const son of node.sons) {
      const found = findNodeById(son, targetId)
      if (found) {
        return found
      }
    }
  }
  return null
}

const findParentNode = (node, targetId) => {
  if (!node.sons || !Array.isArray(node.sons)) return null
  for (const son of node.sons) {
    if (son.ID === targetId) {
      return node
    }
    const parent = findParentNode(son, targetId)
    if (parent) {
      return parent
    }
  }
  return null
}

// 检查并更新父节点的状态
const updateParentStatus = (node) => {
  const parent = findParentNode(depTreeMyList.value[0], node.ID)
  if (!parent) return
  if (parent.checkStatus !== 'checked') {
    const allChecked =
      parent.sons &&
      Array.isArray(parent.sons) &&
      parent.sons.every((son) => son.checkStatus === 'checked')
    const someChecked =
      parent.sons &&
      Array.isArray(parent.sons) &&
      parent.sons.some(
        (son) =>
          son.checkStatus === 'checked' || son.checkStatus === 'halfChecked',
      )

    if (allChecked) {
      parent.checkStatus = 'halfChecked'
    } else if (someChecked) {
      parent.checkStatus = 'halfChecked'
    } else {
      parent.checkStatus = 'noChecked'
    }
  }

  updateParentStatus(parent)
}
//根据子节点状态更新当前节点状态
const updateNodeStatus = (node) => {
  if (!node.sons || !Array.isArray(node.sons)) return
  const allChecked = node.sons.every((son) => son.checkStatus === 'checked')
  const someChecked = node.sons.some(
    (son) => son.checkStatus === 'checked' || son.checkStatus === 'halfChecked',
  )

  if (allChecked) {
    node.checkStatus = 'halfChecked'
  } else if (someChecked) {
    node.checkStatus = 'halfChecked'
  } else {
    node.checkStatus = 'noChecked'
  }
}

// 更新当前节点及其所有子节点的状态
const updateCheckStatus = (node, status) => {
  node.checkStatus = status
  if (node.sons && Array.isArray(node.sons) && node.sons.length > 0) {
    node.sons.forEach((son) => updateCheckStatus(son, status))
  }
}

const checkItemChange = (item, val) => {
  // 更新当前节点及其子节点的状态
  updateCheckStatus(item, val)

  // 更新父节点的状态
  updateParentStatus(item)
}

const deleteNode = (item) => {
  const treeNode = findNodeById(depTreeMyList.value[0], item.ID)
  if (!treeNode) return
  treeNode.checkStatus = 'noChecked'
  updateNodeStatus(treeNode)
  updateParentStatus(treeNode)
}

const toNextLevel = async (item) => {
  if (item.checkStatus !== 'checked') {
    crumbs.value.push(item)
    crumbsIndex.value++
    await nextTick()
    if (crumbsContainer.value) {
      crumbsContainer.value.scrollLeft = crumbsContainer.value.scrollWidth
    }
  }
}

const handleCrumbsClick = (index) => {
  crumbsIndex.value = index
  crumbs.value = crumbs.value.slice(0, index + 1)
}

const allCheck = (status) => {
  let statusT = 'noChecked'
  if (status === 'checked') {
    statusT = 'noChecked'
  } else {
    statusT = 'checked'
  }
  currentCrumbs.value.sons.forEach((item) => {
    const itemT = findNodeById(depTreeMyList.value[0], item.ID)
    if (!itemT) return
    checkItemChange(itemT, statusT)
  })
}

const openDrawer = () => {
  showWin.value = true
  if (allCheckedList.length > 0) {
  }
}

// watch(() => depTreeMyList.value, (newValue, oldValue) => {
//   console.log("depTreeMyList", newValue);

// }, { deep: true });

// watch(() => searchVal.value, (newValue, oldValue) => {
//   console.log("searchVal", newValue);
// });

const handleConfirm = () => {
  depCheckedKeys.value = lodash.cloneDeep(allCheckedList.value)
  console.log('depCheckedKeys', depCheckedKeys.value)

  uni.navigateBack()
}

const initCheckedKeys = () => {
  depCheckedKeys.value.forEach((item) => {
    const node = findNodeById(depTreeMyList.value[0], item.ID)
    if (node) {
      node.checkStatus = 'checked'
      updateParentStatus(node)
    }
  })
}

const init = async () => {
  crumbsIndex.value = 0
  await getDepsTreeMy()
  crumbs.value = depTreeMyList.value.length ? [depTreeMyList.value[0]] : []
  initCheckedKeys()
}

onMounted(() => {
  init()
})
</script>
<style scoped lang="scss">
::v-deep .zp-paging-container-content {
  height: 100%;
  display: flex;
}
.choose-deps-page {
  .choose-deps {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-image: url('@/static/image/clockIn/z3280@3x.png');
    background-size: cover;
    padding: 20rpx 0;
  }
}

.divider {
  height: 1rpx;
  background-color: #707070;
  opacity: 0.1;
}
.vDivider {
  width: 1rpx;
  height: 48rpx;
  background-color: #b4b4b4;
}

.avatar-placeholder {
  width: 192rpx;
  height: 192rpx;
  background-color: #e0e0e0;
  border-radius: 50%;
  margin-bottom: 40rpx;
}
.groupCard {
  height: 272rpx;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12rpx;
  &.firstPanel {
    background-image: url('@/static/image/chatList/zu6033@2x.png');
  }
  &.secondPanel {
    background-image: url('@/static/image/chatList/zu6031@2x.png');
    margin-top: 28rpx;
    margin-bottom: 28rpx;
  }
  &.thirdPanel {
    background-image: url('@/static/image/chatList/zu6032@2x.png');
  }
  &.activePanel {
    box-shadow: 0 0 0 3rpx #46299d;
  }
}
.btnBox {
  :deep(uni-button[disabled='true']) {
    color: #bebebe !important;
  }
}
.no-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.no-scrollbar::-webkit-scrollbar {
  display: none; /* Chrome, Safari, and Opera */
}
.diyBtn {
  :deep(uni-button) {
    color: #191919 !important;
    border: 1rpx solid #d6d6d8 !important;
    background-color: #ffffff !important;
    &[disabled='true'] {
      color: #bebebe !important;
      border: 1rpx solid #e6e6e6 !important;
      background-color: #e6e6e6 !important;
    }
  }
}
</style>
