@extends('layouts.base')
@section('title', '股东管理')
@section('content')

    <style xmlns:v-bind="http://www.w3.org/1999/xhtml">
        .rightlist #app .rightlist-head{padding:15px 0;line-height:50px;}
        .rightlist #app{margin-left:30px;}
        .rightlist-head-con{float:left;padding-right:20px;font-size:16px;color:#888;}
        .el-form-item__label{padding-right:30px;}
        .mouse-active{cursor:pointer;border:1px dotted #409EFF;border-radius: 4px;}
        /* 滑块选择小白点 */
        .el-switch.is-checked .el-switch__core::after {left: 100%;margin-left: -17px;}
        .el-switch__core::after {content: "";position: absolute;top: 1px;left: 1px;border-radius: 100%;transition: all .3s;width: 16px;height: 16px;background-color: #fff;}

    </style>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_913727_zrmdutznqpd.css">
    <div id="app">
        <template>
            <el-container>
                <el-header height="auto">
                    <div class="">
                        <h4 class="card-title">添加股东</h4><hr>
                    </div>
                </el-header>
                {{--表格start--}}
                <el-main>
                    <template>
                        <el-form ref="form" :model="form" ref="form" label-width="240px">
                            <el-form-item label="微信角色" prop="uid">
                                <el-select
                                        v-model="form.uid"
                                        placeholder="请输入关键词"
                                        filterable
                                        remote
                                        reserve-keyword
                                        @change="getImgUrl"
                                        placeholder="请输入关键词"
                                        :remote-method="loadMembers"
                                        :loading="loading"
                                        style="width: 70%">
                                    <el-option
                                            v-for="item in members"
                                            :key="item.uid"
                                            :label="'[MemberID:'+item.uid+'][昵称:'+item.nickname+']'"
                                            :value="item.uid">
                                    </el-option>
                                </el-select>
                                <el-button type="danger" @click="clearMember()">点击清空</el-button>
                                <el-form-item label="" v-if="member">
                                    <el-input disabled v-model="member" style="width: 70%" placeholder=""></el-input>
                                </el-form-item>
                                <el-form-item label="" v-if="imageUrl">
                                    <img width="30%" :src="imageUrl" alt="">
                                </el-form-item>
                            </el-form-item>
                            <el-form-item label="真实姓名" prop="">
                                <span>[[ realname ]]</span>
                            </el-form-item>
                            <el-form-item label="联系方式" prop="">
                                <span>[[ mobile ]]</span>
                            </el-form-item>

                            <el-form-item label="" prop="">
                                <el-button @click="submit('form')">
                                    保存
                                </el-button>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-main>
                {{--表格end--}}
                <el-footer>

                </el-footer>

            </el-container>
        </template>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            delimiters: ['[[', ']]'],
            data() {
                {{--let pageList = {!! $pageList ?: '{}'!!};--}}
                return {
                    form : {
                        uid : '',

                    },
                    realname : '',
                    mobile : '',
                    loading : false,
                    searchParams: {
                        'id' : '',
                        'name' : '',
                        'create_time' : '',
                    },
                    members : [],
                    member : '',
                    imageUrl : '',
                }
            },
            methods: {
                loadMembers(query) {
                    if (query !== '') {
                        this.loading = true;
                        this.$http.get("{!! yzWebUrl('plugin.partner-reward.admin.controllers.partner.get-members', ['keyword' => '']) !!}" + query).then(response => {
                            this.members = response.data.data,
                                this.loading = false;
                        }, response => {
                            console.log(response);
                        });
                    } else {
                        this.members = [];
                    }
                },
                getImgUrl(uid) {
                    let member = this.members.find(function (member) {
                        return member.uid == uid;
                    });
                    this.imageUrl = member.avatar;
                    this.realname = member.realname;
                    this.mobile = member.mobile;
                },
                clearMember() {
                    this.form.member_id = "";
                },

                submit(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            this.loading = true;
                            // delete(this.form['thumb_url']);
                            this.$http.post("{!! yzWebFullUrl('plugin.partner-reward.admin.controllers.partner.add') !!}",{'form_data':this.form}).then(response => {
                                if (response.data.result) {
                                    this.$message({type: 'success',message: '操作成功!'});
                                    window.location.href='{!! yzWebFullUrl('plugin.partner-reward.admin.controllers.partner.index') !!}';
                                    this.loading = false;
                                } else {
                                    this.$message({message: response.data.msg,type: 'error'});
                                    this.loading = false;
                                }
                            },response => {
                                this.loading = false;
                            });
                        }
                        else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },

                del(id) {
                    this.$confirm('是否删除', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$http.post('{!! yzWebFullUrl('plugin.partner-reward.admin.controllers.partner.del') !!}',{id:id}).then(function (response) {
                            if (response.data.result) {
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                                window.open("{!! yzWebUrl('plugin.partner-reward.admin.controllers.partner.index') !!}", '_self');
                            }
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                },
            },
        });
    </script>
@endsection