<script lang="ts" setup>
import useEventEmit from "@/hooks/useEventEmit";
import {EventEnum} from "@/constant/enums";
import {
  appMerchantMenuAddPost,
  appMerchantMenuMenuDetailPost,
  appMerchantMenuRemovePost,
  appMerchantMenuUpdatePost
} from "@/service";
import {useUserStore} from "@/store";

const userStore = useUserStore()

const {t} = useI18n();
// 表单数据
const formData = reactive({
  id: '',
  menuName: '',
  scheduleTimes: '',
  // 排序
  sort: 0,
  isActive: true
})
// 提交表单
const submitForm = () => {
  if (!formData.menuName) {
    uni.showToast({
      title: t('pages-user.menu.nameRequired'),
      icon: 'none'
    })
    return
  }

  if (formData.id) {
    appMerchantMenuUpdatePost({
      body: {
        ...formData,
        merchantId: userStore.currenMerchantInfo.id,
        delFlag: formData.isActive ? 1 : 3
      }
    }).then(res => {
      uni.showToast({
        title: t('toast.submitSuccess'),
        icon: 'success'
      })
      // 提交成功后，返回上一页
      uni.navigateBack()
    })
  } else {
    appMerchantMenuAddPost({
      body: {
        ...formData,
        merchantId: userStore.currenMerchantInfo.id,
        delFlag: formData.isActive ? 1 : 3
      }
    }).then(res => {
      uni.showToast({
        title: t('toast.submitSuccess'),
        icon: 'success'
      })
      // 提交成功后，返回上一页
      uni.navigateBack()
    })
  }
}

function navigateTo(url: string) {
  uni.navigateTo({
    url: `${url}?scheduleTimes=${formData.scheduleTimes}`
  })
}

useEventEmit(EventEnum.CHOOSE_MENU_TIME, (data) => {
  console.log('当前用户添加的菜单时间', data)
  if (data) {
    formData.scheduleTimes = data
  }
})

onLoad((options: any) => {
  console.log('页面加载', options)
  // 如果有传递的参数，可以在这里处理
  if (options.id) {
    formData.id = options.id

    getMenuDetail()
  }
})

function getMenuDetail() {
  appMerchantMenuMenuDetailPost({
    params: {
      recipeId: formData.id
    }
  }).then(res => {
    formData.menuName = res.data.menuName
    formData.scheduleTimes = res.data.scheduleTimes
    formData.isActive = +res.data.delFlag === 1
    // 排序
    formData.sort = res.data.sort ?? 0
  })
}

function deleteMenu() {
  appMerchantMenuRemovePost({
    body: [formData.id]
  }).then(res => {
    uni.showToast({
      title: t('toast.deleteSuccess'),
      icon: 'none'
    })
    // 删除成功后，返回上一页
    uni.navigateBack()
  })
}
</script>

<template>
  <view class="add-menu-page bg-white min-h-100vh">
    <!-- 状态栏 -->
    <navbar/>
    <!-- 页面内容 -->
    <view class="px-30rpx pt-30rpx">
      <view class="flex-center-sb mb-88rpx">
        <!-- 页面标题 -->
        <text class="text-46rpx text-#333 font-500 block">
          {{ formData.id ? t('pages-user.menu.editMenu') : t('pages-user.menu.addMenu') }}
        </text>
        <view>
          <template v-if="formData.id">
            <view class="bg-#F2F2F2 rounded-32rpx w-134rpx h-64rpx center font-500 text-26rpx text-#333"
                  @click="deleteMenu">
              {{ t('common.delete') }}
            </view>
          </template>
        </view>
      </view>

      <!-- 菜单名称 -->
      <view class="mb-44rpx">
        <text class="text-36rpx text-#333 font-500 mb-20rpx block">{{ t('pages-user.menu.name') }}</text>
        <view class="bg-#F6F6F6 rounded-16rpx h-98rpx px-24rpx flex items-center">
          <wd-input
              :focus-when-clear="false"
              :modelValue="formData.menuName"
              :placeholder="t('pages-user.menu.enterPlaceholder')"
              clearable
              confirm-type="search"
              custom-class="!text-30rpx !bg-transparent flex-1"
              no-border
              placeholderStyle="font-size: 30rpx;color: #999;"
              use-prefix-slot
              @update:modelValue="formData.menuName = $event"
          >
          </wd-input>
        </view>
      </view>

      <!-- 排序 -->
      <view class="mb-44rpx">
        <text class="text-36rpx text-#333 font-500 mb-20rpx block">
          {{ t('pages-user.menu.sort') }}
        </text>
        <view class="bg-#F6F6F6 rounded-16rpx h-98rpx px-24rpx flex items-center">
          <wd-input
              type="number"
              :focus-when-clear="false"
              :modelValue="formData.sort"
              :placeholder="t('pages-user.menu.sortPlaceholder')"
              clearable
              confirm-type="done"
              custom-class="!text-30rpx !bg-transparent flex-1"
              no-border
              placeholderStyle="font-size: 30rpx;color: #999;"
              @update:modelValue="formData.sort = Number($event || 0)"
          >
          </wd-input>
        </view>
      </view>

      <!-- 菜单激活状态 -->
      <view class="form-section mb-60rpx">
        <view class="flex items-center justify-between mb-20rpx">
          <text class="label text-36rpx text-#333 font-500">
            {{ formData.isActive ? t('pages-user.menu.menuIsActive') : t('pages-user.menu.menuIsNotActive') }}
          </text>
          <!-- 开关按钮 -->
          <wd-switch v-model="formData.isActive" active-color="#00A76D" size="20px"/>
        </view>
        <text class="text-28rpx text-#999 block">{{ t('pages-user.menu.customersCanOverview') }}</text>
      </view>


      <view class="form-item mb-52rpx">
        <view class="flex-center-sb gap-22rpx">
          <view class="text-28rpx lh-28rpx text-#999">
            <text class="text-36rpx lh-36rpx text-#333 mb-24rpx block font-500">{{
                t('pages-user.menu.menuHours')
              }}
            </text>
            {{ t('pages-user.menu.setDefaultDays') }}
          </view>
          <view class="bg-#F2F2F2 rounded-32rpx w-158rpx h-64rpx center font-500 text-26rpx text-#333"
                @click="navigateTo('/pages-user/pages/menu/add-detail')">
            <image class="w-28rpx h-28rpx shrink-0 mr-4rpx" src="@img/chef/107.png"></image>
            {{ t('pages-user.menu.add') }}
          </view>
        </view>
      </view>
    </view>

    <!-- 底部提交按钮 -->
    <fixed-bottom-large-btn
        :text="t('common.submit')"
        class="z-100"
        fixed
        @click="submitForm"
    />
  </view>
</template>

<style>
page {
  background-color: #fff;
}
</style>