<script setup lang="ts">
/**
 * @Name: index.vue
 * @Description:
 * @Author: xinyan
 */

import CreateKeyword from '/@/views/googleTrends/components/createKeyword.vue';
import KeywordTrendsChart from '/@/views/googleTrends/components/keywordTrendsChart.vue';

const loading = ref(true);
const keywordList = ref([]);

function updateKeywordList(newKeywords) {
  if (newKeywords.length > 0) {
    keywordList.value = newKeywords; // 更新关键词列表
    loading.value = false; // 有值时显示图表
  }
}
</script>

<template>
  <el-card class="mt-5 mx-2" v-loading="loading" style="height: 600px;">
    <KeywordTrendsChart v-if="keywordList.length > 0" :keywordList="keywordList"></KeywordTrendsChart>
  </el-card>
  <CreateKeyword @updateKeyword="updateKeywordList"></CreateKeyword>
</template>

<style scoped>

</style>