<template>
  <CommonRoot>
    <view class="home-container h-100vh d-flex flex-col bg-base page-user-index">
      <Image 
        :innerStyle="{ position:'absolute' }"
        width="100%"
        src="https://mncdn.wenlvti.net/app_static/minnan/images/mine/Banner.png"
        mode="widthFix"
      />
      <Image 
        :innerStyle="{ position:'absolute', }"
        innerClass="title"
        width="100rpx"
        src="https://mncdn.wenlvti.net/app_static/minnan/images/mine/Title.png"
        mode="widthFix"
      />
      <view class="content h-100 d-flex flex-col wing-l">
        <Touchable 
          direction="row"
          justify="space-between" 
          align="center"  
          touchable 
          :gap="25"
          :margin="[36,0]"
          @click="goUserProfile"
        >
          <FlexRow>
            <Image 
              v-if="userInfo"
              :src="userInfo.avatar"
              :defaultImage="UserHead"
              :failedImage="UserHead"
              :showFailed="false"
              mode="aspectFill" 
              class="avatar" 
              width="100rpx"
              height="100rpx"
              round
            />
            <Image 
              v-else
              :src="UserHead"
              mode="aspectFill" 
              class="avatar" 
              width="100rpx"
              height="100rpx"
              round
            />
            <Width :size="20" />
            <FlexCol>
              <Text fontConfig="h4" v-if="userInfo" color="white" :text="userInfo.nickname || `用户${userInfo.id}`" />
              <Text fontConfig="h4" v-else color="white" text="欢迎登录" />
              <Text color="white" v-if="userInfo" :text="`守护编号 ${userInfo.id} 积分 ${userInfo.totalCheckins || 0}`" />
            </FlexCol>
          </FlexRow>
          <Icon icon="arrow-right-bold" color="white" />
        </Touchable>

        <CellGroup round>
          <Cell icon="https://mnwhcdn.wenlvti.net/uploads/20250313/07f750b4cf4959654c40171fdae91c3a.png" title="投稿" showArrow touchable @click="goContribute">
            <template #value>
              <FlexRow>
                <NButton shape="round" type="success" size="small" :radius="40" @click="goContribute">去投稿</NButton>
                <Width :width="20" />
              </FlexRow>
            </template>
          </Cell>
          <Cell icon="https://mnwhcdn.wenlvti.net/uploads/20250313/66d4665b1da5075e60148312469b2630.png" title="我的投稿" showArrow touchable @click="goContributeList" />
          <Cell icon="https://mnwhcdn.wenlvti.net/uploads/20250313/042236758da5aaed21c1010e5b9440ce.png" title="我的收藏" showArrow touchable @click="goCollectList" />
          <Cell icon="https://mnwhcdn.wenlvti.net/uploads/20250313/1366973c061bf98594036e42c0344593.png" title="传承人之家" showArrow touchable @click="goInheritor" />
          <Cell icon="https://mnwhcdn.wenlvti.net/uploads/20250313/acd97ca7b3f7736942495c7aec1dd65b.png" title="闽南文化采集" showArrow touchable @click="goInheritor" />
          <button open-type="contact" class="remove-button-style">
            <Cell icon="https://mnwhcdn.wenlvti.net/uploads/20250313/d2e9010323d098aa51e268fc32f14d3d.png" title="在线客服" showArrow touchable />
          </button>
          <Cell v-if="userInfo" icon="https://mnwhcdn.wenlvti.net/uploads/20250313/cbc47d0b9cad7891e6154359952858c6.png" title="退出登录" showArrow touchable @click="doLogout" />

          <view class="list">
            <!-- 
            https://mnwhcdn.wenlvti.net/uploads/20250313/042236758da5aaed21c1010e5b9440ce.png
            我的好友
            https://mnwhcdn.wenlvti.net/uploads/20250313/9fb29e8bdb66490034145c90f892773a.png
            邀请好友
            https://mnwhcdn.wenlvti.net/uploads/20250313/1366973c061bf98594036e42c0344593.png
            积分日志
            https://mnwhcdn.wenlvti.net/uploads/20250313/acd97ca7b3f7736942495c7aec1dd65b.png
            加入我们
            https://mnwhcdn.wenlvti.net/uploads/20250313/d2e9010323d098aa51e268fc32f14d3d.png
            我的预约 -->
          </view>

          <DebugButton />
        </CellGroup>
      </view>
    </view>
  </CommonRoot>
</template>

<script setup lang="ts">
import { navTo } from '@/components/utils/PageAction';
import { useAuthStore } from '@/store/auth';
import { computed } from 'vue';
import { useReqireLogin } from '@/common/composeabe/RequireLogin';
import CellGroup from '@/components/basic/CellGroup.vue';
import Cell from '@/components/basic/Cell.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import Icon from '@/components/basic/Icon.vue';
import Touchable from '@/components/feedback/Touchable.vue';
import Image from '@/components/basic/Image.vue';
import Width from '@/components/layout/space/Width.vue';
import Text from '@/components/basic/Text.vue';
import NButton from '@/components/basic/Button.vue';
import DebugButton from './debug/DebugButton.vue';
import CommonRoot from '@/components/dialog/CommonRoot.vue';
import { confirm } from '@/components/dialog/CommonRoot';

const UserHead = 'https://mncdn.wenlvti.net/app_static/minnan/images/home/UserHead.png';

const authStore = useAuthStore();
const userInfo = computed(() => authStore.userInfo);
const { requireLogin } = useReqireLogin();

function doLogout() {
  confirm({
    content: '您确定要退出登录吗？',
  }).then((res) => {
    if (res)
      authStore.logout();
  });
}
function goContributeList() {
  requireLogin(() => navTo('/pages/user/contribute/list'), '登录后才能投稿哦！');
}
function goCollectList() {
  requireLogin(() => navTo('/pages/user/collect/index'), '登录后才能查看收藏哦！');
}
function goContribute() {
  requireLogin(() => navTo('/pages/user/contribute/submit'), '登录后才能投稿哦！');
}
function goInheritor() {
  navTo('/pages/collect/login');
}
function goUserProfile() {
  if (authStore.isLogged)
    navTo('/pages/user/profile/index');
  else
    navTo('/pages/user/login');
}
</script>

<style lang="scss" scoped>
.page-user-index {
  .content {
    margin-top: 10vh;
  }
}
</style>
