<!--
 * @Author: qinzhenpen qzp1807@126.com
 * @Date: 2025-05-05 16:42:18
 * @LastEditors: qinzhenpen qzp1807@126.com
 * @LastEditTime: 2025-05-21 18:08:10
 * @FilePath: \e-commerce-internet\src\views\assessment\diagnosis.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="diagnosis app-container">
    <div class="top_item">
      <template v-for="(item, index) in tablist" :key="item">
        <el-button :class="active == index ? 'active' : ''" :style="{ background: `url(${getAssetsFile(item.img)})`, backgroundSize: '100% 100%' }" @click="onClick(index)">
          {{ item.name }}
        </el-button>
      </template>
    </div>
    <div class="centent ptb10">
      <component v-if="component" :is="component"></component>
    </div>
  </div>
</template>
<script setup>
const { proxy } = getCurrentInstance();
import { getAssetsFile, isModuleUnique } from "@/utils/index.js";
const tablist = ref([
  {
    id: 0,
    name: "五维四率法",
    img: "11.png",
    com: defineAsyncComponent(() => import("./five.vue")),
  },
  {
    id: 1,
    name: "KANO模型",
    img: "22.png",
    com: defineAsyncComponent(() => import("./kano.vue")),
  },
  {
    id: 2,
    name: "市场机会矩阵",
    img: "33.png",
    com: defineAsyncComponent(() => import("./market.vue")),
  },
  {
    id: 3,
    name: "流量数据分析法",
    img: "44.png",
    com: defineAsyncComponent(() => import("./traffic.vue")),
  },
  {
    id: 4,
    name: "用户评论分析",
    img: "55.png",
    com: defineAsyncComponent(() => import("../digitalMarketingAlgorithms/components/emotion-analysis.vue")),
  },
]);
const active = ref(0);
const component = ref(tablist.value[0]?.com);
const onClick = (idx) => {
  if (tablist.value[idx]?.status) return proxy.$modal.msgError("该模块暂未开放");
  active.value = idx;
  component.value = tablist.value[idx]?.com;
};
onMounted(() => {
  tablist.value.forEach((item) => {
    if (!isModuleUnique([item.name])) {
      item.status = true;
    } else {
      item.status = false;
    }
  });
  console.log(tablist.value.filter((item) => !item.status)[0]);
  active.value = tablist.value.filter((item) => !item.status)[0]?.id;
  component.value = tablist.value.filter((item) => !item.status)[0]?.com;
});
</script>
<style lang='scss'  scoped>
.diagnosis {
  .top_item {
    .el-button {
      width: 170px;
      height: 50px;
      color: #ffffff;
      border: none;
      padding-left: 3vw;
    }
    .active {
      transform: scale(1.1);
      transition: all 0.3s ease-in-out;
    }
  }
  .centent {
    height: calc(100vh - 170px);
    padding-bottom: 0px;
  }
}
</style>