<script lang="ts" setup>
import {
  appMerchantRecipeRecipeListPost,
  appMerchantRecipeRemovePost,
  appRecipeCategoryListGet,
  appRecipeCategoryListOnHasRecipeGet
} from "@/service";
import TabsType from './components/tabs-type.vue'
import usePage from "@/hooks/usePage";
import {formatTimestamp} from "@/utils/utils";
import {useUserStore} from "@/store";

const userStore = useUserStore();
const {t} = useI18n()

function loadList(pageNum: number, pageSize: number) {
  return new Promise(resolve => {
    appMerchantRecipeRecipeListPost({
      body: {
        pageNum: pageNum,
        pageSize: pageSize,
        recipeCategoryId: recipeCategoryId.value, // 菜谱分类ID
      }
    }).then(res => {
      resolve({rows: res.rows})
    })
  })
}

const {paging, loading, firstLoaded, dataList, queryList} = usePage(loadList)

const isCollected = ref(false)

function navigateTo(url: string) {
  uni.navigateTo({url})
}

onShow(() => {
  // 商家查询自己有菜谱数据的分类
  getRecipeCategoryListByMerchant()
})

const myRecipeCategoryList = ref([])

function getRecipeCategoryListByMerchant() {
  appRecipeCategoryListOnHasRecipeGet({
    options: {}
  }).then(res => {
    console.log('商家查询自己有菜谱数据的分类', res)
    if (res.data.length > 0) {
      allRecipeCategoryList.value = res.data
      recipeCategoryId.value = res.data[0].id
    } else {
      // 获取菜谱全部分类
      getRecipeCategoryList()
    }
    paging.value.reload()
  })
}

// 改变了选中状态
const recipeCategoryId = ref('')

function changeType(id: string) {
  recipeCategoryId.value = id
  paging.value.refresh()
}

const allRecipeCategoryList = ref([])

function getRecipeCategoryList() {
  appRecipeCategoryListGet({
    options: {}
  }).then(res => {
    allRecipeCategoryList.value = res.data
  })
}

// 编辑菜谱
function editRecipe(item: any) {
  navigateTo('/pages-user/pages/recipe/add-recipe?id=' + item.id)
}

// 删除菜谱
function deleteRecipe(item: any) {
  appMerchantRecipeRemovePost({
    body: [item.id],
  }).then(res => {
    uni.showToast({
      title: t('toast.deleteSuccess'),
      icon: 'none'
    })
    getRecipeCategoryListByMerchant()
  })
}

// 当前商家是否已经入驻了
const isMerchant = computed(() => {
  return userStore.currentMerchantToken.length > 0
})
</script>

<template>
  <z-paging ref="paging" v-model="dataList" :auto="false" bg-color="#fff" @query="queryList">
    <template #top>
      <navbar :title="t('pages-user.recipe.index.title')"></navbar>
      <tabs-type :currentId="recipeCategoryId" :list="allRecipeCategoryList" class="pt-36rpx" @changeType="changeType"/>
    </template>
    <view class="px-30rpx mt-56rpx">
      <template v-for="(item, index) in dataList">
        <wd-swipe-action>
          <view :class="[index === 0 ? '' : 'mt-52rpx']" class="flex-center-sb"
                @click="navigateTo('/pages-user/pages/recipe/detail?id=' + item.id)">
            <image
                :src="item.recipeImage.split(',')[0]"
                class="w-210rpx h-200rpx mr-28rpx shrink-0 rounded-24rpx"
                mode="aspectFill"
            ></image>
            <view class="flex-1 h-200rpx">
              <view class="text-36rpx lh-40rpx text-#333 font-500 mb-40rpx line-clamp-1 tracking-[.04em]">
                {{ item.recipeName }}
              </view>
              <!--              Mar.06 2025-->
              <view class="text-30rpx lh-30rpx text-#333 tracking-[.04em]">
                {{ formatTimestamp(item.createTime) }}
              </view>
              <view class="mt-42rpx flex items-center gap-30rpx text-#999 text-30rpx">
                <view class="flex items-center gap-10rpx">
                  <image
                      class="w-40rpx h-40rpx"
                      src="@img/chef/132.png"
                  ></image>
                  {{ item.commentCount }}
                </view>
              </view>
            </view>
          </view>
          <template #right>
            <view class="action flex items-center text-30rpx lh-30rpx text-#fff">
              <view class="w-152rpx h-210rpx bg-#CE7138 center" @click="editRecipe(item)">
                {{ t('pages-user.recipe.index.edit') }}
              </view>
              <view class="w-152rpx h-210rpx bg-#FF2828 center" @click="deleteRecipe(item)">
                {{ t('pages-user.recipe.index.delete') }}
              </view>
            </view>
          </template>
        </wd-swipe-action>
      </template>
    </view>
  </z-paging>
  <view v-if="isMerchant" class="w-118rpx h-118rpx rounded-50% fixed bottom-104rpx right-30rpx"
        @click="navigateTo('/pages-user/pages/recipe/add-recipe')">
    <image
        class="absolute top-0 left-0 w-118rpx h-118rpx"
        src="@img/chef/195.png"
    ></image>
    <view class="absolute top-0 left-0 w-118rpx h-118rpx center flex-col relative z-2">
      <wd-icon color="#fff" name="add" size="18px"></wd-icon>
      <text class="text-26rpx text-#fff mt-10rpx">{{ t('pages-user.recipe.index.add') }}</text>
    </view>
  </view>
</template>

<style lang="scss" scoped>

</style>