<route lang="json">
{
  "style": {
    "navigationBarTitleText": "个人信息",
    "navigationBarBackgroundColor": "#ffffff"
  }
}
</route>
<script setup lang="ts">
import {
  createAward,
  deleteAward,
  getAwards,
  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 { DesignerAward, 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'
import ListHelperEvo from '@/components/list-helper-evo.vue'
import SectionHeading from '@designer-hub/app/src/components/section-heading.vue'
import dayjs from 'dayjs'

const tab = ref('sale')
// 基础信息 家庭信息 奖项信息 销售信息 游学/活动信息
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' | 'award'>()
const familyPageRef = ref<ComponentExposed<typeof PageHelperEvo>>()
const awardsListRef = ref<ComponentExposed<typeof ListHelperEvo>>()
// 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 handleAddAward = async () => {
  submitType.value = 'award'
  schema.value = {
    awardsName: {
      type: 'TextField',
      label: messages.objects.designerAward.awardsName,
      props: {
        placeholder: messages.objects.designerAward.awardsNamePlaceHolder,
      },
    },
    awardsRank: {
      type: 'TextField',
      label: messages.objects.designerAward.awardsRank,
      props: {
        placeholder: messages.objects.designerAward.awardsRankPlaceHolder,
      },
    },
    awardsTime: {
      type: 'TimePick',
      label: messages.objects.designerAward.awardsTime,
      props: {
        placeholder: messages.objects.designerAward.awardsTimePlaceHolder,
      },
    },
    awardsFileUrl: {
      type: 'ImageUploader',
      label: messages.objects.designerAward.awardsFileUrl,
    },
  }
  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
    }
    case 'award':
      {
        const { code } = await requestToast(
          () => createAward({ ...formData.value, userId: Number(id.value) }),
          {
            success: true,
            successTitle: '保存成功',
          },
        )
        if (code === 0) {
          actionSheetStatus.value = false
          awardsListRef.value?.reload()
        }
      }
      break
    default:
      break
  }
}
const handleDeleteAward = async (item: DesignerAward) => {
  await requestToast(() => deleteAward(item.id), {
    success: true,
    successTitle: '删除成功',
  })
  awardsListRef.value?.reload()
}
onLoad(async (query?: Record<string | 'id', any>) => {
  id.value = query?.id
  await setBasicData()
})
</script>
<template>
  <div class="flex-grow flex flex-col">
    <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 flex-grow 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 === 'award'">
        <div class="bg-white p-4 mt-4 flex-grow flex flex-col">
          <div class="flex items-center justify-between">
            <div>奖项信息</div>
            <div>
              <wd-button type="text" icon="add-circle1" @click="handleAddAward">
                添加获奖信息
              </wd-button>
            </div>
          </div>
          <ListHelperEvo
            ref="awardsListRef"
            :request="getAwards"
            :query="{ userId: id }"
            :mock-list="[
              { awardsName: '123', awardsRank: '123' },
              {
                awardsName: '筑巢奖',
              },
            ]"
          >
            <template #default="{ item, isLast }">
              <div class="flex flex-col gap-4 py-4">
                <SectionHeading
                  title="奖项名称"
                  size="base"
                  :end-text="item.awardsName"
                ></SectionHeading>
                <SectionHeading
                  title="奖项日期"
                  :end-text="dayjs(item.awardsTime).format('YYYY-MM-DD')"
                ></SectionHeading>
                <SectionHeading title="奖项名次" :end-text="item.awardsRank"></SectionHeading>
                <SectionHeading title="奖项照片" end-arrow></SectionHeading>
                <wd-button type="text" @click="handleDeleteAward(item)">删除</wd-button>
                <div v-if="!isLast" class="w-full h-1 bg-[#dadada]"></div>
              </div>
            </template>
          </ListHelperEvo>
          <!--          <template v-for="(it, index) in source?.list" :key="index">-->
          <!--            <div>-->
          <!--            </div>-->
          <!--          </template>-->
          <!--          <PageHelperEvo-->
          <!--            class="flex-grow flex flex-col"-->
          <!--            :request="async () => ({data: { list: [{}], total: 0 }, msg: 0, code: 0})"-->
          <!--            :query="eventsQuery"-->
          <!--            custom-class="flex-grow flex flex-col"-->
          <!--          >-->
          <!--            <template #default="{ source }">-->
          <!--              -->
          <!--            </template>-->
          <!--          </PageHelperEvo>-->
        </div>
      </template>

      <template v-if="tab === 'sale'">
        <div class="bg-white p-4 mt-4 flex-grow flex flex-col">
          <div class="flex items-center justify-between">
            <div>销售信息</div>
            <!--            <div>-->
            <!--              <wd-button type="text" icon="add-circle1" @click="handleAddAward">-->
            <!--                添加获奖信息-->
            <!--              </wd-button>-->
            <!--            </div>-->
          </div>
          <ListHelperEvo
            ref="saleListRef"
            :items="[
              { label: '', value: 0, userId: '' },
              { label: '', value: '' },
            ]"
            :query="{ userId: id }"
            :mock-list="[
              { label: '今年成交订单数', value: 6 },
              { label: '今年成交金额', value: 100000 },
              { label: '累计成交订单数', value: 6 },
              { label: '累计成交金额', value: 100000 },
              { label: '其他销售信息', value: '2条' },
            ]"
          >
            <template #default="{ item, isLast }">
              <div class="flex flex-col gap-4 py-4">
                <div v-if="isLast" class="w-full h-1 bg-[#dadada]"></div>
                <SectionHeading
                  :title="item.label"
                  size="base"
                  :end-text="String(item.value)"
                  end-arrow
                  path="/pages/agent/designer/archives/sale-info/index"
                ></SectionHeading>
                <!--                <SectionHeading-->
                <!--                  title="奖项日期"-->
                <!--                  :end-text="dayjs(item.awardsTime).format('YYYY-MM-DD')"-->
                <!--                ></SectionHeading>-->
                <!--                <SectionHeading title="奖项名次" :end-text="item.awardsRank"></SectionHeading>-->
                <!--                <SectionHeading title="奖项照片" end-arrow></SectionHeading>-->
                <!--                <wd-button type="text" @click="handleDeleteAward(item)">删除</wd-button>-->
              </div>
            </template>
          </ListHelperEvo>
          <!--          <template v-for="(it, index) in source?.list" :key="index">-->
          <!--            <div>-->
          <!--            </div>-->
          <!--          </template>-->
          <!--          <PageHelperEvo-->
          <!--            class="flex-grow flex flex-col"-->
          <!--            :request="async () => ({data: { list: [{}], total: 0 }, msg: 0, code: 0})"-->
          <!--            :query="eventsQuery"-->
          <!--            custom-class="flex-grow flex flex-col"-->
          <!--          >-->
          <!--            <template #default="{ source }">-->
          <!--              -->
          <!--            </template>-->
          <!--          </PageHelperEvo>-->
        </div>
      </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>
