<route lang="json">
{
  "style": {
    "navigationBarTitleText": "个人信息",
    "navigationBarBackgroundColor": "#ffffff"
  }
}
</route>
<script setup lang="ts">
import {
  getDesignerBasicInfo,
  getDesignerExtraEvents,
  getDesignerFamilyInfo,
  saveDesignerFamilyInfo,
} from '../../../../core/libs/agent-requests'
import { messages } from '../../../../core/libs/messages'
import { omit } from 'radash'
import BottomAppBar from '@/components/bottom-app-bar.vue'
import { renders } from '../../../../core/libs/renders'
import DataRender from '@/components/data-render.vue'
import PageHelperEvo from '@/components/page-helper-evo.vue'
import { DataFormSchema } from '../../../../components/data-form'
import { DesignerFamilyInfo } from '@designer-hub/app/src/core/libs/models'
import DataForm from '@/components/data-form.vue'
import { requestToast } from '@designer-hub/app/src/core/utils/common'
import { ComponentExposed } from 'vue-component-type-helpers'

const tab = ref('basic')
// 基础信息 家庭信息 奖项信息 销售信息 游学/活动信息
const tabs = [
  { label: '基础信息', value: 'basic' },
  { label: '家庭信息', value: 'family' },
  { label: '奖项信息', value: 'award' },
  { label: '销售信息', value: 'sale' },
  { label: '游学/活动信息', value: 'activity' },
  { label: '其他活动信息', value: 'events' },
]
const id = ref()
const { data: basicData, run: setBasicData } = useRequest(() => getDesignerBasicInfo(id.value))
const query = computed(() => ({ userId: id.value }))
const eventsQuery = computed(() => ({ type: '3' }))
const actionSheetStatus = ref(false)
const schema = ref<DataFormSchema>()
const formData = ref({})
const submitType = ref<'family'>()
const familyPageRef = ref<ComponentExposed<typeof PageHelperEvo>>()
// const {} = useRequest()
const handleEditBasicInfo = async () => {
  await uni.navigateTo({ url: `/pages/designer/archives/basic-info/index?id=${id.value}` })
}
const handleAddFamilyInfo = async () => {
  submitType.value = 'family'
  const familySchema: DataFormSchema<Omit<DesignerFamilyInfo, 'userId' | 'createTime' | 'id'>> = {
    familyRelation: {
      type: 'TextField',
      label: messages.objects.designerFamilyInfo.familyRelation,
    },
    familyName: {
      type: 'TextField',
      label: messages.objects.designerFamilyInfo.familyName,
    },
    familySex: {
      type: 'Radio',
      label: messages.objects.designerFamilyInfo.familySex,
      props: {
        columns: [
          { label: '男', value: '1' },
          { label: '女', value: '2' },
        ],
      },
    },
    familyBirthday: {
      type: 'TextField',
      label: messages.objects.designerFamilyInfo.familyBirthday,
    },
    familyInterset: {
      type: 'TextField',
      label: messages.objects.designerFamilyInfo.familyInterset,
    },
    familyOccupation: {
      type: 'TextField',
      label: messages.objects.designerFamilyInfo.familyOccupation,
    },
  }
  schema.value = familySchema
  actionSheetStatus.value = true
}
const handleSubmit = async () => {
  switch (submitType.value) {
    case 'family': {
      const { code } = await requestToast(
        () => saveDesignerFamilyInfo({ ...formData.value, userId: id.value }),
        {
          success: true,
          successTitle: '保存成功',
        },
      )
      if (code === 0) {
        actionSheetStatus.value = false
        familyPageRef.value?.reload()
      }
      break
    }
    default:
      break
  }
}
onLoad(async (query: { id: string }) => {
  id.value = query.id
  await setBasicData()
})
</script>
<template>
  <div class="flex-grow bg-white">
    <wd-tabs v-model="tab" :swipeable="true" :slidable-num="4">
      <template v-for="(it, index) in tabs" :key="index">
        <wd-tab :title="it.label" :name="it.value"></wd-tab>
      </template>
    </wd-tabs>
    <div class="flex flex-col px-5 gap-5">
      <template v-if="tab === 'basic'">
        <template
          v-for="([key, value], index) in Object.entries(omit(basicData, ['id', 'userId']))"
          :key="index"
        >
          <div class="flex items-center justify-between">
            <div class="text-black/40 text-base font-normal font-['PingFang SC'] leading-none">
              {{ messages.objects.designerBasiceInfo[key] }}
            </div>
            <DataRender v-bind="renders.designerBasiceInfo[key](value)"></DataRender>
          </div>
          <!-- <SectionHeading size="base" :title="messages.objects.designerBasiceInfo[key]">
          <template #append>
            <DataRender v-bind="renders.designerBasiceInfo[key](value)"></DataRender>
          </template>
        </SectionHeading> -->
          <div class="w-full h-.25 bg-[#f4f4f4]"></div>
        </template>
      </template>
      <template v-if="tab === 'family'">
        <PageHelperEvo ref="familyPageRef" :request="getDesignerFamilyInfo" :query="query">
          <template #default="{ source }">
            <template v-for="(it, index) in source.list" :key="index">
              <div>{{ it }}</div>
            </template>
          </template>
        </PageHelperEvo>
      </template>
      <template v-if="tab === 'events'">
        <PageHelperEvo :request="getDesignerExtraEvents" :query="eventsQuery">
          <template #default="{ source }">
            <template v-for="(it, index) in source.list" :key="index">
              <div>{{ it }}</div>
            </template>
          </template>
        </PageHelperEvo>
      </template>
    </div>
    <BottomAppBar fixed placeholder>
      <wd-button v-if="tab === 'basic'" block :round="false" @click="handleEditBasicInfo">
        编辑
      </wd-button>
      <wd-button v-if="tab === 'family'" block :round="false" @click="handleAddFamilyInfo">
        新增
      </wd-button>
    </BottomAppBar>
    <wd-action-sheet v-model="actionSheetStatus">
      <div class="p-4">
        <DataForm :schema="schema" :direction="'horizontal'" v-model="formData"></DataForm>
        <wd-button :round="false" block @click="handleSubmit">提交</wd-button>
      </div>
    </wd-action-sheet>
  </div>
</template>
