<script lang="ts">
export default {
  name: "添加设备",
};
</script>

<script setup lang="ts">
import { onMounted, ref, nextTick } from "vue";
import { ElForm, ElMessage, ElMessageBox } from "element-plus";
import { searchDevicesPage,addDevices } from "@/api/business/database/device";
const emit = defineEmits([ 'closeAdddevice']);

const props = defineProps({
  projectInfo: {
    required: false,
    type: Object,
    default: {}
  },
  deviceId: {
    required: false,
    type: String,
    default: ''
  },
  deviceTypetype: {
    required: false,
    type: String,
    default: ''
  },
})
const input = ref('') // 设备名称
const loading = ref(false) // 加载中
const tableData = ref([]) // 表格数据
const deviceTypetype:any = ref(props.deviceTypetype) //
function gettableData() {
let params = {
  name: input.value,
  type: props.deviceTypetype,
  pageNum: 1,
  pageSize: 999,
};
if(deviceTypetype.value == ''){
  return
}
loading.value = true;
searchDevicesPage(params).then((result:any) => {
  result.records.forEach((item:any) => {
    if(deviceTypetype.value == 'FlatTank'){ // 扁平槽
      let sizeInfo =JSON.parse(item.size)
      item['length'] = sizeInfo.length
      item['width'] = sizeInfo.width
      item['height'] = sizeInfo.height
    }
    if(deviceTypetype.value == 'CylindricalTank'){ // 圆柱槽
      let sizeInfo =JSON.parse(item.size)
      item['diameter'] = sizeInfo.diameter
      item['height'] = sizeInfo.height
    }
    if(deviceTypetype.value == 'AnnularTank'){ // 环形槽
      let sizeInfo =JSON.parse(item.size)
      item['outer_diameter'] = sizeInfo.outer_diameter
      item['height'] = sizeInfo.height
    }

    if(deviceTypetype.value == 'TubeBundleTank'){ // 管束槽
      let sizeInfo =JSON.parse(item.size)
      item['outer_diameter'] = sizeInfo.outer_diameter
      item['height'] = sizeInfo.height
    }
      if(deviceTypetype.value == 'ExtractionColumn'){ // 萃取柱
      let sizeInfo =JSON.parse(item.size)
      item['upper_expanded_diameter'] = sizeInfo.upper_expanded.diameter
      item['upper_expanded_height'] = sizeInfo.upper_expanded.height
      item['tray_section_diameter'] = sizeInfo.tray_section.diameter
      item['tray_section_height'] = sizeInfo.tray_section.height
      item['lower_expanded_diameter'] = sizeInfo.lower_expanded.diameter
      item['lower_expanded_height'] = sizeInfo.lower_expanded.height
    }
    if(deviceTypetype.value == 'FluidizedBed'){ // 流化床
      let sizeInfo =JSON.parse(item.size)
      item['expanded_section_diameter'] = sizeInfo.expanded_section.diameter
      item['expanded_section_height'] = sizeInfo.expanded_section.height

      item['transition_section_height'] = sizeInfo.transition_section.height


      item['reaction_section_diameter'] = sizeInfo.reaction_section.diameter
      item['reaction_section_height'] = sizeInfo.reaction_section.height
    }
    if(deviceTypetype.value == 'ACFTank'){ // 锥底环形槽
      let sizeInfo =JSON.parse(item.size)
      item['annular_cylinder_outer_diameter'] = sizeInfo.annular_cylinder.outer_diameter
      item['annular_cylinder_height'] = sizeInfo.annular_cylinder.height
      item['frustum_bottom_bottom_diameter'] = sizeInfo.frustum_bottom.bottom_diameter
      item['frustum_bottom_height'] = sizeInfo.frustum_bottom.height
    }

  })
  tableData.value = result.records;
  loading.value = false;
}).catch((err) => {
  loading.value = false;
});
}
const selectedDevice:any = ref({}) // 选中患者
const selectPatient = (row:any) => { // 选择患者
  selectedDevice.value = row
  console.log(selectedDevice.value)
}
function confirmDevice(){ // 确定添加设备
  const params = {
    projectId: props.projectInfo.projectId,
    deviceId: selectedDevice.value.deviceId,
    size: selectedDevice.value.size,
    code: selectedDevice.value.code,
    name: selectedDevice.value.name,
    type: selectedDevice.value.type,
    volume: selectedDevice.value.volume,
    flowRate: selectedDevice.value.flowRate,
    pulseVelocity: selectedDevice.value.pulseVelocity,
  }
  addDevices(params).then((res) => {
    emit('closeAdddevice', selectedDevice.value)
  });
}

function confirmClick(formEl: any) {
  formEl.validate((valid: any) => {
    if (valid) {
      const params = {
        ...info.value,
        size: JSON.stringify( josnInfo.value),
        projectId: props.projectInfo.projectId,
        deviceId: selectedDevice.value.deviceId
      }
      addDevices(params).then((res) => {
        emit('closeAdddevice', selectedDevice.value)
      });
    }
  });
}

onMounted(() => {
  gettableData()

});
const infoForm = ref();
const isAdd = ref(false) // 是否添加设备 
const info: any = ref({
  name: "",
  code: "",
  type: null,
  size: null,
  volume: null,
  flowRate: null,
  pulseVelocity: null
});
const josnInfo: any = ref({}) // 设备信息
const rules = ref({
  name: [{ required: true, message: "请输入设备名称", trigger: "blur" }],
  code: [{ required: true, message: "请输入设备编码", trigger: "blur" }],
});
function addClick() {
  info.value = {
    name: "",
    code: "",
    type: props.deviceTypetype,
    size: null,
    volume: null,
    flowRate: null,
    pulseVelocity: null
  };
  josnInfo.value = {}
  if(props.deviceTypetype == 'ExtractionColumn'){
    josnInfo.value = {
      tray_section:{},
      lower_expanded:{},
      upper_expanded:{}
    }
  }else if(props.deviceTypetype == 'FluidizedBed'){
    josnInfo.value = {
      expanded_section:{},
      reaction_section:{},
      transition_section:{}
    }
  }else if(props.deviceTypetype == 'ACFTank'){
    josnInfo.value = {
      frustum_bottom:{},
      annular_cylinder:{}
    }
  }
   isAdd.value = true
}
</script>

<template>
  <div class="adddevice-box">
    <div style="display: flex; margin-bottom: 20px; border-bottom: 1px solid #e5e5e5;padding-bottom: 5px;">
      <div @click="isAdd = false" class="adddevice_navigation_left" :class="{'adddevice_navigation_activeleft':!isAdd}">选择设备</div>
      <div @click="addClick" class="adddevice_navigation_right" :class="{'adddevice_navigation_activeright':isAdd}">自定义</div>
    </div>
    <div v-if="isAdd == false">
      <div style="display: flex; justify-content: space-between;margin-bottom: 10px;">
        <div style="display: flex;display: -webkit-flex;">
          <el-input v-model="input" placeholder="请输入设备名称" @keyup.enter="gettableData" style="width: 200px" clearable />
          <el-button type="primary" style="margin-left: 10px" @click="gettableData">搜索</el-button>
        </div>
        <el-button type="primary" :disabled="!selectedDevice.name" @click="confirmDevice">确定</el-button>
      </div>
      <el-table v-loading="loading" :data="tableData" style="width: 100%; height: calc(100vh - 300px);margin-bottom: 10px;" border
        @cell-click="selectPatient" highlight-current-row  row-key="id"  :header-cell-style="{ background: 'rgb(250 250 250)', color: '#383838', height: '50px' }">
        <el-table-column type="selection" width="50" align="center"></el-table-column>
        <el-table-column type="index" label="序号" width="70" align="center"></el-table-column>
        <el-table-column type="index" label="序号" width="70" align="center"></el-table-column>
        <el-table-column prop="name" label="设备名称" min-width="180"></el-table-column>
        <el-table-column v-if="deviceTypetype == 'FlatTank'" prop="length" label="长度(cm)" min-width="100"></el-table-column>
        <el-table-column v-if="deviceTypetype == 'FlatTank'" prop="width" label="宽度(cm)" min-width="100"></el-table-column>
        <el-table-column v-if="deviceTypetype == 'FlatTank'" prop="height" label="高度(cm)" min-width="100"></el-table-column>
        <el-table-column v-if="deviceTypetype == 'CylindricalTank'" prop="diameter" label="直径(cm)" min-width="100"></el-table-column>
        <el-table-column v-if="deviceTypetype == 'CylindricalTank'" prop="height" label="高度(cm)" min-width="100"></el-table-column>
        <el-table-column v-if="deviceTypetype == 'AnnularTank'" prop="outer_diameter" label="环形槽外径(cm)" min-width="100"></el-table-column>
        <el-table-column v-if="deviceTypetype == 'AnnularTank'" prop="height" label="环形槽高度(cm)" min-width="100"></el-table-column>
        <el-table-column v-if="deviceTypetype == 'TubeBundleTank'" prop="outer_diameter" label="外径(cm)" min-width="100"></el-table-column>
        <el-table-column v-if="deviceTypetype == 'TubeBundleTank'" prop="height" label="高度(cm)" min-width="100"></el-table-column>
        <el-table-column v-if="deviceTypetype == 'ExtractionColumn'" prop="upper_expanded_diameter" label="上扩大段直径(cm)" min-width="100"></el-table-column>
        <el-table-column v-if="deviceTypetype == 'ExtractionColumn'" prop="upper_expanded_height" label="上扩大段高度(cm)" min-width="100"></el-table-column>
        <el-table-column v-if="deviceTypetype == 'ExtractionColumn'" prop="tray_section_diameter" label="板段直径(cm)" min-width="100"></el-table-column>
        <el-table-column v-if="deviceTypetype == 'ExtractionColumn'" prop="tray_section_height" label="板段高度(cm)" min-width="100"></el-table-column>
        <el-table-column v-if="deviceTypetype == 'ExtractionColumn'" prop="lower_expanded_diameter" label="下扩大段直径(cm)" min-width="100"></el-table-column>
        <el-table-column v-if="deviceTypetype == 'ExtractionColumn'" prop="lower_expanded_height" label="下扩大段高度(cm)" min-width="100"></el-table-column>
        <el-table-column v-if="deviceTypetype == 'FluidizedBed'" prop="expanded_section_diameter" label="扩大段直径(cm)" min-width="100"></el-table-column>
        <el-table-column v-if="deviceTypetype == 'FluidizedBed'" prop="expanded_section_height" label="扩大段高度(cm)" min-width="100"></el-table-column>
        <el-table-column v-if="deviceTypetype == 'FluidizedBed'" prop="transition_section_height" label="过渡段高度(cm)" min-width="100"></el-table-column>
        <el-table-column v-if="deviceTypetype == 'FluidizedBed'" prop="reaction_section_diameter" label="反应段直径(cm)" min-width="100"></el-table-column>
        <el-table-column v-if="deviceTypetype == 'FluidizedBed'" prop="reaction_section_height" label="反应段高度(cm)" min-width="100"></el-table-column>
        <el-table-column v-if="deviceTypetype == 'ACFTank'" prop="annular_cylinder_outer_diameter" label="环形圆柱外径(cm)" min-width="100"></el-table-column>
        <el-table-column v-if="deviceTypetype == 'ACFTank'" prop="annular_cylinder_height" label="环形圆柱高度(cm)" min-width="100"></el-table-column>
        <el-table-column v-if="deviceTypetype == 'ACFTank'" prop="frustum_bottom_bottom_diameter" label="圆锥台底部直径(cm)" min-width="100"></el-table-column>
        <el-table-column v-if="deviceTypetype == 'ACFTank'" prop="frustum_bottom_height" label="圆锥台底部高度(cm)" min-width="100"></el-table-column>
        <el-table-column prop="volume" label="容量(L)" width="120"></el-table-column>
        <el-table-column prop="flowRate" label="流量(m³/h)" width="120"></el-table-column>
        <el-table-column prop="pulseVelocity" label="脉冲速度(Hz)" width="120"></el-table-column>
      </el-table>
    </div>
    <div v-if="isAdd == true">
      <el-form ref="infoForm" :model="info" :rules="rules" label-width="120px" v-if="isAdd == true" 
       style="width: 100%;height: calc(100vh - 340px);margin-top: 30px;">
        <el-form-item label="设备编号" prop="code" style="width: 100%;">
          <el-input v-model="info.code" style="width: 100%" placeholder="请输入设备编号"></el-input>
        </el-form-item>
        <el-form-item label="设备名称" prop="name" style="width: 100%;">
          <el-input v-model="info.name" style="width: 100%" placeholder="请输入设备名称"></el-input>
        </el-form-item>
        <div v-if="deviceTypetype == 'FlatTank'">
            <el-form-item label="长度" style="width: 100%;">
              <el-input v-model="josnInfo['length']" style="width: 100%" placeholder="请输入长度">
                <template #append>cm</template>
              </el-input>
            </el-form-item>
            <el-form-item label="宽度" style="width: 100%;">
              <el-input v-model="josnInfo.width" style="width: 100%" placeholder="请输入宽度">
                <template #append>cm</template>
              </el-input>
            </el-form-item>
            <el-form-item label="高度" style="width: 100%;">
              <el-input v-model="josnInfo.height" style="width: 100%" placeholder="请输入高度">
                <template #append>cm</template>
              </el-input>
            </el-form-item>
        </div>

        <div v-if="deviceTypetype == 'CylindricalTank'">
            <el-form-item label="直径" style="width: 100%;">
              <el-input v-model="josnInfo.diameter" style="width: 100%" placeholder="请输入直径">
                <template #append>cm</template>
              </el-input>
            </el-form-item>
            <el-form-item label="高度" style="width: 100%;">
              <el-input v-model="josnInfo.height" style="width: 100%" placeholder="请输入高度">
                <template #append>cm</template>
              </el-input>
            </el-form-item>
        </div>

        <div v-if="deviceTypetype == 'AnnularTank'">
            <el-form-item label="环形槽外径" style="width: 100%;">
              <el-input v-model="josnInfo.outer_diameter" style="width: 100%" placeholder="请输入直径">
                <template #append>cm</template>
              </el-input>
            </el-form-item>
            <el-form-item label="环形槽高度" style="width: 100%;">
              <el-input v-model="josnInfo.height" style="width: 100%" placeholder="请输入高度">
                <template #append>cm</template>
              </el-input>
            </el-form-item>
        </div>

         <div v-if="deviceTypetype == 'TubeBundleTank'">
            <el-form-item label="外径" style="width: 100%;">
              <el-input v-model="josnInfo.outer_diameter" style="width: 100%" placeholder="请输入直径">
                <template #append>cm</template>
              </el-input>
            </el-form-item>
            <el-form-item label="高度" style="width: 100%;">
              <el-input v-model="josnInfo.height" style="width: 100%" placeholder="请输入高度">
                <template #append>cm</template>
              </el-input>
            </el-form-item>
        </div>
        <div v-if="deviceTypetype == 'ExtractionColumn'">
          <div class="flex">
            <el-form-item label="上扩大段直径" style="width: 100%;">
              <el-input v-model="josnInfo.upper_expanded.diameter" style="width: 100%" placeholder="请输入直径">
                <template #append>cm</template>
              </el-input>
            </el-form-item>
            <el-form-item label="上扩大段高度" style="width: 100%;">
              <el-input v-model="josnInfo.upper_expanded.height" style="width: 100%" placeholder="请输入高度">
                <template #append>cm</template>
              </el-input>
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="板段直径" style="width: 100%;">
              <el-input v-model="josnInfo.tray_section.diameter" style="width: 100%" placeholder="请输入直径">
                <template #append>cm</template>
              </el-input>
            </el-form-item>
            <el-form-item label="板段高度" style="width: 100%;">
              <el-input v-model="josnInfo.tray_section.height" style="width: 100%" placeholder="请输入高度">
                <template #append>cm</template>
              </el-input>
            </el-form-item>
          </div>
           <div class="flex">
            <el-form-item label="下扩大段直径" style="width: 100%;">
              <el-input v-model="josnInfo.lower_expanded.diameter" style="width: 100%" placeholder="请输入直径">
                <template #append>cm</template>
              </el-input>
            </el-form-item>
         
            <el-form-item label="下扩大段高度" style="width: 100%;">
              <el-input v-model="josnInfo.lower_expanded.height" style="width: 100%" placeholder="请输入高度">
                <template #append>cm</template>
              </el-input>
            </el-form-item>

           </div>
            
        </div>

        <div v-if="deviceTypetype == 'FluidizedBed'">
            <div class="flex">
              <el-form-item label="扩大段直径" style="width: 100%;">
                <el-input v-model="josnInfo.expanded_section.diameter" style="width: 100%" placeholder="请输入直径">
                  <template #append>cm</template>
                </el-input>
              </el-form-item>
              <el-form-item label="扩大段高度" style="width: 100%;">
                <el-input v-model="josnInfo.expanded_section.height" style="width: 100%" placeholder="请输入高度">
                  <template #append>cm</template>
                </el-input>
              </el-form-item>
            </div>
           
            <el-form-item label="过渡段高度" style="width: 100%;">
              <el-input v-model="josnInfo.transition_section.height" style="width: 100%" placeholder="请输入高度">
                <template #append>cm</template>
              </el-input>
            </el-form-item>
            <div class="flex">
              <el-form-item label="反应段直径" style="width: 100%;">
                <el-input v-model="josnInfo.reaction_section.diameter" style="width: 100%" placeholder="请输入直径">
                  <template #append>cm</template>
                </el-input>
              </el-form-item>
              <el-form-item label="反应段高度" style="width: 100%;">
                <el-input v-model="josnInfo.reaction_section.height" style="width: 100%" placeholder="请输入高度">
                  <template #append>cm</template>
                </el-input>
              </el-form-item>
            </div>
            

            
        </div>
    
        <div v-if="deviceTypetype == 'ACFTank'">
          <div class="flex">
            <el-form-item label="环形圆柱外径" style="width: 100%;">
              <el-input v-model="josnInfo.annular_cylinder.outer_diameter" style="width: 100%" placeholder="请输入外径">
                <template #append>cm</template>
              </el-input>
            </el-form-item>
            <el-form-item label="环形圆柱高度" style="width: 100%;">
              <el-input v-model="josnInfo.annular_cylinder.height" style="width: 100%" placeholder="请输入高度">
                <template #append>cm</template>
              </el-input>
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="圆锥台底部直径" style="width: 100%;">
              <el-input v-model="josnInfo.frustum_bottom.bottom_diameter" style="width: 100%" placeholder="请输入直径">
                <template #append>cm</template>
              </el-input>
            </el-form-item>
            <el-form-item label="圆锥台底部高度" style="width: 100%;">
              <el-input v-model="josnInfo.frustum_bottom.height" style="width: 100%" placeholder="请输入高度">
                <template #append>cm</template>
              </el-input>
            </el-form-item>
          </div>
        </div>
        <el-form-item label="容量" style="width: 100%;">
          <el-input v-model="info.volume" style="width: 100%" placeholder="请输入容量">
             <template #append>L</template>
          </el-input>
        </el-form-item>
        <el-form-item label="流量"  style="width: 100%;">
          <el-input v-model="info.flowRate" style="width: 100%" placeholder="请输入流量">
             <template #append>m³/h</template>
          </el-input>
        </el-form-item>
        <el-form-item label="脉冲速度" style="width: 100%;">
          <el-input v-model="info.pulseVelocity" style="width: 100%" placeholder="请输入脉冲速度">
             <template #append>Hz</template>
          </el-input>
        </el-form-item>
        <!-- <span class="dialog-footer"
          style="display: flex;display: -webkit-flex; justify-content: flex-end;-webkit-justify-content: flex-end;">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="confirmClick(infoForm)">确 定</el-button>
        </span> -->
      </el-form>
      <div style="display: flex; justify-content: flex-end;">
        <el-button type="primary" @click="confirmClick(infoForm)">确定</el-button>
      </div>
    </div>

  </div>
</template>

<style scoped>
.adddevice-box{
  width: 100%;
  height: calc(100vh - 200px);
}
.adddevice_navigation_left{
  width: 110px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  cursor: pointer;
  font-family: 'Arial Normal', 'Arial';
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: #363636;
  background-image: url('@/assets/x6/navleft.png');
}
.adddevice_navigation_left:hover{
  color: #266fff ;
}
.adddevice_navigation_activeleft{
  background-image: url('@/assets/x6/navleft_active.png');
  color: #fff !important;
}
.adddevice_navigation_right{
   width: 110px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  cursor: pointer;
  font-family: 'Arial Normal', 'Arial';
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: #363636;
  background-image: url('@/assets/x6/navright.png');
}
.adddevice_navigation_right:hover{
  color: #266fff ;
}
.adddevice_navigation_activeright{
  background-image: url('@/assets/x6/navright_active.png');
  color: #fff !important;
}
</style>
<style>
 .el-table .el-table--enable-row-hover .el-table__body tr:hover > td{
  background-color: #194764 !important;
}

 .adddevice-box .el-table .el-table__row.current-row td{
  background-color: #f3faff !important;
  border-top:1px solid #14aaff;
  border-bottom:1px solid #14aaff
}
.adddevice-box .el-table .el-table__row.current-row td:last-child{
  border-right:1px solid #14aaff;
}
.adddevice-box .el-table .el-table__row.current-row td:first-child{
  border-left:1px solid #14aaff;
}
.adddevice-box .el-table .el-table__row.current-row:last-child td{
  border-bottom:1px solid #14aaff
}
.el-table__inner-wrapper:before{
  background-color: transparent !important;
  border-top: 1px solid var(--el-table-border-color);
}
 .el-table--border:before{
  background-color: transparent !important;
  border-top: 1px solid var(--el-table-border-color);
}
</style>



