@extends('layouts.base')
@section('title', "默认值同步")
@section('content')
    <link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-goods1.css')}}"/>
    <style>

    </style>
    <div class="all">
        <div id="app" v-cloak>
            <div class="vue-head">
                <div class="vue-main-title" style="margin-bottom:20px">
                    <div class="vue-main-title-left"></div>
                    <div class="vue-main-title-content">条件筛选</div>
                    <div class="vue-main-title-button">
                    </div>
                </div>
                <div class="vue-search">
                    <el-form :inline="true" :model="search_form" ref="search_form" style="margin-left:10px;">
                        <el-row>
                            <el-form-item label="" prop="同步方式">
                                <el-select v-model="search_form.update_type" placeholder="同步方式" clearable>
                                    <el-option label="商品类型" value="1"></el-option>
                                    <el-option label="指定商品" value="3"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="时间">
                                <el-date-picker
                                        v-model="times"
                                        type="datetimerange"
                                        value-format="yyyy-MM-dd HH:mm:ss"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        style="margin-left:5px;"
                                        align="right">
                                </el-date-picker>
                            </el-form-item>

                            <el-form-item>
                                <el-button type="primary" icon="el-icon-search" @click="search(1)">搜索
                                </el-button>
                            </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>

                </div>
            </div>
            <div class="vue-main">
                <div class="vue-main-form">
                    <div class="vue-main-title" style="margin-bottom:20px">
                        <div class="vue-main-title-left"></div>
                        <div class="vue-main-title-content" style="flex:0 0 120px">同步记录列表</div>
                        <div class="vue-main-title-button">
                            <el-button type="primary" plain icon="el-icon-refresh" size="small" @click="synchronizePopup(1)">分批同步</el-button>
                            <el-button type="primary" plain icon="el-icon-refresh" size="small" @click="synchronizePopup(3)">一键同步</el-button>
                        </div>
                    </div>
                    <el-table :data="list" style="width: 100%" v-loading="table_loading">
                        <el-table-column prop="created_at" label="时间" align="center"></el-table-column>
                        <el-table-column prop="way_name" label="同步方式" align="center"></el-table-column>
                        <el-table-column prop="way_where" label="条件" align="center"></el-table-column>
                        <el-table-column prop="total" label="同步总条数" align="center"></el-table-column>
                        <el-table-column prop="success_num" label="成功条数" align="center"></el-table-column>
                        <el-table-column prop="status_name" label="状态" align="center"></el-table-column>
                    </el-table>
                </div>
            </div>
            <!-- 分页 -->
            <div class="vue-page" v-if="total>0">
                <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>

            {{--一键同步--}}
            <el-dialog :visible.sync="batch_synchronize_goods" width="700px" center title="商品同步默认值"
                       v-loading="synchronize_loading"
                       element-loading-text="拼命同步中..."
                       element-loading-spinner="el-icon-loading"
                       element-loading-background="rgba(0, 0, 0, 0.8)"
            >
                <div style="height:300px;overflow:auto" id="dispatch-info">
                    <el-form :model="synchronize_where" :rules="rules" ref="synchronize_where" label-width="20%">
                        <el-form-item label-width="26%" label="插件商品类型">
                            <el-form-item label="" prop="">
                                <el-select v-model="synchronize_where.plugin_type" placeholder="请选择商品类型" clearable>
                                    <el-option v-for="item in plugin_type_list" :key="item.code" :label="item.name"
                                               :value="item.plugin_id"></el-option>
                                </el-select>
                                <el-button type="primary" v-loading="paginate_loading" icon="el-icon-search" @click="goodsPaginate()">查询数量</el-button>
                                <div style="font-size:12px;">请在服务器负担较小是同步，先统计商品数再选择分批同步，每页最多1000条商品</div>
                            </el-form-item>

                            <el-form-item label="" prop="" label="每页数量" >
                                <el-input v-model="synchronize_where.goods_per_page" placeholder="每页数量"></el-input>
                            </el-form-item>
                        </el-form-item>

                        <el-form-item v-if="goods_total > 0"  label="分页同步">
                            <el-pagination
                                    background
                                    layout="prev, pager, next"
                                    @current-change="switchPage"
                                    :page-size="goods_per_page"
                                    :current-page="goods_current_page"
                                    :total="goods_total">
                            </el-pagination>
                        </el-form-item>
                    </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button v-if="goods_total > 0" type="success" round @click="batchSynchronization = true">同步当前页</el-button>
                    <el-button @click="batch_synchronize_goods = false">关 闭</el-button>
                </span>
            </el-dialog>

            <el-dialog :visible.sync="single_synchronize_goods" width="700px" center title="商品同步默认值">
                <div style="height:300px;overflow:auto" id="dispatch-info">
                    <el-form :model="synchronize_where" :rules="rules" ref="synchronize_where" label-width="20%">

                        {{--<el-form-item label="方式" prop="level">--}}
                            {{--<div>--}}
                                {{--<el-radio-group v-model="synchronize_where.way" prop="way">--}}
                                    {{--<el-radio-button label="1">插件商品类型</el-radio-button>--}}
                                    {{--<el-radio-button label="3">指定商品</el-radio-button>--}}
                                {{--</el-radio-group>--}}
                            {{--</div>--}}
                        {{--</el-form-item>--}}

                        <el-form-item label="商品ID">
                        <el-input style="width:50%;" v-model="synchronize_where.goods_id" placeholder="请输入商品ID"></el-input>
                        <div style="font-size:12px;">输入支持同步的商品ID</div>
                        </el-form-item>
                    </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button type="success" round @click="dialogVisible = true">开始同步</el-button>
                    <el-button @click="single_synchronize_goods = false">关 闭</el-button>
                </span>
            </el-dialog>
                    <!-- 二次提示弹窗 -->
                    <el-dialog
                                title="提示"
                                :visible.sync="dialogVisible"
                                 top="30vh"
                                width="30%"
                                    >
                                <div style="display: flex;">
                                <svg t="1666317932699" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6253" width="25" height="25"><path d="M512.16 192c231.808 0 437.536 296.384 312.16 489.984-128.896 199.04-494.208 200.96-624.352 0-80.448-124.192-28.288-286.528 79.84-389.568l11.36-10.432C352.96 227.456 430.848 192 512.16 192z m-1.76 388.8a48 48 0 1 0 0 96 48 48 0 0 0 0-96z m1.6-256a36.8 36.8 0 0 0-36.8 36.8V512a36.8 36.8 0 1 0 73.6 0v-150.4A36.8 36.8 0 0 0 512 324.8z" fill="#FA6400" p-id="6254"></path><path d="M512 32C191.936 32 32 191.936 32 512c0 320.064 159.936 480 480 480 320.064 0 480-159.936 480-480C992 191.936 832.064 32 512 32z m0 64c284.736 0 416 131.264 416 416s-131.264 416-416 416S96 796.736 96 512 227.264 96 512 96z" fill="#E02020" fill-opacity=".148" p-id="6255"></path></svg><span style="text-align: center;
                                  line-height: 25px;">是否确认同步</span>
                                  </div>
                               <span slot="footer" class="dialog-footer">
                              <el-button @click="dialogVisible = false">取 消</el-button>
                              <el-button type="primary" @click="updateWidget()">确 定</el-button>
                              </span>
                    </el-dialog>
                    <el-dialog
                                title="提示"
                                :visible.sync="batchSynchronization"
                                 top="30vh"
                                width="30%"
                                    >
                                <div style="display: flex;">
                                <svg t="1666317932699" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6253" width="25" height="25"><path d="M512.16 192c231.808 0 437.536 296.384 312.16 489.984-128.896 199.04-494.208 200.96-624.352 0-80.448-124.192-28.288-286.528 79.84-389.568l11.36-10.432C352.96 227.456 430.848 192 512.16 192z m-1.76 388.8a48 48 0 1 0 0 96 48 48 0 0 0 0-96z m1.6-256a36.8 36.8 0 0 0-36.8 36.8V512a36.8 36.8 0 1 0 73.6 0v-150.4A36.8 36.8 0 0 0 512 324.8z" fill="#FA6400" p-id="6254"></path><path d="M512 32C191.936 32 32 191.936 32 512c0 320.064 159.936 480 480 480 320.064 0 480-159.936 480-480C992 191.936 832.064 32 512 32z m0 64c284.736 0 416 131.264 416 416s-131.264 416-416 416S96 796.736 96 512 227.264 96 512 96z" fill="#E02020" fill-opacity=".148" p-id="6255"></path></svg><span style="text-align: center;
                                  line-height: 25px;">是否确认同步</span>
                                  </div>
                               <span slot="footer" class="dialog-footer">
                              <el-button @click="dialogVisible = false">取 消</el-button>
                              <el-button type="primary" @click="batchUpdateWidget()">确 定</el-button>
                              </span>
                    </el-dialog>

        </div>
    </div>

<script>
    var app = new Vue({
        el: "#app",
        delimiters: ['[[', ']]'],
        data() {
            return {
                batchSynchronization:false,
                dialogVisible:false,
                synchronize_loading:false,
                single_synchronize_goods:false,
                batch_synchronize_goods:false,
                synchronize_where:{
                    way:0,
                    plugin_type:'',
                    goods_id:'',
                    page:1,
                    goods_per_page:1000,
                },
                synchronize_status:false,//同步执行中不能再次点击同步

                executed_page:[],
                goods_total:0,
                goods_per_page:0,
                goods_current_page:1,
                paginate_loading:false,

                plugin_type_list:[],



                search_form:{},
                times:[],

                list:[],
                table_loading: false,
                //分页
                total: 0,
                per_page: 0,
                current_page: 0,
                rules: {},

            }
        },
        created() {

        },
        mounted() {
            let result = this.viewReturn();
            this.__initial(result);
            this.search(1);
        },
        methods: {
            //视图返回数据
            viewReturn() {
                return {!! $data?:'{}' !!};
            },
            //初始化页面数据，请求链接
            __initial(data) {

                this.plugin_type_list = data.config;
                console.log(data);
            },
            search(page) {
                let that = this;

                if(this.times && this.times.length>0) {
                    this.search_form.start_time = this.times[0];
                    this.search_form.end_time = this.times[1];
                }

                let json = {
                    page: page,
                    search: this.search_form,
                };
                that.table_loading = true;
                that.$http.post("{!! yzWebFullUrl('plugin.goods-default-value.admin.synchronize.list') !!}", json).then(response =>{

                    if (response.data.result == 1) {
                        that.list = response.data.data.data;
                        that.total = response.data.data.total;
                        that.current_page = response.data.data.current_page;
                        that.per_page = response.data.data.per_page;
                    } else {
                        that.$message.error(response.data.msg);
                    }
                    that.table_loading = false;
                }), function (res) {
                    console.log(res);
                    that.table_loading = false;
                };

            },

            synchronizePopup(way) {

                if (way == 1) {
                    this.batch_synchronize_goods = true;
                } else if (way == 3) {
                    this.single_synchronize_goods = true;
                }
                this.synchronize_where.way = way;
            },
            //记录当前切换页数
            switchPage(page) {
                this.goods_current_page = page;
                this.synchronize_where.page = page;
            },

            //获取同步商品数据进行分页
            goodsPaginate() {
                let  way = this.synchronize_where.way;

                if (way == 1) {
                    if (this.synchronize_where.plugin_type === '') {
                        this.$message({type: 'warning',message: '请选择商品类型'});
                        return false;
                    }

                    if (this.synchronize_where.goods_per_page > 1000) {
                        this.$message({type: 'warning',message: '每页数量不能大于1000'});
                        return false;
                    }
                }

                let json = {
                    way:this.synchronize_where.way,
                    where:this.synchronize_where
                };
                this.paginate_loading = true;
                this.$http.post("{!! yzWebFullUrl('plugin.goods-default-value.admin.synchronize.goods-page') !!}", json).then(response =>{
                    if (response.data.result == 1) {
                        this.goods_total = response.data.data.goods_total;
                        this.goods_per_page = response.data.data.per_page;

                    } else {
                        this.$message({type: 'warning',message: response.data.msg});
                    }
                    this.paginate_loading = false;
                }), function (res) {
                    console.log(res);
                };
            },

            batchUpdateWidget() {
                this.batchSynchronization =false
                if(this.synchronize_status){
                    this.$message({type: 'warning',message: '同步进行中...'});
                    return false;
                }
                if (this.synchronize_where.way == 1) {
                    if (this.synchronize_where.plugin_type === '') {
                        this.$message({type: 'warning',message: '请选择商品类型'});
                        return false;
                    }
                }
                if (this.synchronize_where.goods_per_page > 1000) {
                    this.$message({type: 'warning',message: '每页数量不能大于1000'});
                    return false;
                }

                if (this.executed_page.indexOf(this.synchronize_where.page) !== -1) {
                    this.$message({type: 'warning',message: '当前页('+ this.synchronize_where.page +')已同步'});
                    return false;
                }

                let json = {
                    way:this.synchronize_where.way,
                    where:this.synchronize_where
                };

                this.synchronize_status = true;
                this.synchronize_loading = true;
                this.$http.post("{!! yzWebFullUrl('plugin.goods-default-value.admin.synchronize.batch-update-widget') !!}", json).then(response =>{

                    if (response.data.result == 1) {
                        this.$message.success(response.data.msg);
                        this.executed_page.push(this.synchronize_where.page);
                    } else {
                        this.$message({type: 'error',message: response.data.msg});
                    }
                    this.synchronize_loading = false;
                    this.synchronize_status = false;
                }), function (res) {
                    this.synchronize_loading = false;
                    this.$message.error('请求失败，请刷新再尝试');
                    console.log(res);
                };

            },
            updateWidget() {
               this.dialogVisible =false
                if(this.synchronize_status){
                    this.$message({type: 'warning',message: '同步进行中...'});
                    return false;
                }
                if (this.synchronize_where.way == 3) {
                    if (!this.synchronize_where.goods_id) {
                        this.$message({type: 'warning',message: '请输入指定商品ID'});
                        return false;
                    }
                }

                let json = {
                    way:this.synchronize_where.way,
                    where:this.synchronize_where
                };

                this.synchronize_status = true;
                this.$http.post("{!! yzWebFullUrl('plugin.goods-default-value.admin.synchronize.update') !!}", json).then(response =>{

                    if (response.data.result == 1) {
                        this.single_synchronize_goods = false;
                        this.$message.success(response.data.msg);
                        location.reload();
                    } else {
                        this.$message({type: 'error',message: response.data.msg});
                    }
                    this.synchronize_status = false;
                }), function (res) {
                    this.$message.error('请求失败，请刷新再尝试');
                    console.log(res);
                };

            },

        },
    })

</script>


@endsection