import AdmVue from '@assets/js/adm-vue';
import initVue from '@assets/js/initVue';

const vm = new AdmVue({
  components: {
    BaseCard: () => import(/* webpackChunkName: "BaseCard" */ '@elements/BaseCard/index.vue'),
    BaseTabs: () => import(/* webpackChunkName: "BaseTabs" */ '@components/BaseTabs/index.vue'),
  },
  data() {
    return {
      configurations: {
        product_visualized_status: '',
        product_visualized_title: '',
        product_visualized_module: [],
      },
      layoutsApp: [],
      layouts: [],
      disableForm: false,
      loadingBtn: false,
    };
  },
  methods: {
    onAddModule() {
      const { configurations } = this;
      const productvisualizedModule = configurations.product_visualized_module;

      let sortOrder = 0;
      if (productvisualizedModule[productvisualizedModule.length - 1]) {
        const { sort_order } = productvisualizedModule[productvisualizedModule.length - 1];
        sortOrder = Number(sort_order) + 1;
      }

      this.configurations.product_visualized_module.push({
        limit: '24',
        sort_order: sortOrder,
        status: 1,
      });

      this.configurations = { ...configurations };
    },
    onRemoveModule(moduleIndex) {
      const { configurations } = this;
      const productvisualizedModule = configurations.product_visualized_module;
      productvisualizedModule.splice(moduleIndex, 1);
      this.configurations = { ...configurations };
    },
    onPositionChange(moduleIndex) {
      const module = this.configurations.product_visualized_module[moduleIndex];

      if (module.position === Type_ModulePosition.Tp_ColumnLeft) {
        this.configurations.product_visualized_module[moduleIndex].entry_type = 0;
      } else {
        this.configurations.product_visualized_module[moduleIndex].limit = '24';
      }
    },
    onTypeChange(type, moduleIndex) {
      if (type == 0) this.configurations.product_visualized_module[moduleIndex].limit = '24';
    },
    convertToArray(value) {
      if (Array.isArray(value)) {
        return value;
      }

      return Object.values(value);
    },
  },
  mounted() {
    if (this.configurations.product_visualized_module) {
      this.configurations.product_visualized_module = this.convertToArray(
        this.configurations.product_visualized_module
      ).map(item => ({
        ...item,
        limit: item.limit || '24',
      }));
    }
  },
});

initVue(vm);
