<template>
  <div class="flex h-screen overflow-hidden p-2.5 flex-col lg:flex-row">
    <div
      class="w-full lg:w-1/4 overflow-y-auto p-4 lg:shadow-[-10px_0_24px_-10px_rgba(0,0,0,0.25)]"
    >
      <!--  -->
      <div class="p-4 border border-gray-300 items-center justify-center flex rounded-2xl flex-col">
        <img class="h-10 rounded-full" :src="headImg" alt="" />
        <h1 style="font-size: 18px" class="font-bold leading-9">{{personInfo.first_name + personInfo.next_name}}</h1>
        <p style="font-size: 14px; color: gray" class="font-medium">Member since 2025</p>
        <div
          style="
            margin-left: 20px;
            margin-right: 20px;
            margin-top: 15px;
            margin-bottom: 15px;
            width: 100%;
            height: 0.5px;
            background-color: lightgray;
          "
        ></div>
        <!-- 那几个信息展示 -->
        <div
          v-for="(item, index) in infoList"
          :key="index"
          class="flex flex-row justify-between w-full ml-10 mr-10 mt-2"
        >
          <div class="flex flex-row items-center">
            <img class="h-5 mr-2" :src="item.img" alt="" />
            <span style="font-size: 16px">{{ item.text }}</span>
          </div>
          <span style="font-size: 16px" class="font-bold">{{ item.point }}</span>
        </div>
      </div>
      <!--  -->
      <div class=" mt-5" v-for="(value,index) in titleList">
        <InfoLeft @tapWhichOne="tapItem" :title="value.tit" :type="1"/>
        <InfoLeft @tapWhichOne="tapItem" :is-active="value.subtit1 === nowtit" :title="value.subtit1" :type="2"/>
        <InfoLeft @tapWhichOne="tapItem" :is-active="value.subtit2 === nowtit" :title="value.subtit2" :type="2"/>
        <div style="height: 0.5px;
          margin-left: 20px;margin-right: 40px;
          width: 100%;background-color: lightgray;
          margin-top: 15px;
          margin-bottom: 15px;
        "></div>
      </div>
      <!--  -->
      <div @click="logOutAction" class="flex mt-5 w-full h-12 flex-row items-center justify-center rounded-full border border-red-500">
        <ArrowRightEndOnRectangleIcon class="w-6 h-6 text-[red]"></ArrowRightEndOnRectangleIcon>
        <span class="ml-2 font-bold text-[red] ">Log out</span>
      </div>

      <div class="text-[gray] mt-2.5 text-[14px]">©2025 Survey Junkie. All rights reserved.</div>
      
    </div>
    <!-- ----------------------------------------------------------------------------- -->
    <!-- <div class="w-full lg:block lg:w-3/4 overflow-y-auto">
      <RouterView></RouterView>
    </div> -->

    
    <main
      :class="[
        'w-full lg:w-3/4 overflow-y-auto',
        // 手机 + 子页：固定定位覆盖全屏（盖住侧栏/父布局）
        (isMobile && inChild)
          ? 'fixed inset-0 z-50 bg-white pl-8 pr-8'
          : 'relative lg:static'
      ]"
    >
      <div v-if="isMobile" class="w-full shadow-[0_8px_16px_-8px_rgba(0,0,0,0.25)] h-[50px] flex justify-center items-center font-bold">
              <img @click="()=>router.back()" class=" absolute left-5 h-[50px]" :src="backImg" alt="">
              {{mapRoute[route.name]}}
      </div>
      <RouterView />
    </main>
  </div>
</template>

<script setup lang="js">
import headImg from '@/assets/icon.jpg'
import starImg from '@/assets/star.svg'
import bookImg from '@/assets/book.svg'
import moneyImg from '@/assets/money.svg'
import backImg from '@/assets/back.jpg'
import InfoLeft from '../components/InfoLeft.vue'
import { ref,onMounted,watchEffect,computed} from 'vue'
import { toName } from './jump'
import { ArrowRightEndOnRectangleIcon } from '@heroicons/vue/24/outline'
import { getPersonInfo } from '@/http/register.js'
import { getToken,removeToken,removeLogin } from '@/utils/local.js'
import { useRoute,useRouter } from 'vue-router'
import useWindowSize from '@/utils/useWindowSize.js'


const {isMobile} = useWindowSize()


const route = useRoute()
const router = useRouter()


const DEFAULT_CHILD = 'account-help-support'
watchEffect(() => {
  // console.log('尺寸变化',isMobile.value,'路由名',route.name)
  if (isMobile.value == false && route.name === 'account') {
    // console.log('尺寸变化111',isMobile.value,'路由名111',route.name)
    router.replace({ name: DEFAULT_CHILD })
  }
  // else if(isMobile.value == true ){
  //   router.replace({ name: DEFAULT_CHILD })
  // }
})

const personInfo =  ref({})

const infoList = ref([
  {
    img: starImg,
    text: 'Lifetime points',
    point: '0'//integrals
  },
  {
    img: bookImg,
    text: 'Earned this year',
    point: '0'//year_integrals
  },
  {
    img: moneyImg,
    text: 'Redeemed this year',
    point: '$0'//all_integrals_money
  }
])

const titleList = [
  {
    tit:'Settings',
    subtit1:'Personal info',
    subtit2:'Profile questions'
  },
  {
    tit:'Help',
    subtit1:'Get support',
    subtit2:'Contact us'
  },
  {
    tit:'Legal',
    subtit1:'Terms & conditions',
    subtit2:'Privacy policy'
  }
]


const mapRoute = {
      'account-settings-personal':'Personal info',
      'account-settings-questions':'Profile questions',
      'account-help-support':'Get support',
      'account-help-contact':'Contact us',
      'account-legal-terms':'Terms & conditions',
      'account-legal-privacy':'Privacy policy',
}

const nowtit = ref(mapRoute[route.name])

const tapItem = (tit) => {
  console.log('点击',tit)
  nowtit.value = tit
  toName(tit)
}


const inChild = computed(() => route.name && route.name !== 'account')

const logOutAction = () => {
  removeToken()
  removeLogin()
  router.replace({ path: '/register' })
}

// watch(()=>route.name,(newName,oldName)=>{
//   console.log('现在的路由名字是',newName,'旧路由是',oldName)
//   nowtit.value = newName
// })


const getPersonInfoFun = async() => {
  const myToken = getToken()
  const res = await getPersonInfo(myToken)
  if(res.code == 1){
    personInfo.value = res.data
    infoList.value[0].point = res.data.integrals
    infoList.value[1].point = res.data.year_integrals
    infoList.value[2].point = '$'+res.data.all_integrals_money
  }
}

onMounted(() => {
  getPersonInfoFun()
})
</script>

<style lang="scss" scoped>
</style>