<template>
  <div class="task-performance-page">
    <div class="task-curve-page-left">
      <div class="task-run-box">
        <el-tree
          ref="taskRunRef"
          :data="runTreeData"
          show-checkbox
          default-expand-all
          check-strictly
          @check-change="handleCheckChangeFun"
        />
      </div>
      <div class="task-curve-box">
        <div class="current-box-title">
          对比曲线
        </div>
        <div class="curve-list">
          <div class="curve-list-item" v-for="item in curveList" :key="item.id">
            <span>{{ item.originalName }}</span>
            <div>
              <span>图</span>
              <el-input class="input-style" size="small" v-model="item.num" @change="handleChangeNumFun" />

            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="task-curve-page-right">
      <div class="task-curve-right-operate">
        <span>列数：</span>
        <el-input class="input-style" size="small" v-model="filterForm.lineNum" @change="handleChangeNumFun" />

      </div>

      <div class="task-curve-right-content">
        <div
          class="img-item"
          :style="{ width: `calc((100% / ${filterForm.lineNum}) - 20px)`, height: `calc((100% / ${filterForm.lineNum}) - 20px)` }"
          v-for="item in curveNumData"
          :key="item"
        >
          <!-- <img class="task-img" :src="item.url" alt=""> -->
          <div class="task-img" :id="'chart_' + item">
          </div>
          <div class="img-title">{{ '图' + item }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue';
import { getSimulationTaskFilesApi, getCSVDataApi } from '@/api/data/data';
import { initEcharts } from '../common/echartCard/echartsOptions';

const props = defineProps({
  taskId: {
    type: String,
    default: '',
  },
});
const runTreeData = ref<any>([]);
const curveList = ref<any>([]);
const taskRunRef = ref();

const filterForm = reactive<any>({
  lineNum: 2,
});

const getTaskRunDataFun = () => {

  runTreeData.value = [
    {
      label: '当前任务',
      id: props.taskId,
      // disabled: true,
      children: [

      ],
    },
  ];

  // console.log(props.taskId);
  // console.log(runTreeData.value);
  // console.log(curveList.value);
  // ElMessage.success('获取任务算例数据' + props.taskId);

};

const selectTreeData = ref<any>([]);
const handleCheckChangeFun = () => {
  // ElMessage.success('选择了' + data.label);
  selectTreeData.value = taskRunRef.value.getCheckedNodes();
  console.log(selectTreeData.value, 'selectTreeData.value');

  getCheckedNodesCurveFun();

};

const curveNumData = ref<any>([]);

// 获取勾选的算例下的曲线文件
const getCheckedNodesCurveFun = async () => {
  curveList.value = [
    // { name: '曲线1', id: 1, num: 1 },
    // { name: '曲线2', id: 2, num: 1 },
    // { name: '曲线3', id: 3, num: 1 },
    // { name: '曲线4', id: 4, num: 1 },
    // { name: '曲线5', id: 5, num: 1 },
    // { name: '曲线6', id: 6, num: 1 },
    // { name: '曲线7', id: 7, num: 1 },
    // { name: '曲线8', id: 8, num: 1 },
    // { name: '曲线9', id: 9, num: 1 },
    // { name: '曲线10', id: 10, num: 1 },
    // { name: '曲线11', id: 11, num: 1 },

  ];

  const res: any = await getSimulationTaskFilesApi({
    taskId: props.taskId,
    fileBizType: 5,
    fileName: '',
    startTime: '',
    endTime: '',
    current: 1,
    size: 1000,
  });

  if (res && res.code === 200) {
    curveList.value = res.data?.data?.map((item: any, index: any) => {
      return {
        ...item,
        num: index + 1,
      };
    });
  }

  if (curveList.value.length) {
    const list = curveList.value.map((item: any) => item.num);
    curveNumData.value = Array.from(new Set(list));
    getCommonNumCurveFun();
  }

  console.log(curveNumData.value, 'curveNumData.value');
};

const handleChangeNumFun = () => {
  console.log(curveList.value, 'val');
  const list = curveList.value.map((item: any) => Number(item.num));
  curveNumData.value = Array.from(new Set(list));

  getCommonNumCurveFun();
};

const curveTypeData = ref<any>([]);
const getCommonNumCurveFun = async () => {
  curveTypeData.value = [];
  const list = curveList.value.map((item: any) => Number(item.num));
  curveNumData.value = Array.from(new Set(list));

  for (let i = 0; i < curveNumData.value.length; i++) {
    const arr: any = [];
    for (let j = 0; j < curveList.value.length; j++) {
      if (curveNumData.value[i] === Number(curveList.value[j].num)) {
        arr.push(curveList.value[j]);
      }
    }
    curveTypeData.value.push({ num: curveNumData.value[i], data: arr });
  }

  console.log(curveTypeData.value, 'curveTypeData.value');

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

    await getCSVDataFun(curveTypeData.value[i].data, curveTypeData.value[i].num);

  }

};

const getCSVDataFun = async (data: any, num: any) => {
  const ids = data.map((item: any) => { return item.id; }).join(',');
  console.log(ids, 'ids');
  const res: any = await getCSVDataApi({ fileId: ids });
  if (res && res.code === 200) {
    getCsvFormatDataFun(res.data, num);
  }
};

// 获取csv数据并转换为图表数据
const getCsvFormatDataFun = (data: any, num: any) => {
  const selectDatas = curveTypeData.value.find((item: any) => {
    return item.num === num;
  });
  const title = selectDatas.data.map((item: any) => item.originalName);

  const seriesData: any = [];

  for (let i = 0; i < data.xData.length; i++) {
    const obj: any = {
      name: title[i],
      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: title,
      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 = 'chart_' + num;
  initEcharts(elementId, elementId, 'lineChart', options);
  console.log(options, 'options');

};

onMounted(() => {
  getTaskRunDataFun();
});
</script>

<style lang="scss" scoped>
.task-performance-page {
  width: 100%;
  height: 100%;
  display: flex;
  // align-items: center;
  justify-content: space-between;

  // :deep(.is-disabled) {
  //   display: none;
  // }

  .task-curve-page-left {
    width: 35%;
    height: 100%;
    overflow: auto;

    .task-run-box {
      width: 100%;
      height: 200px;
      margin-bottom: 10px;
      overflow: auto;

    }

    .task-curve-box {
      width: 100%;
      height: calc(100% - 210px);

      .current-box-title {
        width: 100%;
        height: 30px;
        display: flex;
        align-items: center;
        padding-left: 10px;
      }

      .curve-list {
        width: 100%;
        height: calc(100% - 30px);
        padding-left: 40px;
        overflow: auto;

        .curve-list-item {
          width: 100%;
          height: 30px;
          background-color: white;
          display: flex;
          align-items: center;
          justify-content: space-between;

        }
      }

    }
  }

  .task-curve-page-right {
    width: calc(65% - 10px);
    height: 100%;
    padding-left: 20px;

    .task-curve-right-operate {
      width: 100%;
      height: 40px;

      display: flex;
      align-items: center;
    }

    .task-curve-right-content {
      width: 100%;
      height: calc(100% - 50px);
      display: flex;
      flex-wrap: wrap;
      overflow: auto;

      .img-item {
        margin-right: 10px;
        margin-bottom: 10px;

        .task-img {
          width: 100%;
          height: 100%;
          border: 1px solid #ddd;

        }

        .img-title {
          width: 100%;
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }

  .input-style {
    width: 50px;
    margin-left: 5px;
    margin-right: 10px;
  }
}
</style>
