<!-- Dialog.vue -->
<template>
  <el-dialog
    :visible.sync="visible"
    @update:visible="handleUpdateVisible"
    :title="title + '接入配置'"
    :width="width"
    :before-close="beforeClose"
  >
    <MyForm
      :formData="formData"
      :labelPosition="'left'"
      :title="title"
      :disabled="isDisabled"
      ref="myFormComponent"
      @update:modelValue="handleFormDataChange"
    ></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 {
  getTabAccessConfigList,
  addTabAccessConfig,
  updateTabAccessConfigById,
  viewTabAccessConfigById,
  delTabAccessConfigById,
} from "@/api/unified-access/access-config";
import MyForm from "@/components/MyForm";
export default {
  name: "ConfigDialog",
  components: {
    MyForm,
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "弹窗标题",
    },
    width: {
      type: String,
      default: "50%",
    },
    rowObj: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      visible: this.value,
      // 这是传递给表单组件的数据
      formData: [
          {
          fieldName: "dataManner",
          label: "接入方式",
          type: "input",
          value: "",
          isRequired: true,
          trigger: "blur",
        },
        {
          fieldName: "sixIp",
          label: "六统一IP",
          type: "input",
          value: "",
          isRequired: true,
          trigger: "blur",
        },
        {
          fieldName: "sixPort",
          label: "六统一端口",
          type: "input",
          value: "",
          isRequired: true,
          trigger: "blur",
        },
        {
          fieldName: "gatewayIp",
          label: "网关IP",
          type: "input",
          value: "",
          isRequired: true,
          trigger: "blur",
        },
        {
          fieldName: "gatewayPort",
          label: "网关端口",
          type: "input",
          value: "",
          isRequired: true,
          trigger: "blur",
        },
        {
          fieldName: "offerSystem",
          label: "数据提供方所需信息系统",
          // type: "select",
          type: "input",
          value: "",
          isRequired: true,
          trigger: "blur",
          options: [
            { value: "male", label: "男" },
            { value: "female", label: "女" },
          ],
        },
        {
          fieldName: "receptionSystem",
          label: "数据接收方所需信息系统",
          // type: "select",
          type: "input",
          trigger: "blur",
          value: "",
          isRequired: true,
          options: [],
        },
        {
          fieldName: "runTime",
          label: "拟运行时间",
          type: "picker",
          trigger: "blur",
          value: "",
          isRequired: false,
        },
        {
          fieldName: "status",
          label: "状态",
          type: "radio",
          trigger: "change",
          value: "male",
          isRequired: false,
          options: [
            { value: 1, label: "正常" },
            { value: 0, label: "停用" },
          ],
        },
        {
          fieldName: "userId",
          label: "创建人",
          type: "input",
          value: "",
          isRequired: false,
        },
      ],
      isDisabled: false,
      itemView: {},
      dialogTitle: "",
    };
  },
  watch: {
    value(newVal) {
      this.visible = newVal;
    },
    visible(newVal) {
      this.$emit("input", newVal);
    },

    title: {
      handler(newVal) {
        this.dialogTitle = newVal;
        console.log(this.dialogTitle, "this.dialogTitle");
      },
      deep: true, // 深入监听
      immediate: true,
    },
    rowObj: {
      handler(newVal) {
        this.itemView = newVal;
      },
      deep: true, // 深入监听
      immediate: true,
    },
  },
  mounted() {
    if (this.dialogTitle === "查看") {
      this.isDisabled = true;
    } else {
      this.isDisabled = false;
    }
    if (this.dialogTitle !== "新增") {
      this.getView(this.itemView.id);
    }
  },
  methods: {
    getView(id) {
      this.formData.forEach((item) => {
        item.value = "";
      });
      viewTabAccessConfigById(id).then((res) => {
        if (+res.code === 200) {
          this.formData.forEach((item) => {
            item.value = res.data[item.fieldName];
          });
        }
      });
    },

    handleUpdateVisible(val) {
      this.visible = val;
    },

    handleFormDataChange(newFormData) {
      this.formData = newFormData; // 同步表单数据
    },
    beforeClose(done) {
      this.visible = false;
      this.formData.forEach((element) => {
        element.value = "";
      });
      this.$emit("before-close", done);
    },
    // 取消按钮处理方法
    handleCancel() {
      this.visible = false;
      this.formData.forEach((element) => {
        element.value = "";
      });
      this.$emit("before-close");
      // 可以在父组件监听 'cancel' 事件
    },

    // 确定按钮处理方法
    handleConfirm() {
      // 调用子组件的 validateForm 方法进行校验
      this.$refs.myFormComponent.validateForm().then((valid) => {
        console.log(valid, "valid");
        if (valid) {
          // 校验通过，进行后续操作
          console.log("表单校验通过，进行后续操作");
          this.handleSave();
        } else {
          this.$message.error("请完整填写表单");
          console.log("表单校验失败");
        }
      });
      // Promise.all([this.$refs.myFormComponent.validateForm()]).then((valid) => {
      //   if (valid.findIndex((val) => val === false) === -1) {
      //     this.handleSave();
      //   } else {
      //     this.$message.error("请完整填写表单");
      //   }
      // });
      // this.$refs.myFormComponent.validateForm();
      // 可以在父组件监听 'confirm' 事件
    },
    handleSave() {
      console.log(this.formData, "this.formData");
      let pForm = {};
      this.formData.forEach((i) => {
        pForm[i.fieldName] = i.value;
      });
      console.log(pForm, "pForm");
      if (this.title === "新增") {
        addTabAccessConfig({ ...pForm }).then((res) => {
          if (+res.code === 200) {
            this.$message({
              message: res.msg,
              type: "success",
            });
            this.$emit("confirm");
            this.handleCancel();
          } else {
            this.$message.error(res.msg);
          }
        });
      } else if (this.title === "编辑") {
        updateTabAccessConfigById({ ...pForm, id: this.itemView.id }).then(
          (res) => {
            if (+res.code === 200) {
              this.$message({
                message: res.msg,
                type: "success",
              });
              this.$emit("confirm");
              this.handleCancel();
            } else {
              this.$message.error(res.msg);
            }
          }
        );
      }
    },
  },
};
</script>

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