@extends('layouts.base')
@section('title', '门店管理')
@section('content')
    <link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-goods1.css')}}"/>
    <link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-ohter.css')}}"/>
    <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;
        }

        .input-with-select .el-input-group__prepend {
            background-color: #fff;
        }

    </style>
    <div class="all">
        <div id="app" v-cloak>
            <div class="vue-head">
                <div class="vue-search">
                    <el-form :inline="true" :model="search_form" class="demo-form-inline">
                        <el-row :gutter="15">
                            <el-col :span="5">
                                <el-input placeholder="门店id/门店名称" v-model="search_input_value1"
                                          class="input-with-select">
                                    <el-select style="width: 120px" class="search_input_select"
                                               v-model="search_input_key1" slot="prepend" placeholder="请选择">
                                        <el-option label="门店id" value="store_id">门店id
                                        </el-option>
                                        <el-option label="门店名称" value="store_name">门店名称
                                        </el-option>
                                    </el-select>
                                </el-input>
                            </el-col>

                            <el-form-item>
                                <el-input placeholder="跑腿系统门店id" v-model="search_form.another_store_id"
                                          class="input-with-select">
                                </el-input>
                            </el-form-item>

                            <el-form-item>
                                <el-select v-model="search_form.connect_status" placeholder="同步状态">
                                    <el-option
                                            v-for="(item,index) in connect_status_arr"
                                            :key="index"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>


                            <el-form-item>
                                <el-button-group>
                                    <el-button type="primary" @click="changeForm()">搜索</el-button>
                                    <el-button type="" :loading="bind_many_store_button.remindLoading"
                                               @click="bindManyStore()">自动绑定
                                    </el-button>
                                </el-button-group>
                            </el-form-item>

                    </el-form>
                </div>
            </div>
            <div class="vue-main">
                <div class="vue-main-form">
                    <div class="vue-main-title" style="margin-top:-10px">
                        <div class="title"><span
                                    style="width: 4px;height: 18px;background-color: #29ba9c;margin-right:15px;display:inline-block;"></span><b>门店管理</b>
                        </div>
                    </div>
                </div>
                <div style="margin-bottom:20px">
                    <div style="margin-bottom:20px">
                    </div>
                    <el-table :data="list" style="width: 100%;" align="center" :fit="true">


                        <el-table-column min-width="10%" prop="store_id" label="门店ID" align="center"></el-table-column>

                        <el-table-column min-width="10%" prop="" label="门店" align="center">
                            <template slot-scope="scope">
                                <div class="block">
                                    <el-link type="info" class="title" :href="scope.row.store_url" target="_blank">
                                        <el-avatar shape="circle" :size="40" :src="scope.row.store_thumb"></el-avatar>
                                        <br>
                                        [[scope.row.store_name]]
                                    </el-link>
                                </div>
                            </template>
                        </el-table-column>

                        <el-table-column min-width="10%" prop="address" label="门店地址" align="center"></el-table-column>

                        <el-table-column min-width="10%" prop="" label="门店店长" align="center">
                            <template slot-scope="scope">
                                <div class="block">
                                    <el-link type="info" class="title" :href="scope.row.member_url" target="_blank">
                                        <el-avatar shape="circle" :size="40" :src="scope.row.avatar"></el-avatar>
                                        <br>
                                        [[scope.row.username]]
                                    </el-link>
                                </div>
                            </template>
                        </el-table-column>

                        <el-table-column min-width="10%" prop="connect_staus_name" label="同步状态"
                                         align="center"></el-table-column>

                        <el-table-column min-width="10%" prop="another_store_id" label="跑腿商户id"
                                         align="center"></el-table-column>

                        <el-table-column min-width="10%" prop="" label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button @click="storeOrder(scope.row)" type="" size="mini">门店订单</el-button>
                                <el-button @click="showBindModal(scope.row)" type="primary" size="mini">绑定商户</el-button>
                            </template>
                        </el-table-column>

                    </el-table>
                </div>

                <div class="vue-page" v-if="total > 0">
                    <el-row>
                        <el-col align="right">
                            <el-pagination layout="prev, pager, next,jumper" @current-change="getData" :total="total"
                                           :page-size="per_page" :current-page="current_page" background
                            ></el-pagination>
                        </el-col>
                    </el-row>
                </div>


                <el-dialog :visible.sync="bind_modal.show" width="600px" title="绑定商户">
                    <div style="height:150px;overflow:auto;margin-left: 50px;margin-top: 50px;" id="cancel-send">
                        <el-form :inline="true" :model="bind_modal" class="demo-form-inline">
                            <el-form-item label="绑定方式">
                                <el-radio-group v-model="bind_modal.bind_type">
                                    <el-radio-button label="1">自动创建跑腿系统商户</el-radio-button>
                                    <el-radio-button label="2">绑定已有跑腿系统商户</el-radio-button>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="跑腿商户id" v-if="bind_modal.bind_type==2">
                                <el-input v-model="bind_modal.another_store_id"></el-input>
                            </el-form-item>
                            <div class="tip" v-if="bind_modal.bind_type==2">设置为0视为取消商城的绑定关系，跑腿系统的绑定关系需要自行编辑或删除</div>
                        </el-form>
                    </div>
                    <span slot="footer" class="dialog-footer">
                <el-button @click="bind_modal.show = false">取 消</el-button>
                <el-button type="primary" :loading="bind_modal.remindLoading" @click="bindRunningStore">绑定 </el-button>
            </span>
                </el-dialog>

            </div>
            <!-- 分页 -->

        </div>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            delimiters: ['[[', ']]'],
            name: 'test',
            data() {
                return {
                    list: [],
                    total: 1,
                    per_page: 1,
                    current_page: 1,
                    connect_button: {
                        remindLoading: false
                    },
                    bind_many_store_button: {
                        remindLoading: false
                    },
                    bind_modal: {
                        show: false,
                        store_id: 0,
                        another_store_id: '',
                        bind_type: 1,
                        remindLoading: false
                    },
                    search_form: {
                        'connect_status': "-1",
                        'another_store_id': '',
                    },
                    connect_status_arr: [
                        {value: '-1', label: '同步状态'},
                        {value: '0', label: '未同步'},
                        {value: '1', label: '已同步'},
                    ],
                    search_input_key1: 'store_id',
                    search_input_value1: '',
                    search_data: {},
                }
            },
            created() {

            },
            mounted() {
                this.search();
            },
            methods: {
                bindManyStore: function () {
                    this.bind_many_store_button.remindLoading = true;
                    this.$http.post('{!! yzWebFullUrl('plugin.running-delivery.admin.store.bindManyStore') !!}', {})
                        .then(function (response) {
                            this.bind_many_store_button.remindLoading = false;
                            if (response.data.result) {
                                this.$message({message: response.data.msg, type: 'success'});
                            } else {
                                this.$message({
                                    message: response.data.msg,
                                    dangerouslyUseHTMLString: true,
                                    type: 'error'
                                });
                            }
                            this.search();
                        }, function (response) {
                            this.bind_many_store_button.remindLoading = false;
                            this.$message({message: response.data.msg, type: 'error'});
                        })
                },
                showBindModal: function (scope) {
                    this.bind_modal.another_store_id = '';
                    console.log(scope.store_id);
                    this.bind_modal.store_id = scope.store_id;
                    this.bind_modal.bind_type = 1;
                    this.bind_modal.show = true;
                },
                bindRunningStore: function (scope) {
                    this.bind_modal.remindLoading = true;
                    this.$http.post('{!! yzWebFullUrl('plugin.running-delivery.admin.store.bindOneStore') !!}', {
                        'another_store_id': this.bind_modal.another_store_id,
                        'bind_type': this.bind_modal.bind_type,
                        'store_id': this.bind_modal.store_id,
                    }).then(function (response) {
                        this.bind_modal.remindLoading = false;
                        if (response.data.result) {
                            this.$message({message: response.data.msg, type: 'success'});
                            this.bind_modal.show = false;
                            this.search();
                        } else {
                            this.$message({message: response.data.msg, type: 'error'});
                        }
                    }, function (response) {
                        this.bind_modal.remindLoading = false;
                        this.$message({message: response.data.msg, type: 'error'});
                    })

                },
                storeOrder: function (scope) {
                    window.open("{!! yzWebUrl('plugin.store-cashier.admin.store-order.store-list') !!}" + '&id=' + scope.store_id);
                },
                search: function () {
                    this.$http.post('{!! yzWebFullUrl('plugin.running-delivery.admin.store.index') !!}', {
                        'page': this.current_page,
                        'is_json': 1,
                        'search_data': this.search_data,
                    }).then(function (response) {
                        console.log(response);
                        if (response.data.result) {
                            let this_data = response.data.data.list;
                            this.current_page = this_data.current_page;
                            this.list = this_data.data;
                            this.total = this_data.total;
                            this.per_page = this_data.per_page;
                        } else {
                            this.$message({message: response.data.msg, type: 'error'});
                        }
                    }, function (response) {
                        this.$message({message: response.data.msg, type: 'error'});
                    })

                },
                getData: function (val) {
                    this.current_page = val;
                    this.search();
                },
                changeForm: function () {
                    this.search_data.store_id = 0;
                    this.search_data.store_name = '';
                    this.search_data = this.search_form;
                    this.search_data[this.search_input_key1] = this.search_input_value1;
                    this.current_page = 1;
                    this.search();
                }
            },
        })
    </script>
@endsection