<template>
  <div class="h-full mt-[5vh] flex justify-around">
    <n-card class="left h-[80vh] rounded-sm mt-4 w-[40vw]">
      <template #header>
        <div class="text-xl text-center">小工具</div>
      </template>
      <div class=" flex justify-around">
        <n-card v-show="i.show" class="w-[45%] mt-4 h-20 bg-[#f3f4f5]" hoverable size="small" @click="handdleWidget(i)" v-for="i in widgets">
          <template #header>
            <div class="text-pp-500 text-center">{{ i.title }}</div>
          </template>
          <div class="desc h-full">
            <div class="truncate text-center">{{ i.desc }}</div>
          </div>
        </n-card>
      </div>

    </n-card>
    <n-divider class="h-[80vh] bg-pp-500 mt-4" vertical />
    <div class="right h-[80vh]  w-[40vw]">
      <n-card class="w-full h-full mt-4" :title="title" size="medium">
        <component class="w-full" :is="comp"></component>
      </n-card>
    </div>

  </div>
</template>

<script setup>
//mark import
import phone2qq from './component/phone2qq.vue';
import qq2phone from './component/qq2phone.vue';
//mark data
const comp = ref(markRaw(qq2phone),);
const title = ref('QQ号查手机号');
const widgets = ref([{
  name: 'qq2phone',
  comp: markRaw(qq2phone),
  title: 'QQ号查手机号',
  desc: "请勿乱用，打扰别人生活！",
  show: true
}, {
  name: 'phone2qq',
  comp: markRaw(phone2qq),
  title: '手机号查QQ号',
  desc: "请勿乱用，打扰别人生活！",
  show: true
}]);




//mark method
function handdleWidget(i) {
  comp.value = i.comp;
  title.value = i.title;
}

//mark 周期、内置函数等


</script>

<style scoped></style>