<template>
  <div class="stationDialogPage">
    <!-- 站点对比分析-选择 -->
    <div class="stationDialog flex flex-wrap" v-if="ifStationTable">
      <div class="stationLeft" style="height: 200px">
        <p>
          <el-checkbox v-model="checkedVal1">已选指标</el-checkbox>
          <el-select v-model="indexCode1" placeholder="请选择">
            <el-option v-for="dict in indexList" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
          </el-select>
        </p>
        <p>
          <el-checkbox v-model="checkedVal2">已选指标</el-checkbox>
          <el-select v-model="indexCode2" placeholder="请选择">
            <el-option v-for="dict in indexList" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
          </el-select>
        </p>
        <p>
          <el-checkbox v-model="checkedVal3">已选指标</el-checkbox>
          <el-select v-model="indexCode3" placeholder="请选择">
            <el-option v-for="dict in indexList" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
          </el-select>
        </p>
      </div>
      <div class="stationRight" style="height: 200px">
        <el-table :data="tableData" border height="180">
          <el-table-column prop="typeName" label="站点名称"></el-table-column>
          <el-table-column prop="typeName" label="站点类型"></el-table-column>
          <el-table-column prop="typeName" label="安装位置"></el-table-column>
          <el-table-column prop="typeName" label="关联对象"></el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-icon color="red" @click="removeStation(scope.row)"><RemoveFilled /></el-icon>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <div class="flex flex-justcontent-center" v-if="ifStationTable">
      <el-button type="primary" @click="constrastData">
        <el-icon><DataLine /></el-icon> 对比分析
      </el-button>
    </div>

    <!-- 具体echarts分析 -->
    <div v-if="!ifStationTable" style="position: relative">
      <img src="@/assets/icons/monitor/return_btn.png" alt="对比分析" class="dbfxImgReturn" @click="ifStationTable = true" />
      <div id="stationEchart"></div>
    </div>
  </div>
</template>
<script setup>
import {} from '@/api/dataAnalysis/syntherticData';

const { proxy } = getCurrentInstance();
const myChart = shallowRef(null);
const indexCode1 = ref('1');
const checkedVal1 = ref(true);
const indexCode2 = ref('2');
const checkedVal2 = ref(false);
const indexCode3 = ref('3');
const checkedVal3 = ref(false);
const indexList = ref([
  { value: '1', label: '5分钟降雨量' },
  { value: '2', label: '24小时降雨量' },
  { value: '3', label: '日降雨量' },
]);
const tableData = ref([
  { typeName: '站点1' },
  { typeName: '站点1' },
  { typeName: '站点1' },
  { typeName: '站点1' },
  { typeName: '站点1' },
  { typeName: '站点1' },
  { typeName: '站点1' },
  { typeName: '站点1' },
]);
const ifStationTable = ref(true);
// 定义方法
// 对比分析
function constrastData() {
  console.log(checkedVal1.value);
  ifStationTable.value = false;
  setTimeout(() => {
    intChart();
  });
}
// 表格移除站点
function removeStation(row) {
  console.log(row);
}
// echarts
function intChart() {
  myChart.value = proxy.echarts.init(document.getElementById('stationEchart'));
  // 绘制图表
  myChart.value.setOption({
    grid: {
      left: '2%',
      right: '2%',
      bottom: '2%',
      top: '15%',
      containLabel: true,
    },
    tooltip: {
      trigger: 'item',
      axisPointer: {
        type: 'none',
      },
    },
    legend: {
      data: ['巡查次数', '巡查次数2'],
      top: 0,
    },
    xAxis: {
      type: 'category',
      data: ['01:00', '02:00', '03:00'],
      axisTick: {
        show: false,
      },
    },
    yAxis: {
      axisLabel: {
        color: '#545E75', //字体颜色
        fontSize: 16, //字体大小
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      splitLine: {
        show: true, // 显示网格线
        lineStyle: {
          type: 'dashed',
        },
      },
    },
    series: [
      {
        name: '巡查次数',
        type: 'line',
        smooth: true,
        data: [12, 13, 24],
      },
      {
        name: '巡查次数2',
        type: 'line',
        smooth: true,
        data: [11, 16, 28],
      },
    ],
  });
}
//自适应
function resizeTheChart() {
  if (myChart.value) {
    myChart.value.resize();
  }
}
// 初始化
onMounted(() => {
  window.addEventListener('resize', resizeTheChart);
});
</script>
<style lang="scss">
.stationDialogPage {
  .dbfxImgReturn {
    cursor: pointer;
    background: absolute;
    left: 20px;
    top: 20px;
    z-index: 99;
    background: #0f69ff;
    padding: 5px;
    border-radius: 5px;
  }
  #stationEchart {
    width: 100%;
    height: 230px;
  }
  .stationDialog {
    width: 100%;
    margin-bottom: 10px;
    .stationLeft {
      background: #f9fbff;
      padding: 10px;
      height: 220px;
      overflow: auto;
      width: 240px;
      p {
        display: flex;
        align-items: center;
        .el-select {
          width: 150px;
          margin-left: 10px;
        }
      }
    }
    .stationRight {
      background: #f9fbff;
      padding: 10px;
      overflow: auto;
      margin-left: 10px;
      flex: 1;
      .el-icon {
        cursor: pointer;
      }
    }
  }
}
</style>