@extends('layouts.base')
@section('title', '中台配置列表')
@section('content')
    <link rel="stylesheet" href="{{resource_get('plugins/store-cashier/src/common/static/index.css')}}">
    <link rel="stylesheet" href="{{resource_get('plugins/yz-supply/assent/css/album1.css?time='.time())}}">

    <style>
        .edit-i{display:none;}
        .el-table_1_column_2:hover .edit-i{font-weight:900;padding:0;margin:0;display:inline-block;}
        .el-tabs__item,.is-top{font-size:16px}
        .el-tabs__active-bar { height: 3px;}
        .iframe {

            position: absolute;

            width: 100%;

            height: 100%;

            background: #fff;

            overflow-y: hidden;

        }
    </style>
    <div class="all">
        <div id="qrcode" ref="qrcode" style="display:none;"></div>
        <div id="app" v-cloak>
            <div class="vue-head">
                <div class="top-title">
                    <span :class="item.class" v-for="(item,index) in albumTopTitle"  @click="skipUrl(item)" :key="index">[[item.name]]</span>
                </div>
            </div>
            <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">
                        <el-button type="primary" plain icon="el-icon-plus" size="small" @click="add">添加供应链</el-button>
                    </div>
                </div>
                <div class="vue-search">
                    <el-form :inline="true" :model="search_form" class="demo-form-inline">
                        <el-form-item label="" prop="title">
                            <el-input v-model="search_form.title" placeholder="供应链名称"></el-input>
                        </el-form-item>
                        <el-form-item label="">
                            <el-button type="primary" @click="search(1)">搜索</el-button>
                        </el-form-item>
                        <div style="color: red">*关闭配置会下架所有商品，关闭之后再开启不会上架任何商品</div>
                    </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 130px">中台配置列表</div>
                        <div class="vue-main-title-button">
                        </div>
                    </div>
                    <el-table :data="list" style="width: 100%;margin-bottom: 130px;!important;" :class="table_loading==true?'loading-height':''"  v-loading="table_loading" >
                        <el-table-column prop="id" label="ID" width="70" align="center"></el-table-column>
                        <el-table-column prop="title" label="供应链名称"  align="center"></el-table-column>
                        <el-table-column prop="tel" label="手机号"  align="center"></el-table-column>
                        <el-table-column prop="app_key" label="appKey"  align="center"></el-table-column>
                        <el-table-column prop="app_url" label="供应链API地址"  align="center"></el-table-column>
                        <el-table-column label="状态" prop="status_message" align="center">
                            <template slot-scope="scope">
                                [[scope.row.status == 1?'开启':'关闭']]
                                <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="2" @change="putAway(scope.row.id,scope.$index)"></el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column prop="sort" label="排序" width="" align="center">
                            <template slot-scope="scope">
                                [[scope.row.sort]]
                            </template>

                        </el-table-column>
                        <el-table-column prop="created_at" label="创建时间" width="" align="center">
                            <template slot-scope="scope">
                                [[scope.row.created_at]]
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="" align="center">
                            <template slot-scope="scope">
                                <div class="table-option">
                                    <a :href="'{{ yzWebFullUrl('plugin.yz-supply.admin.middleground-configuration.edit', array('id' => '')) }}'+[[scope.row.id]]">
                                        编辑
                                    </a>&nbsp;&nbsp;
                                    <a @click="delMid(scope.row.id)">
                                        删除
                                    </a>&nbsp;&nbsp;
                                    <div>
                                        <input v-model="scope.row.link" :ref="'list'+scope.row.id" style="position:absolute;opacity:0;height:1px;" />
                                    </div>
                                </div>
                            </template>
                        </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_size" :current-page="current_page" background
                        ></el-pagination>
                    </el-col>
                </el-row>
            </div>

        </div>
    </div>
    <script src="{{resource_get('static/js/qrcode.min.js')}}"></script>
    <script>
        var app = new Vue({
            el:"#app",
            delimiters: ['[[', ']]'],

            data() {
                return{
                    albumTopTitle: [
                        {
                            id: 1,
                            name: "基础设置",
                            class:"album-name-against",
                            url:"{!! yzWebFullUrl('plugin.yz-supply.admin.set.index') !!}"
                        },
                        {
                            id: 2,
                            name: "中台配置列表",
                            class:"album-name",
                            url:"{!! yzWebFullUrl('plugin.yz-supply.admin.middleground-configuration.index') !!}"
                        },
                        {
                            id: 3,
                            name: "支付设置",
                            class:"album-name-against",
                            url:"{!! yzWebFullUrl('plugin.yz-supply.admin.set.pay') !!}"
                        },
                        {
                            id: 4,
                            name: "快递匹配",
                            class:"album-name-against",
                            url:"{!! yzWebFullUrl('plugin.yz-supply.admin.express-matching.index') !!}"
                        },
                        {
                            id: 5,
                            name: "导入分类",
                            class:"album-name-against",
                            url:"{!! yzWebFullUrl('plugin.yz-supply.admin.import-categorys.index') !!}"
                        },
                    ],
                    is_initialize:{!! $is_initialize ? $is_initialize:0 !!},
                    list:[],//商品列表
                    table_loading:false,
                    all_loading:false,
                    loading:false,
                    search_form:{},
                    //分页
                    total:0,
                    per_size:0,
                    current_page:0,


                }
            },
            created() {
                if(this.is_initialize == 1){
                    this.initialize();
                }else{
                    this.getData(1);
                }


            },
            methods: {
                skipUrl(item){
                    window.location.href = item.url
                },
                initialize(){

                    var that = this;
                    that.$message.success("首次进入,会初始化,将基础配置中的参数添加到中台配置列表中,以及其他一些兼容多中台的设置。");
                    that.table_loading = true;
                    that.$http.post("{!! yzWebFullUrl('plugin.yz-supply.admin.middleground-configuration.initialize') !!}").then(response => {

                        if(response.data.result==1){
                            that.$message.success("初始化成功");
                            location.reload();
                        }
                        else{
                            that.$message.error(response.data.msg);
                        }
                        that.table_loading = false;
                    }),function(res){
                        console.log(res);
                        that.table_loading = false;
                    };
                },
                delMid(id){
                    var that = this;
                    that.table_loading = true;
                    let json = {id:id};

                    this.$confirm('确认删除？', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {
                        that.$http.post("{!! yzWebFullUrl('plugin.yz-supply.admin.middleground-configuration.del-mid') !!}",json).then(response => {
                            if(response.data.result==1){
                                that.$message.success('操作成功！');
                                this.getData(1);
                            }else{
                                that.$message.error(response.data.msg);
                            }
                            that.table_loading = false;
                        }),function(res){
                            console.log(res);
                            that.table_loading = false;
                        };
                    }).catch(() => {
                        that.table_loading = false;
                        this.$message({type: 'info',message: '已取消操作'});
                    });

                },
                add(){
                    window.location.href = "{!! yzWebFullUrl('plugin.yz-supply.admin.middleground-configuration.add') !!}";
                },
                putAway(id,index) {
                    var that = this;
                    that.table_loading = true;
                    let json = {id:id};
                    // yzWebFullUrl('plugin.yz-supply.admin.shop-goods.goods-search')
                    that.$http.post("{!! yzWebFullUrl('plugin.yz-supply.admin.middleground-configuration.setPutaway') !!}",json).then(response => {
                        console.log(response);
                        if(response.data.result==1){
                            that.$message.success('操作成功！');
                        }
                        else{
                            that.$message.error(response.data.msg);
                            that.goods_list[index].status == 1 ? 2 : 1;
                        }
                        that.table_loading = false;
                    }),function(res){
                        console.log(res);
                        that.table_loading = false;
                    };
                },
                getData(page){
                    var that = this;

                    that.table_loading = true;
                    that.$http.post("{!! yzWebFullUrl('plugin.yz-supply.admin.middleground-configuration.index-list') !!}",{page:page,search:that.search_form}).then(response => {

                        if(response.data.result==1){
                            that.list = response.data.data.page_data.data;
                            that.total = response.data.data.page_data.total;
                            that.current_page = response.data.data.page_data.current_page;
                            that.per_size = response.data.data.page_data.per_page;
                        }
                        else{
                            that.$message.error(response.data.msg);
                        }
                        that.table_loading = false;
                    }),function(res){
                        console.log(res);
                        that.table_loading = false;
                    };
                },
                // 搜索、分页
                search(page) {
                    this.getData(page);
                },

                // 上一页
                prev() {
                    let page = parseInt(this.current_page) - 1;
                    if (page < 1) {
                        return false;
                    }

                    this.getMessageList(page);
                },
                //下一页
                next() {
                    let page = parseInt(this.current_page) + 1;
                    if (this.per_size < this.page_number) {
                        return false;
                    }

                    this.getMessageList(page);
                },
                //跳页
                jumpPage() {
                    if (this.current_page <= 1) {
                        this.current_page = 1;
                    }
                    // if(this.current_page>100){
                    //     this.current_page = 100
                    // }

                    this.getMessageList(this.current_page);
                },

            },
        })

    </script>
@endsection