<!-- Dialog.vue -->
<template>
  <el-dialog
    :visible.sync="visible"
    @update:visible="handleUpdateVisible"
    :title="title + '统一接入方'"
    :width="width"
    :before-close="beforeClose"
  >
    <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>
export default {
  name: "StandardDialog",
  components: {
    MyForm
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: "弹窗标题"
    },
    width: {
      type: String,
      default: "60%"
    },
    rowObj: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      tableData: [],
      visible: this.value,
      // 这是传递给表单组件的数据
      formData: {},
      isDisabled: false,
      itemView: {},
      dialogTitle: "",
      isDisabled: false
    };
  },
  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 = {};
      viewTabAccessList(id).then(res => {
        if (+res.code === 200) {
          this.formData = res.data;
          this.tableData = JSON.parse(res.data.ip);
        }
      });
    },
    onAddItem() {
      this.tableData.push({});
    },
    deleteRow(index) {
      this.tableData.splice(index, 1);
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleNextStep() {
      this.activeName++;
    },
    handleBackStep() {
      this.activeName--;
    },
    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.handleSave();
      // this.visible = false;
      // this.$emit("confirm"); // 可以在父组件监听 'confirm' 事件
    },

    handleSave() {
      console.log(this.formData, "this.formData");
      let pForm = {};
      pForm = { ...this.formData };
      pForm.ip = JSON.stringify(this.tableData);
      // this.formData.forEach((i) => {
      //   pForm[i.fieldName] = i.value;
      // });
      console.log(pForm, "pForm");
      if (this.title === "新增") {
        addTabAccessList({ ...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 === "编辑") {
        updateTabAccessList({ ...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">
/* 你可以根据需要为弹窗添加样式 */

.titel {
  font-size: 18px;
  margin: 20px 0;
}

.mt-4 {
  margin-bottom: 20px;
}
</style>
  