<template>
  <el-dialog
    title="编辑菜单与内容"
    :visible.sync="dialogVisible"
    width="36%"
    :before-close="handleClose"
    close="devDiolg"
    top="10vh"
  >
    <el-alert
      title="菜单。请严格按照模板传入JSON格式的数据。二级菜单 “children”
      的 id 必须以 0 开始，依次加 1。"
      type="warning"
      show-icon
      :closable="false"
    >
    </el-alert>
    <el-input
      type="textarea"
      :rows="10"
      placeholder="请输入内容"
      v-model="nav"
      resize="none"
    >
    </el-input>
    <el-alert
      title="内容。请严格按照模板传入JSON格式的数据。内容 id 顺序必须和对应的二级菜单 id 顺序一致。"
      type="warning"
      show-icon
      :closable="false"
    >
    </el-alert>
    <el-input
      type="textarea"
      :rows="15"
      placeholder="请输入内容"
      v-model="content"
      resize="none"
    >
    </el-input>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleSave">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    navList: {
      type: Array,
      required: true,
    },
    contentList: {
      type: Array,
      required: true,
    },
  },
  name: "devDiolog",
  data() {
    return {
      dialogVisible: false,
      nav: "",
      content: "",
    };
  },
  methods: {
    handleClose() {
      this.dialogVisible = false;
    },
    handleSave() {
      try {
        const nav = JSON.parse(this.nav);
        const content = JSON.parse(this.content);
        this.$emit("handleSuccess", nav, content);
        this.handleClose()
      } catch (err) {
        this.$notify.error({
          title: "错误",
          message: "传入的JSON数据有误。",
        });
      }
    },
  },
  watch: {
    dialogVisible: {
      handler(newVal) {
        if (newVal) {
          this.nav = JSON.stringify(this.navList);
          this.content = JSON.stringify(this.contentList);
        }
      },
      immediate: true,
    },
  },
};
</script>

<style lang='scss' scoped>
.el-alert {
  margin: 10px 0;
}
</style>