<template>
    <!-- 所有弹出框 -->
      <div class="l_Dialog" >
      
       
      <!--火灾左侧栏-->
      <div class="common-layout " style="margin: 0;"> 
          <el-aside width="591px" class="L_aside asideg asidegbg leftbgimg2 "  v-show="boun.collfire">
            <div class="demo-collapse">
        <el-collapse v-model="coolactiveName1" accordion>
          <el-collapse-item  name="1">
            <template #title>
                <el-icon class="iconimg Frame2" fit="contain" ></el-icon>  
              火灾<el-icon class="header-icon">
                <info-filled />
              </el-icon>
            </template>
            <div class="asides_content">
                <div class="jc_content tablecolor">
             
            <div class="jc_padding font12">
                <div class="xian btncolor" >
             
                        <el-table
                :data="tableData"
                style="width: 100%"
                @current-change= "handleCurrentChange"
                :row-class-name="tableRowClassName"
                :header-cell-style="{'background':'rgba(13, 22, 57, 0.96) '}"

                >
            <el-table-column prop="date" label="节点选择"  />
            <el-table-column prop="name" label="边界类型"  />
            <el-table-column prop="date" label="流量(m³/s)" width="80" />
            <el-table-column prop="name" label="压强(pa)" width="70" />
            <el-table-column prop="date" label="温度(℃）"  />
            <el-table-column prop="name" label="污染物1浓度" width="95" />
            <el-table-column prop="date" label="污染物2浓度" width="95" />
        </el-table>
        <div class="asdis_btn">
        <div class="flex_a"><div class="btns"><span class="spantext">添加</span></div></div>
        <div class="flex_a"><div class="btns"><span class="spantext">删除</span></div></div>
        <div class="flex_a"><div class="btns" @click="xiugai(); dialog.dialogVisible = true;"><span class="spantext">修改</span></div></div>
    </div>
        </div>
            </div>
            
        </div>

            </div>
        
          </el-collapse-item>
        </el-collapse>
        
      </div>

          </el-aside>
       
      </div>
  <!-- 修改 -->
  <el-dialog
    v-model="dialog.dialogVisible"
    width="482"
    :modal="false"
    :close-on-click-modal="false"
    draggable
 class="dialog_class bgcolor  foter_l"
  >

  <template #header="{titleId, titleClass }">
      <div class="my-header">
        <el-image :src="icon" fit="contain" ></el-image>
        <h4 :id="titleId" :class="titleClass">修改</h4>
       
      </div>
    </template>
    <div class="addye">     
    <el-form   class="demo-form-inline" :inline="true" :model="formInline">
             <div class="l_padding input" style="padding:20px 20px 20px 24px; ">
  
                 <el-form-item label="边界类型" >
                <el-select clearable  v-model="formInline.region" placeholder="请选择">
                   <el-option v-for="item in formInline.options" :key="item.id" :label="item.label" :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item> 
       
        <ul>
            <li><span class="inputtext_1">流量(m³/s)</span>
            <div class="inputkuang"> <el-input v-model="formInline.user" /></div>
        </li>
        <li><span class="inputtext_1">压强(pa)</span>
            <div class="inputkuang"> <el-input v-model="formInline.user" /></div>
        </li>
        <li><span class="inputtext_1">温度(℃）</span>
            <div class="inputkuang"> <el-input v-model="formInline.user" /></div>
        </li>
        <li><span class="inputtext_1">污染物1浓度</span>
            <div class="inputkuang"> <el-input v-model="formInline.user" /></div>
        </li>
        <li><span class="inputtext_1">污染物2浓度</span>
            <div class="inputkuang"> <el-input v-model="formInline.user" /></div>
        </li>
        
        </ul>
    </div> 
  </el-form>
  <div class="dialog-footer footer_div l_btn">
        <div class="footerbtn flex1"><div class="borderimg"><el-button @click="dialog.dialogVisible = false">添加</el-button></div></div>
        <div class="footerbtn flex1"><div class="borderimg"><el-button  @click="accident()">
       确定
        </el-button></div></div>
      </div>
  </div>
  </el-dialog>
      </div>
    </template>
  
    <script setup >
    import { computed,ref,onMounted,reactive } from "vue";
    import icon from "@/assets/img/icon.png";
    import closeimg from "@/assets/img/colse.png";
   import { ElMessage,ElButton, ElDialog } from 'element-plus'
    const props= defineProps({
        classradio: {
        type: String,
        // default: '',
    },

 });
 const strResultFormatlist = reactive(
    
        { id: 0, name: "灾情演化",value: ".vtk" },
        { id: 1, name: "演化过程" ,value: ".mesh"}
 );
let formInline = reactive({
  user: '11',
  region: 'Option1',
  options:[
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]
  
})
const value = ref('')
const  dialog = ref({
    dialogVisible:false,
});
const boun = ref({
    collfire:false,
    collwater:false,
});

let coolactiveName1=ref(["1","2"]);



const tableData = [
  {
    date: '01',
    name: '首次',
  },
  {
    date: '02',
    name: '火灾',
  },
  {
   
    date: '03',
    name: '灾事',
  },

]
const xiugai=()=>{
    var arr=[
        { id: 0, name: "灾情演化",value: ".vtk" },
        { id: 1, name: "演化过程" ,value: ".mesh"}]
        strResultFormatlist.value=arr;
}

const tableRowClassName = ({row, rowIndex}) =>{
    if (rowIndex%2 != 0) {
        return 'evenRow';
    }
    return 'oddRow';
  
}
const handleCurrentChange=()=>{

}
const  accident4=()=>{
    if(props.classradio=="Fire"){
        boun.value.collfire=true;
        console.log(111)
        console.log( boun.value.collfire)

    }else if(props.classradio=="Water"){
        boun.value.collwater=true;
    }
}
onMounted(() => {
  });
    defineExpose({boun,accident4});
    </script>
    <style lang="scss" scoped> 
    .jc_padding .el-table tr{
        height: 30px !important;
        background: rgba(104,173,255,0.3);
        box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
        border-radius: 0px 0px 0px 0px;
        border: 1px solid;
        border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
    }
.flex_a{
    flex: 1;
    padding: 0 19px; 
}
    .btns{
    width: 72px;
    height: 30px;
    background-image: url(../../assets/img/Rectangle399.png);
    background-repeat: no-repeat;
    line-height: 30px; 
    overflow: hidden;  
    margin: 10px 0;
    .spantext{
 font-weight: bold;
font-size: 12px;
color: #FFFFFF;
text-align: left;
font-style: normal;
text-transform: none;
    }
}
.header_z{
    box-shadow:none !important;
    padding: 10px 20px !important;  
}
.header_l{
            line-height: 10px;
            // height: 40px;
            text-align: left;
            padding: 0 20px;
            // border-bottom: 1px solid;
            border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
            box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
            border-radius: 0px 0px 0px 0px;
            .el-image{
                padding: 10px 10px 0 0;
            }
            h4{
                font-weight: bold;
                font-size: 12px;
                color: #68ADFF;
                line-height: 14px;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }
        
        }
.tianjia{
    display: inline-block;
}
    .jc_padding{
        padding: 18px 10px;
    }
    .line{
    border-bottom: 1px solid rgba(255, 255, 255, 0.20);  
    box-sizing: border-box;
    }
    .L_aside{
    .iconimg{
        width: 37px;
        height: 36px;
        margin:0 7px 0 24px;
    }
    .Frame2{
        background-image: url(../../assets/img/Frame2.png);
        background-repeat: no-repeat;
        background-position: center;
    }
    .el-collapse,.el-collapse-item__header{
    border: none;
    ul li{
        text-align: left;
    }
    .inputkuang{
        height: 30px;
        width: 100%;
        background: rgba(13,22,57,0.4);
    position: relative;
    .righttext{
        display: inline-block;
        position: absolute;
        right: 10px;
        top: 3px;
        color: rgba($color: #FFFFFF, $alpha: 0.8);
    }
    }
    
    .inputtext_1{
        font-weight: 400;
    font-size: 13px;
    color: #FFFFFF;
    line-height: 14px;
    text-align: left;
    font-style: normal;
    text-transform: none; 
    padding: 13px 0 7px 0;
    display: inline-block;
    
    }
    }
    }
    .ddd{
        margin-top: 20px;
        .ddd_div{
            padding: 20px 0;
            position: relative;
        }
        .class_btn{
            position: absolute;
        right: 0;
        top: 21px;
        }
        .header_l{
                line-height: 10px;
                // height: 40px;
                text-align: left;
                padding: 0 20px;
                // border-bottom: 1px solid;
                border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
                box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
                border-radius: 0px 0px 0px 0px;
                .el-image{
                    padding: 10px 10px 0 0;
                }
                h4{
                    font-weight: bold;
                    font-size: 12px;
                    color: #68ADFF;
                    line-height: 14px;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }
            }
    }
    .tianjia{
        display: inline-block;
    }
    .el-dialog__title{
        display: inline-block;
    }  
    .bgcolor{
        // width: 482px;
        box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
        border-radius: 0px 0px 0px 0px;
        border: 1px solid;
        border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
    }
    .dialog_class{
            .my-header{
                line-height: 10px;
                height: 40px;
                text-align: left;
                padding: 0 20px;
                border-bottom: 1px solid;
                border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
                box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
                border-radius: 0px 0px 0px 0px;
                .el-image{
                    padding: 10px 10px 0 0;
                }
                h4{
                    font-weight: bold;
                    font-size: 12px;
                    color: #68ADFF;
                    line-height: 14px;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }
            }
            .my_content{
                width: 100%;
                height: 90px;
                box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
                border-radius: 0px 0px 0px 0px;
                position: relative;
               
                .radio-group{
                    display: flex;
                    justify-content: center;
                    .el-radio{
                        flex: 1;
                        justify-content: center;
                        font-weight: bold;
                            font-size: 12px;
                            color: #FFFFFF;
                            line-height: 14px;
                      
                    }
                  
                }
            }
            .el-dialog__footer{
                position: absolute;
                bottom: 17px;
                display: flex;
                .footerbtn{
                    flex: 1;
                    text-align: center;
                }
            }
        }
        .my_content1{
            .el-table .cell{
                font-weight: 400;
                font-size: 12px;
                color: #FFFFFF !important;
                line-height: 14px;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }
    
        }
        .l_btn .borderimg {
        width: 109px;
    height: 30px;
    background: rgba(104,173,255,0.3);
    box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
    /* border: 1px solid rgba(31, 107, 255, 1); */
     border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1; 
    
    border-radius: 4px;
    display: flex;
    display: inline-block;
    box-sizing: border-box;
    }
    .borderimg{
        width: 109px;
        height: 30px;
        background: rgba(104,173,255,0.3);
        box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
        /* border: 1px solid rgba(31, 107, 255, 1); */
        -o-border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
        border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
        border-radius: 4px;
        display: flex;
        display: inline-block;
        box-sizing: border-box
    }
    .el-table,.el-table thead th {
        background-color: rgba(13, 22, 57, 0.96) !important;
    }
    .L_aside{
        height: calc(100vh - 70px);
        position: absolute;
        top: 70px;
    
    }
    .el-form-item__label{
        color: #FFFFFF !important;
    }
  
    .asdis_btn{
    display: flex;
    margin-top: 9px;
        .btn{
            flex: 1;
            width: 145px;
            height: 54px;
            background-image: url(../../assets/img/Rectangle5.png) ; 
            background-size: cover;
             background-position-x: center !important;
            line-height: 54px;
            .spantext{
                font-weight: bold;
                font-size: 12px;
                color: #FFFFFF;
                text-align: center;
                font-style: normal;
                text-transform: none;
    
            }
        }
    }
 
  
  
    .jiancedian{
        width:380px;
        position: absolute;
        right: 0;
        top: 70px;
     box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
    border-radius: 4px 4px 4px 4px;
    border: 1px solid;
    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1; 
    }
    </style>
   <style>
    .leftbgimg2 .el-collapse-item__header{
      background-image: url(../../assets/img/b1.png)!important; 
      background-size: cover;
    background-position-x: center !important;
}
.xian{
    border: 1px solid;
    -o-border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
    box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
    border-radius: 0px 0px 0px 0px;
    background-color: rgba(13, 22, 57, 0.4);
}
.header_l{
    position: relative;
}
.header_l .closeimg{

    position: absolute;
    top: 10px;
    right: 0;

}
.asideg .el-collapse-item__wrap{
    height: calc(100vh - 120px);
    background: rgba(13, 22, 57, 0.4);
    /* //border: 1px solid; */
    border-bottom: 1px solid;
    border-left:1px solid;
    border-right:1px solid;
    -o-border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
    box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
    border-radius: 0px 0px 0px 0px;
    background-color: rgba(13, 22, 57, 0.4);
}
.leftbgimg2 .el-table tr{
        height: 30px !important;
        background: rgba(104,173,255,0.3);
        box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
        border-radius: 0px 0px 0px 0px;
        border: 1px solid;
        border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;


}

.font12 .el-table .cell{
    font-size: 12px !important;
    }
.addye{
    width: 100%;
    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
    border-radius: 0px 0px 0px 0px;
    position: relative;
}
</style>
<style >
 .inputtext_1{
    font-weight: 400;
    font-size: 13px;
    color: #FFFFFF;
    line-height: 14px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    padding: 13px 0 7px 0;
    display: inline-block;
}
.input ul li{
    text-align: left;
}
.input .el-form-item__label{
    color: #FFFFFF; 
}
.input .el-input__inner{
    color: #FFFFFF; 
}
.foter_l .el-dialog__footer{
    height: 40px;
}

.addye .footer_div{
height: auto;
padding-bottom: 30px;
}
</style>