<template>
    <!--矿井信息-->
    <div class="l_Dialog bou tablebk">
      <div class="common-layout" style="margin: 0" >
        <el-aside
          width="480px"
          class="L_aside L_aside1 asideg asidegbg leftbgimg1"
          v-show="dialogVisible"
        >
          <div class="demo-collapse">
            <el-collapse v-model="coolactiveName1" accordion>
              <el-collapse-item name="1"  class="imgneon">
           
                <template #title>
                    <el-icon class="iconimg Frame3 imgneon" fit="contain"></el-icon>
                   报警设置
                </template>
                <div class="asides_content">
                  <div class="jc_content tablecolor">
                    <div class="jc_padding font12">
                      <div class="xian btncolor tablefocus bmar">
                       <!--内容 -->
            <div class="classtab">
                <el-tabs v-model="resultactiveName" type="card" class="demo-tabs" 
                    :stretch="true">
                    <el-tab-pane label="突水" name="first">
                        <div class="asides_content">
                            <div class="jc_content tablecolor jc_content">

                                <div class="font12 my_content1">
                                    <div class=" btncolor tablefocus bmar">

                                        <el-table :data="tableData" style="width:480px" :max-height="tableHeight"
                                            :highlight-current-row="currentrow"
                                            @row-click="handleDelete($event)"
                                            :header-cell-style="{ 'background': 'rgba(13, 22, 57,0) ' }">
                                            <el-table-column   prop="state"  label="预警" >
                                            <template #default="scope">
                                                <el-image v-if="scope.row.state=='0'" style="height: 100%" :src="bt1" fit="contain"></el-image>
                                                <el-image v-if="scope.row.state=='1'" style="height: 100%" :src="bt2" fit="contain"></el-image>
                                                <el-image v-if="scope.row.state=='2'"  style="height: 100%" :src="bt3" fit="contain"></el-image>
                                                <el-image v-if="scope.row.state=='3'" style="height: 100%" :src="bt4" fit="contain"></el-image>
                                            </template>
                                            </el-table-column>
                                            <el-table-column prop="name" label="突水量" />
                                        </el-table>
                                    </div>
                                </div>
                                <div class="dialog-footer footer_div l_btn">
                                    <div class="footerbtn flex1">
                                        <div class="borderimg"><el-button @click="addsg();">添加</el-button></div>
                                    </div>
                                    <div class="footerbtn flex1">
                                        <div class="borderimg"><el-button @click="nodedelete()">
                                                删除
                                            </el-button></div>
                                    </div>
                                    <div class="footerbtn flex1">
                                        <div class="borderimg"><el-button @click="accident()">
                                                修改
                                            </el-button></div>
                                    </div>
                                    <div class="footerbtn flex1">
                                        <div class="borderimg"><el-button
                                                @click="dialogVisible = false; currentrow = false;">
                                                确认
                                            </el-button></div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="火灾" name="second">
                      

                    </el-tab-pane>
                    <el-tab-pane label="瓦斯" name="third">

                    </el-tab-pane>
                   
                </el-tabs>
            </div>
    
                      </div>
                    </div>
                  </div>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </el-aside>
      </div>
    </div>
  
  </template>
  <script setup>
  import { computed, ref, onMounted, reactive, toRef } from "vue";
  import { request, uploadFile } from "@/utils/request";
  import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
  import icon from "@/assets/img/icon.png";
  import bt1 from "@/assets/img/Group1376.png"
import bt2 from "@/assets/img/Group1377.png"
import bt3 from "@/assets/img/Group1395.png"
import bt4 from "@/assets/img/Group1396.png"
  import { timestampToTime } from '@/js/lindex.js';
  import NodeSelect from "./NodeLine.vue";
  let dialogVisible=ref(false);
  const resultactiveName = ref("first");
  let coolactiveName1 = ref(["1",'2']);
  let tableHeight = ref(280);
  let currentrow=ref(false)
  const tableData = [
  {
    date: '检测点',
    name: '1',
    state: '1',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Home',
  },
  {
    date: '检测点',
    name: '1',
    state: '2',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Office',
  },


]
  defineExpose({ dialogVisible, });
  </script>
  
