window.componentes = window.componentes || {};
  const ProductCard = {
    template: `
      <div> <v-hover v-slot="{ isHovering, props }">
  <v-card width="300" class="mr-2" @click="Move(info.id)" v-bind="props" :color="$root.settings.WEB_BTN.config.primary.color" :variant="!isHovering?'tonal':'flat'" rounded="xl" tile flat>
    <v-card-text style="overflow: hidden; display: block;" class="pa-0">
      <v-img 
             v-if="info.gallery" 
             :src="info.gallery[0].file" 
             :alt="info.gallery[0].name" 
             :style="{display: 'block','transition': 'all 0.6s cubic-bezier(0.4, 0, 0.2, 1)','transform-origin': 'center center',transform: !isHovering?'scale(1)':'scale(1.5)'}"
             >
      </v-img>
    </v-card-text>
    <v-card-text class="text-h5 font-weight-bold px-5">
      {{info.name ?? 'Product Name'}}
    </v-card-text>
  </v-card>
</v-hover> </div>
    `,
    data() {
      return {
        data:{ ...{}},
        brick:{
          id:"ProductCard",
          name:"Product Card",
          description:"",
        }
      };
    },
    props: {
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },

      ...{
  info:Object,
  required:false,
  default:()=>{}
}    },
    watch: {},
    methods: {Move(id){
  this.$hash('view',id)
  if(this.$root.url.hash=='view'){
    window.location.reload()
  }
}},
    mounted(){},
    created(){},
  };
  window.componentes.ProductCard = ProductCard;
  const RechargeTotal = {
    template: `
      <div> <v-card :color="$root.settings.WEB_BTN.config.primary.color" :key="received_values" tile flat>
  <v-card-text class="pa-0">
    <p class="pa-0 text-center text-h2 font-weight-black">
      {{received_values.amount ?? 0}} {{$root.settings.APP_DATA.config.currency}}
    </p>
    <v-divider></v-divider>
    <p class="pa-0 text-center text-h4 font-weight-black">
      {{(received_values.amount??0)*$root.settings.APP_DATA.config.currency_tax}} {{$root.settings.APP_DATA.config.currency_alt}}
    </p>
    <p class="pa-0 text-center text-h6 font-weight-bold">
      Total Amount Payable
    </p>
    {{received_values}}
  </v-card-text>
</v-card> </div>
    `,
    data() {
      return {
        data:{ ...{}},
        brick:{
          id:"RechargeTotal",
          name:"Total Amount",
          description:"Display the total amount",
        }
      };
    },
    props: {
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },

      ...{}    },
    watch: {received_values: {
        handler(newValue, oldValue) {
          this.$emit('send-value','tax',parseFloat(this.$root.settings.APP_DATA.config.currency_tax).toFixed(2)??0)
        },
        immediate: true, // Ejecutar inmediatamente
        deep: false
}},
    methods: {},
    mounted(){},
    created(){},
  };
  window.componentes.RechargeTotal = RechargeTotal;
  const SimilarProducts = {
    template: `
      <div> 
<v-slide-group show-arrows>
  <v-slide-group-item v-for="(item,i) in data" :key="i">
    <ProductCard :info="item" width="300" :key="i"></ProductCard>
  </v-slide-group-item>
</v-slide-group> </div>
    `,
    data() {
      return {
        data:{ ...{
  data:[]
}},
        brick:{
          id:"SimilarProducts",
          name:"Productos Similares",
          description:"",
        }
      };
    },
    props: {
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },

      ...{
  filter:{
    type:Object,
    required:false,
    default:()=>{}
  }
}    },
    watch: {},
    methods: {async getSimilar(){
  const promise = await apiAppProducts.getAll(this.binds)
  if(promise.data.error==false){
    this.data = promise.data.data
  } else {
    this.$toast_validation("No se pudo obtener los productos similares",promise.data.data)
  }
}},
    mounted(){this.getSimilar()},
    created(){},
  };
  window.componentes.SimilarProducts = SimilarProducts;
  const TestData = {
    template: `
      <div> <v-card :color="$root.settings.WEB_BTN.config.primary.color" rounded="xl" variant="tonal" tile flat height="100%">
  <v-card-text>
    <v-card-title class="text-h5 text-center">Filtrar por <strong class="font-weight-bold">Marca</strong></v-card-title>
    <v-list bg-color="transparent" density="compact">
      <v-list-item v-for="item in data.data" @click="pushParams('_brand',item.id)" link>
        {{item.name}}
      </v-list-item>
    </v-list>
  </v-card-text>
  <v-card-actions>
    <v-btn @click="$emit('send-value','_brand',null)" block>Limpiar</v-btn>
  </v-card-actions>
</v-card>  </div>
    `,
    data() {
      return {
        data:{ ...{
  data:[]
}},
        brick:{
          id:"TestData",
          name:"Test",
          description:"",
        }
      };
    },
    props: {
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },

      ...{}    },
    watch: {},
    methods: {async getData(){
  const promise = await apiAppProductBrands.getAll()
  this.data = promise.data
},
pushParams(k,v){
  const params = new URLSearchParams(window.location.search)
  params.set(k,v)
  
  const new_params = (params?'?':'')+params.toString()
  
  const base_url = window.location.hash+(this.$root.url.param??'')
  const newUrl = window.location.pathname+new_params+base_url
  
  history.replaceState({},"",newUrl)
  
  this.$emit('send-value',k,v)
}},
    mounted(){this.getData()},
    created(){},
  };
  window.componentes.TestData = TestData;