<!-- Dialog.vue -->
<template>
  <el-dialog
    :visible.sync="visible"
    @update:visible="handleUpdateVisible"
    :title="title + '接入配置'"
    :width="width"
    :before-close="beforeClose"
  >
    <MyForm
      :formData="formData"
      :labelPosition="'left'"
      :disabled="isDisabled"
      ref="myFormComponent"
    ></MyForm>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="handleConfirm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import MyForm from "@/components/MyForm";
export default {
  name: "StandardDialog",
  components: {
    MyForm,
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "弹窗标题",
    },
    width: {
      type: String,
      default: "50%",
    },
  },
  data() {
    return {
      visible: this.value,
      // 这是传递给表单组件的数据
      formData: [
        {
          fieldName: "name",
          label: "六统一IP",
          type: "input",
          value: "",
          isRequired: true,
        },
        {
          fieldName: "name",
          label: "六统一端口",
          type: "input",
          value: "",
          isRequired: true,
        },
        {
          fieldName: "age",
          label: "网关IP",
          type: "input",
          value: "",
          isRequired: true,
        },
        {
          fieldName: "age",
          label: "网关端口",
          type: "input",
          value: "",
          isRequired: true,
        },
        {
          fieldName: "age",
          label: "数据提供方所需信息系统",
          type: "select",
          value: "",
          isRequired: true,
          options: [
            { value: "male", label: "男" },
            { value: "female", label: "女" },
          ],
        },
        {
          fieldName: "age",
          label: "数据接收方所需信息系统",
          type: "select",
          value: "",
          isRequired: true,
          options: [],
        },
        {
          fieldName: "birthday",
          label: "拟运行时间",
          type: "picker",
          value: "",
          isRequired: false,
        },
        {
          fieldName: "gender",
          label: "状态",
          type: "radio",
          value: "male",
          isRequired: false,
          options: [
            { value: "male", label: "正常" },
            { value: "female", label: "停用" },
          ],
        },
          {
          fieldName: "age",
          label: "创建人",
          type: "input",
          value: "",
          isRequired: true,
        },
      ],
      isDisabled: false,
    };
  },
  watch: {
    value(newVal) {
      this.visible = newVal;
    },
    visible(newVal) {
      this.$emit("input", newVal);
    },
  },
  methods: {
    handleUpdateVisible(val) {
      this.visible = val;
    },
    beforeClose(done) {
      this.visible = false;
      this.$emit("before-close", done);
    },
    // 取消按钮处理方法
    handleCancel() {
      this.visible = false;
      this.$emit("cancel"); // 可以在父组件监听 'cancel' 事件
    },

    // 确定按钮处理方法
    handleConfirm() {
      this.$refs.myFormComponent.validateForm();

      this.visible = false;
      this.$emit("confirm"); // 可以在父组件监听 'confirm' 事件
    },
  },
};
</script>

<style scoped lang="scss">
/* 你可以根据需要为弹窗添加样式 */
</style>
