@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>

    <div class="rightlist">
        <div id="app" v-loading="submit_loading">
        <link rel="stylesheet" href="//at.alicdn.com/t/font_913727_zrmdutznqpd.css">
            <div class="rightlist-head">
                <div class="rightlist-head-con">名片管理</div>
            </div>
            <el-form :inline="true" :model="search_form" ref="search_form">
                <el-row>
                    <el-col :span="24">
                        <el-form-item>
                            <el-input v-model="search_form.uid" placeholder="请输入会员ID"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-input v-model="search_form.member" placeholder="请输入会员昵称/姓名/手机号关键词" style="width:300px"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-select v-model="search_form.role_id" placeholder="请选择角色">
                                <el-option v-for="(item,index) in role_list" :key="item" :label="item" :value="index"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-select v-model="search_form.type_id" placeholder="选择排序类型（降序）">
                                <el-option v-for="item in type_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-select v-model="search_form.status_id" placeholder="名片状态">
                                <el-option v-for="item in status_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <a href="#">
                                <el-button type="success" icon="el-icon-search" @click="search()">搜索</el-button>
                            </a>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template>
                <el-table :data="list" style="width: 100%" v-loading="table_loading">
                    <el-table-column prop="id" label="ID" width="80" align="center"></el-table-column>
                    <el-table-column label="会员"  align="center">
                        <template slot-scope="scope">
                            <img style='width:40px;height:40px':src=scope.row.card_avatar style="max-width:100px">
                            <div>[[scope.row.member?scope.row.member.nickname:'未更新']]</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="姓名手机号" align="center" :render-header='memberMsg'>
                        <template slot-scope="scope">
                            <span>[[scope.row.member?scope.row.member.realname:'未更新']]</span><br>
                            <span>[[scope.row.member?scope.row.member.mobile:'未更新']]</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="等级角色" align="center" :render-header='levelRole'>
                        <template slot-scope="scope">
                            <div v-if="scope.row.role_id==2">
                                <div v-if="scope.row.agent&&scope.row.agent.agent_level">
                                    <span>[[scope.row.agent.agent_level.name]]</span><br>
                                    <span>[[scope.row.role_name]]</span>
                                </div>
                                <div v-else>
                                    <span>默认等级</span><br>
                                    <span>[[scope.row.role_name]]</span>
                                </div>
                            </div>
                            <div v-else>
                                <span>[[scope.row.level_name]]</span><br>
                                <span>[[scope.row.role_name]]</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="访问次数访问人数"  align="center" :render-header='visitNumber'>
                        <template slot-scope="scope">
                            <span>[[scope.row.card_statistics.visit]]</span><br>
                            <span>[[scope.row.card_statistics.visitor_num]]</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="分享次数保存次数"  align="center" :render-header='shareNumber'>
                        <template slot-scope="scope">
                            <span>[[scope.row.card_statistics.share]]</span><br>
                            <span>[[scope.row.card_statistics.save]]</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="收藏次数靠谱次数"  align="center" :render-header='collectNumber'>
                        <template slot-scope="scope">
                            <span>[[scope.row.card_statistics.collection]]</span><br>
                            <span>[[scope.row.card_statistics.reliable]]</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="card_statistics.fans" label="新增会员" align="center"></el-table-column>
                    <el-table-column label="操作" align="center" min-width="120">
                        <template slot-scope="scope"> 
                            <a v-bind:href="'{{ yzWebUrl('plugin.business-card.admin.controllers.card.index', array('id' => '')) }}'+[[scope.row.id]]" title="编辑">
                                <i class="iconfont icon-bianjiqianbixieshuru2" style="font-size:28px;color:#606266"></i>
                            </a>
                            <a href="#">
                                <el-tooltip placement="top">
                                    <div slot="content">
                                        <img :src="scope.row.qr_code" alt="" style="max-width:100px;">
                                    </div>
                                    <i class="iconfont icon-erweima1" style="font-size:28px;color:#606266"></i>
                                </el-tooltip>
                            </a>
                            <a href="#">
                                <i class="iconfont icon-lianjie" style="font-size:28px;color:#606266" title="点击复制链接" @click="copy(scope.row,scope.$index)"></i>
                            </a>
                            <el-input v-model="scope.row.card_url" :ref="'copy'+scope.$index" style="position: absolute;opacity:0;"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="启用" min-width="80" align="center">
                        <template slot-scope="scope">
                            <el-tooltip :content="scope.row.status?'已开启':'已禁用'" placement="top">
                                <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" @change="statusChange(scope.$index,scope.row,scope.row.id)"></el-switch>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                </el-table>
                <el-row>
                    <el-col :span="24" align="right" style="padding:15px 5% 15px 0">
                        <el-pagination layout="prev, pager, next" @current-change="currentChange" :total="page_total" :page-size="page_size" background v-loading="loading"></el-pagination>
                    </el-col>
                </el-row>
            </template>
        </div>
    </div>
    <script>
        var vm = new Vue({
        el:"#app",
        delimiters: ['[[', ']]'],
            data() {
                let data = {!! $page_list ?: "{}" !!};
                for(let i=0;i<data.data.length;i++){
                    if(!data.data[i].card_statistics){
                        data.data[i].card_statistics = {
                            visit:"",
                            visitor_num:"",
                            share:"",
                            save:"",
                            collection:"",
                            reliable:"",
                            fans:""
                        };
                    }
                }
                let role_list = {!! $role_list ?: '{}' !!};
                role_list['0']="全部角色";
                return{
                    list:data.data,
                    loading:false,
                    table_loading:false,
                    submit_loading:false,
                    page_total:data.total,
                    page_size:data.per_page,
                    current_page:data.current_page,
                    search_form:{},
                    type_list:[
                        {id:0,name:"全部类型"},
                        {id:1,name:"访问次数"},
                        {id:2,name:"访问人数"},
                        {id:3,name:"分享次数"},
                        {id:4,name:"保存次数"},
                        {id:5,name:"收藏次数"},
                        {id:6,name:"靠谱次数"},
                        {id:7,name:"新增会员"},
                    ],
                    role_list :role_list ,
                    level_list:[
                        
                    ],
                    status_list:[
                        {id:2,name:"全部状态"},
                        {id:0,name:"关闭"},
                        {id:1,name:"开启"},
                    ],
                }
            },
            methods: {
                levelRole(h){
                    return [h('p', {}, ['等级']), h('p', {}, ['角色'])]
                },
                visitNumber(h){
                    return [h('p', {}, ['访问次数']), h('p', {}, ['访问人数'])]
                },
                shareNumber(h){
                    return [h('p', {}, ['分享次数']), h('p', {}, ['保存次数'])]
                },
                collectNumber(h){
                    return [h('p', {}, ['收藏次数']), h('p', {}, ['靠谱次数'])]
                },
                memberMsg(h){
                    return [h('p', {}, ['姓名']), h('p', {}, ['手机号'])]
                },
                copy(row,index) {
                    that = this;
                    let Url = that.$refs['copy'+index];
                    Url.select(); // 选择对象
                    document.execCommand("Copy",false);
                    that.$message({message:"复制成功！",type:"success"});
                },
                statusChange(index,row,id) {
                    console.log(id);
                    this.submit_loading = true;
                    this.$http.post('{!! yzWebFullUrl('plugin.business-card.admin.controllers.card.change-status') !!}',{card_id:id,status:row.status}).then(function (response) {
                        if (response.data.result){
                            if(row.status){
                                this.$message({message: '开启成功',type: 'success'});
                            }
                            else {
                                this.$message({message: '关闭成功',type: 'success'});
                            }
                        }
                        else {
                            this.$message({message: response.data.msg,type: 'error'});
                            if (this.list[index].status==1){
                                this.list[index].status = 0;
                            }
                            else{
                                this.list[index].status = 1;
                            }
                        }
                        this.submit_loading = false;
                    },function (response) {
                        this.$message({message: response.data.msg,type: 'error'});
                        if (this.list[index].status==1){
                            this.list[index].status = 0;
                        }
                        else{
                            this.list[index].status = 1;
                        }
                        this.submit_loading = false;
                    });
                },
                search(){
                    this.search_loading=true;
                    this.$http.post('{!! yzWebFullUrl('plugin.business-card.admin.controllers.card.search') !!}',{search_form:this.search_form}
                    ).then(function (response) {
                            if (response.data.result){
                                this.list = response.data.data.data;
                                this.search_loading = false;
                            }
                            else {
                                this.$message({message: response.data.msg,type: 'error'});
                            }
                            this.search_loading = false;
                        },function (response) {
                            this.search_loading = false;
                            this.$message({message: response.data.msg,type: 'error'});
                        }
                    );
                },

                currentChange(val) {
                    this.loading = true;
                    this.$http.post('{!! yzWebFullUrl('plugin.business-card.admin.controllers.card.search') !!}',{page:val}).then(function (response){
                        let datas = response.data.data;
                        this.page_total = datas.total;
                        this.list = datas.data;
                        this.page_size = datas.per_page;
                        this.current_page = datas.current_page;
                        this.loading = false;
                    },function (response) {
                        this.loading = false;
                    }
                    );
                }
            },
        });
    </script>

@endsection