@extends('layouts.base')
@section('title', '帖子详情')
@section('content')
<link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-goods1.css')}}"/>
<link rel="stylesheet" href="{{static_url('css/public-number.css')}}">
<style>
    .el-table::before {
        height: 0px !important;
    }
    th {border-bottom: 1px solid #EBEEF5 !important;}
    .dialog-cover{z-index:2001}
    .dialog-content{z-index:2002}

    .upload-boxed.post_img-upload {
        line-height: 150px;
        text-align: center;
        background:#f5f5f5;
        cursor: pointer;
    }
    .upload-boxed.post_img-upload i {
        font-size:40px;
    }
    .post_img-list {
        display:inline-flex;
        column-gap:10px;
        align-items: center;
        vertical-align: top;
    }
    .post_img-item {
        position:relative;
    }
    .post_img-item i {
        position: absolute;
        right:-4px;
        top:-4px;
        padding:4px;
        color:white;
        cursor: pointer;
        background-color:rgba(0,0,0,0.8);
        border-radius:50%;
    }
</style>
    <div class="all">
        <div id="app" v-cloak>
            <el-form ref="form" :model="form" :rules="rules" label-width="15%">
                <div class="vue-main">
                    <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="">
                            <div style="display:flex">
                                <img :src="form.avatar" alt="" style="width:50px;height:50px;margin-right:10px">
                                <div>[[form.nickname]]</div>
                            </div>
                        </el-form-item>
                        <el-form-item label="发布时间" prop="">
                            <div>[[form.created_at]]</div>
                        </el-form-item>
                        <el-form-item label="帖子标题" prop="title">
                            <el-input v-model="form.title" style="width:70%;"></el-input>
                        </el-form-item>
                        <el-form-item label="帖子内容" prop="content">
                            <el-input type="textarea" rows="5" v-model="form.content" style="width:70%;"></el-input>
                        </el-form-item>

                        <!-- <el-form-item label="帖子图片" prop="alias">

                            <div class="upload-boxed-list">
                                <div class="upload-boxed-list-a" v-for="(item,index) in form.tomedia_img" :key="index">
                                    <img :src="item" alt="" style="width:150px;height:150px;border-radius: 5px;">
                                    <i class="el-icon-close" @click="clearImg('img','list',index)" title="点击清除图片"></i>
                                </div>
                                <div class="upload-box" @click="openUpload('img',1,'more')">
                                    <i class="el-icon-plus" style="font-size:32px"></i>
                                </div>
                            </div>

                        </el-form-item> -->
                        <el-form-item label="帖子图片" prop="tomedia_img">
                            <!-- <div class="upload-box" @click="openUpload('img',1,'more')" v-if="!form.tomedia_img">
                                <i class="el-icon-plus" style="font-size:32px"></i>
                            </div> -->
                            <div @click="openUpload('img',1,'more')" class="upload-boxed post_img-upload" style="display:inline-block;" >
                                <i class="el-icon-upload2"></i>
                                <div class="upload-boxed-text">点击上传</div>
                            </div>
                            <div class="post_img-list">
                                <div class="post_img-item" v-for="(imgItem,itemIndex) in form.tomedia_img" :key="imgItem">
                                    <i class="el-icon-close" @click="removePostImage(itemIndex)" title="点击清除图片"></i>
                                    <img :src="imgItem" style="width:150px;height:150px;border-radius: 5px;cursor: pointer;" >
                                </div>
                            </div>
                        </el-form-item>

                        <el-form-item label="帖子商品" prop="goods_id">
                            <div class="upload-box" @click="openGoods('goods_id')" v-if="!form.goods_id">
                                <div>
                                    <i class="el-icon-plus" style="font-size:32px"></i>
                                </div>
                                <div>选择商品</div>
                            </div>
                            <div @click="openGoods('goods_id')" class="upload-boxed" v-if="form.goods_id" style="margin-bottom:36px">
                                <img :src="choosed_goods.thumb" alt="" style="width:150px;height:150px;border-radius: 5px;cursor: pointer;"></img>
                                <div class="upload-boxed-text">重新选择</div>
                                <div style="position: absolute;top: -3px;right: -3px;background: #333;line-height: 15px;color: #fff;border-radius: 50%;width: 14px;">
                                    <i class="el-icon-close" @click.stop="clearGoods('goods_id')" title="点击清除商品"></i>
                                </div>
                                <div style="line-height: 18px;font-weight:500;color:#333;text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;">【id:[[choosed_goods.id]]】[[choosed_goods.title]]</div>
                            </div>

                        </el-form-item>
                        <el-form-item label="帖子门店" prop="goods_id">
                            <div class="upload-box" @click="openStore('store_id')" v-if="!form.store_id">
                                <div>
                                    <i class="el-icon-plus" style="font-size:32px"></i>
                                </div>
                                <div>选择门店</div>
                            </div>
                            <div @click="openStore('store_id')" class="upload-boxed" v-if="form.store_id" style="margin-bottom:36px">
                                <el-image :src="choosed_store.thumb" alt="" style="width:150px;height:150px;border-radius: 5px;cursor: pointer;"></el-image>
                                <div class="upload-boxed-text">重新选择</div>
                                <div style="position: absolute;top: -3px;right: -3px;background: #333;line-height: 15px;color: #fff;border-radius: 50%;width: 14px;">
                                    <i class="el-icon-close" @click.stop="clearStore('store_id')" title="点击清除门店"></i>
                                </div>
                                <div style="line-height: 18px;font-weight:500;color:#333;text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;">【id:[[choosed_store.id]]】[[choosed_store.store_name]]</div>
                            </div>
                        </el-form-item>


                    </div>
                </div>
            </el-form>
            <!--弹框商品-->
            <el-dialog :visible.sync="goods_show" width="60%" center  title="选择商品">
                <div>
                    <div>
                        <el-input v-model="keyword" placeholder="商品标题" style="width:300px"></el-input>
                        <el-button type="primary" @click="searchGoods(1)">搜索</el-button>
                    </div>
                    <el-table :data="goods_list" style="width: 100%;height:500px;overflow:auto" id="goods-list">
                        <el-table-column label="ID" prop="id" align="center" width="150px">
                            <template slot-scope="scope">
                                <el-radio v-model="choosed_goods_id" :label="scope.row.id">&nbsp;</el-radio>
                            </template>
                        </el-table-column>
                        <el-table-column label="商品ID" prop="id" align="center" width="150px"></el-table-column>
                        <el-table-column label="商品">
                            <template slot-scope="scope">
                                <div style="display:flex;align-items: center">
                                    <div style="margin-right:10px">
                                        <el-image :src="scope.row.thumb" style="width:50px;height:50px"></el-image>
                                    </div>
                                    <div style="flex:1">
                                        <div style="color:#333;font-weight:500">[[scope.row.title]]</div>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>

                    </el-table>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="goods_show = false">取 消</el-button>
                    <el-button type="primary" @click="sureGoods">确 定 </el-button>
                </span>
            </el-dialog>
            <!--弹框门店-->
            <el-dialog :visible.sync="store_show" width="60%" center  title="选择门店">
                <div>
                    <div>
                        <el-input v-model="keyword" placeholder="门店" style="width:300px"></el-input>
                        <el-button type="primary" @click="searchStore(1)">搜索</el-button>
                    </div>
                    <el-table :data="store_list" style="width: 100%;height:500px;overflow:auto" id="store-list">
                        <el-table-column label="选择" prop="id" align="center" width="150px">
                            <template slot-scope="scope">
                                <el-radio v-model="choosed_store_id" :label="scope.row.id">&nbsp;</el-radio>
                            </template>
                        </el-table-column>
                        <el-table-column label="门店ID" prop="id" align="center" width="150px"></el-table-column>
                        <el-table-column label="门店">
                            <template slot-scope="scope">
                                <div style="display:flex;align-items: center">
                                    <div style="margin-right:10px">
                                        <el-image :src="scope.row.thumb" style="width:50px;height:50px"></el-image>
                                    </div>
                                    <div style="flex:1">
                                        <div style="color:#333;font-weight:500">[[scope.row.store_name]]</div>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>

                    </el-table>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="store_show = false">取 消</el-button>
                    <el-button type="primary" @click="sureStore">确 定 </el-button>
                </span>
            </el-dialog>
            <!-- 分页 -->
            <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>
            <upload-multimedia-img :upload-show="uploadShow" :type="type" :name="chooseImgName" :sel-Num="selNum" @replace="changeProp" @sure="sureImg"></upload-multimedia-img>

        </div>
    </div>

    @include('public.admin.uploadMultimediaImg')
    <script>
        let data = {!! json_encode($data) !!}
        console.log(data)
        var app = new Vue({
            el:"#app",
            delimiters: ['[[', ']]'],
            name: 'test',
            data() {
                return{
                    id:0,
                    type:'',
                    category_list:data.cat,
                    form:{
                        ...data
                    },
                    uploadShow:false,
                    chooseImgName:'',
                    submit_url:'',
                    showVisible:false,

                    goods_show:false,
                    goods_list:[],
                    keyword:'',
                    choosed_goods:{},
                    choosed_goods_id:'',
                    goods_total:1,
                    goods_current_page:1,
                    goods_per_page:1,

                    store_show:false,
                    store_list:[],
                    keyword:'',
                    choosed_store:{},
                    choosed_store_id:'',
                    store_total:1,
                    store_current_page:1,
                    store_per_page:1,

                    loading: false,
                    uploadImg1:'',
                    selNum:'',

                    rules:{
                        // name:{ required: true, message: '请输入轮播图标题'},
                    },

                }
            },
            created() {


            },
            mounted() {
                this.id = this.getParam("invitation_id");
                this.submit_url = `{!! yzWebFullUrl('plugin.circle.admin.invitation.editInvitation') !!}`
                this.choosed_goods = this.form.goods_id?this.form.goods[0]:{}
                this.choosed_store = this.form.store?this.form.store[0]:{};
                this.form.store_id = this.form.store?this.form.store[0].id:''
            },
            methods: {
                removePostImage(itemIndex){
                    this.form.img.splice(itemIndex,1);
                    this.form['tomedia_img'].splice(itemIndex,1);
                },
                getParam(name) {
                    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
                    var r = window.location.search.substr(1).match(reg);
                    if (r != null) return unescape(r[2]);
                    return null;
                },

                submitForm(formName) {
                    let that = this;
                    let json = {
                        invitation_id:this.id,
                        goods_id:this.form.goods_id,
                        store:this.form.store_id,
                        title:this.form.title,
                        content:this.form.content,
                        img:this.form.img,
                    };
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                            this.$http.post(this.submit_url,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)
                },
                openUpload(str,type,sel) {
                    this.chooseImgName = str;
                    this.uploadShow = true;
                    this.type = type//1图片类型
                    this.selNum = sel
                },
                changeProp(val) {
                    if(val == true) {
                        this.uploadShow = false;
                    }
                    else {
                        this.uploadShow = true;
                    }
                },
                sureImg(name,uploadShow,fileList) {
                    if(fileList.length <= 0) {
                        return
                    }
                    this.form[name] = [];
                    this.form['tomedia_'+name]=[];
                    fileList.forEach(item=>{
                        this.form[name].push(item.attachment);
                        this.form['tomedia_'+name].push(item.url);
                    })
                },
                clearImg(str,type,index) {
                    this.form[str] = "";
                    this.form['tomedia_'+str] = "";
                    this.$forceUpdate();
                },
                openGoods() {
                    this.goods_show = true;
                    this.choosed_goods_id = this.form.goods_id;
                },
                changeGoods(val,val1) {
                    console.log(val,val1)
                },
                searchGoods() {
                    let loading = this.$loading({target:document.querySelector("#goods-list"),background: 'rgba(0, 0, 0, 0)'});
                    this.$http.post("{!! yzWebFullUrl('goods.goods.get-search-goods-json') !!}",{keyword:this.keyword}).then(response => {
                        if(response.data.result == 1) {
                            if (response.data.result) {
                            this.goods_list = response.data.data.goods.data;
                            this.goods_total = response.data.data.goods.total;
                            this.goods_current_page = response.data.data.goods.current_page;
                            this.goods_per_page = response.data.data.goods.per_page;

                            this.goods_list.forEach((item,index) => {
                                if(item.title) {
                                    item.title = this.escapeHTML(item.title);
                                }
                            });
                            } else {
                                this.$message({message: response.data.msg,type: 'error'});
                            }
                        }
                        else {
                            this.$message.error(response.data.msg)
                        }

                        loading.close();
                    }, response => {
                        console.log(response);
                        loading.close();
                    });
                },
                sureGoods() {
                    this.form.goods_id = this.choosed_goods_id;
                    this.choosed_goods = {};
                    let obj = this.goods_list.find((item,index) => {
                        return item.id == this.choosed_goods_id;
                    })
                    this.choosed_goods = obj;
                    console.log(this.choosed_goods);
                    this.goods_show = false;
                },
                clearGoods() {
                    if(this.id) {
                        this.$message.error('不支持修改商品')
                        return;
                    }
                    this.choosed_goods = {}
                    this.form.goods_id = '';
                },
                openStore() {
                    this.store_show = true;
                    this.choosed_store_id = this.form.store_id;
                },

                searchStore() {
                    let loading = this.$loading({target:document.querySelector("#store-list"),background: 'rgba(0, 0, 0, 0)'});
                    this.$http.post("{!! yzWebFullUrl('plugin.circle.admin.invitation.searchStore') !!}",{keyword:this.keyword}).then(response => {
                        if(response.data.result == 1) {
                            if (response.data.result) {
                            this.store_list = response.data.data.data;
                            this.store_total = response.data.data.total;
                            this.store_current_page = response.data.data.current_page;
                            this.store_per_page = response.data.data.per_page;

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

                        loading.close();
                    }, response => {
                        console.log(response);
                        loading.close();
                    });
                },
                sureStore() {
                    this.form.store_id = this.choosed_store_id;
                    this.choosed_store = {};
                    let obj = this.store_list.find((item,index) => {
                        return item.id == this.choosed_store_id;
                    })
                    this.choosed_store = obj;
                    this.store_show = false;
                },
                clearStore() {
                    this.choosed_store = {}
                    this.form.store_id = '';
                },
                // 字符转义
                escapeHTML(a) {
                    a = "" + a;
                    return a.replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, "\"").replace(/&apos;/g, "'");;
                },

            },
        })

    </script>
@endsection