<template>
  <a-modal
    :visible="true"
    :title="$t('menu.form.菜单配置')"
    @cancel="handcancel(thethis)"
    :maskClosable="false"
    :width="width"
    :footer="null"
    class="modalPop"
    :destroyOnClose="true"

  >
    <a-spin :spinning="false">
      <a-tabs type="line">
        <a-tab-pane key="0" :tab="$t('menu.form.基本配置')">
          <MenuForm
            ref="baseForm"
            :data="data"
            :isMenu="true"
            :menu="menu"
            :site="site"
          ></MenuForm>
        </a-tab-pane>
        <a-tab-pane key="1" :tab="$t('menu.form.子模块配置')">
          <div v-for="(item, i) in moudleShow" :key="i">
            <div v-if="moudleShow[i]">
            
            <MenuForm
              v-if="moudleShow[i]"
              :keys="i"
              :ref="`moduleForm`"
              :type="3"
              :moduleData="data ? (data.moduleList ? data.moduleList[i] : false) : false"
              :isMenu="false"
              :menu="menu"
              :site="site"
              @deleteMoudle="deleteMoudle"
              :key="i"
            >
                <a-divider />
              <em
                :style="{
                  fontSize: '30px',
                  color: 'rgba(0,0,0,.1)',
                  margin: '100px 0 0',
                }"
                >{{$t('menu.form.模块')}}{{ i + 1 }}</em
              >
            </MenuForm>
            </div>
          </div>

          <div :style="{ width: '100px', margin: '40px auto' }">
            <a-button
              type="primary"
              @click="addModuleList()"
              :style="{ background: '#16D46B', border: 'none' }"
              v-action:Add
            >
              {{$t('menu.form.新增模块')}}
            </a-button>
          </div>
        </a-tab-pane>
      </a-tabs>
      <!-- 操作 -->
      <div class="button" :style="{ margin: '20px auto', width: '140px' }">
        <a-button type="primary" @click="on_Submit"  v-action:Modify> {{$t("提交")}} </a-button>
        <a-button
          style="margin-left: 10px"
          @click="
            () => {
              $emit('closePopForm', that);
            }
          "
        >
           {{$t("关闭")}} 
        </a-button>
      </div>
    </a-spin>
  </a-modal>
</template>
<script>
import { uploadFile } from "@/baseConfigComponents/api/upload.js";
import { menuEdit } from "@/baseConfigComponents/api/menu.js";
import UploadFile from "@/common/components/MyForm/UploadFile.vue";
import MenuForm from "@/baseConfigComponents/components/Menu/Modify/components/MenuForm.vue";
import { clearInfo, handcancel } from "@/common/components/MyForm/utils/utils.js";
import {resetFullWidth} from "@/common/components/MyTable/table/utils/table.js"
export default {
  props: ["data", "that", "menu", "site"],
  mounted() {
    // ////console.log(this.resetFullWidth());
    this.resetFullWidth(this)
    // ////console.log(this.width);
  },
  data() {
    this.thethis = this;
    return {
      module: {
        childrenNum1: 0, //模块数量
      },
      imgClear: false, // 图片清空参数
      SiteInfo: [], //站点信息
      moudleShow: [],
      width:null
    };
  },
  created() {
    if (this.data.moduleList) {
      this.data.moduleList.forEach((item) => {
        this.moudleShow.push(true);
      });
    }
    //////console.log(this.moudleShow);
  },
  computed:{
    
  },

  methods: {
    resetFullWidth,
    addModuleList() {
      // this.module.childrenNum1 += 1;
      //console.log( this.$refs.moduleForm);

      this.moudleShow.push(true);
      setTimeout(()=>{
        //console.log( this.$refs.moduleForm);

      },200)

      ////////console.log(this.moudleShow);
      // this.$set(this.module,[`childrenNum${Object.keys(this.module).length+1}`],0)
      //  this.module[Object.keys(this.module)[key-1]]++
    },
    deleteMoudle(key) {
      //console.log(key);
      this.$set( this.moudleShow, key,false)
      this.moudleShow[key] = false;
      setTimeout(()=>{
        //console.log( this.moudleShow);
        //console.log( this.$refs.moduleForm);
      },200)
    },
    submit() {
      // this.handcancel(this);

      // ////////console.log(this.$refs.moduleForm);
      var verify1 = this.$refs.baseForm.verify(); //基础配置验证结果

      try {
      
        this.moudleShow.length > 0? this.$refs.moduleForm.forEach((item) => {
            if (!item.verify()) {
              verify1 = false;
              }
            }): ""; //模块配置验证结果
      } catch (error) {}
      if (verify1) {
        //表单合并
        ////console.log(this.$refs.baseForm.$data.form);
        let postForm = { ...this.$refs.baseForm.$data.form };
        //console.log(postForm,1111111);
        postForm.isNeedCheck = postForm.isNeedCheck ? 1 : 0;
        if (this.moudleShow.length > 0) {
          try {
            ////console.log(this.$refs.moduleForm,222222222);
            if(this.$refs.moduleForm){
              //console.log(this.$refs.moduleForm);
              this.$set(postForm, ["moduleList"], []);
              this.$refs.moduleForm.forEach((item) => {
                let modeluform = { ...item.$data.form };
                modeluform.isNeedCheck = modeluform.isNeedCheck ? 1 : 0;
                postForm["moduleList"].push(modeluform);
              });
            }
          } catch (error) {
            delete postForm.moduleList

            // this.data.moduleList.map((item) => {
            //   this.$set(item, ["siteCode"], this.site.siteCode);
            //   this.$set(item, ["siteId"], this.site.siteId);
            //   return item;
            // });


            // this.$set(postForm, ["moduleList"], this.data.moduleList);
            // ////console.log(this.data);

            // ////console.log(postForm);
          }
        }
        ////console.log(postForm);

        //发布
        const { id } = postForm;
        this.$set(postForm, ["siteId"], this.site.siteId);
        this.$set(postForm, ["siteCode"], this.site.siteCode);
        // ////////console.log(siteCode, siteId, id);
        menuEdit(this.site.siteCode, this.site.siteId, id, postForm)
          .then((res) => {
            ////////console.log(res);
            if (res.code == 10000) {
              this.$message.success("成功");
              this.moudleShow = [];
              this.$emit("getMenuList", " ", this.that);
              this.$emit("closePopForm", this.that);
              // this.$router.go(0);
            }
          })
          .catch();
      }
    },

    // 重置表单元素
    clearInfo,
    // 关闭
    handcancel,

    // 提交（更改）表单
    on_Submit(type) {
      var that = this;
      // 提示框确认
      this.$confirm({
        title: "确认提交？",
        okText: "提交",
        cancelText: "取消",
        onOk() {
          // 点击确定
          // that.info = { ...that.form };
          that.submit();
        },
        onCancel() {},
      });
    },
  },

  components: {
    MenuForm,
  },
  watch:{
    data:{
      handler(newval,oldeval){
        //////console.log(newval);
        this.data = newval
      }
    },
    deep:true,
    immediate: true
  },
  
};
</script>
<style >
/* .modalPop .ant-modal{
  width: 90% !important; 
} */
.modalPop .ant-col-sm-13 {
    display: block;
    box-sizing: border-box;
    width: 70.16666667% !important;
}

</style>