@extends('layouts.base')
@section('title', '添加库存')
@section('content')
    <link rel="stylesheet" href="{{resource_get('plugins/agency/src/common/static/index.css')}}">
    <link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-goods1.css')}}"/>

    <!-- <script src="{{resource_get('app/common/components/ueditor/dialogs/map/getscript.js?v=1.1&ak=&services=true&t=20130716024058')}}"></script>  -->
    <!-- app\common\components\ueditor\dialogs\map\getscript.js -->
    <div class="all">
        <div id="app" v-cloak>
            <el-form ref="form" :model="form" :rules="rules" label-width="15%">
                <div class="vue-head" style="margin-top:20px">
                    <div class="vue-main-title">
                        <div class="vue-main-title-left"></div>
                        <div class="vue-main-title-content">添加库存</div>
                    </div>
                    <div class="vue-main-form">
                        <el-form-item label="代理商" prop="uid">
                            <div class="upload-box" @click="openMember('uid')" v-if="!form.uid">
                                <div class="upload-box-member">
                                    <i class="el-icon-plus" style="font-size:32px"></i><br>
                                    选 择
                                </div>
                            </div>
                            <div class="upload-boxed" v-if="form.uid">
                                <img @click="openMember('uid')" :src="choosed_store.avatar" alt="" style="width:150px;height:150px;border-radius: 5px;cursor: pointer;" />
                                <div class="upload-boxed-text">重新选择</div>
                                <div class="upload-boxed-text-clear" @click="clearMember('uid')">清除选择</div>
                                <div style="text-align:center;line-height: 20px;">[[choosed_store.nickname]]</div>
                            </div>
                        </el-form-item>
                        <el-form-item label="云库存商品" >
                            <div style="display:flex;">
                                <div class="good" v-for="(item,index,key) in thumbList" style="width:150px;display:flex;margin-right:20px;flex-direction: column">
                                    <div class="img" style="position:relative;">
                                        <a style="color:#333;"><div style="width: 20px;height: 20px;background-color: #dde2ee;display:flex;align-items:center;justify-content:center; position:absolute;right:-10px;top:-10px;border-radius:50%;" @click="delGoods(item)" :disabled="form.id != 0">X</div></a>
                                        <img :src="item.thumb" style="width:150px;height:150px;">
                                    </div>
                                    <div style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;font-size:12px;">[[item.title]][ID:[[item.id]]]</div>

                                    <div v-if="(options.length)>0">
                                        <el-select v-model="form.goods_option_id" placeholder="商品规格" clearable style="min-width: 200px;"  >
                                            <el-option
                                                    v-for="item in options"
                                                    :key="item.id"
                                                    :label="item.title"
                                                    :value="item.id+''">
                                            </el-option>
                                        </el-select>
                                    </div>
                                </div>
                                <div class="upload-box" @click="openGoods()" v-if="!form.goods_id">
                                    <div class="upload-box-member">
                                        <i class="el-icon-plus" style="font-size:32px"></i><br>
                                        选择云库存商品
                                    </div>
                                </div>
                            </div>
                        </el-form-item>

                        <el-form-item label="库存数量" prop="stock">
                            <el-input v-model="form.stock" onkeyup="this.value=this.value.replace(/\D/g,'')"onafterpaste="this.value=this.value.replace(/\D/g,'')" style="width:50%;"></el-input>
                        </el-form-item>
                        <el-form-item label="采购价" prop="buying_price">
                            <el-input v-model="form.buying_price" onkeyup="this.value=this.value.match(/\d+(\.\d{0,2})?/)?this.value.match(/\d+(\.\d{0,2})?/)[0]:''" style="width:50%;"></el-input>
                        </el-form-item>
                    </div>
                </div>
            </el-form>
            <!-- 分页 -->
            <div class="vue-page">
                <div class="vue-center">
                    <el-button type="primary" @click="submitForm('form')">保存</el-button>
                    <el-button @click="goBack">返回</el-button>
                </div>
            </div>
            <!-- 选择会员 -->
            <el-dialog title="选择代理商" :visible.sync="member_show" width="60%">
                <div>
                    <el-input v-model="member_keyword" style="width:60%;" placeholder="代理商会员信息"></el-input>
                    <el-button @click="getMember" >搜索</el-button>
                </div>
                <el-table :data="member_list" style="width: 100%;height:500px;overflow:auto" v-loading="loading">
                    <el-table-column label="ID" prop="uid" align="center" width="100px"></el-table-column>
                    <el-table-column label="代理商会员信息">
                        <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 prop="refund_time" label="操作" align="center" width="320">
                        <template slot-scope="scope">
                            <el-button @click="chooseMember(scope.row)">
                                选择
                            </el-button>

                        </template>
                    </el-table-column>
                </el-table>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="member_show = false">取 消</el-button>
                </span>

            </el-dialog>

            <el-dialog :visible.sync="goodsShow" width="60%" center title="选择商品">
                <div>
                    <div style="text-align: center">
                        <el-input v-model="search_form.keyword" style="width:80%"></el-input>
                        <el-button type="primary" @click="searchGoods()" style="margin-left:20px;">搜索</el-button>
                    </div>
                    <el-table :data="goods_list" style="width: 100%;height:600px;overflow-y:auto"  >

                        <el-table-column prop="id" label="ID"  align="center"></el-table-column>
                        <el-table-column prop="id" label="商品"  align="center">
                            <template slot-scope="scope">
                                <div style="display:flex;align-items:center;justify-content:center;">
                                    <img :src="scope.row.thumb" alt="" style="width:50px;height:50px;">
                                    <div style="margin-left:10px">[[scope.row.title]]</div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="refund_time" label="操作" align="center" >
                            <template slot-scope="scope">
                                <el-button  @click="sureGoods(scope.row)" v-if="!scope.row.checked">
                                    选择
                                </el-button>
                                <el-button disabled v-if="scope.row.checked">
                                    选择
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <el-row>
                    <el-col :span="24" align="right" migra style="padding:15px 5% 15px 0" v-loading="loading">
                        <el-pagination background layout="prev, pager, next" @current-change="currentChange" :total="page_total"
                                       :page-size="page_size" :current-page="current_page"></el-pagination>
                    </el-col>
                </el-row>
            </el-dialog>

        </div>
    </div>
    <script src="{{resource_get('static/yunshop/tinymce4.7.5/tinymce.min.js')}}"></script>
    <!-- <script src="{{resource_get('static/yunshop/tinymceTemplate.js')}}"></script> -->

    @include('public.admin.tinymceee')
    @include('public.admin.uploadImg')
    @include('public.admin.uploadImgList')


    <script>

        var app = new Vue({
            el:"#app",
            delimiters: ['[[', ']]'],
            name: 'test',
            data() {
                let id = {!! $id?:0 !!};
                console.log(id);
                return{
                    id:id,
                    form:{
                        uid:0,
                        goods_id:0,
                        goods_option_id:0,
                        stock:0,
                        buying_price:0,
                    },
                    submit_url:'',
                    loading: false,
                    choose_center:[],
                    choose_marker:[],
                    // 会员
                    member_keyword:'',
                    member_show:false,
                    member_list:[],
                    choose_member_type:'',
                    choosed_boss:{},
                    choosed_store:{},
                    rules:{

                    },

                    thumbList:[],
                    goodsShow:false,
                    search_form:{},
                    search_goods:{},
                    goods_list:[],
                    list:[],
                    goods_total:0,
                    goods_per_size:0,
                    goods_current_page:0,
                    page_total:0,
                    page_size:0,
                    current_page:0,
                    options:[],
                }
            },
            created() {

            },
            mounted() {
                this.submit_url = `{!! yzWebFullUrl('plugin.agency.admin.stock.addStockStore') !!}`;
            },
            methods: {
                openGoods() {
                    if(this.form.id) {
                        return
                    }
                    this.goodsShow = true;
                },
                searchGoods() {
                    let that = this;
                    this.$http.post('{!! yzWebFullUrl('plugin.agency.admin.stock.searchGoods') !!}',{keyword:this.search_form.keyword}).then(response => {
                        if (response.data.result) {
                            let data = response.data.data.goods;
                            this.page_total = data.total;
                            this.goods_list = data.data;
                            this.page_size = data.per_page;
                            this.current_page = data.current_page;
                            this.goods_list.forEach((item,index)=>{
                                if(this.form.goods_id==item.id){
                                    item.checked=true
                                }else{
                                    item.checked=false
                                }
                            })
                            this.goods_list.push({})
                            this.goods_list.splice(this.goods_list.length-1,1)

                        } else {
                            this.$message({message: response.data.msg,type: 'error'});
                        }

                    },response => {
                        this.$message({message: response.data.msg,type: 'error'});
                    });
                },
                // 商品分页
                currentChange(val) {
                    this.loading = true;
                    this.$http.post('{!! yzWebFullUrl('plugin.luck-draw.admin.activity.searchGoods') !!}',{page:val,keyword:this.search_form.keyword}).then(function (response){
                            let datas = response.data.data.goods;
                            this.page_total = datas.total;
                            this.goods_list = datas.data;
                            this.page_size = datas.per_page;
                            this.current_page = datas.current_page;
                            this.loading = false;
                            this.goods_list.forEach((item,index)=>{
                                if(this.form.goods_id==item.id){
                                    item.checked=true
                                }else{
                                    item.checked=false
                                }
                            })
                            this.goods_list.push({})
                            this.goods_list.splice(this.goods_list.length-1,1)
                        },function (response) {
                            console.log(response);
                            this.loading = false;
                        }
                    );
                },
                delGoods(item){
                    if(this.form.id) {
                        return
                    }
                    this.thumbList.forEach((list,index)=>{
                        if(list.id==item.id){
                            this.goods_list.forEach((obj,index)=>{
                                if(obj.id==item.id){
                                    obj.checked=false
                                }
                            })
                            this.thumbList.splice(index,1)
                            this.form.goods_id=''
                        }
                    })
                    this.goods_list.push({})
                    this.goods_list.splice(this.goods_list.length-1,1)
                },
                //选择商品
                sureGoods(item) {
                    this.thumbList=[]
                    this.option=[]
                    this.thumbList.push(item)
                    this.form.goods_id=item.id
//                this.form.goods_name=item.title
                    if (item.has_many_options.length>0) {
                        item.has_many_options.forEach((option,index)=>{
                            option.price = option.product_price;
                        })
                    }

                    this.form.option=item.has_many_options
                    this.options = item.has_many_options

                    this.goods_list.forEach((item,index)=>{
                        if(this.form.goods_id==item.id){
                            item.checked=true
                        }else{
                            item.checked=false
                        }
                    })
                    this.goods_list.push({})
                    this.goods_list.splice(this.goods_list.length-1,1)
                    this.goodsShow=false
                },


                submitForm(formName) {
                    var that = this;
                    let re_form = JSON.parse(JSON.stringify(this.form));
                    if (re_form.option.length > 0 && Number(re_form.goods_option_id) <= 0) {
                        that.$message.error("请选择商品规格");
                        that.loading = false;
                        return ;
                    }
                    if(re_form.uid <= 0) {
                        that.$message.error("请选择代理商");
                        that.loading = false;
                        return ;
                    }
                    if(re_form.goods_id <= 0) {
                        that.$message.error("请选择云库存商品");
                        that.loading = false;
                        return ;
                    }
                    if(re_form.stock <= 0) {
                        that.$message.error("请输入库存数量");
                        that.loading = false;
                        return ;
                    }
                    if(re_form.buying_price <= 0) {
                        that.$message.error("请输入采购价格");
                        that.loading = false;
                        return ;
                    }
                    let json = {
                        uid:this.form.uid,
                        goods_id:this.form.goods_id,
                        goods_option_id:this.form.goods_option_id,
                        stock:this.form.stock,
                        buying_price:this.form.buying_price
                    };
                    this.$refs[formName].validate((valid,object) => {
                        if (valid) {
                            let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                            this.$http.post(this.submit_url,{'data': json}).then(response => {
                                if (response.data.result) {
                                    this.$message({type: 'success',message: '操作成功!'});
                                    this.goBack();
                                } else {
                                    this.$message({message: response.data.msg,type: 'error'});
                                }
                                loading.close();
                            },response => {
                                loading.close();
                            });
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
                goBack() {
                    history.go(-1)
                },
                openMember(type) {
                    this.member_show = true;
                    this.choose_member_type = type;
                },
                getMember(){

                    this.$http.post("{!! yzWebUrl('plugin.agency.admin.stock.memberQuery') !!}",{keyword:this.member_keyword}).then(response => {
                        if (response.data.result) {
                            this.member_list=response.data.data
                        }else{
                            this.$message({type: 'error',message: response.data.msg});
                        }
                    }, response => {
                        this.$message({type: 'error',message: response.data.msg});
                        console.log(response);
                    });
                },
                chooseMember(row) {
                    let that = this;
                    if(this.choose_member_type !="salers") {
                        if(this.choose_member_type == "boss_uid") {
                            this.choosed_boss = row;
                        }
                        else if(this.choose_member_type == "uid") {
                            this.choosed_store = row;
                        }
                        this.form[this.choose_member_type] = row.uid
                        this.member_show = false;
                        console.log(this.form)
                    }
                    // 多选
                    else {
                        for(let i in this.form.salers) {
                            if(row.uid == i) {
                                this.$message.error("该会员已选择，请勿重复选择！");
                                return;
                            }
                        }
                        that.form.salers[row.uid] = row;
                        console.log(this.form.salers)
                    }

                },
                clearMember(type) {
                    if(this.choose_member_type == "boss_uid") {
                        this.choosed_boss = {};
                    }
                    else if(this.choose_member_type == "uid") {
                        this.choosed_store = {};
                    }
                    this.form[type] = "";
                    this.$forceUpdate();
                },
                clearMember1(type,index,key) {
                    console.log(index,key);
                    delete(this.form[type][key]);
                    console.log(this.form[type]);
                    this.$forceUpdate();

                },
            },
        })

    </script>
@endsection