<route lang="json">
{ "style": { "navigationBarTitleText": "关联视频号", "navigationBarBackgroundColor": "#fff" } }
</route>
<script setup lang="ts">
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 BottomAppBar from '@/components/bottom-app-bar.vue'
import { useMessage } from 'wot-design-uni'

const { alert } = useMessage()
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const form = ref<{
  userId?: number
  videoNumber?: string
}>()
const { data, run: setData } = useRequest(() => getDesignerInfo(userInfo.value.userId))
const { loading, run: submiting } = useRequest(() => updateDesignerInfo(form.value))
const handleSubmit = async () => {
  await submiting()
  await setData()
  alert({ title: '关联成功', confirmButtonText: '我知道了' })
}
onMounted(async () => {
  await setData()
  form.value = pick(data.value, ['id', 'userId', 'videoNumber'])
})
</script>
<template>
  <div class="flex-grow flex flex-col gap-5 px-3.5 py-6 bg-white">
    <SectionHeading title="如何关联视频号？" size="sm"></SectionHeading>
    <img class="w-[347px] h-[186px] rounded-2xl" src="https://via.placeholder.com/347x186" />
    <SectionHeading title="视频号ID" size="sm"></SectionHeading>
    <div class="bg-[#f6f6f6] rounded-lg px-3.5 py-2.5">
      <wd-input
        v-model="form.videoNumber"
        placeholder="请输入视频号ID"
        no-border
        custom-class="bg-[#f6f6f6]!"
      ></wd-input>
    </div>
    <BottomAppBar fixed :border="false">
      <div>
        <div class="text-center mb-5.5">
          <span class="text-black/40 text-xs font-normal font-['PingFang SC'] leading-tight">
            点击确认关联即表示同意
          </span>
          <span class="text-[#0cbe7c] text-xs font-normal font-['PingFang SC'] leading-tight">
            《个人微信视频号授权使用协议》
          </span>
        </div>
        <wd-button :round="false" block :loading="loading" @click="handleSubmit">
          确定关联
        </wd-button>
      </div>
    </BottomAppBar>
  </div>
</template>
