<script lang="ts" setup>
/**
 * @Name: index.vue
 * @Description: 买家之声-详情页
 * @Author: xinyan
 */
import TitleCard from '/@/views/customers-voice/components/show-detail/components/TitleCard.vue';
import LineChart from '/@/views/customers-voice/components/show-detail/components/LineChart.vue';
import DataDisplay from '/@/views/customers-voice/components/show-detail/components/DataDisplay.vue';

interface Parameter {
	asin: string;
	date: Array<string>;
}

const queryParameter: Parameter | undefined = inject('query-parameter');

const showOpen = defineModel({ default: false });

const showDrawer = <Ref>useTemplateRef('showDrawer');

const props: any = defineProps({
	rowData: Object,
});
const { rowData } = props;

const emit = defineEmits(['refresh']);
</script>

<template>
  <div class="drawer-container">
    <el-drawer
        ref="showDrawer"
        v-model="showOpen"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        direction="btt"
        size="90%"
        style="background-color: #F3F4FB !important;"
    >
      <div class="sticky top-0" style="background-color:#F3F4FB; min-height: 8px; z-index: 2"></div>
      <div class="px-5 mb-5">
        <TitleCard :rowData="rowData"></TitleCard>
        <LineChart :queryParameter="queryParameter" :rowData="rowData"></LineChart>
        <el-card class="border-none mt-5" shadow="hover">
          <DataDisplay :queryParameter="queryParameter" :rowData="rowData"></DataDisplay>
        </el-card>
      </div>
    </el-drawer>
  </div>
</template>

<style scoped>
.drawer-container :deep(.el-drawer__header) {
  border-bottom: none;
  font-weight: 500;
}
</style>
