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,
      };
    },
    computed: {
      sendData() {
        let {configurations} = this;
  
        if (configurations.product_visualized_status == Type_Status.Tp_Desabilitado) {
          configurations.product_visualized_module = [];
        }
  
        return {...configurations};
      }
    },
    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);