@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-form-item>
                                <el-input placeholder="会员信息" v-model="search_form.kwd"
                                          class="input-with-select">
                                </el-input>
                            </el-form-item>

                            <el-form-item>
                                <el-select v-model="search_form.status" clearable placeholder="启用状态">
                                    <el-option
                                            v-for="(item,index) in 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="" @click="showMemberModal()">添加</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="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" v-if="scope.row.has_one_member">
                                    <el-link type="info" class="title"
                                             :href="memberDetail(scope.row.uid)"
                                             target="_blank">
                                        <el-avatar shape="circle" :size="40"
                                                   :src="scope.row.has_one_member.avatar_image"></el-avatar>
                                        <br>
                                        ( [[scope.row.has_one_member.uid]] )[[scope.row.has_one_member.username]]
                                    </el-link>
                                </div>
                            </template>
                        </el-table-column>

                        <el-table-column min-width="10%" prop="" label="状态" align="center">
                            <template slot-scope="scope">
                                <el-switch
                                        :active-value="1"
                                        :inactive-value="0"
                                        v-model="scope.row.status"
                                        active-color="#13ce66"
                                        inactive-color="#808080"
                                        @change="clerkStatus(scope.row)"
                                >
                                </el-switch>
                                {{--                                <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="member_modal.show" width="800px" title="绑定商户">
                    <div>
                        <el-input v-model="member_modal.kwd" style="width:60%;" placeholder="会员信息"></el-input>
                        <el-button @click="getMember">搜索</el-button>
                    </div>
                    <el-table :data="member_modal.list" index="uid" style="width: 100%;height:500px;overflow:auto"
                              :fit="true">
                        <el-table-column label="会员信息" min-width="50%">
                            <template slot-scope="scope">
                                <div style="display:flex;align-items: center;">
                                    <div v-if="scope.row.avatar_image" style="width:40px;">
                                        <el-image :src="scope.row.avatar_image" alt=""
                                                  style="width:40px;height:40px;border-radius:50%"></el-image>
                                    </div>
                                    <div style="flex:1;">【id:[[scope.row.uid]]】[[scope.row.nickname]]</div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="手机" prop="mobile" align="center" min-width="25%"></el-table-column>
                        <el-table-column label="真实姓名" prop="realname" align="center" min-width="15%"
                        ></el-table-column>

                        <el-table-column label="操作" align="center" min-width="10%">
                            <template slot-scope="scope">
                                <el-button :disabled="scope.row.disabled" :loading="scope.row.submit_loading"
                                           @click="addClerk(scope.row)">
                                    选择
                                </el-button>

                            </template>
                        </el-table-column>
                    </el-table>
                    <span slot="footer" class="dialog-footer">
                                <el-button @click="member_modal.show = false">取 消</el-button>
{{--                                <el-button type="primary" :loading="member_modal.remindLoading"--}}
                        {{--                                           @click="addClerk">确定 </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,
                    member_modal: {
                        list: [],
                        show: false,
                        kwd: '',
                        remindLoading: false,
                    },
                    search_form: {
                        'status': '',
                        'kwd': '',
                    },
                    status_arr: [
                        {value: '0', label: '关闭'},
                        {value: '1', label: '启用'},
                    ],
                    search_data: {},
                }
            },
            created() {

            },
            mounted() {
                this.search();
            },
            methods: {
                getMember() {
                    this.$http.post('{!! yzWebFullUrl('plugin.package-delivery.admin.clerk.getMember') !!}', {
                        kwd: this.member_modal.kwd
                    })
                        .then(function (response) {
                            if (response.data.result) {
                                var list = response.data.data;
                                this.member_modal.list = list.map(item => {
                                    item.submit_loading = false;
                                    item.disabled = false;
                                    return item
                                })

                            } else {
                                this.$message({message: response.data.msg, type: 'error'});
                            }
                            this.search();
                        }, function (response) {
                            this.$message({message: response.data.msg, type: 'error'});
                        })
                },
                showMemberModal() {
                    this.member_modal.show = true;
                },
                addClerk(data) {
                    data.submit_loading = true;
                    this.$http.post('{!! yzWebFullUrl('plugin.package-delivery.admin.clerk.add') !!}', {
                        uid: data.uid
                    })
                        .then(function (response) {
                            data.submit_loading = false;
                            if (response.data.result) {
                                data.disabled = true;
                                this.$message({message: '添加成功', type: 'success'});
                            } else {
                                this.$message({message: response.data.msg, type: 'error'});
                            }
                            this.search();
                        }, function (response) {
                            data.submit_loading = false;
                            this.$message({message: response.data.msg, type: 'error'});
                        })
                    // this.member_modal.list[data.uid].submit_loading = true;
                    // data.submit_loading = true;
                },
                memberDetail(id) {
                    return "{!! yzWebFullUrl('member.member.detail') !!}" + '&id=' + id;
                },
                clerkStatus(data) {
                    this.$http.post('{!! yzWebFullUrl('plugin.package-delivery.admin.clerk.status') !!}', {
                        'id': data.id, 'status': data.status,
                    })
                        .then(function (response) {
                            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.$message({message: response.data.msg, type: 'error'});
                        })
                },
                {{--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.package-delivery.admin.clerk.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.kwd = this.search_form.kwd;
                    this.search_data.status = this.search_form.status;
                    this.current_page = 1;
                    this.search();
                }
            },
        })
    </script>
@endsection