<template>
    <div class=" bou  tablebk">
         <div class="common-layout" style="margin: 0">
         <el-aside
         width="357px"
           class="L_aside L_aside1 asideg asidegbg leftbgimg1"
           v-show="sendialogVisible"
         >
           <div class="demo-collapse">
             <el-collapse v-model="coolactiveName1" accordion>
               <el-collapse-item name="1" class="imgneon">
                 <template #title>
                   <el-icon class="iconimg Frame3" fit="contain"></el-icon>
                   路径预设<el-icon class="header-icon"> </el-icon>
                 </template>
     <div class="l_Dialog">
             <div class="classtab">
                 <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-class-name="tableRowClassName"
                                     @row-click="handleDelete($event)"
                                     :header-cell-style="{ 'background': 'rgba(13, 22, 57, 0) ' }">
                                     <el-table-column prop="name" label="路径名称" />
                                     <el-table-column label="操作" >
                                        <template #default="scope">
                                            <el-button
                                            size="small"
                                            type="success"
                                            @click="handledetection(scope.$index, scope.row)"
                                            >查看</el-button
                                            >
                                        </template>
                                        </el-table-column>
                                 </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="shanchu()">
                                         删除
                                     </el-button></div>
                             </div>
                             <div class="footerbtn flex1">
                                 <div class="borderimg"><el-button @click="amend()">
                                         修改
                                     </el-button></div>
                             </div>
                             <div class="footerbtn flex1">
                                 <div class="borderimg"><el-button @click="sendialogVisible = false;currentrow=false;">
                                         确认
                                     </el-button></div>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
         </el-collapse-item>
             </el-collapse>
         <!-- 添加 -->
         <el-dialog v-model="addVisible" width="400" class="dialog_class bgcolor tianjia  foter_l tianjia">
 
             <template #header="{ titleId, titleClass }">
                 <div class="my-header ">
                     <el-image :src="icon" fit="contain"></el-image>
                     <h4 :id="titleId" :class="titleClass">{{ add }}</h4>
 
                 </div>
             </template>
             <el-form class="demo-form-inline" :inline="true" :model="wuliobj">
                 <el-form-item label="编号" :label-width="formLabelWidth6">
                     <el-input v-model="wuliobj.code" maxlength="15" class="w-50 m-2" placeholder="请输入" />
                 </el-form-item>
                 <el-form-item label="名称" :label-width="formLabelWidth6">
                     <el-input v-model="wuliobj.name" maxlength="18" class="w-50 m-2" placeholder="请输入" />
                 </el-form-item>
                 <el-form-item label="密度" :label-width="formLabelWidth6">
                     <el-input v-model="wuliobj.density" maxlength="15" oninput ="value=value.replace(/[^0-9.]/g,'')"  class="w-50 m-2" placeholder="请输入" />
                 </el-form-item>
                 <el-form-item label="扩散系数" :label-width="formLabelWidth6">
                     <el-input v-model="wuliobj.diffcoe" maxlength="15" oninput ="value=value.replace(/[^0-9.]/g,'')"  class="w-50 m-2" placeholder="请输入" />
                 </el-form-item>
                 <el-form-item label="比热" :label-width="formLabelWidth6">
                     <el-input v-model="wuliobj.speheat" maxlength="15" oninput ="value=value.replace(/[^0-9.]/g,'')"  class="w-50 m-2" placeholder="请输入" />
                 </el-form-item>
             </el-form>
             <div class="dialog-footer footer_div l_btn">
                 <div class="footerbtn flex1">
                     <div class="borderimg"><el-button @click="addVisible = false">取消</el-button></div>
                 </div>
                 <div class="footerbtn flex1">
                     <div class="borderimg"><el-button @click="addEied(); addVisible = false">
                             确定
                         </el-button></div>
                 </div>
             </div>
         </el-dialog>
 
         <!-- 删除 -->
         <el-dialog v-model="dialogsgdelect" width="400" class="dialog_class bgcolor tianjia">
 
             <template #header="{ titleId, titleClass }">
                 <div class="my-header ">
                     <el-image :src="icon" fit="contain"></el-image>
                     <h4 :id="titleId" :class="titleClass">删除框</h4>
 
                 </div>
             </template>
             <h4 class="delecttitle"> 是否确认删除名称 <span class="spanclad">{{ zqname }}</span></h4>
             <div class="dialog-footer footer_div l_btn">
                 <div class="footerbtn flex1">
                     <div class="borderimg"><el-button @click="dialogsgdelect = false">取消</el-button></div>
                 </div>
                 <div class="footerbtn flex1">
                     <div class="borderimg"><el-button @click="fundeledata(); dialogsgdelect = false">
                             确定
                         </el-button></div>
                 </div>
             </div>
         </el-dialog>
           </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 { timestampToTime } from '@/js/lindex.js'
 let pipeline = ref();
 let sendialogVisible = ref(false);
 let currentrow=ref(true);
 let addVisible = ref(false);
 let dialogsgdelect = ref(false)
 let classradio1 = ref('Fire');
 const formLabelWidth6 = ref(100);
 let add = ref("")
 const resultactiveName = ref("first");
 let coolactiveName1 = ref(["1", "2"]);
 let tableHeight = ref(145);
 let tableData = ref([]);
 let tableobj = ref({});
 let zqname = ref();
 let wuliobj = ref({
     coid:'',
     code: '',
     name:'',
     density: "",
     diffcoe: '',
     speheat: '',
 })
 let source = ref({
     selectstr: '',
     site: ''
 })
 let firepid = ref("")
 const tableRowClassName = ({ row, rowIndex }) => {
     if (rowIndex % 2 != 0) {
         return 'evenRow';
     }
     return 'oddRow';
 
 }
 // 选中一行
 const handleDelete = (val) => {
     currentrow.value=true;
     tableobj.value = val;
     console.log(tableobj.value)
 }
 // 删除
 const shanchu = () => {
     if (JSON.stringify(tableobj.value) == '{}') {
         ElMessage.error("你还没有选中修改的项目")
     } else {
         dialogsgdelect.value = true
         zqname.value = tableobj.value.name;
     }
 }
 const handledetection=()=>{

 }
 const fundeledata = () => {
 
     console.log(zqname.value);
     const params = {
         transCode: 'D10015',
         coid: tableobj.value.coid
     }
     request(params)
         .then((res) => {
             getsensor();
         })
         .catch((err) => {
             ElMessage.error(err.returnMsg)
         })
 }
 onMounted(() => {
     getsensor();
 });
 // 查询
 const getsensor = () => {
 
     const params = {
         transCode: 'D10013',
     }
     request(params)
         .then((res) => {
             tableData.value = res.rows;
         })
         .catch((err) => {
             ElMessage.error(err.returnMsg)
         })
 }
 //添加
 const addsg = () => {
     add.value = "添加";
     currentrow.value=false;
     addVisible.value = true;
     wuliobj.value.coid = '';
     wuliobj.value.code = '';
     wuliobj.value.name = '';
     wuliobj.value.density = '';
     wuliobj.value.diffcoe = '';
     wuliobj.value.speheat = '';
 
 
 }
 // 添加修改的接口
 const addEied = () => {
     const params = {
         transCode: 'D10014',
         coid: wuliobj.value.coid,
         code: wuliobj.value.code,
         name:  wuliobj.value.name ,
         density: wuliobj.value.density,
         diffcoe:wuliobj.value.diffcoe,
         speheat:wuliobj.value.speheat,
     }
     request(params)
         .then((res) => {
             tableData.value = res.rows;
             getsensor();
         })
         .catch((err) => {
             ElMessage.error(err.returnMsg)
         })
 }
 //修改
 const amend = () => {
     add.value = "修改";
     if (JSON.stringify(tableobj.value) == '{}') {
         ElMessage.error("你还没有选中修改的项目")
     } else {
     addVisible.value = true;
     wuliobj.value.coid = tableobj.value.coid;
     wuliobj.value.code =tableobj.value.code;
     wuliobj.value.name = tableobj.value.name;
     wuliobj.value.density = tableobj.value.density;
     wuliobj.value.diffcoe =tableobj.value.diffcoe;
     wuliobj.value.speheat =tableobj.value.speheat;
     }
 }
 
 
 defineExpose({ sendialogVisible, });
 </script>