@extends('layouts.base')
@section('title', '选品专题')
@section('content')
    <link rel="stylesheet" href="{{resource_get('plugins/store-cashier/src/common/static/index.css')}}">
    <style>
        .top-category {
            margin: 10px;
        }

        .el-radio-button__inner {
            min-width: 83px;
        }


        .special-goods {
            margin: 10px;
        }

        .special-goods .special-pane {
            /* display: flex;
            justify-content: space-between;
            flex-wrap: wrap; */
            display: grid;
            grid-column-gap: 10px;
            grid-template-columns: 1fr 1fr 1fr;
        }

        .special-card {
            /* width: 32.8%; */
            background: white;
            padding-top: 10px;
            border-radius: 10px;
            margin-bottom: 15px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .top , .middle-img , .copywriting {
            padding: 0 15px;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2; 
            overflow: hidden;
            min-height: 42px;
        }
        .special-card .top {
            display: flex;
            justify-content: space-between;
        }

        .special-card .applet {
            background: #deb547;
            color: white;
            padding: 3px 8px;
            border-radius: 5px;
            margin-right: 5px;
            min-width: 58px;
            text-align: center;
        }

        .special-card .left {
            display: flex;
            height: fit-content;
            align-items: center;
            width: 75%;
            flex-wrap: wrap;
        }

        .special-card .special-name {
            font-size: 15px;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1; 
            overflow: hidden;
            max-width: 50%;
        }

        .special-card .right-type {
            color: #72b59d;
            line-height: 27px;
        }

        .special-card .middle-img {
            display: flex;
            width: 100%;
            justify-content: space-around;
        } 

        .hava-img {
            display: flex;
            width: 100%;
            justify-content: space-between;
        }

        .middle-img-active {
            /* height: 152px !important;
            width: 152px !important; */
        }

        .special-card .middle-img img {
            height: fit-content;
            width: 32%;
        }

        .special-card .copywriting {
            margin: 10px;
            font-weight: bold;
        }

        .bottom-pane {
            border-top: 1px solid #bbbbbb;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
        }

        .bottom-pane .detail {
            color: #79b9a2;
            font-weight: 500;
            font-size: 16px;
            margin: 10px;
            cursor: pointer;
        }

        .bottom-pane .line {
            width: 1px;
            height: 50px;
            background: #bbb;
        }
    </style>
    <div class="all">
        <div id="app" v-cloak>
            <div class="vue-crumbs">
                聚合供应链专题 > 选品专题
            </div>
            <div class="vue-head">
                <div class="top-category">
                    <span>分类：</span>
                    <el-radio-group v-model="search_form.cate" @change="getData(1)">
                        <el-radio-button :label="item" v-for="(item,index) in cate" :key="index">[[item]]</el-radio-button>
                    </el-radio-group>
                </div>
                <div class="top-category top-type">
                    <span>类型：</span>
                    <el-radio-group v-model="search_form.type" @change="getData(1)">
                        <el-radio-button :label="item.value" v-for="(item,index) in type" :key="index">[[item.name]]</el-radio-button>
                    </el-radio-group>
                </div>
                <div style="margin-left: 3.5em">
                    <p>导入专题页面后，在装修DIY插件--店铺页面中生成专题页面，自动导入专题包含的商品（根据基础设置定价策略导入，注意设置好定价策略）；复制页面可直接用于推广。</p>
                    <p>详情：可以查看专题banner（用于装修、广告等场景引导用户点击进入专题），海报背景图（使用新海报插件设计专题推广海报、用户分享海报跳转专题页）；</p>
                    <p>相关商品：查看该专题包含的商品信息。</p>
                </div>
            </div>
            <div class="special-goods">
                <div class="special-pane">
                    <div class="special-card" v-for="(item,index) in list" :key="index">
                        <div>
                            <div class="top">
                                <div class="left">
                                    <span class="applet">[[item.type]]</span>
                                    <b class="special-name">[[item.name]]</b>
                                    <b>&nbsp;([[item.example.count]]款)</b>
                                </div>
                                <b class="right-type">[[item.cate]]</b>
                            </div>
                            <div class="middle-img">
                                <div v-if="item.example.cover.length" class="hava-img"><img :src="item" v-for="(item,index) in item.example.cover" :key="index" ></div>
                                <img src="{!! request()->getSchemeAndHttpHost().plugin_assets('jd-supply', 'assent/image/space.png') !!}" v-if="!item.example.cover.length" v-for="(UrlItem,UrlIndex) in 3" :key="UrlIndex">
                            </div>
                            <p class="copywriting" v-html="item.promote"></p>
                        </div>
                        <div class="bottom-pane">
                            <span class="detail" @click="goDetail(item)">详情</span>
                            <span class="line"></span>
                            <span class="detail" @click="goGoods(item)">相关商品</span>
                            <span class="line"></span>
                            <span class="detail" @click="update(item)"  v-if="item.is_import && item.is_update">更新</span>
                            <span class="detail" @click="del(item)" v-if="!item.is_import">导入</span>
                            <span class="detail" v-if="item.is_import">已导入</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 分页 -->
            <div class="vue-page" v-if="total">
                <el-row>
                    <el-col align="right">
                        <el-pagination layout="prev, pager, next,jumper" @current-change="search" :total="total"
                                       :page-size="per_page" :current-page="current_page" background
                        ></el-pagination>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            delimiters: ['[[', ']]'],
            name: 'test',
            data() {
                return {
                    list:[],
                    search_form:{
                        type:"",
                        cate:"全部"
                    },
                    current_page:1,
                    total:1,
                    per_page:1,
                    count:-1,
                    cate:[],
                    type:[]
                }
            },
            created() {

            },
            mounted() {
                this.getData(1);
            },
            methods: {
                getData(page) {
                    let json = {
                        page:page,
                        search:{
                            name:this.search_form.name,
                            type:this.search_form.type,
                            cate:this.search_form.cate,
                        }
                    };
                    let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                    this.$http.post('{!! yzWebFullUrl('plugin.jd-supply.admin.topic.index') !!}',json).then(function(response) {
                        if (response.data.result) {
                            this.list = response.data.data.data.data;
                            this.current_page=response.data.data.data.current_page;
                            this.total=response.data.data.data.total;
                            this.per_page=response.data.data.data.per_page;
                            this.cate=response.data.data.cate;
                            loading.close();
                            console.log(this.cate);

                            for(let item of this.list) {
                                item.promote = this.subStr(item.promote);
                            }
                            this.type = [{value:"",name:"全部"},{value:"1",name:"H5"},{value:"2",name:"小程序"}]

                        } else {
                            this.$message({
                                message: response.data.msg,
                                type: 'error'
                            });
                        }
                        loading.close();

                    }, function(response) {
                        this.$message({
                            message: response.data.msg,
                            type: 'error'
                        });
                        loading.close();
                    });
                },
                editChild(item) {
                    let link = `{!! yzWebFullUrl('plugin.jd-supply-topic.admin.topic.edit') !!}`+`&id=`+item.id;
                    window.location.href = link;
                },
                goDetail(item) {
                    console.log(item);
                    let link = `{!! yzWebFullUrl('plugin.jd-supply.admin.topic.detail') !!}`+`&id=`+item.id;
                    window.open(link);
                },

                search(val) {
                    this.getData(val);
                },
                // 添加
                addModal() {
                    let link = `{!! yzWebFullUrl('plugin.jd-supply-topic.admin.topic.add') !!}`;
                    window.location.href = link;
                },
                del(index) {
                    this.$confirm('确定导入吗，该过程可能耗时较长，请确保在服务器运载低时导入', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {
                        this.loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                        this.count = 0;
                        this.$http.post('{!! yzWebFullUrl('plugin.jd-supply.admin.topic.import') !!}',{data:index,count:this.count}).then(function (response) {
                                if (response.data.result) {
                                    this.loop(index,response.data.data.count);
                                }
                                else{
                                    this.$message({type: 'error',message: response.data.msg});
                                }
                            },function (response) {
                                this.$message({type: 'error',message: response.data.msg});
                                loading.close();
                            }
                        );
                    }).catch(() => {
                        this.$message({type: 'info',message: '已取消操作'});
                    });
                },
                loop(index,current_count) {
                    this.$http.post('{!! yzWebFullUrl('plugin.jd-supply.admin.topic.import') !!}',{data:index,count:current_count}).then(function (response) {
                            if (response.data.result) {
                                if (response.data.data.status == 1) {
                                    this.$message({type: 'success',message: '导入成功!'});
                                    this.getData(this.current_page);
                                    this.loading.close();
                                    this.search(this.current_page)
                                } else {
                                    this.$message({type: 'success',message: "导入中:"+response.data.data.process});
                                    this.loop(index,response.data.data.count);
                                }
                            }
                            else{
                                this.$message({type: 'error',message: response.data.msg});
                            }
                        },function (response) {
                            this.$message({type: 'error',message: response.data.msg});
                            loading.close();
                        }
                    );
                },

                update(index) {
                    console.log(index)
                    this.$confirm('该过程可能耗时较长，且会覆盖原装修模板数据，请确保在服务器运载低时操作', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {
                        let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                        this.$http.post('{!! yzWebFullUrl('plugin.jd-supply.admin.topic.updateDiy') !!}',{data:index}).then(function (response) {
                                if (response.data.result) {
                                    this.$message({type: 'success',message: '导入成功!'});
                                    this.getData(this.current_page);
                                }
                                else{
                                    this.$message({type: 'error',message: response.data.msg});
                                }
                                loading.close();
                                this.search(this.current_page)
                            },function (response) {
                                this.$message({type: 'error',message: response.data.msg});
                                loading.close();
                            }
                        );
                    }).catch(() => {
                        this.$message({type: 'info',message: '已取消操作'});
                    });
                },
                goGoods(item) {
                    let link = `{!! yzWebFullUrl('plugin.jd-supply.admin.goods-import.index') !!}`+`&topicId=`+item.id;
                    window.open(link);
                },
                subStr(description) {
                    let str = JSON.parse(JSON.stringify(description));
                    str = str.replace(/\\n/g, "");  
                    str = str.replace(/(\t)/g, "");  
                    str = str.replace(/(\r)/g, "");  
                    str = str.replace(/<\/?[^>]*>/g, "");  
                    str = str.replace(/\s*/g, "");
                    return str;
                },
            },

        })
    </script>
@endsection