<template>
  <view class="placement-guide-style">
    <div class="part-div">
      <div>
        <a-tabs v-model:activeKey="tabData" class="a-tab-class" default-active-key="placement_guide">
          <a-tab-pane key="placement_guide" title="投放指南"></a-tab-pane>
          <a-tab-pane key="guide_history">
            <template #title>历史投放指南</template>
          </a-tab-pane>
        </a-tabs>
      </div>
      <!--表单组件搜索-->
      <listSearchForm></listSearchForm>
      <!--      投放指南-->
      <PlacementGuideList v-if="tabData == 'placement_guide'"></PlacementGuideList>
      <!--      历史指南列表-->
      <GuideListHistory v-if="tabData == 'guide_history'"></GuideListHistory>
    </div>

    <!--    本月摘要-->
    <MonthData></MonthData>

    <!--    投放建议-->
    <PlacementSuggestions></PlacementSuggestions>
    <ActionGuideDistribution></ActionGuideDistribution>
    <div>
      <a-space style="float: right; margin-top: 10px; margin-bottom: 20px">
        <a-button type="outline" @click="handleSearch">
          <template #icon>
            <icon-download />
          </template>
          <template #default>下载</template>
        </a-button>
        <a-button type="primary" @click="handleSearch">
          <template #icon>
            <icon-drive-file />
          </template>
          <template #default>保存</template>
        </a-button>
      </a-space>
    </div>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import top1 from '@/assets/img/captcha/top1.svg';
import top2 from '@/assets/img/captcha/top2.svg';
import top3 from '@/assets/img/captcha/top3.svg';
import '@/views/property-marketing/put-account/investment-guidelines/style.scss';
import PlacementGuideList from './components/table-data/placementGuideList.vue';
import listSearchForm from './components/table-data/listSearchForm.vue';
import GuideListHistory from './components/table-data/guideListHistory.vue';
import MonthData from './components/month-data/index.vue';
import PlacementSuggestions from './components/placement-suggestions/index.vue';
import ActionGuideDistribution from './components/action-guide-distribution';

const tabData = ref('placement_guide');

const listQuery = reactive({
  project_id: ref(''),
  platform: ref(''),
  page: ref(1),
  name: ref(''),
  page_size: ref('10'),
});

const topImages = [top1, top2, top3];
</script>

<style lang="less" scoped></style>
