<script setup lang="ts">
import TabbarEvo from '@/components/tabbar-evo.vue'
import { currRoute } from '../utils'
import { defaultThemeVars } from '../core/themes/default'
import DataForm from '@/components/data-form.vue'
import { useUserStore } from '../store'
import { storeToRefs } from 'pinia'
import {
  addBlue,
  channelTabbarHome,
  channelTabbarHomeActive,
  channelTabbarMine,
  channelTabbarMineActive,
} from '@designer-hub/assets/src/assets/svgs'
import { ComponentExposed } from 'vue-component-type-helpers'
import { getDesignerList } from '../core/libs/requests'
import { requestToast } from '@designer-hub/app/src/core/utils/common'
import { createFollowUp } from '../core/libs/agent-requests'
import { useFollowUp } from '../composables/followUp'

const userStore = useUserStore()
const { userInfo, isAgent, isMerchant } = storeToRefs(userStore)
const { schema, rules } = useFollowUp()
const publishState = ref(false)
const dataForm = ref({})
const dataFormRef = ref<ComponentExposed<typeof DataForm>>()
const items = computed(() => {
  if (isAgent.value) {
    return [
      {
        title: '首页',
        iconPath: channelTabbarHome,
        selectedIconPath: channelTabbarHomeActive,
        path: '/pages/home/index',
      },
      {
        title: '发布',
        iconPath: addBlue,
        selectedIconPath: addBlue,
        path: '/pages/publish/index',
        // hiddenTitle: true,
        main: true,
      },
      {
        title: '我的',
        iconPath: channelTabbarMine,

        selectedIconPath: channelTabbarMineActive,
        path: '/pages/mine/index',
      },
    ]
  }
  return [
    {
      title: '首页',
      iconPath: channelTabbarHome,
      selectedIconPath: channelTabbarHomeActive,
      path: '/pages/home/index',
    },
    {
      title: '我的',
      iconPath: channelTabbarMine,
      selectedIconPath: channelTabbarMineActive,
      path: '/pages/mine/index',
    },
  ]
})
const handleTabbarItemClick = (path: string) => {
  if (path === '/pages/publish/index') {
    publishState.value = true
    return
  }
  uni.switchTab({ url: path })
}
const handleAdd = async (e) => {
  console.log(e)
  publishState.value = true
}
const handleSubmit = async () => {
  const { valid } = await dataFormRef.value.validate()
  if (!valid) {
    return
  }
  console.log(dataForm.value)
  const { code } = await requestToast(
    () =>
      createFollowUp({ ...dataForm.value, address: { address: '', latitude: '', longitude: '' } }),
    {
      success: true,
      successTitle: '跟进成功',
    },
  )
  if (code === 0) {
    publishState.value = false
  }
}
onMounted(async () => {
  const {
    data: { list },
  } = await getDesignerList({
    brokerId: userInfo.value?.userId.toString(),
    pageNo: 1,
    pageSize: -1,
  })
  schema.value.stylistId.props.columns = list.map((item) => ({
    value: item.id,
    label: item.name,
  }))
})
</script>

<template>
  <wd-config-provider :themeVars="defaultThemeVars" custom-class="flex-grow flex flex-col">
    <view class="bg-[#F2F3F6] pb-20 flex-grow">
      <slot />
    </view>

    <TabbarEvo
      :items="items"
      fixed
      safeAreaInsetBottom
      :current-path="currRoute().path"
      @click="handleTabbarItemClick"
    />
    <wd-action-sheet v-model="publishState" title="创建跟进" @close="publishState = false">
      <view class="flex flex-col p-4">
        <div>
          <DataForm
            ref="dataFormRef"
            :schema="schema"
            :rules="rules"
            direction="horizontal"
            v-model="dataForm"
          ></DataForm>
        </div>
        <div><wd-button block :round="false" @click="handleSubmit">提交</wd-button></div>
      </view>
    </wd-action-sheet>
    <wd-toast />
    <wd-message-box />
  </wd-config-provider>
</template>

<style lang="scss">
/* stylelint-disable-next-line selector-type-no-unknown */
layout-tabbar-uni {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
</style>
