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

import { BaseColumn } from '/@/views/adManage/utils/commonTabColumn';
import DateRangePicker from '/@/components/DateRangePicker/index.vue';
import DataCompare from '/@/components/dataCompare/index.vue';
import { FsPage, useFs } from '@fast-crud/fast-crud';
import { createCrudOptions } from './crud';
import { onMounted, ref } from 'vue';
import { storeToRefs } from 'pinia';
import { usePublicData } from '/@/stores/publicData';
import { LocationQueryValue } from 'vue-router';


interface Props {
  adGroupId: LocationQueryValue | LocationQueryValue[];
}

const props = defineProps<Props>();

const publicData = usePublicData();
const { dateRange } = storeToRefs(publicData);
const queryParams = ref({
  adGroupId: props.adGroupId,
  dateRange
});

const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: queryParams });

onMounted(() => {
  crudExpose.doRefresh();
});
</script>

<template>
  <fs-page class="fs-page-custom">
    <fs-crud ref="crudRef" v-bind="crudBinding">
      <!--<template #search-left>-->
      <!--  <DateRangePicker v-model="dateRange"></DateRangePicker>-->
      <!--</template>-->

      <!--<template v-for="field of Object.keys(BaseColumn)" #[`cell_${field}`]="scope">-->
      <!--  <DataCompare-->
      <!--      :field="field"-->
      <!--      :value="scope.row[field]"-->
      <!--      :prev-val="scope.row[`prev${field}`]"-->
      <!--      :gap-val="scope.row[`gap${field}`]"-->
      <!--      :date-range="dateRange"-->
      <!--      :show-compare="showCompare"-->
      <!--  />-->
      <!--</template>-->
      <!--<template #toolbar-left>-->
      <!--  <div class="campare-switch">-->
      <!--    <span>数据对比 </span>-->
      <!--    <el-switch v-model="showCompare" size="small" />-->
      <!--  </div>-->
      <!--</template>-->
    </fs-crud>
  </fs-page>
</template>

<style scoped>

</style>
