<template>
  <div class="container">
    <el-row :gutter="20">
      <el-col :span="7">
        <div class="incidentList">
          <div class="tabs">
            <div class="tabs-item" :class="`${index == 0 ? 'active' : ''}`" v-for="(item, index) in tabs" :key="index">{{ item.label }}</div>
          </div>
          <div class="list">
            <div class="list-item active" v-for="item in 5" :key="item">
              <div class="img">
                <img :src="handcuffs" alt="" />
              </div>
              <div class="content">
                <div class="content-name">设备序号：10</div>
                <div class="content-time">2025/03/26 18:33:32</div>
              </div>
              <el-tag type="warning" size="large">未处理</el-tag>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="10">
        <div class="map-content">
          <div class="map" id="mapcontainer"></div>
          <div class="chart">
            <div ref="chartRef" style="width: 100%; height: 100%"></div>
          </div>
        </div>
      </el-col>
      <el-col :span="7">
        <div class="info">
          <div class="info-text">设备序号：05</div>
          <div class="info-text">设备SN号：860116079430636</div>
          <div class="info-text">告警时间：2025/03/26 18:33:32</div>
          <div class="info-text">告警类型：体表温度过低</div>
          <div class="info-text">绑定关联人名称：管理员</div>
          <div class="info-text">绑定关联人警号：欧尼蒋</div>
          <div class="info-text">现在状态：禁用</div>
          <div class="info-text">紧急电话：10000000000</div>
          <div class="info-text">隶属辖区：87</div>
          <div class="info-box">
            <div class="info-box-title">生理记录</div>
            <div class="info-box-contetn">
              <div class="item">
                <div class="label">血氧：</div>
                <div class="value">97%</div>
              </div>
              <div class="item">
                <div class="label">体表温度：</div>
                <div class="value">36.4℃</div>
              </div>
              <div class="item">
                <div class="label">心率：</div>
                <div class="value">86 次/分</div>
              </div>
            </div>
          </div>
          <div class="info-form">
            <el-form :model="formInline" label-position="top">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="处理人：">
                    <el-input v-model="formInline.user" clearable />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="警号：">
                    <el-input v-model="formInline.user" clearable />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="处理记录：">
                <el-input v-model="formInline.user" clearable />
              </el-form-item>
              <el-form-item label="处理图片：">
                <Upload />
              </el-form-item>
              <el-form-item>
                <el-button type="primary">保存</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts" name="incidentDispose">
import handcuffs from "@/assets/img/handcuffs.png";
import { MapCustom } from "@/utils/mapCustom";
import { onMounted, ref, reactive } from "vue";
import Upload from "@/components/upload-img.vue";
import * as echarts from "echarts";
const chartRef = ref(null);

let tabs = [
  { label: "全部", value: "0" },
  { label: "未处理", value: "1" },
  { label: "已处理", value: "2" },
];
const ringOptions = {
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  },
  yAxis: {
    type: "value",
  },
  grid: {
    left: "10%",
    right: "4%",
    bottom: "10%",
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: "line",
      smooth: true,
    },
  ],
};
const formInline = reactive({
  user: "",
  region: "",
  date: "",
});

onMounted(() => {
  if (chartRef.value) {
    const myChart = echarts.init(chartRef.value);
    myChart.setOption(ringOptions);
  }
  new MapCustom({ dom: "mapcontainer" });
});
</script>

<style scoped lang="less">
.container {
  .incidentList {
    .tabs {
      display: flex;
      align-items: center;
      height: 54px;
      background: #ffffff;
      .tabs-item {
        cursor: pointer;
        flex: 1;
        text-align: center;
        color: #787878;
        font-size: 20px;
        &.active {
          color: #061451;
          position: relative;
          &::after {
            content: "";
            width: 20px;
            height: 2px;
            border-radius: 5px;
            background: #061451;
            display: inline-block;
            position: absolute;
            bottom: -13px;
            left: 50%;
            transform: translateX(-50%);
          }
        }
      }
    }
    .list {
      .list-item {
        cursor: pointer;
        padding: 0 15px;
        box-sizing: border-box;
        height: 100px;
        background-color: #fff;
        display: flex;
        align-items: center;
        margin-top: 14px;
        &.active {
          border-left: 2px solid #061451;
        }
        .img {
          width: 60px;
          height: 60px;
          flex-shrink: 0;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .content {
          flex: 1;
          margin: 0 10px;
          .content-name {
            color: #061451;
            font-size: 20px;
          }
          .content-time {
            color: #787878;
            font-size: 18px;
          }
        }
      }
    }
  }
  .map-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    .map {
      flex: 1;
      background-color: #fff;
    }
    .chart {
      height: 391px;
      margin-top: 20px;
      background-color: #fff;
      padding: 20px;
      box-sizing: border-box;
    }
  }
  .info {
    background: #ffffff;
    height: 100%;
    padding: 17px;
    box-sizing: border-box;
    .info-text {
      color: #061451;
      font-size: 18px;
      margin-bottom: 20px;
    }
    .info-box {
      padding: 20px 0;
      border-radius: 3px;
      background: #fafafa;
      border: 1px solid #e6e6e6;

      .info-box-title {
        color: #061451;
        font-size: 18px;
        &::before {
          content: "";
          width: 2px;
          height: 14px;
          border-radius: 20px;
          background: #061451;
          display: inline-block;
          margin-right: 9px;
        }
      }
      .info-box-contetn {
        padding: 0 11px;
        .item {
          color: #061451;
          font-size: 18px;
          display: flex;
          justify-content: space-between;
          margin-top: 20px;
        }
      }
    }
    .info-form {
      margin-top: 20px;
    }
  }
}
// /deep/ .el-upload {
//   width: 100px;
//   height: 100px;
// }
</style>
