let newProducts={
        template:`<section id="shopify-section-template--18088238481455__tab_collection_dYEyFU"
                           class="shopify-section section tab_collection">
            <div class="page-width">
                <div class="color-background-1 isolate gradient">
                    <div class="collection product_tab-block section-template--18088238481455__tab_collection_dYEyFU-padding">
                        <div class="collection__title title-wrapper title-wrapper--no-top-margin"><h2
                            class="title inline-richtext h1"> PRODUCTS</h2>
                            <div class="collection-header-text">
                                <ul class="tabs">
                                    <li>
                                        <a class="active" data-target="tab--1">Featured</a>
                                    </li>


                                    <li>
                                        <a data-target="tab--2">Lastest</a>
                                    </li>


                                    <li>
                                        <a data-target="tab--3">On Sale</a>
                                    </li>


                                </ul>
                            </div>
                        </div>


                        <div id="tab--1" style="" class="tabs-content">
                            <div class="product-collection-tab-grid">
                                <div class="collection">
                                    <slider-component class="slider-mobile-gutter">
                                        <ul
                                            class="product-grid grid grid--4-col-desktop grid--2-col-tablet-down contains-card contains-card--product "
                                            role="list" aria-label="Slider">

                                            <li id="Slide-template--18088238481455__tab_collection_dYEyFU-1" class="grid__item" v-for="(HotProducts,index) in dataHot">
                                                <div class="card-wrapper product-card-wrapper underline-links-hover">
                                                    <div class="card card--card card--media color-inverse gradient"
                                                         style="--ratio-percent: 100.0%;">
                                                        <div class="card__inner  ratio" style="--ratio-percent: 100.0%;">
                                                            <div class="card__media">
                                                                <div class="media media--transparent media--hover-effect">
                                                                    <img :src="HotProducts.thumbnail" :alt="HotProducts.name" class="motion-reduce" loading="lazy">

                                                                    <img :src="HotProducts.thumbnail" :alt="HotProducts.name" class="motion-reduce">
                                                                </div>
                                                            </div>
                                                            <div class="card__content">
                                                                <div class="card__information">
                                                                    <h3 class="card__heading">
                                                                        <a :href='url+encodeURIComponent(HotProducts.id)+".html"' class="woocommerce-LoopProduct-link"
                                                                           id="StandardCardNoMediaLink-template--18088238481455__tab_collection_dYEyFU-7918179975215"
                                                                           class="full-unstyled-link" :alt="HotProducts.name">
                                                                            {{HotProducts.name | nameSud(HotProducts.name)}}
                                                                        </a>
                                                                    </h3>
                                                                </div>
                                                                <div class="card__badge top left"></div>
                                                            </div>
                                                        </div>
                                                        <div class="card__content">
                                                            <div class="card__information">
                                                                <h3 class="card__heading h5" id="title-template--18088238481455__tab_collection_dYEyFU-7918179975215">
                                                                    <a :href='url+encodeURIComponent(HotProducts.id)+".html"' class="woocommerce-LoopProduct-link"
                                                                       id="CardLink-template--18088238481455__tab_collection_dYEyFU-7918179975215"
                                                                       class="full-unstyled-link" :alt="HotProducts.name">
                                                                        {{HotProducts.name | nameSud(HotProducts.name)}}
                                                                    </a>
                                                                </h3>


                                                                <div class="rating" role="img"
                                                                     aria-label="5.0 out of 5.0 stars">
                                                                    <span aria-hidden="true" class="rating-star color-icon-text" style="--rating: 5; --rating-max: 5.0; --rating-decimal: 0;"></span>
                                                                    <p class="rating-text caption"><span aria-hidden="true">5.0 /5.0</span></p>
                                                                </div>
                                                                <div class="card-information">
                                                                    <div class="price ">
                                                                        <div class="price__container">

                                                                            <div class="price__sale">
                                                                                <span class="visually-hidden visually-hidden--inline">Regular price</span>
                                                                                <span><s class="price-item price-item--regular" v-html="HotProducts.price_html"></s></span>
                                                                                <span class="visually-hidden visually-hidden--inline">Sale price</span>
                                                                                <span class="price-item price-item--sale price-item--last" v-html="HotProducts.special_price_html"></span>
                                                                            </div>

                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </slider-component>
                                </div>
                            </div>
                        </div>


                        <div id="tab--2" class="tabs-content" style="display: none;">
                            <div class="product-collection-tab-grid">
                                <div class="collection">
                                    <slider-component class="slider-mobile-gutter">
                                        <ul
                                            class="product-grid grid grid--4-col-desktop grid--2-col-tablet-down contains-card contains-card--product "
                                            role="list" aria-label="Slider">

                                            <li id="Slide-template--18088238481455__tab_collection_dYEyFU-1" class="grid__item" v-for="(newProducts,index) in dataNew">
                                                <div class="card-wrapper product-card-wrapper underline-links-hover">
                                                    <div class="card card--card card--media color-inverse gradient"
                                                         style="--ratio-percent: 100.0%;">
                                                        <div class="card__inner  ratio" style="--ratio-percent: 100.0%;">
                                                            <div class="card__media">
                                                                <div class="media media--transparent media--hover-effect">
                                                                    <img :src="newProducts.thumbnail" :alt="newProducts.name" class="motion-reduce" loading="lazy">

                                                                    <img :src="newProducts.thumbnail" :alt="newProducts.name" class="motion-reduce">
                                                                </div>
                                                            </div>
                                                            <div class="card__content">
                                                                <div class="card__information">
                                                                    <h3 class="card__heading">
                                                                        <a :href='url+encodeURIComponent(newProducts.id)+".html"' class="woocommerce-LoopProduct-link"
                                                                           id="StandardCardNoMediaLink-template--18088238481455__tab_collection_dYEyFU-7918179975215"
                                                                           class="full-unstyled-link" :alt="newProducts.name">
                                                                            {{newProducts.name | nameSud(newProducts.name)}}
                                                                        </a>
                                                                    </h3>
                                                                </div>
                                                                <div class="card__badge top left"></div>
                                                            </div>
                                                        </div>
                                                        <div class="card__content">
                                                            <div class="card__information">
                                                                <h3 class="card__heading h5" id="title-template--18088238481455__tab_collection_dYEyFU-7918179975215">
                                                                    <a :href='url+encodeURIComponent(newProducts.id)+".html"' class="woocommerce-LoopProduct-link"
                                                                       id="CardLink-template--18088238481455__tab_collection_dYEyFU-7918179975215"
                                                                       class="full-unstyled-link" :alt="newProducts.name">
                                                                        {{newProducts.name | nameSud(newProducts.name)}}
                                                                    </a>
                                                                </h3>


                                                                <div class="rating" role="img"
                                                                     aria-label="5.0 out of 5.0 stars">
                                                                    <span aria-hidden="true" class="rating-star color-icon-text" style="--rating: 5; --rating-max: 5.0; --rating-decimal: 0;"></span>
                                                                    <p class="rating-text caption"><span aria-hidden="true">5.0 /5.0</span></p>
                                                                </div>
                                                                <div class="card-information">
                                                                    <div class="price ">
                                                                        <div class="price__container">

                                                                            <div class="price__sale">
                                                                                <span class="visually-hidden visually-hidden--inline">Regular price</span>
                                                                                <span><s class="price-item price-item--regular" v-html="newProducts.price_html"></s></span>
                                                                                <span class="visually-hidden visually-hidden--inline">Sale price</span>
                                                                                <span class="price-item price-item--sale price-item--last" v-html="newProducts.special_price_html"></span>
                                                                            </div>

                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </slider-component>
                                </div>
                            </div>
                        </div>


                        <div id="tab--3" class="tabs-content" style="display: none;">
                            <div class="product-collection-tab-grid">
                                <div class="collection">
                                    <slider-component class="slider-mobile-gutter">
                                        <ul
                                            class="product-grid grid grid--4-col-desktop grid--2-col-tablet-down contains-card contains-card--product "
                                            role="list" aria-label="Slider">

                                            <li id="Slide-template--18088238481455__tab_collection_dYEyFU-1" class="grid__item" v-for="(HProducts,index) in dataH">
                                                <div class="card-wrapper product-card-wrapper underline-links-hover">
                                                    <div class="card card--card card--media color-inverse gradient"
                                                         style="--ratio-percent: 100.0%;">
                                                        <div class="card__inner  ratio" style="--ratio-percent: 100.0%;">
                                                            <div class="card__media">
                                                                <div class="media media--transparent media--hover-effect">
                                                                    <img :src="HProducts.thumbnail" :alt="HProducts.name" class="motion-reduce" loading="lazy">

                                                                    <img :src="HProducts.thumbnail" :alt="HProducts.name" class="motion-reduce">
                                                                </div>
                                                            </div>
                                                            <div class="card__content">
                                                                <div class="card__information">
                                                                    <h3 class="card__heading">
                                                                        <a :href='url+encodeURIComponent(HProducts.id)+".html"' class="woocommerce-LoopProduct-link"
                                                                           id="StandardCardNoMediaLink-template--18088238481455__tab_collection_dYEyFU-7918179975215"
                                                                           class="full-unstyled-link" :alt="HProducts.name">
                                                                            {{HProducts.name | nameSud(HProducts.name)}}
                                                                        </a>
                                                                    </h3>
                                                                </div>
                                                                <div class="card__badge top left"></div>
                                                            </div>
                                                        </div>
                                                        <div class="card__content">
                                                            <div class="card__information">
                                                                <h3 class="card__heading h5" id="title-template--18088238481455__tab_collection_dYEyFU-7918179975215">
                                                                    <a :href='url+encodeURIComponent(HProducts.id)+".html"' class="woocommerce-LoopProduct-link"
                                                                       id="CardLink-template--18088238481455__tab_collection_dYEyFU-7918179975215"
                                                                       class="full-unstyled-link" :alt="HProducts.name">
                                                                        {{HProducts.name | nameSud(HProducts.name)}}
                                                                    </a>
                                                                </h3>


                                                                <div class="rating" role="img"
                                                                     aria-label="5.0 out of 5.0 stars">
                                                                    <span aria-hidden="true" class="rating-star color-icon-text" style="--rating: 5; --rating-max: 5.0; --rating-decimal: 0;"></span>
                                                                    <p class="rating-text caption"><span aria-hidden="true">5.0 /5.0</span></p>
                                                                </div>
                                                                <div class="card-information">
                                                                    <div class="price ">
                                                                        <div class="price__container">

                                                                            <div class="price__sale">
                                                                                <span class="visually-hidden visually-hidden--inline">Regular price</span>
                                                                                <span><s class="price-item price-item--regular" v-html="HProducts.price_html"></s></span>
                                                                                <span class="visually-hidden visually-hidden--inline">Sale price</span>
                                                                                <span class="price-item price-item--sale price-item--last" v-html="HProducts.special_price_html"></span>
                                                                            </div>

                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </slider-component>
                                </div>
                            </div>
                        </div>


                    </div>
                </div>
            </div>
        </section>`,
        props:{
            title:{
                type: [String],
                default:'',
            },
            name:{
                type: [String],
                default:'',
            },
            value:{
                type: [String],
                default:'',
            },
//        str_array = new Array();
//         str_array = this.title.split(" ");
//         str_array = str_array[0];
//         console.log(str_array)
            num:Number,

        },

        data() {

            return {
                swiper:null,
                url:"https://bestpeatsk.click/product_details/",
                dataHot:[],
                dataNew:[],
                dataH:[],
                listShow:true,
            }

        },
        created() {

            this.productNew();
        },
        mounted() {
        },

        methods: {

            productNew(){
                let that=this;
                this.$http.get('/api/item/random',{params:{num:this.num,name:'hot'}}).then(async function(response){
                    if(response.data.code == 200){
                        this.listShow = false;
                        this.dataHot = response.data.data;
                        for(var i=0;i<this.dataHot.length;i++){

                            this.dataHot[i].price_html=this.dataHot[i].price_html.replace(/(\d+.\d+)|(\d+)/,(this.dataHot[i].special_price*2).toFixed(2))
                        }
                    }else{
                        this.$toast({message: response.data.message,icon: 'warning-o',});
                        this.listShow = false;
                    }

                },function(res){
                    this.$toast({message: res.data.message,icon: 'warning-o',});
                    this.listShow = false;
                });
                this.$http.get('/api/item/random',{params:{num:this.num,name:'new'}}).then(async function(response){
                    if(response.data.code == 200){
                        this.listShow = false;
                        this.dataNew = response.data.data;
                        for(var i=0;i<this.dataNew.length;i++){

                            this.dataNew[i].price_html=this.dataNew[i].price_html.replace(/(\d+.\d+)|(\d+)/,(this.dataNew[i].special_price*2).toFixed(2))
                        }

                    }else{
                        this.$toast({message: response.data.message,icon: 'warning-o',});
                        this.listShow = false;
                    }

                },function(res){
                    this.$toast({message: res.data.message,icon: 'warning-o',});
                    this.listShow = false;
                });
                this.$http.get('/api/item/random',{params:{num:this.num,name:'hot'}}).then(async function(response){
                    if(response.data.code == 200){
                        this.listShow = false;
                        this.dataH = response.data.data;
                        for(var i=0;i<this.dataH.length;i++){

                            this.dataH[i].price_html=this.dataH[i].price_html.replace(/(\d+.\d+)|(\d+)/,(this.dataH[i].special_price*2).toFixed(2))
                        }


                    }else{
                        this.$toast({message: response.data.message,icon: 'warning-o',});
                        this.listShow = false;
                    }

                },function(res){
                    this.$toast({message: res.data.message,icon: 'warning-o',});
                    this.listShow = false;
                });
            }

        },
        watch: {

        },

    }