<script setup lang="ts">
import type { CascadeOption } from '@af-mobile-client-vue3/components/data/XAddressCascadePicker/index.vue'
import XAddressCascadePicker from '@af-mobile-client-vue3/components/data/XAddressCascadePicker/index.vue'
import XCellList from '@af-mobile-client-vue3/components/data/XCellList/index.vue'
import NormalDataLayout from '@af-mobile-client-vue3/components/layout/NormalDataLayout/index.vue'
import { showToast } from 'vant'
import { ref } from 'vue'
import { useRouter } from 'vue-router'

// 定义事件
const emit = defineEmits(['deleteRow', 'addressSelected'])
// 访问路由
const router = useRouter()
// 获取默认值
// const idKey = ref('o_id')

// 简易crud表单测试
const configName = ref('ceshiCRUD')
const serviceName = ref('af-safecheck')
const showAddressPicker = ref(false)

const communityOptions = ref<CascadeOption[]>([
  { id: 'c1', label: '阳光花园阳光花园阳光花园阳光花园阳光花园阳光花园阳光花园', sub_text: '2栋', children: [
    { id: 'b11', label: '11号楼', status_text: '入户', status_type: '#16a34a', children: [
      { id: 'u111', label: '11单元', children: [
        { id: 'u111-h-101', label: '1011室', code: '111222333444555', status_text: '测试', status_type: '#6b7280', is_leaf: true },
        { id: 'u111-h-102', label: '1021室', code: '111', status_text: '入户', status_type: '#16a34a', is_leaf: true },
        { id: 'u111-h-103', label: '1031室', code: '111', status_text: '未检', status_type: '#6b7280', is_leaf: true },
        { id: 'u111-h-104', label: '1041室', code: '111', status_text: '未检', status_type: '#6b7280', is_leaf: true },
      ] },
    ] },
  ] },
  { id: 'c2', label: '金色家园', sub_text: '1栋' },
  { id: 'c3', label: '阳光商业广场', sub_text: '4栋' },
  { id: 'c4', label: '工业园A区', sub_text: '2栋' },
  { id: 'c5', label: '建材市场', sub_text: '1栋' },
])

const buildingMap: Record<string, CascadeOption[]> = {
  c1: [{ id: 'b11', label: '1号楼' }, { id: 'b12', label: '2号楼' }],
  c2: [{ id: 'b21', label: '1号楼' }],
  c3: [{ id: 'b31', label: 'A栋' }, { id: 'b32', label: 'B栋' }],
  c4: [{ id: 'b41', label: '1号楼' }, { id: 'b42', label: '2号楼' }, { id: 'b43', label: '3号楼' }],
  c5: [{ id: 'b51', label: '1号楼' }],
}

function buildHouseLeafList(unitId: string): CascadeOption[] {
  return Array.from({ length: 8 }).map((_, index) => {
    const roomNo = 101 + index
    return {
      id: `${unitId}-h-${roomNo}`,
      label: String(roomNo),
      is_leaf: true,
      code: `U${String(index + 1).padStart(3, '0')}`,
      status_text: index % 2 === 0 ? '入户' : '未检',
      status_type: index % 2 === 0 ? '#16a34a' : '#6b7280',
    }
  })
}

const unitWithFloorAndHouseMap: Record<string, CascadeOption[]> = {
  b11: [
    { id: 'u111', label: '1单元', children: buildHouseLeafList('u111') },
    { id: 'u112', label: '2单元', children: buildHouseLeafList('u112') },
  ],
  b12: [
    { id: 'u121', label: '1单元', children: buildHouseLeafList('u121') },
  ],
  b21: [
    { id: 'u211', label: '1单元', children: buildHouseLeafList('u211') },
  ],
  b31: [
    { id: 'u311', label: '1单元', children: buildHouseLeafList('u311') },
    { id: 'u312', label: '2单元', children: buildHouseLeafList('u312') },
  ],
  b32: [
    { id: 'u321', label: '1单元', children: buildHouseLeafList('u321') },
  ],
  b41: [
    { id: 'u411', label: '1单元', children: buildHouseLeafList('u411') },
  ],
  b42: [
    { id: 'u421', label: '1单元', children: buildHouseLeafList('u421') },
    { id: 'u422', label: '2单元', children: buildHouseLeafList('u422') },
  ],
  b43: [
    { id: 'u431', label: '1单元', children: buildHouseLeafList('u431') },
  ],
  b51: [
    { id: 'u511', label: '1单元', children: buildHouseLeafList('u511') },
  ],
}

async function loadAddressChildren(node: CascadeOption, _path: CascadeOption[], levelIndex: number): Promise<CascadeOption[]> {
  if (levelIndex === 0) {
    return buildingMap[String(node.id)] || []
  }

  if (levelIndex === 1) {
    return unitWithFloorAndHouseMap[String(node.id)] || []
  }

  return []
}

function selectAddress() {
  showAddressPicker.value = true
}

function handleAddressConfirm(payload: { leaf: CascadeOption, path: CascadeOption[] }) {
  console.log('>>>> payload: ', JSON.stringify(payload))
  const pathLabel = payload.path.map(item => item.label).join(' / ')
  showToast(`已选择：${pathLabel}`)
}
</script>

<template>
  <NormalDataLayout id="XCellListView" title="工作计划">
    <template #layout_content>
      <XCellList
        :config-name="configName"
        :service-name="serviceName"
        @select-address="selectAddress"
      />
      <XAddressCascadePicker
        v-model="showAddressPicker"
        title="地址选择"
        :root-options="communityOptions"
        :load-children="loadAddressChildren"
        :expanded-level-indexes="[2]"
        :preserve-last-state-on-confirm="true"
        @confirm="handleAddressConfirm"
      />
    </template>
  </NormalDataLayout>
</template>

<style scoped lang="less">
</style>
