<script setup lang="ts">
import { inject, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
import { getListData } from '../api'
import { universalColumns } from '../utils/columns'
import emitter from '/@/utils/emitter'

const profile = <any>inject('profile')
const dateRange = <any>inject('dateRange')
const tableData = <any>inject('tableData')

emitter.on('DateTendency-changeStatDim', () => {
  tableLoading.value = true
})
const tableLoading = ref(false)

const gridOptions = reactive({
  height: 'auto',
  border: false,
  round: true,
  showFooter: true,

  columnConfig: {
    resizable: true,
  },
  toolbarConfig: {
    custom: true,
  },
  columns: [],
  data: [],
})

async function fetchListData() {
  tableLoading.value = true
  const query = {
    profileId: profile.value.profile_id,
    startDate: dateRange.value[0],
    endDate: dateRange.value[1],
  }
  try {
    const res = await getListData(query)
    gridOptions.columns = universalColumns
    gridOptions.data = res.data
  } catch (error) {
    console.log('error:', error)
  } finally {
    tableLoading.value = false
  }
}

watch(tableData, () => {
  gridOptions.data = tableData.value
  tableLoading.value = false
})

onMounted(() => {
  fetchListData()
})

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

<template>
  <el-card body-style="padding-top: 0;" style="margin-top: 10px">
    <div class="outer-container" v-loading="tableLoading">
      <vxe-grid v-bind="gridOptions">
        <template v-for="col in universalColumns" #[`${col.field}_default`]="{ row }">
          <div>
            {{ row[col.field] ? row[col.field] : '-' }}
          </div>
        </template>
      </vxe-grid>
    </div>
  </el-card>
</template>

<style scoped>
.outer-container {
  overflow: hidden;
  width: 100%;
  height: 800px;
}
</style>
