<template>
  <!-- 主体部分 -->
  <div class="xl:w-screen-xl m-auto py-4 mt-20">
    <el-page-header :icon="ArrowLeft" @back="goBack">
      <template #content>
        <span class="text-large font-600"> 开发者中心</span>
      </template>
      <template #extra>
        <el-space class="flex items-center">
        </el-space>
      </template>
      <template v-if="!isDeveloper">
        <el-card class="m-5 w-screen-sm mt-24 mb-[200px] m-auto flex justify-center text-center">
          <el-result
            icon="warning"
            :sub-title="`审核通过后可管理您的应用`"
            title="请先完成实名认证！"
          >
          </el-result>
          <nuxt-link to="/user/auth"><el-button type="primary">加入开发者</el-button></nuxt-link>
        </el-card>
      </template>
      <template v-else>
        <el-row v-if="list" :gutter="24" id="container" class="clearfix">
          <el-col v-for="(item,index) in list" :key="index" :span="8" class="left mb-8">
            <el-card shadow="hover" :body-style="{ padding: '0px' }" class=" hover:bg-white cursor-pointer">
              <nuxt-link :to="{path: `/developer/${item.websiteId}`, query: {developer: `${developer?.merchantName}`}}">
                <div class="flex-1 px-4 py-5 sm:p-4 !p-4">
                  <div class="text-gray-700 dark:text-white text-base font-semibold  flex gap-1.5">
                    <el-avatar
                      :src="item.websiteLogo" shape="square" :size="55" style="background-color: white;"/>
                    <div class="flex-1 text-lg cursor-pointer flex flex-col">
                      {{ item.websiteName }}
                      <div class="flex justify-between items-center">
                        <div class="text-xs text-gray-400 font-normal line-clamp-1">{{ item.comments || '暂无描述' }}</div>
                        <el-button size="small" round>编辑</el-button>
                      </div>
                    </div>
                  </div>
                  <div class="item-image pt-3">
                    <el-image v-if="item.files" :src="`${JSON.parse(item.files)[0]}`" class="w-full h-1/2 max-h-[220px]" />
                    <el-image v-else class="w-full h-[220px]" />
                  </div>
                </div>
              </nuxt-link>
            </el-card>
          </el-col>
        </el-row>
      </template>
    </el-page-header>
  </div>

</template>
<script setup lang="ts">
import { ArrowLeft,View,Search } from '@element-plus/icons-vue'
import type {CmsArticleParam} from "~/api/cms/cmsArticle/model";
import {pageCmsWebsiteAll} from "~/api/cms/cmsWebsite";
import type {CmsWebsite, CmsWebsiteParam} from "~/api/cms/cmsWebsite/model";
import {getShopMerchantByPhone} from "~/api/shop/shopMerchant";
import type {ShopMerchant} from "~/api/shop/shopMerchant/model";

const route = useRoute();
const router = useRouter();
const isDeveloper = ref<boolean>(false);
const developer = ref<ShopMerchant>();
// 页面信息
const list = ref<CmsWebsite[]>([]);
const total = ref(0);


// 搜索表单
const where = reactive<CmsWebsiteParam>({
  keywords: '',
  page: 1,
  limit: 12,
  status: undefined,
  recommend: undefined,
  categoryId: undefined,
  userId: Number(localStorage.getItem('UserId')),
  lang: undefined
});

const goBack = () => {
  router.back();
}

// 加载页面数据
const reload = () => {
  getShopMerchantByPhone().then((data) => {
    isDeveloper.value = true
    developer.value = data
  }).catch(() => {
    isDeveloper.value = false
  })
  pageCmsWebsiteAll(where).then(response => {
    if(response?.list){
      list.value = response?.list;
      total.value = response.count;
    }
  }).catch(() => {})
}

/**
 * 搜索
 * @param data
 */
const search = (data: CmsArticleParam) => {
  where.page = data.page;
  reload();
}

watch(
    () => route.params.id,
    (id) => {
      // navId.value = getNavIdByParamsId(id);
      reload();
    },
    { immediate: true }
);
</script>
