<template>
  <div class="main">
    <div style="display: flex">
      <div>
        <PersonalInfoCard></PersonalInfoCard>
      </div>
      <div style="flex-direction: column;display: flex">
        <div style="display: flex;flex-direction: row;margin-left: 40px;margin-top: 10px">
          <InfoCard v-if="this.infoData.urlListNum && this.infoData.name1 && this.infoData.icon1" :info="this.infoData.urlListNum" :name="this.infoData.name1" :icon="this.infoData.icon1"></InfoCard>
          <InfoCard v-if="this.infoData.cateNum && this.infoData.name2 && this.infoData.icon2" :info="this.infoData.cateNum" :name="this.infoData.name2" :icon="this.infoData.icon2" style="margin-left: 10px"></InfoCard>
        </div>

      </div>
    </div>
  </div>
</template>
<script>
import PersonalInfoCard from "@/components/setting/home/PersonalInfoCard.vue";
import InfoCard from "@/components/setting/home/InfoCard.vue";
import axios from "axios";
import Vue from "vue";

export default {
  name: "PersonalHomePage",
  components: { InfoCard, PersonalInfoCard},
  data() {
    return {
      infoData:{
        name1:'书签',
        name2:'分类',
        urlListNum:null,
        cateNum:null,
        icon1:'https://imgbed.landaiqing.space/img/1/2023/12/25/1_65893ab12d3f2_1703492272311_20231225.webp',
        icon2:'https://imgbed.landaiqing.space/img/1/2023/12/25/1_65893af89eecf_1703492343951_20231225.webp',
      },

    }
  },
  mounted() {
    this.getUserInfo();
  },
  created() {

  },
  computed: {},
  methods: {
    getUserInfo() {
      let _this = this;
      if(localStorage.getItem("Authorization") && localStorage.getItem("userId")){
        axios({
          method: 'get',
          url: '/api/getCateAndListNum',
          params:{
            userId:localStorage.getItem("userId")
          }
        }).then(function (res) {
          if(res){
            _this.infoData.cateNum=res.data.cateNum;
            _this.infoData.urlListNum=res.data.urlListNum;

          }else{
            return false;
          }
        }).catch((error) => {
          // Vue.prototype.$notify.error({
          //   title: '错误',
          //   message: error,
          //   offset: 0
          // });
        })
      }else {
        Vue.prototype.$notify.error({
          title: '错误',
          message: "登录状态失效，请重新登录！",
          offset: 0
        });
      }

    },
  }

}
</script>
<style scoped>
.main {
//display: flex; //align-items: center; //flex-direction: row;
}
</style>