<template>
  <!-- 页面设定/组件管理/顶部导航 -->
  <div class="d-modify">
    <template v-if="comId">
      <div class="d-title">{{ tab.name || tab.pageName }}</div>
      <div class="d-tips" style="padding-top: 4px">
        建议自定义装修图片宽度为750px
      </div>
      <component
        :is="comName"
        :key="comId"
        :tab="localTab"
        :checked="checked"
        @update:tab="onUpdateTab"
      ></component>
    </template>
  </div>
</template>
<script>
import pageSet from "./pageSet";
import shopBase from "./lib/shopBase/set";
/** 店招 **/
import shopFront from "./lib/shopFront/set";
/** 搜索框 **/
import shopSearch from "./lib/shopSearch/set";
/** 空白 **/
import showBlank from "./lib/showBlank/set";
/** 辅助线 **/
import showLines from "./lib/showLines/set";
/** 导航栏 **/
import shopNav from "./lib/shopNav/set";
/** 商品列表 **/
import goodList from "./lib/goodList/set";
/** 标题展示 **/
import blockTitle from "./lib/blockTitle/set";
/** 文本展示 **/
import descText from "./lib/descText/set";
/** 富文本 **/
import richText from "./lib/richText/set";
/** 广告展示 **/
import imageLink from "./lib/imageLink/set";
/** 语音展示 **/
import voiceLink from "./lib/voiceLink/set";
/** 视频展示 **/
import videoLink from "./lib/videoLink/set";
/** 公告展示 **/
import shopNotice from "./lib/shopNotice/set";
/** 客服电话 **/
import shopTel from "./lib/shopTel/set";
/** 图块 **/
import imageBlock from "./lib/imageBlock/set";
/** 限时抢购 **/
import goodDiscount from "./lib/goodDiscount/set";
/** 专区商品 **/
import goodSpecial from "./lib/goodSpecial/set";
/** 优惠限购 **/
import goodFine from "./lib/goodFine/set";
/** 积分商品 **/
import goodIntegral from "./lib/goodIntegral/set";
import groupBuying from "./lib/groupBuying/set";
export default {
  components: {
    pageSet,
    shopBase,
    /** 组件块start **/
    shopFront,
    shopSearch,
    showBlank,
    showLines,
    shopNav,
    goodList,
    blockTitle,
    descText,
    richText,
    imageLink,
    voiceLink,
    videoLink,
    shopNotice,
    shopTel,
    goodDiscount,
    goodSpecial,
    goodFine,
    imageBlock,
    goodIntegral,
    groupBuying,
    /** 组件块end **/
  },
  props: {
    comId: {
      type: [String, Number],
      default: "",
    },
    tab: {
      type: Object,
      default() {
        return {};
      },
    },
    checked: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      delFlag: true,
      isShow: false,
      showFlag: false,
      comName: "",
      localTab: {},
    };
  },
  watch: {
    comId: {
      immediate: true,
      handler(id) {
        if (id) {
          this.comName = this.tab.type;
        }
      },
    },
    tab: {
      immediate: true,
      deep: true,
      handler(val) {
        // 维护本地副本，避免直接修改 props
        this.localTab = { ...(val || {}) };
      },
    },
  },
  methods: {
    onUpdateTab(next) {
      // 父组件接收子组件的更新并写回到传入的 tab（通常 tab 来源于更高层 store/props）
      // 如果需要通知更高层，可在此 $emit('update:tab', next)
      // 这里直接修改本地的 tab 引用以保持联动
      Object.assign(this.tab, next);
    },
    onUpdateTab(next) {
      // 更新本地副本并将更新上抛给更高层，由更高层决定是否写回
      this.localTab = { ...(next || {}) };
      this.$emit("update:tab", this.localTab);
    },
  },
};
</script>
