@extends('layouts.base')
@section('title', "名片编辑")
@section('content')

    <style>
        .rightlist #app .rightlist-head{padding:15px 0;line-height:50px;border-bottom:1px solid #ccc;}
        .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;}
        
        .avatar-uploader .el-upload {margin-top:15px;border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;}
        .avatar-uploader .el-upload:hover {border-color: #409EFF;}
        .avatar-uploader-icon {font-size: 28px;color: #8c939d;width: 178px;height: 178px;line-height: 178px;text-align: center;}
        .avatar {width: 178px;height: 178px;display: block;}
        .el-upload-tip{width:178px;margin:0;padding:0;color:#999;text-align:center;}
        input[type=file] {display: none;}
        .avatar-uploader-box{position:relative;width:200px;}
        .el-icon-circle-close{position:absolute;top:10px;right:0;color:#999;}
        .tip{font-size:12px;color:#999;}
    </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 ref="form" :model="form" :rules="rules" ref="form" label-width="15%">
                <el-breadcrumb separator-class="el-icon-arrow-right" style="padding:20px 0;font-size:16px;">
                    <el-breadcrumb-item><a href="{{ yzWebFullUrl('plugin.business-card.admin.controllers.card.card-list') }}">名片管理</a></el-breadcrumb-item>
                    <el-breadcrumb-item>编辑</el-breadcrumb-item>
                </el-breadcrumb>
                <el-form-item label="名片状态" prop="status">
                    <el-radio v-model.number="form.status" :label="1">开启</el-radio>
                    <el-radio v-model.number="form.status" :label="0">关闭</el-radio>
                    <div class="tip">关闭后用户无法访问您的名片首页！</div>
                </el-form-item>
                <h5 class="rightlist-head">
                    基本信息
                </h5>
                <el-form-item label="头像" prop="card_avatar">
                    <div class="avatar-uploader-box">
                        <el-upload class="avatar-uploader" action="{{ yzWebFullUrl('plugin.business-card.admin.controllers.set.upload-local') }}" accept="image/*" :show-file-list="false" :on-success="uploadSuccess" :before-upload="beforeUpload">
                            <img v-if="form.card_avatar" :src="form.card_avatar" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            <div slot="tip" class="el-upload-tip">(点击上框进行图片选择)</div>
                        </el-upload>
                        <a href="#" v-show="form.card_avatar" class="el-icon-circle-close" @click="clearImg" title="点击清除图片"></a>
                    </div>
                </el-form-item>
                <el-form-item label="姓名" prop="card_name">
                    <el-input v-model="form.card_name" style="width:70%"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="card_mobile">
                    <el-input v-model="form.card_mobile" style="width:70%"></el-input>
                </el-form-item>
                <el-form-item label="微信号" prop="card_wechat">
                    <el-input v-model="form.card_wechat" style="width:70%"></el-input>
                </el-form-item>
                <el-form-item label="公司名称" prop="company">
                    <el-input v-model="form.company" style="width:70%"></el-input>
                </el-form-item>
                <el-form-item label="角色选择" prop="role">
                    <el-select v-model="form.role_id" placeholder="选择角色" style="width:30%">
                        <el-option v-for="(item,index) in role_list" :key="index" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="选择城市" prop="areas" v-loading="areaLoading">
                    <el-select v-model="p.province" placeholder="请选择省" clearable @change="changeProvince" style="width:17.5%">
                        <el-option v-for="item in province_list" :key="item.id" :label="item.areaname" :value="item.id"></el-option>
                    </el-select>
                    <el-select v-model="p.city" placeholder="请选择市" clearable @change="changeCity" style="width:17.5%">
                        <el-option v-for="item in city_list" :key="item.id" :label="item.areaname" :value="item.id"></el-option>
                    </el-select>
                    <el-select v-model="p.district" placeholder="请选择区" clearable @change="changeDistrict" style="width:17.5%">
                        <el-option v-for="item in district_list" :key="item.id" :label="item.areaname" :value="item.id"></el-option>
                    </el-select>
                    <el-select v-model="p.street" placeholder="请选择街道" clearable style="width:17.5%">
                        <el-option v-for="item in street_list" :key="item.id" :label="item.areaname" :value="item.id"></el-option>
                    </el-select>
                    <!-- <el-cascader style="width: 70%" v-model="form.areas" v-loading="areaLoading" :options="areas" @active-item-change="loadAreas" :props="props"> -->
                </el-form-item>

                </el-cascader>

                <el-form-item label="详细地址" prop="address">
                    <el-input v-model="form.address" placeholder="请输入详细地址" style="width:70%"></el-input>
                </el-form-item>
                <h5 class="rightlist-head">
                    名片设置
                </h5>
                <el-form-item label="我的简介" prop="introduction">
                    <el-input v-model="form.introduction" style="width:70%" type="textarea" rows="5"></el-input>
                </el-form-item>
                {{--<el-form-item label="我的声音" prop="voice">--}}
                    {{--<el-input v-model="form.voice" style="width:70%"></el-input>--}}
                {{--</el-form-item>--}}
                <el-form-item label="我的图片" prop="picture">
                    <el-upload action="{{ yzWebFullUrl('plugin.business-card.admin.controllers.set.upload') }}" list-type="picture-card" :file-list="form.thumb_list" multiple :on-success="uploadBannerSuccess" :on-remove="clearImgList" :before-upload="beforeUpload">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
                
                <el-form-item label="" prop="">
                    <el-button @click="submit('form')">
                        保存
                    </el-button>
                    
                </el-form-item>
            </el-form>
        </div>
    </div>
    <script>
        var vm = new Vue({
        el:"#app",
        delimiters: ['[[', ']]'],
            data() {
                let role_list = JSON.parse('{!! $role_list !!}')
                let card_data = JSON.parse('{!! $cardData !!}')
                let id = {!! $id !!}
                console.log(card_data);
                console.log(role_list)
                
                var new_arr=[];
                for(var i in role_list) {
                    new_arr.push({id:parseInt(i),name:role_list[i]})
                }
                
                return{
                    loading:false,
                    submit_loading:false,
                    table_loading:false,
                    areas: [],
                    areaLoading: false,
                    asset_list:[],
                    form:{
                        id:id,
                        picture:[],
                        thumb_list:[],
                        ...card_data
                    },
                    p:{
                        province:'',
                        city:'',
                        district:'',
                        street:'',
                    },
                    rules:{},
                    role_list:new_arr,
                    level_list:[

                    ],
                    province_list:[],
                    city_list:[],
                    district_list:[],
                    street_list:[],
                    props: {
                        label: 'areaname',
                        value: 'id',
                        children: 'children'
                    },
                }
            },
            mounted: function () {
                this.initAreas();
                this.initProvince();
                this.changeProvince(this.form.areas[0]);
                this.changeCity(this.form.areas[1]);
                this.changeDistrict(this.form.areas[2]);

                this.p.province = this.form.areas[0];
                this.p.city = this.form.areas[1];
                this.p.district = this.form.areas[2];
                this.p.street = this.form.areas[3];
                
            },
            created(){
                var url_list = [];
                var thumb_list = [];
                if(this.form.picture==null) {
                    this.form.picture = [];
                }
                for (var i=0;i<this.form.picture.length;i++){
                    url_list.push({name : this.form.picture[i],url :this.form.picture[i]});
                }
                this.form.thumb_list = url_list;
            },

            methods: {
                uploadSuccess(res, file) {
                    if (res.result == 1) {
                        this.form.card_avatar = res.data.img_url;
                        // this.form.card_avatar_url = res.data.img;
                        this.$message.success("上传成功！");
                    } else {
                        this.$message.error(res.msg);
                    }
                    this.submit_loading = false;
                },
                clearImg() {
                    console.log('clearaa');
                    this.form.card_avatar = "";
                    // this.form.card_avatar_url = "";
                },
                beforeUpload(file) {
                    this.submit_loading = true;
                    const isLt2M = file.size / 1024 / 1024 < 2;
                    if (!isLt2M) {
                        this.$message.error('上传图片大小不能超过 2MB!');
                        this.submit_loading = false;
                    }
                    return isLt2M;
                },
                uploadBannerSuccess (res,file) {
                    if (res.result == 1) {
                        this.form.picture.push(res.data.img_url);
                        // this.form.thumb_list.push({name:res.data.img_url,url:res.data.img_url});
                        this.$message.success("上传成功！");
                    } else {
                        this.$message.error(res.msg);
                    }
                    this.submit_loading = false;
                },
                clearImgList(file, fileList) {
                    this.form.picture = fileList;
                    var new_url = [];
                    for(var i=0;i<fileList.length;i++){
                        new_url.push(fileList[i].name);
                    }
                    this.form.picture = new_url;
                },
                submit(formName) {
                    console.log(this.form);
                    this.$refs[formName].validate((valid) => {
                        this.form.areas = [];
                        this.form.areas.push(this.p.province,this.p.city,this.p.district,this.p.street);
                        console.log(this.form);
                        if (valid) {
                            delete(this.form.card_avatar_url)
                            this.submit_loading = true;
                        
                            this.$http.post("{!! yzWebFullUrl('plugin.business-card.admin.controllers.card.edit') !!}",{id:this.form.id,'form_data':this.form}).then(response => {
                                if (response.data.result) {
                                    this.$message({type: 'success',message: '操作成功!'});
                                    // window.location.href='{!! yzWebFullUrl('plugin.business-card.admin.controllers.card.card-list') !!}';
                                    this.submit_loading = false;
                                } else {
                                    this.$message({message: response.data.msg,type: 'error'});
                                    this.submit_loading = false;
                                }
                            },response => {
                                this.submit_loading = false;
                            });
                         }
                        else {
                            console.log('error submit!!');
                            return false;
                        }
                     });
                },
                initAreas(){
                    this._initAreas('areas', 'areaLoading');
                },
                loadAreas(val) {
                    this._loadAreas(val, 'areas', 'areaLoading');
                },
                _initAreas(areasName, areaLoadingName) {
                    this[areaLoadingName] = true;
                    return this.$http.get("{!! yzWebUrl('area.list.init', ['area_ids'=>'']) !!}"+this.form[areasName]).then(response => {
                        this[areasName] = response.data.data;
                        this[areaLoadingName] = false;
                    }, response => {
                        this[areaLoadingName] = false;
                    });
                },
                _loadAreas(val, areasName, loadingName) {
                    this[loadingName] = true;
                    let leafAreas = this.findInAreas(this[areasName], val.values(),val);
                    let url = "{!! yzWebUrl('area.list', ['parent_id'=> '']) !!}" + leafAreas.id;
                    this.$http.get(url).then(response => {

                        if (response.data.data.length) {
                            leafAreas.children = response.data.data;
                        } else {
                            leafAreas.children = null;
                        }
                        this[loadingName] = false;
                    }, response => {
                        this[loadingName] = false;
                    });
                },
                findInAreas(areas, areaIds,val) {
                    // 找到当前选中地区option对应的model
                    console.log(areas)
                    let parentId = val[val.length-1];
                    if(val.length==1){
                        var result = areas.find(function (area) {
                        return (area.id == parentId);
                        });
                    }
                    if(val.length==2){
                        for(var i=0;i<areas.length;i++){
                            if(areas[i].id == val[0]){
                                for(var j=0;j<areas[i].children.length;j++){
                                    if(areas[i].children[j].id==val[1]){
                                        result = areas[i].children[j];
                                    }
                                }
                            }
                        }
                    }
                    if(val.length==3){
                        for(var i=0;i<areas.length;i++){
                            if(areas[i].id == val[0]){
                                for(var j=0;j<areas[i].children.length;j++){
                                    if(areas[i].children[j].id==val[1]){
                                        for(var k=0;k<areas[i].children[j].children.length;k++){
                                            if(areas[i].children[j].children[k].id==val[2]){
                                                result = areas[i].children[j].children[k];
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                        return result;
                },
                // 初始化省
                initProvince(val) {
                    console.log(val);
                    this.areaLoading = true;
                    this.$http.get("{!! yzWebUrl('area.list.init', ['area_ids'=>'']) !!}"+val).then(response => {
                        this.province_list = response.data.data;
                        this.areaLoading = false;
                    }, response => {
                        this.areaLoading = false;
                    });
                },
                // 省改变
                changeProvince(val) {
                    this.city_list = [];
                    this.district_list = [];
                    this.street_list = [];
                    this.p.city = "";
                    this.p.district = "";
                    this.p.street = "";
                    this.areaLoading = true;
                    let url = "{!! yzWebUrl('area.list', ['parent_id'=> '']) !!}" + val;
                    this.$http.get(url).then(response => {
                        if (response.data.data.length) {
                            this.city_list = response.data.data;
                        } else {
                            this.city_list = null;
                        }
                        this.areaLoading = false;
                    }, response => {
                        this.areaLoading = false;
                    });
                },
                // 市改变
                changeCity(val) {
                    this.district_list = [];
                    this.street_list = [];
                    this.p.district = "";
                    this.p.street = "";
                    this.areaLoading = true;
                    let url = "{!! yzWebUrl('area.list', ['parent_id'=> '']) !!}" + val;
                    this.$http.get(url).then(response => {
                        if (response.data.data.length) {
                            this.district_list = response.data.data;
                        } else {
                            this.district_list = null;
                        }
                        this.areaLoading = false;
                    }, response => {
                        this.areaLoading = false;
                    });
                },
                // 区改变
                changeDistrict(val) {
                    console.log(val)
                    this.street_list = [];
                    this.p.street = "";
                    this.areaLoading = true;
                    let url = "{!! yzWebUrl('area.list', ['parent_id'=> '']) !!}" + val;
                    this.$http.get(url).then(response => {
                        if (response.data.data.length) {
                            this.street_list = response.data.data;
                        } else {
                            this.street_list = null;
                        }
                        this.areaLoading = false;
                    }, response => {
                        this.areaLoading = false;
                    });
                },
            },
        });
    </script>

@endsection