<template>
  <div class="page">
    <div class="head">
      <div class="head-con">钻井复杂异常监测</div>
    </div>
    <div class="content">
      <div class="left">
        <!-- 顶部风险卡片 -->
        <div class="left-head">
          <div class="head-card" v-for="(item, index) in riskCards" :key="index" :style="{ background: item.gradient }">
            <div class="card-title">{{ item.title }}</div>
            <div class="card-con">
              <div class="card-con-label" v-for="(risk, i) in item.risks" :key="i">
                <div class="con-label-title">{{ risk.level }}</div>
                <div class="con-label-con">{{ risk.value }}</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 井号卡片 -->
        <div class="left-con-container">
          <div class="left-con">
            <div class="con-card" v-for="(item, index) in drillingData" :key="index" @click="openDetail(item)">
              <div class="con-card-titel">{{ item.jh }}</div>
              <div class="con-card-info">
                <div class="con-card-info-label">
                  <div class="con-card-info-label-title">时间:</div>
                  <div class="con-card-info-label-con">{{ item.warnTime }}</div>
                </div>
                <div class="con-card-info-label">
                  <div class="con-card-info-label-title">当前工况:</div>
                  <div class="con-card-info-label-con">{{ item.status }}</div>
                </div>
                <div class="con-card-info-label">
                  <div class="con-card-info-label-title">井深:</div>
                  <div class="con-card-info-label-con">{{ item.depth }}</div>
                </div>
              </div>
              <div class="con-card-ex">
                <div class="con-card-ex-label" v-for="(risk, i) in item.risks" :key="i">
                  <div class="con-card-ex-label-title">{{ risk.type }}:</div>
                  <div class="progress-bar">
                    <div
                      class="progress-bar-fill"
                      :style="{ width: risk.value }"
                      :class="getProgressBarColor(risk.value)"
                    ></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="right-head">
          <div class="right-head-title">异常风险信息</div>
        </div>
        <div class="right-table">
          <el-table
            :data="tableData"
            style="width: 100%"
            :header-cell-style="tableHeaderStyle"
            :cell-style="tableCellStyle"
            :row-style="tableRowStyle"
          >
            <el-table-column prop="jh" label="井号" width="100"> </el-table-column>
            <el-table-column prop="depth" label="井深（m）" width="100"> </el-table-column>
            <el-table-column prop="warnType" label="类别" width="80"> </el-table-column>
            <el-table-column prop="warnLevel" label="系数" width="80"> </el-table-column>
            <el-table-column prop="warnTime" label="预警时间"> </el-table-column>
          </el-table>
          <el-pagination
            background=""
            :current-page="param.pageNo"
            :page-sizes="[10, 15]"
            :page-size="param.pageSize"
            layout="total, sizes, prev, pager, next"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import drillingRiskApi from '@api/drillingRiskApi'
export default {
  name: 'DrillingRiskIndexNew',
  data() {
    return {
      riskCards: [
        {
          title: '卡钻风险(井口数据)',
          type: '卡钻',
          risks: [
            { level: '高风险', value: 0 },
            { level: '中风险', value: 0 }
          ],
          gradient: 'linear-gradient(135deg, #6ee7b7, #3b82f6)' // 蓝绿色渐变
        },
        {
          title: '井漏风险(井口数据)',
          type: '井漏',
          risks: [
            { level: '高风险', value: 0 },
            { level: '中风险', value: 0 }
          ],
          gradient: 'linear-gradient(135deg, #818cf8, #4f46e5)' // 蓝紫色渐变
        },
        {
          title: '溢流风险(井口数据)',
          type: '溢流',
          risks: [
            { level: '高风险', value: 0 },
            { level: '中风险', value: 0 }
          ],
          gradient: 'linear-gradient(135deg, #93c5fd, #60a5fa)' // 浅蓝色渐变
        }
      ],
      drillingData: [
        {
          jh: '丰页-1-1-1HF',
          warnTime: '2025-02-12 08:00:00',
          status: '起钻-上提钻具',
          depth: '2000' + 'm',
          risks: [
            { type: '卡钻风险', value: '90%' },
            { type: '井漏风险', value: '30%' },
            { type: '溢流风险', value: '60%' }
          ]
        }
      ],
      tableData: [
        {
          id: '1',
          jh: '丰页1-1Hf',
          warnValue: '80',
          warnType: '卡钻',
          warnTime: '2025-02-02 08:08:08'
        },
        {
          id: '2',
          jh: '丰页1-2Hf',
          warnValue: '60',
          warnType: '井漏',
          warnTime: '2025-02-02 08:08:08'
        },
        {
          id: '3',
          jh: '丰页1-3Hf',
          warnValue: '40',
          warnType: '溢流',
          warnTime: '2025-02-02 08:08:08'
        }
      ],
      param: {
        pageSize: 10,
        pageNo: 1
      },
      total: 0 // 总记录数
    }
  },
  created() {
    this.queryPage()
    this.queryRealList()
    this.getRiskCount()
  },
  methods: {
    openDetail(item){
      this.$router.push({ name: '/singleWellWarnInfo', query: { jh: item.jh } })
    },
    handleSizeChange(val) {
      this.param.pageSize = val
      this.queryPage()
    },
    handleCurrentChange(val) {
      this.param.pageNo = val
      this.queryPage()
    },
    queryPage() {
      drillingRiskApi.queryPage(this.param).then(res => {
        console.log('分页数据数据', res)
        this.tableData = res.result.records // 假设接口返回数据结构
        this.total = res.result.total // 总记录数
      })
    },
    queryRealList() {
      drillingRiskApi.queryRealList({}).then(res => {
        console.log('实时数据', res)
        var result = res.result
        if (result.length > 0) {
          // result.forEach(item=>{
          //   item.warnType
          // })

          this.drillingData = []
          result.forEach(item => {
            this.drillingData.push({
              jh: item.jh,
              warnTime: item.warnTime,
              status: item.workingCondition + '-' + item.motion,
              depth: item.depth + 'm',
              risks: [
                { type: '卡钻风险', value: item.qzfx + '%' },
                { type: '井漏风险', value: item.jlfx + '%' },
                { type: '溢流风险', value: item.ylfx + '%' }
              ]
            })
          })
        }
      })
    },
    getRiskCount() {
      drillingRiskApi.getRiskCount({}).then(res => {
        console.log('风险数据', res)
        var result = res.result
        if (result.length > 0) {
          result.forEach(item => {
            const riskCard = this.riskCards.find(card => card.type === item.warnType)
            if (riskCard) {
              // 更新中风险值（risks数组第二个元素）
              riskCard.risks[1].value = item.zfxCount
              // 更新高风险值（risks数组第一个元素）
              riskCard.risks[0].value = item.gfxCount
            }
          })
          // 强制刷新视图（可选，根据实际情况决定是否需要）
          this.$forceUpdate()
        }
      })
    },
    // 根据百分比返回进度条颜色类
    getProgressBarColor(value) {
      const percent = parseFloat(value) // 去掉百分号，转换为数字
      if (percent < 40) {
        return 'progress-bar-fill-green'
      } else if (percent >= 40 && percent < 80) {
        return 'progress-bar-fill-yellow'
      } else {
        return 'progress-bar-fill-red'
      }
    },
    // 表格表头样式
    tableHeaderStyle() {
      return {
        backgroundColor: '#f0f2f5', // 浅灰色背景
        color: '#2d3748', // 深灰色文字
        fontWeight: 'bold',
        borderBottom: '1px solid #e2e8f0' // 更柔和的边框颜色
      }
    },
    // 表格单元格样式
    tableCellStyle() {
      return {
        backgroundColor: '#ffffff', // 白色背景
        color: '#4a5568', // 中灰色文字
        borderBottom: '1px solid #e2e8f0' // 更柔和的边框颜色
      }
    },
    // 表格行样式
    tableRowStyle() {
      return {
        backgroundColor: '#ffffff', // 白色背景
        '&:hover': {
          backgroundColor: '#f0f2f5' // 浅灰色背景（悬停时）
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.page {
  width: 100%;
  height: 100vh;
  background-color: #f0f2f5; // 浅灰色背景
  display: flex;
  flex-direction: column;
}

.head {
  width: 100%;
  height: 5%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff; // 白色背景
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); // 更柔和的阴影
}

.head-con {
  font-size: 1.5rem;
  font-weight: bold;
  color: #2d3748; // 深灰色文字
}

.content {
  width: 100%;
  height: 95%;
  display: flex;
}

.left {
  width: 70%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  height: calc(100% - 20px);
}

.left-con-container {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  &::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Webkit */
  }
}

.left-con {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-height: min-content; /* 确保内容高度正确计算 */
}

.right {
  width: 30%;
  padding: 10px;
  background-color: #ffffff; // 白色背景
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1); // 更柔和的阴影
}

.left-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.head-card {
  width: 18%;
  padding: 10px;
  border-radius: 10px;
  color: #ffffff; // 白色文字
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); // 更柔和的阴影
}

.card-title {
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 10px;
}

.card-con-label {
  display: flex;
  justify-content: space-between;
  font-size: 1.2rem;
  margin-bottom: 5px;
}

.left-con {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.con-card {
  width: calc(33.333% - 10px);
  padding: 10px;
  border: 1px solid #e2e8f0; // 更柔和的边框颜色
  border-radius: 10px;
  background-color: #ffffff; // 白色背景
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); // 更柔和的阴影
}

.con-card-titel {
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 10px;
  color: #2d3748; // 深灰色文字
}

.con-card-info-label {
  display: flex;
  justify-content: space-between;
  font-size: 1rem;
  margin-bottom: 5px;
  color: #4a5568; // 中灰色文字
}

.con-card-ex-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1rem;
  margin-bottom: 5px;
  color: #4a5568; // 中灰色文字
}

.progress-bar {
  width: 65%;
  height: 10px;
  background-color: #e2e8f0; // 更柔和的背景色
  border-radius: 5px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 0.3s ease;
}

.progress-bar-fill-green {
  background-color: #48bb78; // 柔和的绿色
}

.progress-bar-fill-yellow {
  background-color: #f6ad55; // 柔和的橙色
}

.progress-bar-fill-red {
  background-color: #f56565; // 柔和的红色
}

.right-head {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.right-head-title {
  font-size: 1.5rem;
  font-weight: bold;
  padding: 5px 10px;
  border: 1px solid #e2e8f0; // 更柔和的边框颜色
  border-radius: 10px;
  background-color: #ffffff; // 白色背景
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); // 更柔和的阴影
  color: #2d3748; // 深灰色文字
}
.right-table {
  background-color: #ffffff; // 白色背景
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); // 更柔和的阴影
  padding: 10px;
}

/* 调整表格的样式 */
.el-table {
  border-radius: 10px;
  overflow: hidden;
}

.el-table::before {
  display: none; // 隐藏默认的表格边框
}

.el-table__header {
  border-bottom: 1px solid #e2e8f0; // 更柔和的边框颜色
}

.el-table__body {
  border-bottom: 1px solid #e2e8f0; // 更柔和的边框颜色
}

.el-table__row:hover {
  background-color: #f0f2f5; // 浅灰色背景（悬停时）
}
</style>
