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

const emits = defineEmits(["finished"]);

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: "",
  instrumentType: "",
  ip: "",
  port: "",
  queryUrl: "",
  slot: "",
  stopBit: "",
  writeUrl: "",
});

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

const onCancel = () => {
  formRef.value?.resetFields();
  addVisible.value = false;
};

// 1 新增 2 修改

const openDialog = (type: string, data: any, instrumentType: string) => {
  formData.value.id = "";
  dialogType.value = type;

  getDevTypes();
  getCommTypes();

  addVisible.value = true;

  dialogType.value = type;
  if (type === "1") {
  } else {
    formData.value = data;
  }

  console.log(instrumentType);
  formData.value.instrumentProperty = instrumentType;
};

const saveFun = () => {
  formRef.value
    ?.validate()
    .then(async () => {
      if (dialogType.value === "1") {
        await addInstrumentResource(formData.value);
      } else {
        await updateInstrumentResource(formData.value);
      }
      formRef.value?.resetFields();
      emits("finished");
      addVisible.value = false;
    })
    .catch(() => {});
};

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"
    :title="'仪器资源' + (dialogType === '1' ? '新增' : '修改')"
    width="500"
    align-center
    :close-on-click-modal="false"
    @close="onClosed"
  >
    <el-form
      label-width="auto"
      ref="formRef"
      v-model:model="formData"
      style="max-width: 600px"
    >
      <el-form-item label="波特率" prop="baudRate">
        <el-input v-model="formData.baudRate" />
      </el-form-item>
      <el-form-item label="通道号" prop="channel">
        <el-input v-model="formData.channel" />
      </el-form-item>
      <el-form-item label="校验位" prop="checkBit">
        <el-input v-model="formData.checkBit" />
      </el-form-item>
      <el-form-item label="通信配置" prop="commConfig">
        <el-input v-model="formData.commConfig" />
      </el-form-item>
      <el-form-item label="连接url" prop="connUrl">
        <el-input v-model="formData.connUrl" />
      </el-form-item>
      <el-form-item label="数据位" prop="dataBit">
        <el-input v-model="formData.dataBit" />
      </el-form-item>
      <el-form-item label="配置型号" prop="instrumentModule">
        <el-input v-model="formData.instrumentModule" />
      </el-form-item>
      <el-form-item label="仪器名称" prop="instrumentName">
        <el-input v-model="formData.instrumentName" />
      </el-form-item>
      <!--      <el-form-item label="仪器属性" prop="instrumentProperty">-->
      <!--        <el-input v-model="formData.instrumentProperty" />-->
      <!--      </el-form-item>-->
      <el-form-item label="设备地址" prop="ip">
        <el-input v-model="formData.ip" />
      </el-form-item>
      <el-form-item label="设备端口" prop="port">
        <el-input v-model="formData.port" />
      </el-form-item>
      <el-form-item label="读url" prop="queryUrl">
        <el-input v-model="formData.queryUrl" />
      </el-form-item>
      <el-form-item label="槽位号" prop="slot">
        <el-input v-model="formData.slot" />
      </el-form-item>
      <el-form-item label="停止位" prop="stopBit">
        <el-input v-model="formData.stopBit" />
      </el-form-item>
      <el-form-item label="写url" prop="writeUrl">
        <el-input v-model="formData.writeUrl" />
      </el-form-item>

      <el-form-item label="通信类型" prop="commType">
        <el-select
          v-model="formData.commType"
          placeholder="请选择通信类型"
          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="请选择仪器类型"
          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>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="onCancel">取消</el-button>
        <el-button type="primary" @click="saveFun"> 保存 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss"></style>
