<template>
  <div class="approval-process">
     <!-- 审批意见 -->
     <div class="section" v-if="flowInfo.authorKey !== 'Done'">
      <div class="section-title">审批意见</div>
      <div class="comment-section">
        <van-field
          v-model="approvalComment"
          rows="2"
          autosize
          type="textarea"
          maxlength="200"
          placeholder="请输入审批意见"
          show-word-limit
        />
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="section">
      <div class="section-title">操作</div>

      <div class="button-group">
        <van-button v-for="item in flowInfo.flowButtons"
                     :key="item.buttonId"
                     :type="buttonType(item.buttonId)"
                      size="small"
                     v-show="shouldShowButton(item.buttonId)"
                     @click="handleClick(item)">
            {{buttonName(item.buttonId)}}
        </van-button>
      </div>
    </div>
    <!-- 审批历史 -->
    <div class="section">
      <div class="section-title">审批历史</div>
      <div class="history-section">
        <van-steps direction="vertical" :active="historyList.length">
          <van-step v-for="(item, index) in historyList" :key="index">
            <h3>{{ item.nodename }}</h3>
            <p class="step-content">{{ formatStepTitle(item) }}</p>
            <p class="step-content">{{ formatStepContent(item) }}</p>
            <p v-if="item.comments" class="step-comment">审批意见：{{ item.comments }}</p>
            <p class="step-time">{{ item.actiontime }}</p>
          </van-step>
        </van-steps>
      </div>
    </div>

    <!-- 添加选择对话框 -->
    <van-dialog v-model:show="dialogVisibleUser" title="选择审批人" :show-confirm-button="false" class="approval-dialog">
      <div class="select-container">

        <!-- 选择区域 -->
        <div class="select-main">
          <!-- 部门选择 -->
          <div class="select-section dept-section">
            <div class="section-header">
              <van-icon name="wap-home" />
              <span>按部门选择</span>
            </div>
            <div class="section-content">
              <van-tree-select
                v-model:active-id="deptActiveIds"
                v-model:main-active-index="deptActiveIndex"
                :items="deptItems"
                multiple
                @click-nav="handleDeptNavClick"
                @click-item="handleDeptItemClick"
                style="height: 100%;"
              >
                <template #item="{ item }">
                  <div class="tree-node">
                    <van-icon :name="getIconName(item)" class="node-icon" />
                    <span class="node-text">{{ item.text }}</span>
                    <van-tag v-if="item.selectable" size="small" :type="isSelected(item, 'dept') ? 'success' : 'default'" class="select-tag">
                      {{ isSelected(item, 'dept') ? '已选' : '可选' }}
                    </van-tag>
                  </div>
                </template>
              </van-tree-select>
            </div>
          </div>

          <!-- 岗位选择 -->
          <div class="select-section position-section">
            <div class="section-header">
              <van-icon name="cluster" />
              <span>按岗位选择</span>
            </div>
            <div class="section-content">
              <van-tree-select
                v-model:active-id="positionActiveIds"
                v-model:main-active-index="positionActiveIndex"
                :items="positionItems"
                multiple
                @click-nav="handlePositionNavClick"
                @click-item="handlePositionItemClick"
                style="height: 100%;"
              >
                <template #item="{ item }">
                  <div class="tree-node">
                    <van-icon :name="getIconName(item)" class="node-icon" />
                    <span class="node-text">{{ item.text }}</span>
                    <van-tag v-if="item.selectable" size="small" :type="isSelected(item, 'position') ? 'success' : 'default'" class="select-tag">
                      {{ isSelected(item, 'position') ? '已选' : '可选' }}
                    </van-tag>
                  </div>
                </template>
              </van-tree-select>
            </div>
          </div>
        </div>

        <!-- 已选择列表 -->
        <div class="selected-section">
          <div class="section-header">
            <van-icon name="friends" />
            <span>已选择人员</span>
            <span class="selected-count">({{ selectedUsers.length }})</span>
          </div>
          <div class="selected-content">
            <template v-if="selectedUsers.length">
              <div class="selected-list">
                <div
                  v-for="user in selectedUsers"
                  :key="user.id"
                  class="selected-user"
                >
                  <span class="user-name">{{ user.name }}</span>
                  <van-icon name="cross" class="remove-icon" @click.stop="removeUser(user)" />
                </div>
              </div>
            </template>
            <van-empty v-else description="请从上方选择审批人员" />
          </div>
        </div>

        <!-- 底部按钮 -->
        <div class="dialog-footer">
          <van-button size="small" type="default" @click="dialogVisibleUser = false">取消</van-button>
          <van-button size="small" type="primary" :disabled="!selectedUsers.length" @click="confirmSelect">
            确定 ({{ selectedUsers.length }})
          </van-button>
        </div>
      </div>
    </van-dialog>

    <van-dialog v-model:show="dialogVisibleNode" title="选择节点" :show-confirm-button="false" class="reject-dialog">
      <div class="reject-container">
        <div class="reject-content">
          <van-radio-group v-model="selectedNodeId">
            <van-cell-group>
              <van-cell
                v-for="node in radioNodes"
                :key="node.nodeId"
                :title="node.nodeName"
                clickable
                @click="selectedNodeId = node.nodeId"
              >
                <template #right-icon>
                  <van-radio :name="node.nodeId" />
                </template>
              </van-cell>
            </van-cell-group>
          </van-radio-group>
        </div>
        <div class="dialog-footer">
          <van-button size="small" type="default" @click="dialogVisibleNode = false">取消</van-button>
          <van-button size="small" type="primary" :disabled="!selectedNodeId" @click="confirmReject">
            确定
          </van-button>
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, inject, getCurrentInstance, onMounted } from 'vue'
import { showToast, showDialog, showLoadingToast, showSuccessToast, closeToast } from 'vant'
import type { WorkflowParams } from '@/types/workflow' // 建议将接口定义放在单独的类型文件中
const {
  proxy
} = getCurrentInstance()

interface HistoryItem {
  nodename: string
  actionname: string
  username: string
  actiontime: string
  memo: string
  comments: string
}

interface HistoryData {
  total: number
  records: HistoryItem[]
}

interface TreeItem {
  id: string
  text: string
  children?: TreeItem[]
}

interface WorkflowNode {
  nodeId: string
  nodeName: string
  isSelect?: string
}

defineOptions({
  name: 'ApprovalProcess'
})

const buttonName = (buttonId: string) => {
  switch (buttonId) {
    case 'submit':
      return '同意';
    case 'reject':
      return '退回';
    case 'jumpreject':
      return 'warning';
    case 'jumprejectstart':
      return '驳回';
    case 'stop':
      return '终止';
    case 'move':
      return '转办';
    case 'getback':
      return '拿回';
    default:
      return 'default'; // 或者返回null/undefined，但Element UI的el-button有默认样式
  }
};

// 一个用于根据name返回button type的函数
const buttonType = (buttonId: string) => {
  switch (buttonId) {
    case 'submit':
      return 'success';
    case 'reject':
      return 'default';
    case 'jumpreject':
      return 'warning';
    case 'jumprejectstart':
      return 'warning';
    case 'stop':
      return 'danger';
    case 'move':
      return 'primary';
    case 'getback':
      return 'primary';
    default:
      return 'default'; // 或者返回null/undefined，但Element UI的el-button有默认样式
  }
};
const shouldShowButton = (buttonId: string) => {
  return buttonId === 'submit'
      || buttonId === 'reject'
      // || buttonId === 'jumpreject'
      || buttonId === 'jumprejectstart'
      || buttonId === 'stop'
      || buttonId === 'getback'
      || buttonId === 'move';
};

const flowInfo = ref({})

const openWorkflow = () => {
  var url = 'workflow/task/open'
  var param = {
    workId: workflowParams?.workId,
    trackId: workflowParams?.trackId,
    subjectionId: workflowParams?.subjectionId
  }
  proxy.$axios.post(url, param).then((response:any) => {
    if (response.data.code == '0') {
      flowInfo.value = response.data.data
    } 
  })
}


const historyData = ref<HistoryData>({ total: 0, records: [] })
const approvalComment = ref('')

const historyList = computed(() => {
  return historyData.value.records.sort((a, b) => 
    new Date(b.actiontime).getTime() - new Date(a.actiontime).getTime()
  )
})

function formatStepTitle(item: HistoryItem): string {
  return `${item.username} 在 ${item.nodename} 节点进行了 ${item.actionname} 操作`
}

function formatStepContent(item: HistoryItem): string {
  return `操作内容: ${item.memo}`
}

// 注入工作流参数
const workflowParams = inject<WorkflowParams>('workflowParams')

async function fetchHistoryData() {
  var url = 'workflow/process/history'
  var param = {
    workId: workflowParams?.workId
  }
  proxy.$axios.post(url, param).then((response:any) => {
    if (response.data.code == '0') {
      historyData.value = response.data.data
    } else {
      showToast({
      message: '获取历史记录失败',
      type: 'fail'
    })
    }
  })
}

// 选择对话框相关
const dialogVisibleUser = ref(false)
const deptActiveIds = ref<string[]>([])
const deptActiveIndex = ref(0)
const positionActiveIds = ref<string[]>([])
const positionActiveIndex = ref(0)
const selectedUsers = ref<Array<{ id: string; name: string; type: 'dept' | 'position' }>>([])

// 部门数据
const deptItems = ref<any>([])

// 岗位数据
const positionItems = ref<any>([])

function getIconName(item: any) {
  return item.selectable ? 'contact' : 'cluster'
}

function isSelected(item: any, type: 'dept' | 'position') {
  const activeIds = type === 'dept' ? deptActiveIds.value : positionActiveIds.value
  return item.selectable && activeIds.includes(item.id)
}

function handleDeptNavClick(index: number) {
  deptActiveIndex.value = index
}

function handlePositionNavClick(index: number) {
  positionActiveIndex.value = index
}

function handleDeptItemClick(item: any) {
  handleItemClick(item, 'dept')
}

function handlePositionItemClick(item: any) {
  handleItemClick(item, 'position')
}

function handleItemClick(item: any, type: 'dept' | 'position') {
  if (item.selectable) {
    const user = {
      id: item.id,
      name: item.text,
      type
    }
    
    const activeIds = type === 'dept' ? deptActiveIds : positionActiveIds
    const index = selectedUsers.value.findIndex(u => u.id === item.id)
    
    if (index > -1) {
      selectedUsers.value.splice(index, 1)
      activeIds.value = activeIds.value.filter(id => id !== item.id)
    } else {
      selectedUsers.value.push(user)
      activeIds.value.push(item.id)
    }
  }
}

function removeUser(user: { id: string; name: string; type: 'dept' | 'position' }) {
  selectedUsers.value = selectedUsers.value.filter(u => u.id !== user.id)
  if (user.type === 'dept') {
    deptActiveIds.value = deptActiveIds.value.filter(id => id !== user.id)
  } else {
    positionActiveIds.value = positionActiveIds.value.filter(id => id !== user.id)
  }
}


function confirmSelect() {
  if (selectedUsers.value.length === 0) {
    showToast('请选择审批人')
    return
  }
  handleConfirmSubmit(nextNodeName.value)
  dialogVisibleUser.value = false
}

const selectedNodeId = ref('')

function confirmReject() {
  if (!selectedNodeId.value) {
    showToast('请选择节点')
    return
  }
  
  const selectedNode:any = radioNodes.value.find(node => node.nodeId === selectedNodeId.value)

  selectedNode.isSelect = "true"
  nextNodeList.value = []
  nextNodeList.value.push(selectedNode)
  console.log(nextNodeList.value)
  handlePreSubmit()

  dialogVisibleNode.value = false
  selectedNodeId.value = ''
}

// 转办相关
const showTransferLoading = ref(false)

function onTransfer() {
  showDialog({
    title: '转办提示',
    message: '确定要转办该审批吗？',
    showCancelButton: true,
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  })
    .then(() => {
      // 显示加载进度条
      showTransferLoading.value = true
      showLoadingToast({
        message: '转办中...',
        duration: 0,
        forbidClick: true
      })

      // 模拟转办过程
      setTimeout(() => {
        showTransferLoading.value = false
        closeToast()
        showSuccessToast('转办成功')
      }, 2000)
    })
    .catch(() => {
      // 取消转办
    })
}

const handleClick = (item: any) => {
  console.log(item['buttonId'])
  console.log(item['buttonName'])
  if (item['buttonId'] === 'submit') {
   handlePreSubmit()
    // handleSubmit()
  } else if (item['buttonId'] === 'reject') {
    handleReject()
  } else if (item['buttonId'] === 'jumprejectstart') {
    handleJumpRejectStart()
  } else if (item['buttonId'] === 'getback') {
    handleGetBack()
  }

}

const nextNodeName = ref('')

const nextNodeList = ref<any>([])

const postIds = ref('')

const deptIds = ref('')


const getUserByPost = (postId: string, postName: string) => {
  var url = 'framework/SysUserPost/queryByPostId'
  var param = {
    postId: postId
  }
  proxy.$axios.get(url, param).then((response:any) => {
    const children = [] as any
    response.data.data.forEach((item:any) => {
      if(item !== null && item.user !== null){
        console.log('item')
        console.log(item)
        children.push({
        text: item.user.userDesc,
        id: item.user.id,
        selectable: true
      })
      }
    })
    positionItems.value.push({
      text: postName,
      children: children
    })
  });
}

const getDataPost = () => {
  var url = 'framework/SysPost/queryByIds'
  var param = {
    page: 1,
    rows: 40,
    ids: postIds.value
  }
  proxy.$axios.get(url, param).then((response:any) => {
    if (response.data.code == '0') {
      if (response.data.code == '0') {
         response.data.data.forEach((item:any) => {
          getUserByPost(item.id, item.postName)
         })
      }
    }
  });
}


const expandedKeys = ref<any>([])
const dataTree = ref<any>([])



const getUserByDept = (deptId: string, deptName: string) => {
  var url = 'framework/SysUserDept/queryByDeptId'
  var param = {
    deptId: deptId
  }
  proxy.$axios.get(url, param).then((response:any) => {
    const children = [] as any
    response.data.data.forEach((item:any) => {
      if(item !== null && item.user !== null){
        children.push({
        text: item.user.userDesc,
        id: item.user.id,
        selectable: true
      })
      }

    })
    deptItems.value.push({
      text: deptName,
      children: children
    })
  })
}

const getDataDeptTree = () => {
  if(deptIds.value === ''){
    var url = 'framework/SysDepartment/queryTree'
    var param = {}
    proxy.$axios.get(url, param).then((response:any) => {
      dataTree.value = response.data.data
      
      if (dataTree.value.length === 1) {
        for (var node of dataTree.value) {
          expandedKeys.value.push(node.id)
        }
        console.log(dataTree.value)
      }
    });
  }else{
    var url = 'framework/SysDepartment/queryByIds'
    const param = {
      ids: deptIds.value
    }
    deptItems.value = []
    proxy.$axios.get(url, param).then((response:any) => {
      if (response.data.code == '0') {
         response.data.data.forEach((item:any) => {
          getUserByDept(item.id, item.deptName)
         })
      }
    });
  }
}
const dialogVisibleNode = ref(false)
const radioNodes = ref<WorkflowNode[]>([])

const handlePreSubmit = () => {
  // if (!approvalComment.value) {
  //   showToast('请填写审批意见')
  //   return
  // }
  var url = 'workflow/task/submit'
  var param = {
    workId: workflowParams?.workId,
    trackId: workflowParams?.trackId,
    subjectionId: workflowParams?.subjectionId,
    comment: approvalComment.value,
    nextNodes: JSON.stringify(nextNodeList.value),
  }

  proxy.$axios.post(url, param).then((response:any) => {
    if (response.data.code == 0) {

      console.log(response.data.data)
      var status = response.data.data.status

      // 选人
      if (status === 4) {
        var nextNodes = response.data.data.nextNodes;
        // 后续就只有一个节点，不需要选择节点
        if (nextNodes && nextNodes.length === 1) {
          if ((nextNodes[0].authors.Author && nextNodes[0].authors.Author.initAuthor)
              || (nextNodes[0].authors.Author && nextNodes[0].authors.Author.selectAuthor === undefined)) {

            var positions = undefined
            var depts = undefined
            var others = undefined
            if (nextNodes[0].authors.Author.initAuthor) {
              positions = nextNodes[0].authors.Author.initAuthor.positions
              depts = nextNodes[0].authors.Author.initAuthor.depts
              others = nextNodes[0].authors.Author.initAuthor.others
              // 岗位
              if (positions) {
                postIds.value = ''
                for (let i = 0; i < positions.length; i++) {
                  postIds.value += positions[i].id + ','
                }
                console.log('positions:' + postIds.value)
                getDataPost();
              }

              // 部门
              if (depts) {
                deptIds.value = ''
                for (let i = 0; i < depts.length; i++) {
                  deptIds.value += depts[i].id + ','
                }
                console.log('depts:' + deptIds.value)
                getDataDeptTree();
              }

              // 单人
              // if (others) {
              //   userIds.value = ''
              //   for(let i = 0; i < others.length; i++) {
              //     userIds.value += others[i].id + ','
              //   }
              //   console.log('users:' + userIds.value)
              //   getUserPost();
              // }
            }

            if (nextNodes[0].authors.Author.initAuthor === undefined
                && nextNodes[0].authors.Author.selectAuthor === undefined) {
              getDataPost();
              getDataDeptTree();
            }

            // 打开弹出框
            dialogVisibleUser.value = true
            nextNodeList.value = nextNodes;
            nextNodeName.value = nextNodes[0].nodeName
          }
          // 不选人
          else {
            console.log('不选人')
            console.log(nextNodes[0].nodeName)
            handleConfirmSubmit(nextNodes[0].nodeName);
          }
        }
        // 后续多个节点，需要选择节点、给多节点赋值用户
        else if (nextNodes && nextNodes.length > 1) {
          console.log('后续多个节点，需要选择节点、给多节点赋值用户')
        }
        // 没有后续节点
        else {
          console.log('没有后续节点')
        }
      }
      // 选节点
      else if (status === 2) {
        radioNodes.value = response.data.data.nextNodes
        dialogVisibleNode.value = true
      }
      // 执行成功
      else if (status === 0) {
        showToast('操作成功，流程已通过')
      }
    } else {
      showToast('操作失败')
    }
  });
}

const handleConfirmSubmit = (nodeName: string) => {

  showDialog({
    title: '办理提示',
    message: '确定通过?下一节点:' + nodeName,
    showCancelButton: true,
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  })
    .then(() => {
      // 显示加载进度条
      showTransferLoading.value = true
      showLoadingToast({
        message: '办理中...',
        duration: 0,
        forbidClick: true
      })
      var url = 'workflow/task/confirmSubmit'

      if (selectedUsers.value.length > 0) {
        var selectAuthor = ''
        var selectAuthorName = ''
        for (let i = 0; i < selectedUsers.value.length; i++) {
          selectAuthor = selectAuthor + selectedUsers.value[i].id + ';'
          selectAuthorName = selectAuthorName + selectedUsers.value[i].name + ';'
        }
        var author = {
          "authorId": "Author",
          "authorName": "主办",
          "selectType": "radio",
          "isFree": "true",
          "isUser": "false",
          "isDefUser": "false",
          "isSelect": "true",
          "selectAuthor": selectAuthor,
          "selectAuthorName": selectAuthorName,
          "required": null,
          "initAuthor": null
        }
        nextNodeList.value[0].authors.Author = author;
      }

      var param = {
        workId: workflowParams?.workId,
        trackId: workflowParams?.trackId,
        subjectionId: workflowParams?.subjectionId,
        comment: approvalComment.value,
        nextNodes: JSON.stringify(nextNodeList.value),
      }

      console.log('param' + JSON.stringify(param))

      proxy.$axios.post(url, param).then((response:any) => {
        if (response.data.code == 0) {
          console.log(response.data)
          showToast('操作成功，流程已通过')
          fetchHistoryData()
          openWorkflow()
        } else {
          showToast('操作失败' + response.data.msg)
        }
      });
    })
    .catch(() => {
      showToast('已取消')
    })
}

const handleReject = () => {

  // if (!approvalComment.value) {
  //   showToast('请填写审批意见')
  //   return
  // }

  showDialog({
    title: '办理提示',
    message: '确定退回?',
    showCancelButton: true,
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  }).then(() => {
    var url = 'workflow/task/reject'
    var param = {
      workId: workflowParams?.workId,
      trackId: workflowParams?.trackId,
      subjectionId: workflowParams?.subjectionId,
      comment: approvalComment.value
    }
    proxy.$axios.post(url, param).then((response:any) => {
      if (response.data.code == 0) {
        showToast('操作成功，流程已退回')
        fetchHistoryData()
        openWorkflow()     
       } else {
        showToast('操作失败' + response.data.msg)
      }
    });
  }).catch(() => {
    showToast('已取消')
  })
}

const handleGetBack = () => {
  showDialog({
    title: '办理提示',
    message: '确定拿回?',
    showCancelButton: true,
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  }).then(() => {
    var url = 'workflow/task/getBack'
    var param = {
      workId: workflowParams?.workId,
      trackId: workflowParams?.trackId,
      subjectionId: workflowParams?.subjectionId
    }
    proxy.$axios.post(url, param).then((response:any) => {
      if (response.data.code == 0) {
        showToast('操作成功，流程已拿回')
        fetchHistoryData()
        openWorkflow()
      } else {
        showToast('操作失败，流程已审批，不允许拿回')
      }
    });
  }).catch(() => {
    showToast('已取消')
  })
}

const handleJumpRejectStart = () => {
  showDialog({
    title: '办理提示',
    message: '确定退回?',
    showCancelButton: true,
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  }).then(() => {
    var url = 'workflow/task/jumpRejectStart'
    var param = {
      workId: workflowParams?.workId,
      trackId: workflowParams?.trackId,
      subjectionId: workflowParams?.subjectionId,
      comment: approvalComment.value
    }
    proxy.$axios.post(url, param).then((response:any) => {
      if (response.data.code == 0) {
        showToast('操作成功，流程已退回到提交人')
        fetchHistoryData()
        openWorkflow()
      } else {
        showToast('操作失败' + response.data.msg)
      }
    });
  }).catch(() => {
    showToast('已取消')
  })
}

onMounted(() => {
  fetchHistoryData()
  openWorkflow()
})

</script>

<style lang="scss" scoped>
.approval-process {
  padding: 16px;
  
  .section {
    margin-bottom: 24px;
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    
    .section-title {
      font-size: 16px;
      font-weight: 600;
      color: #323233;
      margin-bottom: 16px;
      padding-left: 8px;
      border-left: 4px solid #1989fa;
    }
  }

  .button-group {
    display: flex;
    gap: 16px;
    //justify-content: center;
    margin-top: 16px;

    .van-button {
      &--loading {
        opacity: 0.8;
      }
    }
  }
}

:deep(.van-step) {
  h3 {
    margin: 0;
    font-size: 15px;
    color: #323233;
    font-weight: normal;
  }
  
  p {
    margin: 4px 0;
    font-size: 13px;
    
    &.step-content {
      color: #666;
    }
    
    &.step-comment {
      color: #1989fa;
    }
    
    &.step-time {
      color: #999;
      font-size: 12px;
      margin-top: 8px;
    }
  }
}

.approval-dialog {
  :deep(.van-dialog) {
    max-width: 800px;
    width: 90%;
    overflow: hidden;
  }
}

.select-container {
  display: flex;
  flex-direction: column;
  height: 90vh;
  max-height: 800px;
}

.search-bar {
  padding: 8px 12px;
  border-bottom: 1px solid #ebedf0;
}

.select-main {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  height: 70%;
  position: relative;
  z-index: 2;

  .select-section {
    height: 50%;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #ebedf0;
    background: #fff;

    &:last-child {
      border-bottom: none;
    }

    .section-content {
      flex: 1;
      overflow: hidden;
      background: #fff;
    }

    :deep(.van-tree-select) {
      height: 100%;
      background: #fff;
      
      .van-tree-select__nav {
        flex: none;
        width: 120px;
        overflow-y: auto;
        border-right: 1px solid #ebedf0;
      }
      
      .van-tree-select__content {
        flex: 1;
        overflow-y: auto;
        height: 100%;
      }
    }
  }
}

.section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #323233;
  background: #f7f8fa;
  border-bottom: 1px solid #ebedf0;

  span {
    font-weight: 600;
  }

  .van-icon {
    font-size: 16px;
    color: #1989fa;
  }

  .selected-count {
    margin-left: 4px;
    color: #1989fa;
    font-weight: normal;
  }
}

.tree-node {
  display: flex;
  align-items: center;
  padding: 4px 0;
  min-height: 24px;
  width: 100%;

  .node-icon {
    flex-shrink: 0;
    font-size: 14px;
    color: #969799;
    margin-right: 6px;
  }

  .node-text {
    flex: 1;
    font-size: 13px;
    font-weight: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .select-tag {
    flex-shrink: 0;
    transform: scale(0.9);
    transform-origin: right center;
    margin-left: 4px;
  }
}

.selected-user {
  margin: 0px;
  padding: 4px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.3s;

  &:hover {
    background: #f7f8fa;
  }

  .user-tag {
    margin-left: 8px;
  }
}

.selected-section {
  height: 20%;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  background: #f7f8fa;
  border-top: 1px solid #ebedf0;
  border-bottom: 1px solid #ebedf0;
  position: relative;
  z-index: 1;
}

.dialog-footer {
  height: 10%;
  min-height: 60px;
  padding: 12px 16px;
  border-top: 1px solid #ebedf0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  background: #fff;
}

.selected-content {
  flex: 1;
  padding: 12px;
  overflow-x: auto;
}

.selected-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  padding-bottom: 4px;
}

.selected-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #fff;
  border-radius: 20px;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
  flex-shrink: 0;

  &:hover {
    background: #f7f8fa;
  }

  .user-icon {
    font-size: 16px;
    color: #1989fa;
  }

  .user-name {
    font-size: 12px;
    color: #323233;
  }

  .user-tag {
    font-size: 10px;
    padding: 0 4px;
  }

  .remove-icon {
    font-size: 14px;
    color: #969799;
    padding: 2px;
    cursor: pointer;

    &:hover {
      color: #ee0a24;
    }
  }
}

:deep(.van-empty) {
  padding: 20px 0;
  
  .van-empty__image {
    width: 48px;
    height: 48px;
  }
  
  .van-empty__description {
    font-size: 13px;
    color: #969799;
    margin-top: 8px;
  }
}

.reject-dialog {
  :deep(.van-dialog) {
    max-width: 600px;
    width: 90%;
  }
}

.reject-container {
  display: flex;
  flex-direction: column;
  height: 400px;
}

.reject-content {
  flex: 1;
  overflow-y: auto;
  
  :deep(.van-cell) {
    align-items: center;
    padding: 16px;
    
    &:active {
      background-color: #f7f8fa;
    }
    
    .van-cell__title {
      font-size: 14px;
    }
    
    .van-radio {
      margin-left: 8px;
    }
  }
}

:deep(.van-tree-select) {
  .van-tree-select__nav {
    .van-tree-select__nav-item {
      font-weight: normal;
    }
  }
  
  .van-tree-select__content {
    .van-tree-select__item {
      font-weight: normal;
    }
  }
}
</style>