<script lang="ts" setup>
/**
 * @Name: index.vue
 * @Description: 评论详情
 * @Author: Cheney
 */

import NegativeClassification from '/@/views/product-manage/comment-detail/component/NegativeClassification.vue';
import AverageMonthly from '/@/views/product-manage/comment-detail/component/AverageMonthly.vue';
import TitleCard from './component/TitleCard.vue';
import DataTable from '/@/views/product-manage/comment-detail/component/DataTable.vue';
import NegativeLabelChart from '/@/views/product-manage/comment-detail/component/NegativeLabelChart.vue';

const route = useRoute()

const rowData: any = ref(route.query)

</script>

<template>
  <div v-if="rowData" class="drawer-container">
      <div class="sticky top-0" style="background-color:#F3F4FB; min-height: 20px; z-index: 2"></div>
      <div class="px-5">
        <!-- Title Card -->
        <TitleCard :asin="rowData.asin" :img="rowData.img" :title="rowData.title" :url="rowData.url" />
        <!--Chart -->
        <el-row :gutter="20" class="mt-5" style="z-index: 1">
          <el-col :span="8">
            <NegativeLabelChart :asin="rowData.asin" />
          </el-col>
          <el-col :span="16">
            <NegativeClassification :asin="rowData.asin" />
          </el-col>
        </el-row>
        <!--Chart -->
        <div class="mt-5">
          <AverageMonthly :asin="rowData.asin" />
        </div>
        <!-- Data Table -->
        <div class="my-5">
          <el-card class="border-none" shadow="hover">
            <DataTable :asin="rowData.asin" />
          </el-card>
        </div>
      </div>
  </div>

</template>

<style scoped>
</style>
