<script lang="ts" setup name="Portfolios">
import { useFs } from '@fast-crud/fast-crud'
import { ElMessage } from 'element-plus'
import { storeToRefs } from 'pinia'
import { onBeforeUnmount, onMounted, ref } from 'vue'
import { getCardData, getLineData, getLineMonthData, getLineWeekData } from './api'
import DataTendencyChart from './chartComponents/dataTendency.vue'
import { createCrudOptions } from './crud'
import DateRangePicker from '/@/components/DateRangePicker/index.vue'
import DataCompare from '/@/components/dataCompare/index.vue'
import { usePublicData } from '/@/stores/publicData'
import { useShopInfo } from '/@/stores/shopInfo'
import emitter from '/@/utils/emitter'
import { SdBaseColumn } from '/@/views/adManage/utils/commonTabColumn.js'

const shopInfo = useShopInfo()
const publicData = usePublicData()
const { dateRange } = storeToRefs(publicData)
const tabActiveName = ref('dataTendency')
const { profile } = storeToRefs(shopInfo)
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: {} })
const showCompare = ref(false)

// 避免时间更改后立马刷新趋势图, 通过监听事件触发
const updateDateRange = ref([])
const searchName = ref('')
emitter.on('protfolios-update', (value: any) => {
  if (value.update != 1) {
    updateDateRange.value = dateRange.value
    searchName.value = value.query.name
  }
})

emitter.on('protfolios-createProtfolios', (value: any) => {
  if (value.data.msg == 'success') {
    ElMessage.success('创建成功')
  } else {
    ElMessage.error('创建失败')
  }
})

const queryParams = ref({
  profileId: profile.value.profile_id,
  dateRange: updateDateRange,
  name: searchName,
})

// 页面打开后获取列表数据
onMounted(() => {
  crudExpose.doRefresh()
})

onBeforeUnmount(() => {
  emitter.all.clear()
})
</script>

<template>
  <div class="asj-container">
    <fs-page class="fs-page-custom">
      <fs-crud ref="crudRef" v-bind="crudBinding">
        <template #search-left>
          <DateRangePicker v-model="dateRange" timezone="America/Los_Angeles" style="margin-right: 15px"></DateRangePicker>
        </template>
        <template #header-middle>
          <el-tabs v-model="tabActiveName" class="chart-tabs" type="border-card">
            <el-tab-pane label="数据趋势" name="dataTendency">
              <DataTendencyChart
                v-if="tabActiveName === 'dataTendency'"
                :query="queryParams"
                :fetch-card="getCardData"
                :fetch-line="getLineData"
                :fetch-line-month="getLineMonthData"
                :fetch-line-week="getLineWeekData">
              </DataTendencyChart>
            </el-tab-pane>
            <el-tab-pane label="广告结构" name="adStruct">
              <!-- <AdStructChart v-if="tabActiveName === 'adStruct'"/> -->
            </el-tab-pane>
            <el-tab-pane label="散点视图" name="scatterView">
              <div v-if="tabActiveName === 'scatterView'">散点视图</div>
            </el-tab-pane>
          </el-tabs>
        </template>

        <template v-for="field of Object.keys(SdBaseColumn)" #[`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="compare-switch">
            <span>数据对比 </span>
            <el-switch v-model="showCompare" size="small" />
          </div>
        </template>
      </fs-crud>
    </fs-page>
  </div>
</template>

<style scoped>
.public-search {
  display: flex;
  gap: 3px;
  padding-bottom: 3px;
  position: sticky;
  top: 0;
  z-index: 10;
  width: 100%;
  background-color: #f8f8f8;
  box-shadow: 0px 0px 0px rgba(51, 89, 181, 0.16);
}
.compare-switch {
  flex: none;
}
</style>
