<template>
  <!-- 新增修改二级菜单(竖向) -->
  <el-dialog
    :visible.sync="dataObj.isShowDialog"
    :title="dataObj.title"
    width="800px"
    :close-on-press-escape="false"
  >
    <div class="addMenuBox">
      <el-form :model="form" :rules="rules" ref="form" label-width="120px">
        <el-form-item label="菜单名称:" prop="title">
          <el-input
            v-model="form.title"
            placeholder="请输入菜单名称"
          ></el-input>
        </el-form-item>

        <el-form-item label="内容类型:" prop="kind">
          <el-select style="width: 100%" v-model="form.kind">
            <el-option
              v-for="(item, index) in kindList"
              :key="index"
              :label="item.kindName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="form.kind" label="内容" prop="content" required>
          <tinymce-editor ref="editor" v-model="form.content"></tinymce-editor>
        </el-form-item>
      </el-form>
      <div slot="footer" class="rightflex">
        <el-button @click="close">取 消 </el-button>
        <el-button type="primary" @click="submit('form')">保 存</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
export default {
  props: ["dataObj", "getWebIndex", "activeIndex"], //父级
  inject: ["initMenu", "getMenu", "clickTab", "changeTab"], //祖宗级(基础平台传进来的)
  data() {
    return {
      form: {
        title: "",
        kind: "",
        content: "",
      },
      kindList: [
        {
          kindName: "富文本",
          id: "text",
        },
        {
          kindName: '列表',
          id: 'list'
        }
      ],
      rules: {
        title: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
        kind: [
          {
            required: true,
            message: "请至少选择一种类型",
            trigger: "change",
          },
        ],
        content: [
          { required: true, message: "请输入菜单内容", trigger: "blur" },
        ],
      },
      loading: false,
    };
  },
  watch: {
    "dataObj.isShowDialog": function(newValue) {
      if (newValue) {
        this.form = {
          title: "",
          kind: "",
          content: "",
        };
        this.$nextTick(() => {
          this.$refs.form.resetFields();
          if (this.dataObj.title === "新增二级菜单") {
            this.form.kind = "text";
          }
          if (this.dataObj.title === "修改二级菜单") {
            this.form.title = this.dataObj.item.title;
            this.form.kind = this.dataObj.item.contentsType;
            this.form.content = this.dataObj.item.menuContents;
          }
        });
      }
    },
  },
  components: {},
  mounted() {},
  methods: {
    // 竖向的二级菜单新增修改(横向提交在基础平台)
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = {
            title: this.form.title,
            intro: null,
            background: null,
            menuType: "index",
            client: "Web",
            areaCode: localStorage.getItem("areaCode") || "",
            menuChildList: [],
            contentsType: this.form.kind,
            menuContents: this.form.content,
            del: 0, //del为1说明是删除
            userId: null,
            roleId: null,
            url: "",
            icon: "",
            name: "",
            component: "",
            parameter: "",
            imageUrl: "",
            memberId: "",
            industry: "",
            createTime: "",
            updateTime: "",
          };
          if (this.dataObj.title == "修改二级菜单") {
            data.showOrder = this.dataObj.item.showOrder;
            data.parentId = this.dataObj.parentId;
            data.id = this.dataObj.id;
          }
          if (this.dataObj.title == "新增二级菜单") {
            data.parentId = this.dataObj.item.id;
            data.id = null;
            if (this.dataObj.item.children.length) {
              data.showOrder =
                Number(
                  this.dataObj.item.children[
                    this.dataObj.item.children.length - 1
                  ].showOrder
                ) + 1;
            } else {
              data.showOrder = 0;
            }
          }
          this.$apis.menuConfig.menuConfig(data).then((res) => {
            if (res.status == 0) {
              this.$message.success("操作成功");
              this.dataObj.isShowDialog = false;
              this.$emit("dataObj.isShowDialog", false);
              // this.initMenu();
              // this.getMenu();
              let initmenu = this.initMenu();
              let getMenu = this.getMenu();
              Promise.all([initmenu, getMenu]).then(() => {
                //组件menuAdd点击二级菜单新增修改需要改变后的this.getNowMenuInfo,所以调以下两个方法
                this.clickTab(this.getWebIndex);
                console.log(
                  "this.activeIndex",
                  this.activeIndex,
                  "this.dataObj.item",
                  this.dataObj.item
                );
                this.$nextTick(() => {
                  this.changeTab(
                    this.dataObj.item.children[this.activeIndex],
                    this.activeIndex
                  ); //需要当前选中二级下标activeIndex
                });
              });
            }
          });
        }
      });
    },
    close() {
      this.dataObj.isShowDialog = false;
      this.$emit("dataObj.isShowDialog", false);
    },
  },
};
</script>
<style lang="scss" scoped>
.addMenuBox {
  font-size: 18px !important;
  line-height: 30px !important;
  // text-indent: 2rem !important;
  color: #000 !important;
  .rightflex {
    text-align: right;
  }
  .avatar-uploader {
    display: inline-block;
    width: 180px;
    height: 180px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
  }
  .avatar {
    width: 628px;
    height: 98px;
    display: block;
  }

  .el-form--inline .el-form-item {
    margin: 20px;
  }
  .bottom10 {
    margin-bottom: 10px;
  }
  p {
    font-size: 18px !important;
    line-height: 30px !important;
    text-indent: 2rem !important;
    color: #000 !important;
  }
  .el-form--inline .el-form-item {
    margin-top: 20px;
  }
}
</style>
