<script setup lang="ts">
import type { FeedFormQuestions, UserList } from '@/model/pet-manual'
import FeedQuestionnaire from '@/pages/feed-calculator/components/FeedQuestionnaire.vue'
import FeedStart from '@/pages/feed-calculator/components/FeedStart.vue'
import FeedStep from '@/pages/feed-calculator/components/FeedStep.vue'
import avator from '@/static/image/pet-parameters/avator.png'
import cat from '@/static/image/pet-parameters/cat.png'
import dog from '@/static/image/pet-parameters/dog.png'
import emaciatedCat from '@/static/image/pet-parameters/form/emaciated_cat.png'
import idealWightCat from '@/static/image/pet-parameters/form/idealweight_cat.png'
import overWeightCat from '@/static/image/pet-parameters/form/overweight_cat.png'
import skinnyCat from '@/static/image/pet-parameters/form/skinny_cat.png'
import thinCat from '@/static/image/pet-parameters/form/thin_cat.png'
import underWeightCat from '@/static/image/pet-parameters/form/underweight_cat.png'
import ToolApi from '@/utils'

interface StepInfo {
  step: number
  title: string
}
const titleName = ref<string>('喂养计算器')
const safeHeight = ToolApi.getSafeHeight()
const stage = ref<number>(0)
const stepInfo = ref<StepInfo[]>([
  { step: 1, title: '宠物基础信息' },
  { step: 2, title: '身体状态信息' },
  { step: 3, title: '计算喂养计划' },
])
const controlFormDisplay = ref({
  display1: true,
  display2: false,
  display3: false,
})
const feedFormQuestions = ref<FeedFormQuestions[]>([
  { title: '您的动物是?', question: [{ image: cat, name: '猫猫' }, { image: dog, name: '狗狗' }], formType: 1 },
  { title: '猫咪的性别?', question: [{ name: '男孩' }, { name: '女孩' }], formType: 2 },
  { title: '猫咪的年龄区间?', question: [{ name: '0-4个月' }, { name: '5-12个月' }], formType: 2 },
  { title: '猫咪是否活跃?', question: [{ name: '活跃' }, { name: '不活跃' }], formType: 2 },
  { title: '猫咪是否怀孕?', question: [{ name: '怀孕' }, { name: '未怀孕' }], formType: 2 },
  { title: '猫咪是否绝育?', question: [{ name: '绝育' }, { name: '未绝育' }], formType: 2 },
  { title: '猫咪是否在哺乳?', question: [{ name: '哺乳中' }, { name: '未哺乳' }], formType: 2 },
  { title: '请选择猫咪的体型', question: [{ image: emaciatedCat, name: '极度消廋' }, { image: skinnyCat, name: '非常廋' }, { image: thinCat, name: '消瘦' }, { image: underWeightCat, name: '体重偏低' }, { image: idealWightCat, name: '理想体重' }, { image: overWeightCat, name: '体重偏重' }], formType: 3 },
])
const userList = ref<UserList>({
  image: avator,
  username: '子龙',
  type: ['年龄', '品种', '体重'],
})
function reset() {
  stage.value = 0
  controlFormDisplay.value = {
    display1: false,
    display2: false,
    display3: false,
  }
}
function handleReady() {
  reset()
  titleName.value = '喂养问卷'
  controlFormDisplay.value.display2 = true
  setTimeout(() => {
    reset()
    controlFormDisplay.value.display3 = true
  }, 3000)
}
function handleBackFeedStart() {
  reset()
  titleName.value = '喂养计算器'
  controlFormDisplay.value.display1 = true
}
function handleStep(step: number) {
  if (step === 2) {
    handleReady()
    stage.value = 1
    controlFormDisplay.value.display2 = true
  }
  else if (step === 7) {
    handleReady()
    stage.value = 2
    controlFormDisplay.value.display2 = true
  }
}
</script>

<template>
  <TitleBar :title-name="titleName" />
  <view class="flex flex-col bg-[#F5F6F7] overflow-y-auto" :style="`height:calc(100vh - ${safeHeight}px)`">
    <view v-show="controlFormDisplay.display1">
      <FeedStart :step-info="stepInfo" @ready="handleReady" />
    </view>
    <view v-show="controlFormDisplay.display2" class="flex justify-center items-center w-full h-full">
      <FeedStep :list="stepInfo" :stage="stage" />
    </view>
    <view v-show="controlFormDisplay.display3">
      <FeedQuestionnaire :list="feedFormQuestions" :step-info="stepInfo" :user-list="userList" @back="handleBackFeedStart" @step="handleStep" />
    </view>
  </view>
</template>

<style scoped>

</style>
