<route lang="json">
{ "style": { "navigationBarTitleText": "编辑", "navigationBarBackgroundColor": "#fff" } }
</route>
<script setup lang="ts">
import Card from '@/components/card.vue'
import SectionHeading from '@/components/section-heading.vue'
import { getDesignerInfo, updateDesignerInfo } from '../../../../core/libs/requests'
import { useUserStore } from '../../../../store'
import { storeToRefs } from 'pinia'
import { pick } from 'radash'
import { requestToast } from '../../../../core/utils/common'
import UploadEvo from '@/components/upload-evo.vue'

const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const form = ref<{
  userId?: number
  serviceYears?: number | string
  homePageUrl?: string
  sharePageUrl?: string
  designDesc?: string
  designFee?: string
  personalIdentity?: string
  serviceCustomerCount?: number
  homePageName?: string
}>()
const { data, run: setData, loading } = useRequest(() => getDesignerInfo(userInfo.value.userId))
const handleSubmit = async () => {
  await requestToast(() => updateDesignerInfo(form.value), {
    success: true,
    successTitle: '更新成功',
  }).then(() => setData())
}
onMounted(async () => {
  await setData()
  console.log(data.value)
  form.value = pick(data.value, [
    'id',
    'userId',
    'homePageUrl',
    'serviceYears',
    'sharePageUrl',
    'designDesc',
    'designFee',
    'personalIdentity',
    'serviceCustomerCount',
    'homePageName',
  ])
})
</script>
<template>
  <div class="flex-grow flex flex-col gap-6 px-3.5 py-6">
    <template v-if="form">
      <Card>
        <div>
          <SectionHeading title="主页名称">
            <template #start>
              <wd-input
                placeholder="请输入主页名称"
                no-border
                v-model="form.homePageName"
              ></wd-input>
            </template>
          </SectionHeading>
        </div>
      </Card>
      <Card>
        <div>
          <SectionHeading title="主页封面图"></SectionHeading>
          <div
            class="mt-4.5 mb-2.5 text-black/40 text-xs font-normal font-['PingFang_SC'] leading-snug"
          >
            用于主页形象封面图，请上传体现个人艺术设计风格的图片，建议竖图尺寸1125x900，也可上传自己的视频介绍
          </div>
          <UploadEvo v-model="form.homePageUrl"></UploadEvo>
        </div>
      </Card>
      <Card>
        <div>
          <SectionHeading title="分享封面图"></SectionHeading>
          <div
            class="mt-4.5 mb-2.5 text-black/40 text-xs font-normal font-['PingFang_SC'] leading-snug"
          >
            用于分享到微信好友的卡片封面图，尺寸660x528；
          </div>
          <UploadEvo v-model="form.sharePageUrl"></UploadEvo>
        </div>
      </Card>
      <SectionHeading title="个人信息"></SectionHeading>
      <Card>
        <div>
          <SectionHeading title="设计理念" subtitle="请输入设计理念"></SectionHeading>
          <div
            class="mt-4.5 mx--3.5 text-black/40 text-xs font-normal font-['PingFang_SC'] leading-snug"
          >
            <wd-textarea
              placeholder="例：设计没有风格，设计是对生活的一种诠释，不是所谓的造型与装饰！"
              v-model="form.designDesc"
            />
          </div>
          <div class="text-end text-black/40 text-xs font-normal font-['PingFang_SC'] leading-snug">
            0/100
          </div>
        </div>
      </Card>
      <Card>
        <div>
          <SectionHeading title="个人信息" subtitle="请输入个人身份"></SectionHeading>
          <div
            class="mt-4.5 mx--3.5 text-black/40 text-xs font-normal font-['PingFang_SC'] leading-snug"
          >
            <wd-textarea
              placeholder="例：中国室内装饰协会会员、 xxx 空间设计事务所创始人、筑巢奖金奖设计师等等"
              v-model="form.personalIdentity"
            />
          </div>
          <div class="text-end text-black/40 text-xs font-normal font-['PingFang_SC'] leading-snug">
            0/100
          </div>
        </div>
      </Card>
      <Card>
        <div>
          <SectionHeading title="设计费">
            <template #start>
              <div class="flex">
                <wd-input custom-class="flex-1" no-border v-model="form.designFee"></wd-input>
                <div
                  class="text-black/40 text-base font-normal font-['PingFang_SC'] leading-relaxed"
                >
                  元/㎡
                </div>
              </div>
            </template>
          </SectionHeading>
        </div>
      </Card>
      <Card>
        <div>
          <SectionHeading title="服务客户数">
            <template #start>
              <wd-input
                placeholder="请输入真实客户数"
                no-border
                v-model="form.serviceCustomerCount"
              ></wd-input>
            </template>
          </SectionHeading>
        </div>
      </Card>
      <Card>
        <div>
          <SectionHeading title="从业年限">
            <template #start>
              <wd-input placeholder="请输入年限" no-border v-model="form.serviceYears"></wd-input>
            </template>
          </SectionHeading>
        </div>
      </Card>
      <!-- <BottomAppBar>

    </BottomAppBar> -->
      <div class=""><wd-button block :round="false" @click="handleSubmit">保存</wd-button></div>
    </template>
  </div>
</template>
