<template>
  <el-dialog
    v-model="visible"
    :title="formData.id ? '编辑' : '新增'"
    width="60%"
    :before-close="closeDialog"
  >
    <el-form
    size="large"
      :model="formData"
      label-width="150px"
      :rules="rules"
      ref="ruleFormRef"
      label-position="top"
    >
      <el-form-item label="透传名称:" prop="name">
        <el-input
          v-model="formData.name"
          placeholder="请输入透传名称"
          clearable
        />
      </el-form-item>
      <el-form-item label="透传类型:" prop="type">
        <el-select v-model="formData.type" placeholder="请选择驱动">
          <el-option
            v-for="(item, index) of typeOptions"
            :key="index"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="本地串口:">
        <div class="inline-div">
          <el-form-item label="名称:" prop="name" label-width="60px">
            <el-select v-model="formData.serial.name" placeholder="请选择名称" @change="changeName">
              <el-option
                v-for="(item, index) of portOptions"
                :key="index"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="波频率:" prop="baudrate" label-width="60px">
            <el-select
              v-model="formData.serial.baudrate"
              placeholder="请选择波频率"
            >
              <el-option
                v-for="(item, index) of waveOptions"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="数据位:" prop="databits" label-width="60px">
            <el-select v-model="formData.serial.databits" placeholder="请选择波频率">
              <el-option
                v-for="(item, index) of bitsOptions"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="停止位:" prop="stopbits" label-width="60px">
            <el-select v-model="formData.serial.stopbits" placeholder="请选择波频率">
              <el-option
                v-for="(item, index) of stopOptions"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="校验位:" prop="parity" label-width="60px">
            <el-select v-model="formData.serial.parity" placeholder="请选择波频率">
              <el-option
                v-for="(item, index) of validOptions"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="读取超时:" prop="time" label-width="80px">
            <el-input
              v-model="formData.time"
              placeholder="请输入透传名称"
              clearable
            />
          </el-form-item>
        </div>
      </el-form-item>
      <el-form-item label="透传接口:" class="trans-div">
        <el-button
          type="primary"
          icon="Plus"
          class="add-btn"
          v-if="formData.type == 'modbus分身'"
          @click="addTransData"
        >
          添加网口
        </el-button>
        <el-button
          type="danger"
          icon="SemiSelect"
          class="del-btn"
          v-if="formData.type == 'modbus分身'"
          @click="delTransData"
        >
          删除网口
        </el-button>
        <el-button
          type="primary"
          icon="Plus"
          class="add-btn1"
          v-if="formData.type == 'modbus分身'"
          @click="addTransData1"
        >
          添加串口
        </el-button>
        <el-button
          type="danger"
          icon="SemiSelect"
          class="del-btn1"
          v-if="formData.type == 'modbus分身'"
          @click="delTransData1"
        >
          删除串口
        </el-button>
        <div
          class="inline-div"
          v-for="(item, index) of formData.tcp"
          :key="index"
        >
          <el-form-item
            label="名称:"
            :prop="'tcp[' + index + '].name'"
            label-width="60px"
          >
            <el-select
              v-model="formData.tcp[index].name"
              placeholder="请选择名称"
              @change="changeTransName(index)"
            >
              <el-option
                v-for="(item, index) of transOptions"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="主机地址:"
            :prop="'tcp[' + index + '].host'"
            label-width="80px"
          >
            <el-input
              v-model="formData.tcp[index].host"
              placeholder="请输入透传名称"
              clearable
              :disabled="formData.tcp[index].disabled"
            />
          </el-form-item>
          <el-form-item
            label="端口号:"
            :prop="'tcp[' + index + '].port'"
            label-width="80px"
          >
            <el-input
              v-model="formData.tcp[index].port"
              placeholder="请输入端口号"
              clearable
            />
          </el-form-item>
        </div>
        <div
          v-if="formData.type == 'modbus分身'"
          class="inline-div transData1"
          v-for="(item, index) of formData.transData1"
          :key="index"
        >
          <el-form-item
            label="名称:"
            :prop="'transData1[' + index + '].localPort'"
            label-width="60px"
          >
            <el-select
              v-model="formData.transData1[index].localPort"
              placeholder="请选择名称"
              @change="changeTransName(index)"
            >
              <el-option
                v-for="(item, index) of portOptions"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="波特率:"
            :prop="'transData1[' + index + '].waveFrequency'"
            label-width="80px"
          >
            <el-select
              v-model="formData.transData1[index].waveFrequency"
              placeholder="请选择波频率"
            >
              <el-option
                v-for="(item, index) of waveOptions"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="数据位:"
            :prop="'transData1[' + index + '].dataBits'"
            label-width="80px"
          >
            <el-select
              v-model="formData.transData1[index].dataBits"
              placeholder="请选择波频率"
            >
              <el-option
                v-for="(item, index) of bitsOptions"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="停止位:"
            :prop="'transData1[' + index + '].stopBits'"
            label-width="60px"
          >
            <el-select
              v-model="formData.transData1[index].stopBits"
              placeholder="请选择波频率"
            >
              <el-option
                v-for="(item, index) of stopOptions"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="校验位:"
            :prop="'transData1[' + index + '].validBits'"
            label-width="60px"
          >
            <el-select
              v-model="formData.transData1[index].validBits"
              placeholder="请选择波频率"
            >
              <el-option
                v-for="(item, index) of validOptions"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="读取超时:"
            :prop="'transData1[' + index + '].time'"
            label-width="80px"
          >
            <el-input
              v-model="formData.transData1[index].time"
              placeholder="请输入透传名称"
              clearable
            />
          </el-form-item>
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="saveData"> 保存 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import { onMounted, reactive, ref, toRefs, computed } from "vue";
import infoApi from "@/api/infoApi.js";
import { ElMessage, ElMessageBox } from "element-plus";
export default {
  props: ["formData", "dialogVisible"],
  emits: ["dialogClose", "dialogSuccess"],
  setup(props, ctx) {
    const ruleFormRef = ref(null);
    const state = reactive({
      rules: {
        name: [{ required: true, message: "请输入通讯名称", trigger: "blur" }],
      },
      typeOptions: [],
      portOptions: [],
      waveOptions: ["2400", "9600", "19200", "38400", "115200", "自定义"],
      bitsOptions: ["5", "6", "7", "8"],
      stopOptions: ["1", "2", "1.5"],
      validOptions: ["无", "奇校验", "偶校验", "Mark", "Space"],
      transOptions: ["TCP服务器", "TCP客户端"],
    });
    const visible = computed(() => {
      return props.dialogVisible;
    });
    onMounted(() => {
      getSupport();
      getFree();
    });

    const getSupport = async () => {
      const res = await infoApi.getSupport();
      state.typeOptions = res.data;
    }

    const getFree = async () => {
      const res = await infoApi.getFree();
      state.portOptions = res.data;
    }

    const changeName = () => {
      let item = state.portOptions.find(ele => {
        return ele.name === props.formData.serial.name;
      })
      props.formData.serial.baudrate = item.baudrate;
      props.formData.serial.databits = item.databits;
      props.formData.serial.stopbits = item.stopbits;
      props.formData.serial.parity = item.parity;
    }

    const closeDialog = () => {
      ruleFormRef.value.resetFields();
      ctx.emit("dialogClose");
    };

    const changeTransName = (index) => {
      props.formData.tcp[index].disabled =
        props.formData.tcp[index].name == "TCP服务器";
    };

    const addTransData = () => {
      let item = {
        transName: "TCP服务端",
        transAdress: "localhost",
        transPort: "",
        disabled: true,
      };
      props.formData.tcp.push(item);
    };

    const delTransData = () => {
      if (props.formData.tcp.length == 1) {
        ElMessage.warning("至少为一个");
        return;
      }
      props.formData.tcp.pop();
    };

    const addTransData1 = () => {
      let item = {
        localPort: "COM1",
        waveFrequency: "9600",
        dataBits: "8",
        stopBits: "1",
        validBits: "无",
        time: "",
      };
      props.formData.transData1.push(item);
    };

    const delTransData1 = () => {
      if (props.formData.transData1.length == 1) {
        ElMessage.warning("至少为一个");
        return;
      }
      props.formData.transData1.pop();
    };
    const saveData = async () => {
      await ruleFormRef.value.validate(async (valid) => {
        if (valid) {
          const res = await infoApi.saveTc(props.formData);
          if(res.code == 0) {
            ElMessage.success(res.msg || '请求成功');
            ctx.emit("dialogSuccess");
          } else {
            ElMessage.error(res.msg);
          }
        } else {
        }
      });
    };
    return {
      ...toRefs(state),
      ruleFormRef,
      visible,
      saveData,
      closeDialog,
      changeTransName,
      addTransData,
      delTransData,
      addTransData1,
      delTransData1,
      changeName
    };
  },
};
</script>
<style lang="scss" scoped>
.inline-div {
  display: flex;
  width:100%;
  .el-form-item {
    margin-right: 10px;
    width: 175px;
  }
}
.trans-div {
  position: relative;
}
.transData1 {
  margin-top: 20px;
}
.add-btn {
  position: absolute;
  top: -35px;
  left: 70px;
}
.del-btn {
  position: absolute;
  top: -35px;
  left: 175px;
}
.add-btn1 {
  position: absolute;
  top: -35px;
  left: 295px;
}
.del-btn1 {
  position: absolute;
  top: -35px;
  left: 415px;
}
</style>
