<template>
  <BasePanelRight>
    <div class="hydrologic-container">
      <BaseMain title="异常信息分析">
        <template v-slot:headerR>
          <el-radio-group v-model="dateVal" size="mini" class="dateRadio" @change="changeDate">
            <el-radio-button label="1">近7日</el-radio-button>
            <el-radio-button label="2">近30日</el-radio-button>
            <el-radio-button label="3">近3个月</el-radio-button>
          </el-radio-group>
        </template>
        <template v-slot:mainArea>
          <div class="yc-info-container">
            <div class="yc-content">
              <div class="yc-item" v-for="(item, index) in ycList" :key="index">
                <div class="info">
                  <img src="@/assets/image/hydrologic/icon7.png" alt="" />
                  <div class="txt-val">
                    <div class="txt">{{ item.txt }}</div>
                    <div class="val">
                      <span>{{ item.val }}</span
                      >次
                    </div>
                  </div>
                </div>
                <img src="@/assets/image/sand-monitor/icon-bg.png" alt="" class="bgImg" />
              </div>
            </div>
          </div>
        </template>
      </BaseMain>
      <BaseMain title="监测信息统计">
        <template v-slot:headerR>
          <el-select v-model="selectedVal" size="mini" class="vSelect" popper-class="u-popper-select">
            <el-option label="水文监测点" value="0"></el-option>
          </el-select>
          <el-select v-model="selectedVal1" size="mini" class="vSelect" popper-class="u-popper-select">
            <el-option label="水位" value="0"></el-option>
          </el-select>
        </template>
        <template v-slot:mainArea>
          <div class="jc-container">
            <div class="filter-head">
              <el-radio-group v-model="jcDateVal" size="mini" class="slRadio">
                <el-radio-button label="1">日</el-radio-button>
                <el-radio-button label="2">周</el-radio-button>
                <el-radio-button label="3">月</el-radio-button>
              </el-radio-group>
              <div class="tabs">
                <div class="tab-pane" :class="{ active: jcActive }" @click="toChangeTab(true)">列表</div>
                <div class="tab-pane" :class="{ active: !jcActive }" @click="toChangeTab(false)">趋势</div>
              </div>
              <div class="more">更多</div>
            </div>
            <div class="table-container" v-if="jcActive">
              <el-table :data="tableData" style="width: 100%" height="180" size="mini">
                <el-table-column prop="level" label="预警等级" width="70"> </el-table-column>
                <el-table-column prop="date" label="上报时间" width="70"> </el-table-column>
                <el-table-column prop="address" label="设备位置"> </el-table-column>
                <el-table-column prop="value" label="监测数值" width="70"> </el-table-column>
              </el-table>
            </div>
            <div class="line-chart-container" v-if="!jcActive">
              <LineChart style="height: 2.22rem" :option="jcOption" />
            </div>
          </div>
        </template>
      </BaseMain>
      <BaseMain title="水文综合分析">
        <template v-slot:mainArea>
          <div class="sw-container">
            <div class="head-container">
              <div class="left">
                <el-select v-model="selectedVal2" size="mini" class="vSelect" popper-class="u-popper-select">
                  <el-option label="水文监测点" value="0"></el-option>
                </el-select>
                <el-select v-model="selectedVal3" size="mini" class="vSelect" popper-class="u-popper-select">
                  <el-option label="水位" value="0"></el-option>
                </el-select>
              </div>
              <div class="right">更多</div>
            </div>
            <LineChart style="height: 1.8rem" :option="swOption" />
          </div>
        </template>
      </BaseMain>
    </div>
  </BasePanelRight>
</template>

<script>
import BasePanelRight from '@/components/base-panel/base-panel-right'
import BaseMain from '@/components/base-main/base-main.vue'
import LineChart from './line-chart/index.vue'
import * as echarts from 'echarts'
export default {
  data() {
    return {
      dateVal: 1,
      jcDateVal: 1,
      jcActive: true,
      ycList: [
        {
          txt: '水位超警戒值',
          val: '0'
        },
        {
          txt: '雨量超警戒值',
          val: '0'
        },
        {
          txt: '流量超警戒值',
          val: '0'
        },
        {
          txt: '流速超警戒值',
          val: '0'
        }
      ],
      selectedVal: '0',
      selectedVal1: '0',
      selectedVal2: '0',
      selectedVal3: '0',
      tableData: [
        {
          level: '一级预警',
          date: '2025-01-02 10:00:00',
          address: '设备位置',
          value: '30.00'
        },
        {
          level: '一级预警',
          date: '2025-01-02 10:00:00',
          address: '设备位置',
          value: '30.00'
        },
        {
          level: '一级预警',
          date: '2025-01-02 10:00:00',
          address: '设备位置',
          value: '30.00'
        },
        {
          level: '一级预警',
          date: '2025-01-02 10:00:00',
          address: '设备位置',
          value: '30.00'
        }
      ],
      jcOption: {
        backgroundColor: 'transparent',
        color: ['#4487D7'],
        grid: {
          left: 16,
          right: 16,
          top: 40,
          bottom: 8,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'transparent',
          borderColor: 'transparent',
          borderWidth: 0,
          extraCssText: 'box-shadow: none;',
          formatter: function (params) {
            let value = params[params.length - 1].value
            let date = params[params.length - 1].name
            return `<div style="background-color: #2F5481; color: white; padding: 5px; border-radius: 5px;">
                        ${date}  预警数${value}个
                   </div>`
          }
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['08/21', '08/22', '08/23', '08/24'],

            axisTick: {
              show: false
            },
            lineStyle: {
              color: '#374672',
              width: 1
            }
          }
        ],
        yAxis: [{ type: 'value', splitLine: { show: false } }],
        series: [
          {
            type: 'line',
            smooth: true,
            lineStyle: { width: 1, color: '#4487D7' },
            symbol: 'circle',
            symbolSize: 7,
            itemStyle: {
              normal: {
                color: '#fff', // 点颜色
                borderColor: '#4487D7', // 点的边框颜色
                borderWidth: 2 // 点的边框宽度
              },
              emphasis: {
                borderWidth: 4, // 鼠标悬停时边框加粗
                shadowBlur: 10, // 阴影模糊大小，实现放大的效果
                shadowColor: 'rgba(0, 0, 0, 0.3)' // 阴影颜色
              }
            },
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 1, color: ' rgba(73,142,227,0)' },
                { offset: 0, color: 'rgba(73,142,227,0.25)' }
              ])
            },
            data: [10, 8, 15, 11, 13, 12]
          }
        ]
      },
      swOption: {
        backgroundColor: 'transparent',
        color: ['#66DC95'],
        grid: {
          left: 16,
          right: 16,
          top: 20,
          bottom: 8,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'transparent',
          borderColor: 'transparent',
          borderWidth: 0,
          extraCssText: 'box-shadow: none;',
          formatter: function (params) {
            let value = params[params.length - 1].value
            let date = params[params.length - 1].name
            return `<div style="background-color: #2F5481; color: white; padding: 5px; border-radius: 5px;">
                        ${date}  高程${value}m
                   </div>`
          }
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['08/21', '08/22', '08/23', '08/24', '08/25', '08/26'],

            axisTick: {
              show: false
            },
            lineStyle: {
              color: '#374672',
              width: 1
            }
          }
        ],
        yAxis: [{ type: 'value', splitLine: { show: false }, min: 380, interval: 10 }],
        series: [
          {
            type: 'line',
            smooth: true,
            lineStyle: { width: 1, color: '#66DC95' },
            symbol: 'circle',
            symbolSize: 7,
            itemStyle: {
              normal: {
                color: '#ffff', // 点颜色
                borderColor: '#66DC95', // 点的边框颜色
                borderWidth: 2 // 点的边框宽度
              },
              emphasis: {
                borderWidth: 4, // 鼠标悬停时边框加粗
                shadowBlur: 10, // 阴影模糊大小，实现放大的效果
                shadowColor: 'rgba(0, 0, 0, 0.3)' // 阴影颜色
              }
            },
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 1, color: 'rgba(102,220,149,0)' },
                { offset: 0, color: 'rgba(102,220,149,0.25)' }
              ])
            },
            data: [400, 410, 400, 410, 405, 410]
          }
        ]
      }
    }
  },
  components: {
    BasePanelRight,
    BaseMain,
    LineChart
  },
  methods: {
    changeDate(val) {
      console.info(val)
    },
    toChangeTab(d) {
      this.jcActive = d
    }
  }
}
</script>

<style lang="scss" scoped>
.hydrologic-container {
  position: absolute;
  top: px-to-rem(66);
  z-index: 1;
  left: px-to-rem(-4);
  .dateRadio {
    :deep(.el-radio-button__inner) {
      background: transparent;
      color: #4f9fff;
      border-color: #4f9fff;
      font-size: px-to-rem(14);
      font-weight: 400;
      padding: px-to-rem(5);
    }
    :deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
      background-color: rgba(79, 159, 255, 0.8);
      font-weight: 400;
      color: #f2f6ff;
    }
  }
  .yc-info-container {
    padding: px-to-rem(22);
    .yc-content {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: px-to-rem(20);
      .yc-item {
        .info {
          display: flex;
          justify-content: space-between;
          img {
            width: px-to-rem(47);
            height: px-to-rem(49);
          }
          .txt-val {
            .txt {
              font-weight: 500;
              font-size: px-to-rem(14);
              color: #ffffff;
            }
            .val {
              font-weight: 400;
              font-size: px-to-rem(14);
              color: #ffffff;
              span {
                font-weight: 500;
                font-size: px-to-rem(18);
                color: #bc4747;
              }
            }
          }
        }
        .bgImg {
          width: px-to-rem(140);
          height: px-to-rem(37);
        }
      }
    }
  }
  .vSelect {
    :deep(.el-input__inner) {
      background: rgba(79, 159, 255, 0.3);
      border-color: #4f9fff;
      width: px-to-rem(96);
      border-radius: px-to-rem(4);
      color: #fff;
      padding: 0 px-to-rem(2);
    }
    :deep(.el-input__suffix .el-input__icon) {
      width: px-to-rem(18) !important;
    }
  }
  .vSelect:last-child {
    margin-left: px-to-rem(10);
    :deep(.el-input__inner) {
      width: px-to-rem(58);
    }
  }
  .jc-container {
    padding: px-to-rem(8) px-to-rem(10);
    .filter-head {
      display: flex;
      justify-content: space-between;
      :deep(.el-radio-button__inner) {
        background: rgba(79, 159, 255, 0.12);
        color: #4f9fff;
        border-color: #4f9fff;
        font-weight: 400;
        padding: px-to-rem(6);
        font-size: px-to-rem(14);
      }
      :deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
        background-color: rgba(79, 159, 255, 0.8);
        color: #fff;
      }
      .tabs {
        display: flex;
        align-items: center;
        gap: px-to-rem(20);
        .tab-pane {
          font-weight: 400;
          font-size: px-to-rem(16);
          color: #f5f5f5;
        }
        .active {
          color: #4488d9;
          border-bottom: px-to-rem(1) solid #4488d9;
        }
      }
      .more {
        font-weight: 400;
        font-size: px-to-rem(14);
        color: #5e93c9;
        padding-top: px-to-rem(4);
      }
    }
    .table-container {
      margin-top: px-to-rem(10);
      :deep(.el-table thead) {
        color: #fff;
        font-size: px-to-rem(14);
        font-weight: 500;
      }
      :deep(.el-table th.el-table__cell) {
        background-color: #244e81;
        border-bottom: px-to-rem(5) solid #152e51;
      }
      :deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
        background-color: transparent;
      }
      :deep(.el-table tr) {
        background-color: #153057;
      }
      :deep(.el-table td.el-table__cell) {
        border-bottom: px-to-rem(5) solid #152e51;
        font-weight: 400;
        font-size: px-to-rem(14);
        color: #c5d0d4;
      }
      :deep(.el-table .cell) {
        line-height: px-to-rem(16);
        padding-left: px-to-rem(10);
        padding-right: px-to-rem(5);
      }
      :deep(.el-table__body-wrapper) {
        overflow-x: hidden !important;
        scrollbar-width: none;
        -ms-overflow-style: none;
      }
      :deep(.el-table::before) {
        background-color: transparent;
      }
    }
  }
  .sw-container {
    padding: px-to-rem(16) px-to-rem(10);
    .head-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .right {
        font-weight: 400;
        font-size: px-to-rem(14);
        color: #5e93c9;
      }
    }
  }
}
</style>