<template>
  <div>
    <el-button type="primary" @click="showWorkshopData()">车间统计数据</el-button>
    <el-button type="primary" @click="showCameraData()">相机统计数据</el-button>
    <PlatformTable
      v-if="flattenedWorkshops.length > 0 && tableData !== undefined"
      :workshop-list="flattenedWorkshops"
      :table-data="tableData"
      table-label="访问次数"
      @table-params-changed="
        (v) => {
          tableQueryParams = v;
        }
      "
    />
    <el-dialog
      v-model="dialogVisible"
      width="1000px"
      :title="dialogTitle"
      :close-on-click-modal="true"
      :destroy-on-close="true"
      center
    >
      <DialogNavBar
        :workshop-list="dialogTitle === '相机统计数据' ? flattenedWorkshops : undefined"
        @chart-params-changed="
          async (v) => {
            console.log(v);
            await getChartData(v);
          }
        "
      />
      <BarChart :chart-data="chartData.val" :chart-lable="chartData.label" />
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import PlatformTable from '../common/PlatformTable.vue';
  import DialogNavBar from '../common/DialogNavBar.vue';
  import BarChart from '../../charts/BarChart.vue';
  import { ref, onBeforeMount, watch } from 'vue';
  import { useSceneInfos } from '@/hooks/useSceneInfos';
  import {
    type UserAccessRecordQueryParams,
    type UserAccessRecordList,
    type ChartQuery,
    getUserAccessRecords,
    getCameraVisitedTimes,
    getWorkshopVisitedTimes,
  } from '@/api/datamanagement/dataplatform';
  import { formatWorkshopChart, formatCameraChart } from '@/utils/platformUtils';

  // 下拉菜单车间列表数据
  const sceneInfos = useSceneInfos();
  const { flattenedWorkshops, getScenesTree } = sceneInfos;
  onBeforeMount(() => {
    getScenesTree({ level: 1, valueKey: 'code', labelKey: 'name', disabled: true });
  });

  // dialog显示
  const dialogVisible = ref(false);
  const dialogTitle = ref('');
  const showWorkshopData = () => {
    dialogVisible.value = true;
    dialogTitle.value = '车间统计数据';
  };
  const showCameraData = () => {
    dialogVisible.value = true;
    dialogTitle.value = '相机统计数据';
  };

  // 请求画图数据
  const getChartData = async (cp: ChartQuery) => {
    if (dialogTitle.value.includes('车间')) {
      const data = await getWorkshopVisitedTimes(cp);
      chartData.value = formatWorkshopChart(data);
    } else {
      const data = await getCameraVisitedTimes(cp);
      chartData.value = formatCameraChart(data);
    }
  };
  const chartData = ref<{
    label: string[];
    val: number[];
  }>({
    label: [],
    val: [],
  });

  // 请求表格数据
  const tableQueryParams = ref<UserAccessRecordQueryParams>({
    pageNumber: 1,
    pageSize: 10,
    // nickname: '',
    // username: '',
    // sortKey: 'statisticAll',
    // sortType: 'asc',
  });
  const tableData = ref<UserAccessRecordList>();
  watch(
    () => tableQueryParams.value,
    async () => {
      const data = await getUserAccessRecords(tableQueryParams.value);
      tableData.value = data;
    },
    {
      immediate: true,
      deep: true,
    },
  );
</script>

<style scoped lang="scss">
  :deep(.el-dialog__header) {
    text-align: left;
    border-bottom: 1px solid rgba(232, 232, 232, 1);
    padding-bottom: 16px;
    margin-bottom: 16px;
  }

  :deep(.el-dialog__title) {
    font-weight: 600;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.88);
    line-height: 24px;
  }
</style>
