<route lang="json">
{
  "style": {
    "navigationBarTitleText": "个人信息",
    "navigationBarBackgroundColor": "#ffffff"
  }
}
</route>
<script setup lang="ts">
import {
  createAward,
  createFocus,
  deleteAward,
  deleteStylistFamily,
  getAwards,
  getDesignerActivities,
  getDesignerBasicInfo,
  getDesignerExtraEvents,
  getDesignerFamilyInfo,
  getSalesOrdersCounts,
  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('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' | 'award'>()
const familyPageRef = ref<ComponentExposed<typeof PageHelperEvo>>()
const awardsListRef = ref<ComponentExposed<typeof ListHelperEvo>>()
const saleListRef = ref<ComponentExposed<typeof ListHelperEvo>>()
const activityListRef = ref<ComponentExposed<typeof ListHelperEvo>>()
// const {} = useRequest()
const handleEditBasicInfo = async () => {
  await uni.navigateTo({ url: `/pages/agent/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,
      props: {
        placeholder: `请输入${messages.objects.designerFamilyInfo.familyRelation}`,
      },
    },
    familyName: {
      type: 'TextField',
      label: messages.objects.designerFamilyInfo.familyName,
      props: {
        placeholder: `请输入${messages.objects.designerFamilyInfo.familyName}`,
      },
    },
    familySex: {
      type: 'Radio',
      label: messages.objects.designerFamilyInfo.familySex,
      props: {
        columns: [
          { label: '男', value: '1' },
          { label: '女', value: '2' },
        ],
      },
    },
    familyBirthday: {
      type: 'TimePick',
      label: messages.objects.designerFamilyInfo.familyBirthday,
      props: {
        type: 'date',
        placeholder: `请选择${messages.objects.designerFamilyInfo.familyBirthday}`,
        minDate: new Date('1925-01-01').getTime(),
        // defaultVale: new Date('1990-01-01').getTime(),
      },
    },
    familyInterset: {
      type: 'TextField',
      label: messages.objects.designerFamilyInfo.familyInterset,
      props: {
        placeholder: `请输入${messages.objects.designerFamilyInfo.familyInterset}`,
      },
    },
    familyOccupation: {
      type: 'TextField',
      label: messages.objects.designerFamilyInfo.familyOccupation,
      props: {
        placeholder: `请输入${messages.objects.designerFamilyInfo.familyOccupation}`,
      },
    },
  }
  formData.value = {
    familyBirthday: '',
  }
  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: {
        defaultValue: dayjs().toDate(),
        placeholder: messages.objects.designerAward.awardsTimePlaceHolder,
        type: 'date',
      },
    },
    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
          formData.value = {}
          awardsListRef.value?.reload()
        }
      }
      break
    default:
      break
  }
}
const handleDeleteAward = async (item: DesignerAward) => {
  await requestToast(() => deleteAward(item.id), {
    success: true,
    successTitle: '删除成功',
  })
  awardsListRef.value?.reload()
}
const handleDeleteFamilyInfo = async (item: DesignerFamilyInfo) => {
  await requestToast(() => deleteStylistFamily(item.id), {
    success: true,
    successTitle: '删除成功',
  })
  familyPageRef.value?.reload()
}
const handleSubmitFocus = async () => {
  await requestToast(() => createFocus({ ...formData.value, userId: id.value }), {
    success: true,
    successTitle: '保存成功',
  })
  formData.value = {}
}
onLoad(async (query?: Record<string | 'id', any>) => {
  id.value = query?.id
})
onShow(async () => {
  switch (tab.value) {
    case 'basic':
      await setBasicData()
      break
    case 'sale':
      await saleListRef.value?.reload()
      break
    case 'activity':
      await activityListRef.value?.reload()
      break
    default:
      break
  }
  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'">
        <div class="bg-white mt-4 flex flex-col gap-5 p-4">
          <template
            v-for="([key, value], index) in Object.entries(
              omit(basicData, ['id', 'userId', 'maritalStatus', 'imageUrl']),
            )"
            :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 as any)[key] }}
              </div>
              <DataRender v-bind="(renders.designerBasiceInfo as any)[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>
        </div>
      </template>
      <template v-if="tab === 'family'">
        <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="handleAddFamilyInfo">
                添加家庭信息
              </wd-button>
            </div>
          </div>
          <ListHelperEvo ref="familyPageRef" :request="getDesignerFamilyInfo" :query="query">
            <template #list="{ list }">
              <template v-for="(item, index) in list" :key="index">
                <div class="flex flex-col gap-4 py-4">
                  <SectionHeading
                    title="关系"
                    size="base"
                    :end-text="item.familyRelation"
                  ></SectionHeading>
                  <SectionHeading
                    title="姓名"
                    size="base"
                    :end-text="item.familyName"
                  ></SectionHeading>
                  <SectionHeading
                    title="性别"
                    size="base"
                    :end-text="item.familySex"
                  ></SectionHeading>
                  <SectionHeading
                    title="生日"
                    size="base"
                    :end-text="
                      item.familyBirthday && dayjs(item.familyBirthday).format('YYYY-MM-DD')
                    "
                  ></SectionHeading>
                  <SectionHeading
                    title="爱好"
                    size="base"
                    :end-text="item.familyInterset"
                  ></SectionHeading>
                  <SectionHeading
                    title="职业"
                    size="base"
                    :end-text="item.familyOccupation"
                  ></SectionHeading>
                  <wd-button type="text" @click="handleDeleteFamilyInfo(item)">删除</wd-button>
                  <div v-if="!(index === list.length - 1)" class="w-full h-1 bg-[#dadada]"></div>
                </div>
              </template>
            </template>
          </ListHelperEvo>
          <!--          <PageHelperEvo ref="familyPageRef" :request="getDesignerFamilyInfo" :query="query">-->
          <!--            -->
          <!--          </PageHelperEvo>-->
        </div>
      </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>
          <!--          :mock-list="[-->
          <!--          { awardsName: '123', awardsRank: '123' },-->
          <!--          {-->
          <!--          awardsName: '筑巢奖',-->
          <!--          },-->
          <!--          ]"-->
          <ListHelperEvo ref="awardsListRef" :request="getAwards" :query="{ userId: id }">
            <!--            <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="item.awardsTime && dayjs(item.awardsTime).format('YYYY-MM-DD')"-->
            <!--                ></SectionHeading>-->
            <!--                <SectionHeading title="奖项名次" :end-text="item.awardsRank"></SectionHeading>-->
            <!--                <SectionHeading-->
            <!--                  title="奖项照片"-->
            <!--                  end-arrow-->
            <!--                  :path="`/pages/agent/designer/archives/award/photos/index?urls=${item.awardsFileUrl ?? ''}`"-->
            <!--                ></SectionHeading>-->
            <!--                <wd-button type="text" @click="handleDeleteAward(item)">删除</wd-button>-->
            <!--                <div v-if="!isLast" class="w-full h-1 bg-[#dadada]"></div>-->
            <!--              </div>-->
            <!--            </template>-->
            <template #list="{ list }">
              <template v-for="(item, i) in list" :key="i">
                <div class="flex flex-col gap-4 py-4">
                  <SectionHeading
                    title="奖项名称"
                    size="base"
                    :end-text="item.awardsName"
                  ></SectionHeading>
                  <SectionHeading
                    title="奖项日期"
                    :end-text="item.awardsTime && dayjs(item.awardsTime).format('YYYY-MM-DD')"
                  ></SectionHeading>
                  <SectionHeading title="奖项名次" :end-text="item.awardsRank"></SectionHeading>
                  <SectionHeading
                    title="奖项照片"
                    end-arrow
                    :path="`/pages/agent/designer/archives/award/photos/index?urls=${item.awardsFileUrl ?? ''}`"
                  ></SectionHeading>
                  <wd-button type="text" @click="handleDeleteAward(item)">删除</wd-button>
                  <div v-if="!isLast" class="w-full h-1 bg-[#dadada]"></div>
                </div>
              </template>
            </template>
          </ListHelperEvo>
        </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>
          <ListHelperEvo ref="saleListRef" :request="getSalesOrdersCounts" :query="{ userId: id }">
            <template #list="{ list }">
              <template v-for="(item, index) in list" :key="index">
                <div class="flex flex-col gap-4 py-4">
                  <div v-if="index === list.length - 1" class="w-full h-1 bg-[#dadada]"></div>
                  <SectionHeading
                    :title="item.label"
                    size="base"
                    :end-text="String(item.value)"
                    end-arrow
                    :path="
                      !(index === list.length - 1)
                        ? `/pages/agent/designer/archives/sale-info/index?id=${id}`
                        : `/pages/agent/designer/archives/sale-info/others/index?id=${id}`
                    "
                  ></SectionHeading>
                </div>
              </template>
            </template>
          </ListHelperEvo>
        </div>
      </template>
      <template v-if="tab === 'activity'">
        <div class="bg-white p-4 mt-4 flex-grow flex flex-col">
          <SectionHeading title="游学/活动信息"></SectionHeading>
          <ListHelperEvo
            ref="activityListRef"
            :request="getDesignerActivities"
            :query="{ userId: id }"
          >
            <template #list="{ list }">
              <template v-for="(item, index) in list" :key="index">
                <div class="">
                  <template v-if="item.type === 'line'">
                    <div class="w-full h-1 bg-[#dadada]"></div>
                  </template>
                  <template v-else>
                    <div class="py-4">
                      <SectionHeading
                        :title="item.label"
                        :end-text="item.value"
                        :path="
                          index === list.length - 1
                            ? `/pages/agent/designer/archives/activity/others/index?id=${id}`
                            : ''
                        "
                      ></SectionHeading>
                    </div>
                  </template>
                  <div v-if="!(index === list.length - 1)" class="w-full h-.25 bg-[#f4f4f4]"></div>
                </div>
              </template>
            </template>
          </ListHelperEvo>
          <SectionHeading title="游学/活动关注点">
            <template #append>
              <wd-button type="text" @click="handleSubmitFocus">保存</wd-button>
            </template>
          </SectionHeading>
          <DataForm
            v-model="formData"
            :schema="{ focus: { type: 'Textarea', hiddenLabel: true } }"
          ></DataForm>
        </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>
