<template>
  <div class="page">
    <!-- 新增信息展示栏 -->
    <div class="info-row">
      <div class="info-item">
        <label>井号：</label>
        <span class="highlight">{{ infoModel.jh }}</span>
      </div>
      <div class="info-item">
        <label>最新时间：</label>
        <span class="highlight">{{ infoModel.latestTime }}</span>
      </div>
      <div class="info-item">
        <label>当前工况：</label>
        <span :class="infoModel.workConditionClass">{{ infoModel.workCondition }}</span>
      </div>
      <div class="info-item">
        <label>当前风险：</label>
        <span class="risk-status">
          <span class="risk-item" v-for="(risk, index) in infoModel.riskStatus" :key="index" :style="{ color: risk.color }">
            {{ risk.name }}: {{ risk.level }}
          </span>
        </span>
      </div>
    </div>

    <!-- 新增日期查询 -->
    <div class="filter-row">
      <el-date-picker
        v-model="endDate"
        type="date"
        placeholder="选择结束日期"
        value-format="yyyy-MM-dd"
        :picker-options="pickerOptions"
        style="width: 240px; margin-right: 15px;"
      />
      <el-button type="primary" @click="handleDateQuery" icon="el-icon-search">查询</el-button>
    </div>

    <!-- 顶部状态卡片 -->
    <div class="head">
      <div class="head-card" v-for="(card, index) in headCards" :key="index" :style="{ backgroundColor: card.color }">
        <div class="head-card-value">{{ card.value }}</div>
        <div class="head-card-label">{{ card.label }}</div>
      </div>
    </div>

    <!-- 视图切换 -->
    <div class="view-switch">
      <button
        v-for="view in views"
        :key="view.value"
        :class="['view-button', { active: currentView === view.value }]"
        @click="changeView(view.value)"
      >
        {{ view.label }}
      </button>
    </div>

    <!-- 图表容器 -->
    <div class="chart-container" @scroll="handleScroll" ref="container">
      <!-- 图表项 -->
      <div class="chart-wrapper" v-for="(chart, index) in visibleCharts" :key="index">
        <div class="chart-header">
          <div class="chart-title">{{ chart.title }}</div>
          <button class="toggle-table" @click="toggleTable(index)">
            {{ showTables[index] ? '隐藏数据' : '显示数据' }}
          </button>
        </div>

        <!-- 图表 -->
        <div class="chart-content" :id="'chart' + chart.id" :style="{ height: chartHeight }"></div>

        <!-- 分隔线 -->
        <div class="divider" v-if="index < visibleCharts.length - 1"></div>

        <!-- 数据表格 -->
        <div class="data-table" v-show="showTables[index]">
          <table>
            <thead>
              <tr>
                <th>时间</th>
                <th>值</th>
                <th>状态</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, i) in chart.data" :key="i">
                <td>{{ formatTime(chart.timeStamps[i]) }}</td>
                <!-- 使用实际时间 -->
                <td>{{ item }}%</td>
                <td :class="getStatusClass(item)">
                  {{ getStatusText(item) }}
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- 加载提示 -->
      <div class="loading" v-if="loading">
        <div class="loader"></div>
        加载中...
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { throttle } from 'lodash-es'
import drillingRiskApi from '@api/drillingRiskApi'
import moment from 'moment'
import { filter } from 'vuedraggable'
export default {
  name: 'SingleWellWarnInfo',
  data() {
    return {
      infoModel:{
        jh:'草27-侧平12',
        latestTime: '2023-09-16 08:08:08',
        workCondition: '起下钻',
        workConditionClass: 'condition-normal',
        riskStatus: [
        { name: '卡钻', level: '高', color: '#ff4d4f' },
        { name: '井漏', level: '中', color: '#faad14' },
        { name: '溢流', level: '低', color: '#52c41a' }
      ],
      },
      chartHeight: '400px',
      currentView: '1',
      views: [
        { label: '日视图', value: '1' },
        { label: '周视图', value: '2' },
        { label: '月视图', value: '3' }
      ],
      allCharts: [],
      visibleCharts: [],
      pageSize: 3,
      currentPage: 1,
      loading: false,
      showTables: [],
      headCards: [
        { value: 1000, label: '钩载异常', color: '#6DA9E4' },
        { value: 1000, label: '扭矩异常', color: '#7ED957' },
        { value: 1000, label: '泵压异常', color: '#FFB347' },
        { value: 1000, label: '总池体积异常', color: '#FF6B6B' }
      ],
      endDate: new Date().toISOString().split('T')[0], // 默认当天
      pickerOptions: {
        shortcuts: [
          {
            text: '最近三天',
            onClick(picker) {
              const date = new Date()
              date.setDate(date.getDate() - 2)
              picker.$emit('pick', date)
            }
          },
          {
            text: '最近一周',
            onClick(picker) {
              const date = new Date()
              date.setDate(date.getDate() - 6)
              picker.$emit('pick', date)
            }
          }
        ]
      },
    }
  },
  created() {
  },
  mounted() {
    this.infoModel.jh = this.$route.query.jh
    console.log('this.$route.query.jh',this.$route.query.jh)
    this.getRealDataByJh()
    this.initCharts()
    this.loadChartData()
    window.addEventListener('resize', this.handleResize)
    this.getWarnCountByJhAndDate()
    
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    getRealDataByJh(){
      var param={
        jh:this.infoModel.jh
      }
      drillingRiskApi.getRealDataByJh(param).then(res=>{
        console.log('井实时数据',res)
        if(res.success){
          this.infoModel.latestTime= res.result[0].warnTime
          this.infoModel.workCondition= res.result[0].workingCondition+'-'+res.result[0].motion
          // this.infoModel=res.result
          this.infoModel.riskStatus.forEach(item=>{
            let itemRes=res.result.filter(items=>items.warnType==item.name)
            item.level=this.judgeRisk(itemRes[0].warnLevel)
          })
          
        }
      })

    },
    judgeRisk(warnLevel){
      if (warnLevel >= 80) {
        return '高'
      } else if (warnLevel >= 50) {
        return '中'
      } else {
        return '低'
      }
    },
    handleDateQuery() {
      this.getWarnCountByJhAndDate()
      this.loadChartData()
      this.getLogByJh()
      this.$nextTick(() => {
        this.initCharts()
      })
    },
    getWarnCountByJhAndDate() {
      var param = {
        startDate: this.endDate + ' 00:00:00',
        endDate: this.endDate + ' 23:59:59',
        jh: this.infoModel.jh
      }
      drillingRiskApi.getWarnCountByJhAndDate(param).then(res => {
        if (res.success) {
          this.headCards[0].value = res.result.gzCount
          this.headCards[1].value = res.result.njCount
          this.headCards[2].value = res.result.byCount
          this.headCards[3].value = res.result.jlCount + res.result.ylCount
        }
      })
    },

    async loadChartData() {
      try {
        // 并行获取三种风险数据
        const [qzRes, jlRes, ylRes] = await Promise.all([
          this.getLogByJh(this.endDate, this.infoModel.jh, this.currentView, '卡钻'),
          this.getLogByJh(this.endDate, this.infoModel.jh, this.currentView, '井漏'),
          this.getLogByJh(this.endDate, this.infoModel.jh, this.currentView, '溢流')
        ])

        // 时间对齐处理逻辑
        const processData = data => {
          // 按时间升序排序
          const sortedData = data.sort((a, b) => new Date(a.warnTime) - new Date(b.warnTime))

          return {
            timeStamps: sortedData.map(d => d.warnTime),
            values: sortedData.map(d => d.warnLevel)
          }
        }

        // 处理各风险数据
        const chartData = {
          卡钻风险: processData(qzRes),
          井漏风险: processData(jlRes),
          溢流风险: processData(ylRes)
        }

        // 生成图表配置
        this.allCharts = Object.entries(chartData).map(([title, data], index) => ({
          id: index + 1,
          title,
          data: data.values,
          timeStamps: data.timeStamps // 保存时间序列用于表格显示
        }))

        this.visibleCharts = this.allCharts.slice(0, this.pageSize)
        this.$nextTick(this.initCharts)
      } catch (error) {
        console.error('数据加载失败:', error)
      }
    },
    async getLogByJh(endDate, jh, dateType, warnType) {
      var param = {
        endDate: endDate,
        jh: jh,
        dateType: dateType,
        warnType: warnType
      }
      var res = await drillingRiskApi.getLogByJh(param)
      return res.result
    },
    getDataLength() {
      switch (this.currentView) {
        case 'day':
          return 24
        case 'week':
          return 7
        case 'month':
          return 30
        default:
          return 24
      }
    },

    formatTime(timeStamp) {
      return moment(timeStamp).format('HH:mm')
    },

    initCharts() {
      this.visibleCharts.forEach(chart => {
        const chartDom = document.getElementById(`chart${chart.id}`)
        if (!chartDom) return
        const myChart = echarts.init(chartDom)
        const option = this.getChartOption(chart)
        myChart.setOption(option)
        chart.instance = myChart
      })
    },

    getChartOption(chart) {
      return {
        grid: {
          left: '3%',
          right: '3%',
          top: '15%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: chart.timeStamps, // 使用实际时间序列
          axisLabel: {
            rotate: 45,
            formatter: value => moment(value).format('HH:mm')
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: { formatter: '{value}%', color: '#666' },
          splitLine: { lineStyle: { color: '#eee' } }
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(255,255,255,0.95)',
          borderColor: '#5470C6',
          borderWidth: 1,
          padding: [8, 16],
          textStyle: {
            color: '#333',
            fontSize: 14
          },
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#5470C6',
              color: '#fff'
            }
          },
          formatter: params => {
            const time = params[0].name
            const value = params[0].value
            const riskLevel = '低'
            //this.getRiskLevel(value)
            return `
            <div class="custom-tooltip">
              <div class="time">${time}</div>
              <div class="content">
                <span class="label">当前值：</span>
                <span class="value ${riskLevel}">${value}%</span>
              </div>
              <div class="content">
                <span class="label">风险等级：</span>
                <span class="status ${riskLevel}">${this.getStatusText(value)}</span>
              </div>
            </div>
          `
          }
        },
        series: [
          {
            type: 'line',
            data: chart.data,
            smooth: true,
            lineStyle: { width: 2, color: '#5470C6' },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(84, 112, 198, 0.3)' },
                { offset: 1, color: 'rgba(84, 112, 198, 0.05)' }
              ])
            }
          }
        ]
      }
    },

    toggleTable(index) {
      this.$set(this.showTables, index, !this.showTables[index])
      this.$nextTick(() => {
        this.visibleCharts.forEach(chart => {
          chart.instance.resize()
        })
      })
    },

    changeView(view) {
      this.currentView = view

      this.$nextTick(() => {
        this.loadChartData()
      })
    },

    getStatusClass(value) {
      if (value > 80) return 'status-high'
      if (value > 50) return 'status-medium'
      return 'status-low'
    },

    getStatusText(value) {
      if (value > 80) return '高风险'
      if (value > 50) return '中风险'
      return '低风险'
    },

    handleScroll: throttle(function() {
      const container = this.$refs.container
      if (!container) return

      const { scrollTop, scrollHeight, clientHeight } = container
      if (scrollHeight - (scrollTop + clientHeight) < 100 && !this.loading) {
        this.loadMore()
      }
    }, 200),

    loadMore() {
      this.loading = true
      setTimeout(() => {
        const nextPage = this.currentPage + 1
        const start = this.currentPage * this.pageSize
        const newCharts = this.allCharts.slice(start, start + this.pageSize)

        if (newCharts.length) {
          this.visibleCharts = [...this.visibleCharts, ...newCharts]
          this.showTables = [...this.showTables, ...new Array(newCharts.length).fill(false)]
          this.$nextTick(() => {
            this.initCharts()
            this.currentPage = nextPage
          })
        }
        this.loading = false
      }, 1000)
    },

    handleResize() {
      this.visibleCharts.forEach(chart => {
        chart.instance.resize()
      })
    }
  }
}
</script>

<style lang="less" scoped>
.info-row {
  background: rgba(242, 245, 247, 0.9);
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  display: flex;
  gap: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.info-item {
  display: flex;
  align-items: center;
  font-size: 16px;

  label {
    color: #666;
    margin-right: 8px;
  }

  .highlight {
    color: #2d8cf0;
    font-weight: 500;
  }

  .risk-status {
    display: flex;
    gap: 15px;

    .risk-item {
      padding: 4px 8px;
      border-radius: 4px;
      background-color: rgba(255, 255, 255, 0.9);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
  }
}
.filter-row {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding: 12px 16px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.head {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}

.head-card {
  flex: 1;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.head-card-value {
  font-size: 24px;
  font-weight: bold;
  color: white;
  margin-bottom: 8px;
}

.head-card-label {
  font-size: 14px;
  color: white;
  opacity: 0.9;
}

/* 新增样式 */
.view-switch {
  margin: 20px 0;
  display: flex;
  gap: 10px;
}

.view-button {
  padding: 8px 16px;
  border: 1px solid #5470c6;
  border-radius: 4px;
  background: white;
  color: #5470c6;
  cursor: pointer;
  transition: all 0.3s;
}

.view-button.active {
  background: #5470c6;
  color: white;
}

.chart-container {
  height: 600px;
  overflow-y: auto;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 10px;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.toggle-table {
  padding: 6px 12px;
  background: #5470c6;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.divider {
  height: 1px;
  background: #eee;
  margin: 20px 0;
}

.data-table {
  margin-top: 20px;
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

th {
  background: #f8f9fa;
}

.status-high {
  color: #ff4d4f;
}
.status-medium {
  color: #faad14;
}
.status-low {
  color: #52c41a;
}

.loading {
  text-align: center;
  padding: 20px;
  color: #999;
}

.loader {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #5470c6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-right: 8px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* 自定义提示框样式 */
.echarts-tooltip {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  border-radius: 6px !important;
}

.custom-tooltip .time {
  font-weight: bold;
  color: #333;
  border-left: 3px solid #5470c6;
  padding-left: 8px;
  margin-bottom: 8px;
}

.custom-tooltip .content {
  display: flex;
  align-items: center;
  margin: 4px 0;
}

.custom-tooltip .label {
  color: #666;
  min-width: 60px;
}

.custom-tooltip .value {
  font-weight: bold;
}

.custom-tooltip .high {
  color: #ff4d4f;
}
.custom-tooltip .medium {
  color: #faad14;
}
.custom-tooltip .low {
  color: #52c41a;
}

.custom-tooltip .status {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.custom-tooltip .status.high {
  background: rgba(255, 77, 79, 0.1);
  border: 1px solid rgba(255, 77, 79, 0.3);
}

.custom-tooltip .status.medium {
  background: rgba(250, 173, 20, 0.1);
  border: 1px solid rgba(250, 173, 20, 0.3);
}

.custom-tooltip .status.low {
  background: rgba(82, 196, 26, 0.1);
  border: 1px solid rgba(82, 196, 26, 0.3);
}
</style>
