<template>
  <div class="model-file-page">

    <BaseTable v-if="showTableContent" ref="curveResultTableRef" :head="tableColumns" :tableName="checkTableName" hidePagination>

      <template v-for="item in tableColumns" :key="item.key" #[item.key]="{row}">

        <div v-if="row[item.key]" class="img-content">

          <div class="chart-item" :id="'curve-chart-' + row[item.key]">
            {{ row[item.key] }}
          </div>

        </div>
      </template>
    </BaseTable>

  </div>
</template>

<script setup lang="ts">
import { ref, nextTick, watch } from 'vue';
import BaseTable from '@/components/common/table/baseTable.vue';
import { initEcharts } from '@/components/common/echartCard/echartsOptions';
import { getCSVDataApi } from '@/api/data/data';
import { objectTypeArrayRemovesDuplicates } from '@/utils/common';

const props = defineProps({
  checkTaskInfo: {
    type: Array,
    default: () => [],
  },
  checkTableName: {
    type: String,
    default: '',
  },
  cloumnWidth: {
    type: String,
    default: '',
  },
});
const curveResultTableRef = ref();
const showTableContent = ref(false);

const tableColumns = ref<any>([

]);

const tableData = ref<any>([

]);

const getTableColumnFun = (data:any) => {

  // console.log(data, 'data');

  showTableContent.value = false;
  tableData.value = [];
  tableColumns.value = [];
  const list:any = data || [];
  const defaultColumns:any = [
    {
      title: '曲线名称',
      key: 'attributes',
      isShow: true,
    },
  ];
  const curveResultcolumns:any = [];

  for (let i = 0;i < list.length;i++) {

    const obj:any = {
      title: `${list[i].taskName}_${list[i].runName}-曲线`,
      key: `${list[i].taskId}_${list[i].uuid}`,
      isShow: true,
    };

    curveResultcolumns.push(obj);

  }

  tableColumns.value = defaultColumns.concat(curveResultcolumns);
  tableColumns.value = objectTypeArrayRemovesDuplicates(tableColumns.value, 2);
  if (props.cloumnWidth) {
    for (let i = 0;i < tableColumns.value.length;i++) {
      tableColumns.value[i].width = props.cloumnWidth;
    }
  }

  for (let i = 0;i < tableColumns.value.length;i++) {
    const obj:any = {};
    const str = tableColumns.value[i].key;
    obj[str] = [];
    for (let j = 0;j < list.length;j++) {
      const str2 = list[j].taskId + '_' + list[j].uuid;
      if (str2 === str) {
        obj[str].push(list[j].id);
      }
    }
    obj[str] = obj[str].join(',');
    if (obj[str]) {
      tableData.value.push(obj);
    }
  }
  showTableContent.value = true;

  nextTick(async () => {
    curveResultTableRef.value.setDataFun(tableData.value);

    for (let i = 0;i < tableData.value.length;i++) {

      for (const key in tableData.value[i]) {
        if (tableData.value[i][key]) {
          await getCSVDataFun(tableData.value[i][key]);
        }
      }
    }

  });

};

const getCSVDataFun = async (ids: any) => {

  const res: any = await getCSVDataApi({ fileId: ids });
  if (res && res.code === 200) {
    getCsvFormatDataFun(res.data, ids);
  }
};

// 获取csv数据并转换为图表数据
const getCsvFormatDataFun = (data: any, ids: any) => {

  const seriesData: any = [];

  for (let i = 0; i < data.xData.length; i++) {
    const obj: any = {
      name: '曲线' + (i + 1),
      type: 'line',
      showSymbol: false,
      smooth: true,
      clip: true,
    };
    const newArr: any = [];
    for (let j = 0; j < data.xData[i].length; j++) {
      newArr.push([data.xData[i][j], data.yData[i][j]]);
    }
    obj.data = newArr;
    seriesData.push(obj);
  }

  const options: any = {
    series: seriesData,
    legend: {
      data: '曲线',
      top: '5%',
    },
    grid: {
      top: '8%',
      bottom: '5%',
      left: '5%',
      righ: '5%',
    },
    xAxis: {
      name: 'x',
      minorTick: {
        show: true,
      },
      minorSplitLine: {
        show: true,
      },
    },
    yAxis: {
      name: 'y',
      minorTick: {
        show: true,
      },
      minorSplitLine: {
        show: true,
      },
    },
  };

  const elementId = 'curve-chart-' + ids;
  initEcharts(elementId, elementId, 'lineChart', options);

};

watch(() => props.checkTaskInfo, (newVal) => {
  if (newVal) {
    getTableColumnFun(newVal);

  }

}, {
  immediate: true,
  deep: true,
});

</script>

    <style lang="scss" scoped>

    .model-file-page{
        width: 100%;
        height: 100%;

        .img-content{
          width: 100%;

          .chart-item{
            width: 100%;
            min-width: 300px;
            min-height: 300px;
          }

        }
    }
    </style>
