<template>
  <div class="gl-page-content">
    <BaseTable
      v-if="currentModel === '仿真工况'"
      ref="tableRef"
      :searchItems="searchItems"
      :searchParams="{model:'仿真工况'}"
      :api="getTaskListApi"
      :searchLimitNum="3"
      tableName="SIMULATION_TASK_ANALYSIS"
      showIndex
      showCheckbox
      @searchChange="searchChangeFun"
      :checkboxConfig= "{
        checkMethod: ({ row }:any) => {
          return !compareListIds.includes(row.id)
        }
      }"
    >
      <template #leftOptions>
        <el-button type="primary" @click="addCompareListFun">加入对比池</el-button>
        <el-button type="primary" @click="showCompareListFn">查看对比池</el-button>
        <el-button type="primary" @click="compareFn('仿真工况')">对比</el-button>
      </template>
      <template #tableActions="{row}">
        <el-link type="primary">查看详情</el-link>
      </template>
    </BaseTable>
    <BaseTable
      v-if="currentModel === '仿真算例'"
      ref="tableRef"
      :searchItems="searchItems"
      :searchParams="{model:'仿真算例'}"
      :api="getRunListApi"
      :searchLimitNum="3"
      tableName="SIMULATION_RUN_ANALYSIS"
      showIndex
      showCheckbox
      @searchChange="searchChangeFun"
      :checkboxConfig= "{
        checkMethod: ({ row }:any) => {
          return !compareListIds.includes(row.id)
        }
      }"
    >
      <template #leftOptions>
        <el-button type="primary" @click="addCompareListFun">加入对比池</el-button>
        <el-button type="primary" @click="showCompareListFn">查看对比池</el-button>
        <el-button type="primary" @click="compareFn('仿真算例')">对比</el-button>
      </template>
      <template #tableActions="{row}">
        <el-link type="primary">查看详情</el-link>
      </template>
    </BaseTable>
    <BaseTable
      v-if="currentModel === '数据指标'"
      ref="tableRef"
      :searchItems="searchItems"
      :searchParams="{model:'数据指标'}"
      :api="getPerformanceListApi"
      :searchLimitNum="3"
      tableName="SIMULATION_PERFORMANCE_ANALYSIS"
      showIndex
      showCheckbox
      @searchChange="searchChangeFun"
      :checkboxConfig= "{
        checkMethod: ({ row }:any) => {
          return !compareListIds.includes(row.id)
        }
      }"
    >
      <template #leftOptions>
        <el-button type="primary" @click="addCompareListFun">加入对比池</el-button>
        <el-button type="primary" @click="showCompareListFn">查看对比池</el-button>
        <el-button type="primary" @click="compareFn('数据指标')">对比</el-button>
      </template>
    </BaseTable>
    <BaseTable
      v-if="currentModel === '模型文件'"
      ref="tableRef"
      :searchItems="searchItems"
      :searchParams="{model:'模型文件'}"
      :params="{ fileType:1}"
      :api="getSimulationTaskFileApi"
      :searchLimitNum="3"
      tableName="RESULT_MODEL"
      showIndex
      showCheckbox
      @searchChange="searchChangeFun"
      :checkboxConfig= "{
        checkMethod: ({ row }:any) => {
          return !compareListIds.includes(row.id)
        }
      }"
    >
      <template #leftOptions>
        <el-button type="primary" @click="addCompareListFun">加入对比池</el-button>
        <el-button type="primary" @click="showCompareListFn">查看对比池</el-button>
        <el-button type="primary" @click="compareFn('模型文件')">对比</el-button>
      </template>
      <template #tableActions="{row}">
        <el-space>
          <el-link type="primary">预览</el-link>
          <UploadFile v-model="row.id" :name="$t('知识库.下载')" />
        </el-space>
      </template>
    </BaseTable>
    <BaseTable
      v-if="currentModel === '仿真报告'"
      ref="tableRef"
      :searchItems="searchItems"
      :searchParams="{model:'仿真报告'}"
      :params="{ fileType:2}"
      :api="getSimulationTaskFileApi"
      :searchLimitNum="3"
      tableName="RESULT_REPORT"
      showIndex
      showCheckbox
      @searchChange="searchChangeFun"
      :checkboxConfig= "{
        checkMethod: ({ row }:any) => {
          return !compareListIds.includes(row.id)
        }
      }"
    >
      <template #leftOptions>
        <el-button type="primary" @click="addCompareListFun">加入对比池</el-button>
        <el-button type="primary" @click="showCompareListFn">查看对比池</el-button>
        <el-button type="primary" @click="compareFn('仿真报告')">对比</el-button>
      </template>
      <template #tableActions="{row}">
        <el-space>
          <el-link type="primary">预览</el-link>
          <UploadFile v-model="row.id" :name="$t('知识库.下载')" />
        </el-space>
      </template>
    </BaseTable>
    <BaseTable
      v-if="currentModel === '计算文件'"
      ref="tableRef"
      :searchItems="searchItems"
      :searchParams="{model:'计算文件'}"
      :params="{ fileType:3}"
      :api="getSimulationTaskFileApi"
      :searchLimitNum="3"
      tableName="RESULT_FILE"
      showIndex
      showCheckbox
      @searchChange="searchChangeFun"
      :checkboxConfig= "{
        checkMethod: ({ row }:any) => {
          return !compareListIds.includes(row.id)
        }
      }"
    >
      <template #leftOptions>
        <el-button type="primary" @click="addCompareListFun">加入对比池</el-button>
        <el-button type="primary" @click="showCompareListFn">查看对比池</el-button>
        <el-button type="primary" @click="compareFn('计算文件')">对比</el-button>
      </template>
      <template #tableActions="{row}">
        <el-space>
          <UploadFile v-model="row.id" :name="$t('知识库.下载')" />
        </el-space>
      </template>
    </BaseTable>
    <BaseTable
      v-if="currentModel === '结果曲线'"
      ref="tableRef"
      :searchItems="searchItems"
      :searchParams="{model:'结果曲线'}"
      :params="{ fileType:4}"
      :api="getSimulationTaskFileApi"
      :searchLimitNum="3"
      tableName="RESULT_CURVE"
      showIndex
      showCheckbox
      @searchChange="searchChangeFun"
      :checkboxConfig= "{
        checkMethod: ({ row }:any) => {
          return !compareListIds.includes(row.id)
        }
      }"
    >
      <template #leftOptions>
        <el-button type="primary" @click="addCompareListFun">加入对比池</el-button>
        <el-button type="primary" @click="showCompareListFn">查看对比池</el-button>
        <el-button type="primary" @click="compareFn('结果曲线') ">对比</el-button>
      </template>
      <template #tableActions="{row}">
        <el-space>
          <el-link type="primary">预览</el-link>
          <UploadFile v-model="row.id" :name="$t('知识库.下载')" />
        </el-space>
      </template>
    </BaseTable>
    <BaseTable
      v-if="currentModel === '结果云图'"
      ref="tableRef"
      :searchItems="searchItems"
      :searchParams="{model:'结果云图'}"
      :params="{ fileType:5}"
      :api="getSimulationTaskFileApi"
      :searchLimitNum="3"
      tableName="RESULT_PNG"
      showIndex
      showCheckbox
      @searchChange="searchChangeFun"
      :checkboxConfig= "{
        checkMethod: ({ row }:any) => {
          return !compareListIds.includes(row.id)
        }
      }"
    >
      <template #leftOptions>
        <el-button type="primary" @click="addCompareListFun">加入对比池</el-button>
        <el-button type="primary" @click="showCompareListFn">查看对比池</el-button>
        <el-button type="primary" @click="compareFn('结果云图') ">对比</el-button>
      </template>
      <template #tableActions="{row}">
        <el-space>
          <el-link type="primary">预览</el-link>
          <UploadFile v-model="row.id" :name="$t('知识库.下载')" />
        </el-space>
      </template>
    </BaseTable>
    <Dialog
      v-model="diaVisible"
      diaTitle="曲线对比"
      :width="'90%'"
      :height="'90%'"
      :confirm-closable="false"
      :zIndex="3000"
    >
      <div class="compare-container">
        <div class="compare-container-left">
          <BaseTable
            ref="tableCompareRef"
            tableName="COMPARE_CURVE"
            showIndex
            showCheckbox
            hidePagination
            :render="renderFun"
            @checkbox-change="checkBoxChangeFun"
            @checkbox-all="checkBoxChangeFun"
            @searchChange="searchChangeFun"
          >
            <template #leftOptions>
              <div class="compare-container-left-options">
                <span>设置列数据：</span>

                <el-input-number v-model="columnData" :min="1" :max="10" />
              </div>

            </template>
            <template #tableActions="{row}">
              <span>图：</span>
              <el-input class="image-number-input" v-model="row.imageNumber" @blur="changeImageNumberFun" />
            </template>
          </BaseTable>
        </div>
        <div class="compare-container-right">
          <div
            class="chart-container"
            :style="{
              gridTemplateColumns: `repeat(${columnData} ,${100 / columnData}%)`

            }"
          >
            <div class="chart-box" v-for="(value,key) in compareData" :key="key" >
              <EchartCard
                :title="`图${key}`"
                :ref="(el) => (projectStorageSpaceStatisticsRef[`chart-${key}`] = el)"
                :charts-id="'chart-' + key"
                :bar-type="'lineChart'"
              >
              </EchartCard>
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <div>
          <el-button @click="closeFun">关闭</el-button>
        </div>
      </template>
    </Dialog>
    <Dialog
      v-model="diaPngVisible"
      diaTitle="云图对比"
      :width="'90%'"
      :height="'90%'"
      :confirm-closable="false"
      :zIndex="3000"
    >
      <div class="compare-container">
        <div class="compare-container-left">
          <BaseTable
            ref="tableComparePngRef"
            tableName="COMPARE_PNG"
            showIndex
            showCheckbox
            hidePagination
            :render="renderPngFun"
            @checkbox-change="checkBoxPngChangeFun"
          >
            <template #leftOptions>
              <div class="compare-container-left-options">
                <span>设置列数据：</span>

                <el-input-number v-model="columnPngData" :min="1" :max="10" />
              </div>

            </template>

          </BaseTable>
        </div>
        <div class="compare-container-right">
          <div
            class="chart-container"
            :style="{
              gridTemplateColumns: `repeat(${columnPngData} ,${100 / columnPngData}%)`
            }"
          >
            <div class="chart-box-png" v-for="(item,index) in comparePngData" :key="index" >
              <div class="png-container">
                <div class="png-title">{{ item.originalName }}</div>
                <div class="png-image">
                  <el-image :src="item.url" fit="scale-down" />
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <div>
          <el-button @click="closePngFun">关闭</el-button>
        </div>
      </template>
    </Dialog>

    <Dialog
      v-model="compareListVisible"
      diaTitle="对比池信息"
      :width="'50%'"
      :height="'50%'"
      :confirm-closable="false"
      :zIndex="3000"
      @close="closeCompareListFn"
    >
      <div class="compare-content">
        <BaseTable
          ref="compareTableRef"
          showIndex
          showCheckbox
          :head="compareListHead"
          :table-name="''"
          :hide-pagination="true"
        >

          <template #operate="{row}">
            <el-button type="danger" link @click="deleteCompareDataFn(row)">删除</el-button>
          </template>
        </BaseTable>
      </div>
    </Dialog>

    <analysisDataDialog v-if="loadcaseAnalysisVisable" @close="closeAnalysisFn" :analysis-data="selectAnalysisData"></analysisDataDialog>

  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue';
import BaseTable from '@/components/common/table/baseTable.vue';
import { queryNodeListApi, getChildrenNodeListApi } from '@/api/project/node';
import { getSimulationTaskFileApi, getCSVDataApi } from '@/api/data/dataAnalysis';
import { NODE_TYPE } from '@/utils/enum/node';
import { getTaskListApi, getPerformanceListApi, getRunListApi } from '@/api/project/analysis';
import { ElMessage } from 'element-plus';
import Dialog from '@/components/common/dialog/index.vue';
import EchartCard from '@/components/common/echartCard/index.vue';
import { groupBy } from 'lodash';
import UploadFile from '@/components/common/uploadFile/index.vue';
import analysisDataDialog from './components/analysisDataDialog.vue';

const tableRef = ref();
const searchChangeFun = ({ data, key, val }:any) => {
  console.log('1740', data, key, val );
  compareList.value = [];
  compareListIds.value = [];
  if (key === 'model') {
    compareList.value = [];
    currentModel.value = val;
  }
  if (val) {
    if (key === 'project') {
      getPhaseOptionsFun();
    }
    if (key === 'phase') {
      getDisciplineOptionsFun();
    }
  } else {
    if (key === 'project') {
      tableRef.value?.setSearchParamByKeyFun('phase', '');
      tableRef.value?.setOptionsFun('phase', []);
    }
    if (key === 'phase') {
      tableRef.value?.setSearchParamByKeyFun('discipline', '');
      tableRef.value?.setOptionsFun('discipline', []);
    }
  }
};

const currentModel = ref('仿真工况');

const projectOptions = ref<any[]>([]);
const phaseOptions = ref<any[]>([]);
const disciplineOptions = ref<any[]>([]);
const searchItems = [
  {
    title: '模块', key: 'model', type: 'select', inputMode: 'select', clearable: false, options: [
      { label: '仿真工况', value: '仿真工况' },
      { label: '仿真算例', value: '仿真算例' },
      { label: '数据指标', value: '数据指标' },
      { label: '模型文件', value: '模型文件' },
      { label: '仿真报告', value: '仿真报告' },
      { label: '计算文件', value: '计算文件' },
      { label: '结果曲线', value: '结果曲线' },
      { label: '结果云图', value: '结果云图' },
    ],

  },

  {
    title: '项目', key: 'project', type: 'select', inputMode: 'select', clearable: true, options: [],
  },
  {
    title: '阶段', key: 'phase', type: 'select', inputMode: 'select', clearable: true, options: [],
  },
  {
    title: '学科', key: 'taskId', type: 'select', inputMode: 'select', clearable: true, options: [],
  },
  { title: '名称', key: 'name', clearable: true, type: 'input', inputMode: 'input' },
  { title: '时间范围', key: 'dateRange', clearable: true, inputMode: 'daterange' },

];

const getProjectOptionsFun = () => {
  queryNodeListApi({ current: 1, size: 999, nodeType: NODE_TYPE.PROJECT }).then((res: any) => {
    console.log(res);
    if (res.code === 200) {
      projectOptions.value = res.data.data.map((item: any) => {
        return {
          label: item.nodeName,
          value: item.id,
        };
      });
      tableRef.value?.setOptionsFun( NODE_TYPE.PROJECT, projectOptions.value );
    }
  });
};
const getPhaseOptionsFun = () => {
  const projectId = tableRef.value?.getSearchParamByKeyFun('project');
  console.log('1440', projectId);
  getChildrenNodeListApi({ current: 1, size: 999, nodeType: NODE_TYPE.PHASE, pid: projectId }).then((res: any) => {
    console.log(res);
    if (res.code === 200) {
      phaseOptions.value = res.data?.data?.map((item: any) => {
        return {
          label: item.nodeName,
          value: item.id,
        };
      });
      tableRef.value?.setOptionsFun( NODE_TYPE.PHASE, phaseOptions.value );
    }
  });
};
const getDisciplineOptionsFun = () => {
  const phaseId = tableRef.value?.getSearchParamByKeyFun('phase');
  queryNodeListApi({ current: 1, size: 999, nodeType: 'discipline', pid: phaseId }).then((res: any) => {
    console.log(res);
    if (res.code === 200) {
      disciplineOptions.value = res.data.data.map((item: any) => {
        return {
          label: item.nodeName,
          value: item.id,
        };
      });
      tableRef.value?.setOptionsFun( 'discipline', disciplineOptions.value );
    }
  });
};
const compareList = ref<any[]>([]);
const addCompareListFun = () => {
  const selectedRows = tableRef.value?.tableRef?.getCheckboxRecords();
  if (selectedRows && selectedRows.length > 0) {
    selectedRows.forEach((item: any) => {
      if (!compareList.value.some((val: any) => val.id === item.id)) {
        compareList.value.push(item);
      }
    });
    ElMessage.success('添加成功');
  } else {
    ElMessage.warning('请先选择要对比的数据');
  }

  compareListIds.value = compareList.value.map((item:any) => {return item.id;});
  tableRef.value?.tableRef?.clearCheckboxRow();
};

const diaVisible = ref<boolean>(false);
const closeFun = () => {
  diaVisible.value = false;
};
const displayCompareFun = (flag:any) => {
  if (!compareList.value.length) {
    ElMessage.warning('请先加入对比池');
    return;
  }
  if (flag === '结果曲线') {
    diaVisible.value = true;
  } else {
    diaPngVisible.value = true;

  }
};
const columnData = ref<number>(1);
const renderFun = (data: any, render: (cbData: any) => void) => {
  render(compareList.value.map((item:any) => {
    return {
      ...item,
      name: item.originalName,
      imageNumber: 1,
    };
  }));
};
const tableCompareRef = ref();
const compareData = ref<any>({});
const projectStorageSpaceStatisticsRef = ref<any>({});
// 初始化图表chart-1
const initProjectTaskAchievementStatistics = async ({ dom, seriesData, titleList, key }:any) => {
  dom.commonChartRef.disposeEchartsByKey('chart-' + key);
  dom.commonChartRef.option = {
    title: {
      show: false,
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      top: '0%',
      left: 'center',
      data: titleList,
    },
    grid: {
      top: '10%',
      bottom: '10%',
      left: '5%',
      right: '5%',
    },
    xAxis: {
      type: 'category',
    },
    yAxis: {
      type: 'value',
    },
    series: seriesData,
    // dataZoom:
    //   projectNames.length > 4
    //     ? [
    //       {
    //         type: 'slider',
    //         show: true,
    //         xAxisIndex: [0],
    //         start: 0,
    //         end: 100,
    //         textStyle: {
    //           color: 'transparent',
    //         },
    //         maxValueSpan: 4,
    //         minValueSpan: 4,
    //         moveHandleSize: 10,
    //         height: 0,
    //         filterMode: 'empty',
    //         bottom: 15,
    //       },
    //     ]
    //     : null,

  };
  dom.commonChartRef.initChart();
};
const setChartFun = () => {
  const selectedRows = tableCompareRef.value?.tableRef?.getCheckboxRecords();
  if (selectedRows.length) {
    compareData.value = groupBy(selectedRows, 'imageNumber');
    nextTick(() => {
      for (const key in compareData.value) {
        getCSVDataApi({ fileId: compareData.value[key].map((item:any) => item.id).join(',') }).then((res:any) => {
          const seriesData:any = [];
          const titleList:any = [];
          if (res.code === 200) {
            res.data.xData.forEach((item:any, index:number) => {
              const data = res.data.xData[index].map((item_1:any, index_1:number) => {
                return [item_1, res.data.yData[index][index_1]];
              });
              const title = compareData.value[key][index].originalName;
              titleList.push(title);
              seriesData.push({
                name: title,
                type: 'line',
                stack: 'Total',
                data,
              });
            });
          }
          console.log('1030', res);

          initProjectTaskAchievementStatistics({ dom: projectStorageSpaceStatisticsRef.value[`chart-${key}`], seriesData, titleList, key });
        });
      }
    });
  }
};
const checkBoxChangeFun = () => {
  setChartFun();
};
const changeImageNumberFun = () => {
  setChartFun();
};
const tableComparePngRef = ref();

const diaPngVisible = ref<boolean>(false);
const compareListIds = ref<any[]>([]);
const columnPngData = ref<number>(1);
const comparePngData = ref<any>([]);
const closePngFun = () => {
  diaPngVisible.value = false;
};

// const displayComparePngFun = () => {
//   if (!compareList.value.length) {
//     ElMessage.warning('请先加入对比池');
//     return;
//   }
//   diaPngVisible.value = true;
// };
const renderPngFun = (data: any, render: (cbData: any) => void) => {
  render(compareList.value.map((item:any) => {
    return {
      ...item,
      name: item.originalName,
    };
  }));
};
const env = import.meta.env;
const checkBoxPngChangeFun = () => {
  comparePngData.value = tableComparePngRef.value?.tableRef?.getCheckboxRecords();
  comparePngData.value.forEach((item:any) => {
    item.url = `${env.VITE_API_IMAGE_PREVIEW_URL}/data/previewImage?fileId=${item.id}`;
  });
};

const loadcaseAnalysisVisable = ref(false);

const selectAnalysisData = ref<any>({});

const openDataAnalysisFn = (flag:any, tableName:any) => {
  selectAnalysisData.value = {
    flag,
    data: compareList.value,
    tableName,
  };
  loadcaseAnalysisVisable.value = true;
};

const closeAnalysisFn = () => {
  loadcaseAnalysisVisable.value = false;

};

const compareFn = (flag:any) => {

  if (!compareList.value.length) {
    ElMessage.warning('对比池为空，无法对比');
    return;
  }
  if (flag === '仿真工况') {
    openDataAnalysisFn( flag, 'SIMULATION_TASK_ANALYSIS');
  }
  if (flag === '仿真算例') {
    openDataAnalysisFn( flag, 'SIMULATION_RUN_ANALYSIS');

  }
  if (flag === '数据指标') {
    openDataAnalysisFn( flag, 'SIMULATION_PERFORMANCE_ANALYSIS');

  }
  if (flag === '模型文件') {
    openDataAnalysisFn( flag, 'RESULT_MODEL');

  }
  if (flag === '仿真报告') {
    openDataAnalysisFn( flag, 'RESULT_REPORT');

  }
  if (flag === '计算文件') {
    openDataAnalysisFn( flag, 'RESULT_FILE');

  }
  if (flag === '结果曲线') {
    // openDataAnalysisFn( flag, 'RESULT_CURVE');

    displayCompareFun('结果曲线');
  }
  if (flag === '结果云图') {
    // openDataAnalysisFn( flag, 'RESULT_PNG');

    displayCompareFun('结果云图');
  }
};

const compareListHead = ref([
  {
    title: '对比名称',
    key: 'compareName',
    isShow: true,
  },
  {
    title: '对比类型',
    key: 'compareType',
    isShow: true,
  },
  {
    title: '操作',
    key: 'operate',
    isShow: true,
  },
]);

const compareListVisible = ref(false);
const compareTableRef = ref();
// 查看对比池
const showCompareListFn = () => {

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

    let compareName:any = '';
    if (currentModel.value === '仿真工况') {
      compareName = compareList.value[i].taskName;
    }
    else if (currentModel.value === '仿真算例') {
      compareName = compareList.value[i].runName;
    }
    else if (currentModel.value === '数据指标') {
      compareName = compareList.value[i].performanceName;
    }
    else if (currentModel.value === '模型文件') {
      compareName = compareList.value[i].performanceName;
    } else {
      compareName = compareList.value[i].fileName;

    }

    compareList.value[i].compareName = compareName;
    compareList.value[i].compareType = currentModel.value;

  }

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

  compareListVisible.value = true;
  nextTick(() => {
    compareTableRef.value?.setDataFun(compareList.value);
  });
};

const closeCompareListFn = () => {
  compareListVisible.value = false;

};

// 删除对比元素
const deleteCompareDataFn = (data:any) => {
  compareList.value = compareList.value.filter((item:any) => {
    return item.id != data.id;
  });
  compareListIds.value = compareList.value.map((item:any) => {return item.id;});
  nextTick(() => {
    compareTableRef.value?.setDataFun(compareList.value);
  });
};

onMounted(() => {
  getProjectOptionsFun();
});
</script>
<style lang="scss" scoped>
.gl-page-content {

  .content {
    height: 100%;
  }
}
:deep(.compare-container){
  height: 100%;
  width: 100%;
  display:flex;
  justify-content: space-between;
  .compare-container-left{
    height: 100%;
    width: 49%;
    .compare-container-left-options{
      display:flex;
      align-items: center;
      &>span{
        white-space: nowrap;
      }
    }
  }
  .compare-container-right{
    height: 100%;
    width: 50%;
    .image-number-input{
      width: 50px;
    }
    .chart-container{
      height: 100%;
      width: 100%;
      overflow-y: auto;
      display: grid;
      .chart-box{
        height: 350px;
        width:100%;

      }
      .chart-box-png{
        height: 50%;
        width:100%;
       .png-container{
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        .png-title{
          margin-bottom: 12px;
          width: 100%;
        }
        .png-image{
          flex:1;
          width: 100%;
          .el-image{
            height: 100%;
            width: 100%;
          }
        }
       }
      }
    }
  }
}

.compare-content{
  width: 100%;
  height: 100%;
}
</style>
