<script setup lang="ts">
import {
  addInstrumentResource,
  selectCommunicateType,
  selectInstrumentType,
  updateInstrumentResource,
} from "@/api/config";

const addVisible = ref(false);
const dialogType = ref("1"); // 1新增 2修改
const formRef = ref(null);
const formData = ref({
  baudRate: "",
  channel: "",
  checkBit: "",
  commConfig: "",
  commType: "",
  connUrl: "",
  dataBit: "",
  instrumentModule: "",
  instrumentName: "",
  instrumentProperty: "1",
  instrumentType: "",
  ip: "",
  port: "",
  queryUrl: "",
  slot: "",
  stopBit: "",
  writeUrl: "",
});

const openDialog = (data: any) => {
  getDevTypes();
  getCommTypes();

  addVisible.value = true;

  nextTick(() => {
    formRef.value?.resetFields();
  });

  formData.value = data;
};

defineExpose({
  openDialog,
});

// 查询仪器类型
const deviceTypeOptions = ref<any[]>([]);
const getDevTypes = () => {
  selectInstrumentType().then((res) => {
    deviceTypeOptions.value = res.data;
  });
};
// 查询通讯类型
const commTypeOptions = ref<any[]>([]);
const getCommTypes = () => {
  selectCommunicateType({}).then((res) => {
    commTypeOptions.value = res.data;
  });
};
</script>

<template>
  <el-dialog
    v-model="addVisible"
    :append-to-body="true"
    width="500"
    align-center
  >
    <el-form
      label-width="auto"
      ref="formRef"
      v-model:model="formData"
      style="max-width: 800px"
    >
      <el-form-item label="波特率" prop="baudRate">
        <div v-text="formData.baudRate" />
      </el-form-item>
      <el-form-item label="通道号" prop="channel">
        <div v-text="formData.channel" />
      </el-form-item>
      <el-form-item label="校验位" prop="checkBit">
        <div v-text="formData.checkBit" />
      </el-form-item>
      <el-form-item label="通信配置" prop="commConfig">
        <div class="detail-content" v-text="formData.commConfig" />
      </el-form-item>
      <el-form-item label="连接url" prop="connUrl">
        <div v-text="formData.connUrl" />
      </el-form-item>
      <el-form-item label="数据位" prop="dataBit">
        <div v-text="formData.dataBit" />
      </el-form-item>
      <el-form-item label="配置型号" prop="instrumentModule">
        <div v-text="formData.instrumentModule" />
      </el-form-item>
      <el-form-item label="仪器名称" prop="instrumentName">
        <div v-text="formData.instrumentName" />
      </el-form-item>
      <!--      <el-form-item label="仪器属性" prop="instrumentProperty">-->
      <!--        <div v-text="formData.instrumentProperty" />-->
      <!--      </el-form-item>-->
      <el-form-item label="设备地址" prop="ip">
        <div v-text="formData.ip" />
      </el-form-item>
      <el-form-item label="设备端口" prop="port">
        <div v-text="formData.port" />
      </el-form-item>
      <el-form-item label="读url" prop="queryUrl">
        <div v-text="formData.queryUrl" />
      </el-form-item>
      <el-form-item label="槽位号" prop="slot">
        <div v-text="formData.slot" />
      </el-form-item>
      <el-form-item label="停止位" prop="stopBit">
        <div v-text="formData.stopBit" />
      </el-form-item>
      <el-form-item label="写url" prop="writeUrl">
        <div v-text="formData.writeUrl" />
      </el-form-item>

      <el-form-item label="通信类型" prop="commType">
        <el-select
          v-model="formData.commType"
          placeholder="请选择通信类型"
          disabled
          size="large"
        >
          <el-option
            v-for="item in commTypeOptions"
            :key="item.id"
            :label="item.dictLabel"
            :value="item.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="仪器类型" prop="instrumentType">
        <el-select
          v-model="formData.instrumentType"
          placeholder="请选择仪器类型"
          disabled
          size="large"
        >
          <el-option
            v-for="item in deviceTypeOptions"
            :key="item.id"
            :label="item.dictLabel"
            :value="item.dictValue"
          />
        </el-select>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<style scoped lang="scss">
.detail-content {
  width: 100%;
  overflow: hidden;
}
</style>
