<template>
  <a-form :model="contractData" layout="vertical">
    <a-row :gutter="16">
      <a-col :span="12">
        <a-form-item field="code" label="合同编号">
          <a-input v-model="contractData.code" />
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item field="projectName" label="项目">
          <a-input v-model="contractData.projectName" placeholder="请输入项目名称" allow-clear />
        </a-form-item>
      </a-col>
    </a-row>

    <a-row :gutter="16">
      <a-col :span="12">
        <a-form-item field="customer" label="客户名称">
          <a-input v-model="contractData.customer" />
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item field="amount" label="合同金额">
          <a-input-number v-model="contractData.amount" style="width: 100%" />
        </a-form-item>
      </a-col>
    </a-row>

    <a-row :gutter="16">
      <a-col :span="12">
        <a-form-item field="accountNumber" label="收款账号">
          <a-input v-model="contractData.accountNumber" />
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item field="contractStatus" label="合同状态">
          <a-select v-model="contractData.contractStatus">
            <a-option value="未执行">未执行</a-option>
            <a-option value="执行中">执行中</a-option>
            <a-option value="验收中">验收中</a-option>
            <a-option value="结算中">结算中</a-option>
            <a-option value="已结算">已结算</a-option>
            <a-option value="已终止">已终止</a-option>
          </a-select>
        </a-form-item>
      </a-col>
    </a-row>

    <a-row :gutter="16">
      <a-col :span="12">
        <a-form-item field="signDate" label="签订日期">
          <a-date-picker v-model="contractData.signDate" style="width: 100%" />
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item field="performanceDeadline" label="履约期限">
          <a-date-picker v-model="contractData.performanceDeadline" style="width: 100%" />
        </a-form-item>
      </a-col>
    </a-row>

    <a-row :gutter="16">
      <a-col :span="12">
        <a-form-item field="paymentDate" label="付款日期">
          <a-date-picker v-model="contractData.paymentDate" style="width: 100%" />
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item field="departmentId" label="销售部门">
          <a-tree-select v-model="contractData.departmentId"
                         :data="deptTree"
                         :loading="deptLoading"
                         placeholder="请选择部门"
                         allow-search allow-clear
                         @dropdown-visible-change="handleDeptDropdown"
                         @focus="handleDeptFocus"
          />
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item field="salespersonId" label="销售人员">
          <a-select v-model="contractData.salespersonId"
                    :options="userOptions"
                    :loading="userLoading"
                    :virtual-list-props="userVirtualListProps"
                    placeholder="请选择业务员"
                    allow-search allow-clear
                    @dropdown-visible-change="handleUserDropdown"
                    @search="handleUserSearch" />
        </a-form-item>
      </a-col>
    </a-row>


    <a-form-item field="productService" label="产品或服务">
      <a-input v-model="contractData.productService" />
    </a-form-item>

    <a-form-item field="paymentAddress" label="付款地址">
      <a-input v-model="contractData.paymentAddress" />
    </a-form-item>

    <a-form-item field="notes" label="备注">
      <a-textarea v-model="contractData.notes" />
    </a-form-item>

    <a-form-item field="contractText" label="合同内容">
      <a-textarea v-model="contractData.contractText" />
    </a-form-item>
  </a-form>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { Message } from '@arco-design/web-vue'
import { listProject, type ProjectResp } from '@/apis/project'
import { getDeptTree } from '@/apis/system/dept'
import { listUser } from '@/apis/system/user'
import type { ContractItem } from './index.vue'

const props = defineProps<{
  contractData: ContractItem
}>()

const emit = defineEmits<{
  (e: 'update:contractData', data: ContractItem): void
}>()

const contractData = ref({ ...props.contractData })

// 项目选项与加载（支持无限滚动）
const projectOptions = ref<{ label: string; value: string }[]>([])
const projectLoading = ref(false)
const projPage = ref(1)
const pageSize = 20
const hasMore = ref(true)
const currentKeyword = ref('')
let searchTimer: number | undefined

const appendProjects = (list: ProjectResp[]) => {
  const items = list.map(p => ({ label: p.projectName, value: String((p as any).projectId ?? (p as any).id) }))
  projectOptions.value = projectOptions.value.concat(items)
}

const extractList = (data: any): ProjectResp[] => {
  if (Array.isArray(data)) return data as ProjectResp[]
  if (Array.isArray(data?.list)) return data.list as ProjectResp[]
  if (Array.isArray(data?.rows)) return data.rows as ProjectResp[]
  return []
}

const loadProjects = async (keyword = currentKeyword.value, reset = false) => {
  try {
    if (reset) {
      projPage.value = 1
      hasMore.value = true
      projectOptions.value = []
    }
    if (!hasMore.value) return
    projectLoading.value = true
    const resp = await listProject({ page: projPage.value, size: pageSize, projectName: keyword } as any)
    const list = extractList((resp as any).data)
    appendProjects(list)
    if (list.length < pageSize) hasMore.value = false
    projPage.value += 1
  } catch (e) {
    Message.error('获取项目列表失败')
    hasMore.value = false
  } finally {
    projectLoading.value = false
  }
}

const virtualListProps = {
  height: 240,
  onReachBottom: () => {
    if (hasMore.value && !projectLoading.value) loadProjects()
  },
}

const handleProjectFocus = () => {
  if (projectOptions.value.length === 0) loadProjects('', true)
}
const handleProjectDropdown = (visible: boolean) => {
  if (visible && projectOptions.value.length === 0) loadProjects('', true)
}
const handleProjectSearch = (val: string) => {
  if (searchTimer) window.clearTimeout(searchTimer)
  currentKeyword.value = val || ''
  searchTimer = window.setTimeout(() => loadProjects(currentKeyword.value, true), 300)
}

// 部门树
const deptTree = ref([] as any[])
const deptLoading = ref(false)
const loadDept = async () => {
  try {
    deptLoading.value = true
    const res = await getDeptTree()
    const data = (res as any).data || []
    const toTree = (arr: any[]): any[] => arr.map(i => ({
      key: String(i.deptId),
      title: i.deptName,
      value: String(i.deptId),
      children: Array.isArray(i.children) ? toTree(i.children) : [],
    }))
    deptTree.value = toTree(Array.isArray(data) ? data : (data.list || data.rows || []))
  } finally {
    deptLoading.value = false
  }
}
const handleDeptDropdown = (visible: boolean) => { if (visible && deptTree.value.length === 0) loadDept() }
const handleDeptFocus = () => { if (deptTree.value.length === 0) loadDept() }

// 用户列表（分页 + 搜索 + 无限滚动）
const userOptions = ref<{ label: string; value: string }[]>([])
const userLoading = ref(false)
const userPage = ref(1)
const userHasMore = ref(true)
const userPageSize = 20
const userKeyword = ref('')

const appendUsers = (rows: any[]) => {
  userOptions.value = userOptions.value.concat(
    rows.map(u => ({ label: u.name || u.nickname || u.username, value: String(u.userId || u.id) }))
  )
}
const extractUsers = (data: any): any[] => {
  if (Array.isArray(data)) return data
  if (Array.isArray(data?.rows)) return data.rows
  if (Array.isArray(data?.list)) return data.list
  return []
}
const loadUsers = async (reset = false) => {
  try {
    if (reset) { userOptions.value = []; userPage.value = 1; userHasMore.value = true }
    if (!userHasMore.value) return
    userLoading.value = true
    const resp = await listUser({ page: userPage.value, pageSize: userPageSize, name: userKeyword.value } as any)
    const rows = extractUsers((resp as any).data)
    appendUsers(rows)
    if (rows.length < userPageSize) userHasMore.value = false
    userPage.value += 1
  } finally {
    userLoading.value = false
  }
}
const userVirtualListProps = {
  height: 240,
  onReachBottom: () => { if (userHasMore.value && !userLoading.value) loadUsers() }
}
const handleUserDropdown = (visible: boolean) => { if (visible && userOptions.value.length === 0) { userKeyword.value=''; loadUsers(true) } }
const handleUserSearch = (val: string) => {
  if (searchTimer) window.clearTimeout(searchTimer)
  userKeyword.value = val || ''
  searchTimer = window.setTimeout(() => loadUsers(true), 300)
}

// 监听props变化更新内部数据
watch(
  () => props.contractData,
  (newVal) => {
    if (newVal) {
      contractData.value = { ...newVal }
    }
  },
  { immediate: true },
)

// 监听内部数据变化并触发更新事件
watch(
  contractData,
  (newVal) => {
    emit('update:contractData', newVal)
  },
  { deep: true },
)
</script>
