@extends('layouts.base')
@section('title', trans('编辑素材'))
@section('content')

@include('public.admin.uploadMultimediaImg')
<link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-goods1.css')}}" />
<style>
    .vue-main {
        padding: 10px 500px 10px 150px !important;
        
    }
    .el-form-item__label{
        color:#333333
    }
    .upload-box {
        flex-direction: column;
        margin-left: 15px;
        position: relative;
    }

    .tips {
        color: #8f8f8f;
    }

    .goods {
        margin-left: 10px;
    }
    .el-icon-error{
        font-size: 18px;
    }
</style>
<div id="app">
    <div class="all">
        <div class="vue-head">
            <div class="vue-main-title">
                <div class="vue-main-title-left"></div>
                <div class="vue-main-title-content">添加素材</div>
            </div>
            <div class="vue-main">
                <el-form label-position="right" label-width="80px" :model="form" ref="ruleForm" :rules="rules">
                    <el-form-item prop="title" label="标题" label-width="100px" required>
                        <el-input v-model="form.title"></el-input>
                    </el-form-item>
                    <el-form-item label="商品分类" label-width="100px" required>
                        <el-select v-model="category.parentid[0]" placeholder="请选择一级分类" @change="getChildCategory">
                            <el-option v-for="item in firstTypeOptions" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                        <el-select v-model="category.childid[0]" placeholder="请选择二级级分类">
                            <el-option v-for="item in secondTypeOptions" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="商品" label-width="100px">
                        <el-button type="primary" @click="selectShop">选择商品</el-button>
                        <div v-if="selectGoods" style="margin-top:10px;display:flex;flex-direction: column">
                            <div style="position: relative;">
                                <i class="el-icon-error" style="position: absolute;top: -5px;left: 140px;cursor: pointer;" @click="deleteGoods"></i>
                                <img :src="selectGoods.thumb" alt="" style="width: 150px;height:150px">
                            </div>
                            <span style="line-height: 16px;">[[selectGoods.title]]</span>
                            <span style="line-height: 16px;">[ID:[[selectGoods.id]]]</span>
                        </div>
                    </el-form-item>
                    <el-form-item prop="content" label="素材文案" label-width="100px" required>
                        <el-input type="textarea" placeholder="请输入文案 10-200字" v-model="form.content" maxlength="200" minlength="10" show-word-limit :rows="8">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="商品图" label-width="100px" required>
                        <div style="display: flex;">
                            <div :class=" index !== 0 ? 'goods' :''" v-for="(item,index) in form.images" :key="index" style="position: relative;">
                                <i class="el-icon-error" style=" position: absolute; right: 0;top: 0px;cursor: pointer;" @click="deleteGoodsPicture(index)"></i>
                                <img :src="item" alt="" style="width: 150px;height:150px">
                            </div>
                            <div class="upload-box" @click="uploadImgList">
                                <i class="el-icon-plus" style="font-size:32px"></i>
                                <div style="    width: 100%;
                                  text-align: center;
                                  margin-top: 0px;
                                  position: relative;
                                  top: 39px;
                                  background-color: #333333c2;
                                  color: #ffffff;">点击上传照片</div>
                            </div>
                        </div>
                        <div class="tips">建议尺寸:640*640，或正方形图片，最多添加9张图</div>
                    </el-form-item>
                    <el-form-item label="上传视频" label-width="100px">
                        <div style="display:flex;">
                            <div class="upload-box" @click="openVideoShow">
                                <video :src="form.videos.video_url" v-if="form.videos.video_url" style="width:150px;height:150px"></video>
                                <i class="el-icon-plus" style="font-size:32px" v-else></i>
                                <i class="el-icon-error" style=" position: absolute; right: 0;top: 0px;cursor: pointer;" @click="deleteVideo" v-if="form.videos.video_url"></i>
                                <div v-if="!form.videos.video_url" style="width: 100%;
                                  text-align: center;
                                  margin-top: 0px;
                                  position: relative;
                                  top: 39px;
                                  background-color: #333333c2;
                                  color: #ffffff;">点击重新上传视频</div>
                                <div v-else style="width: 100%;
                                  text-align: center;
                                  margin-top: 0px;
                                  position: relative;
                                  background-color: #333333c2;
                                  color: #ffffff;">点击重新上传视频</div>
                            </div>
                            <div class="upload-box" @click="uploadImageShow =true" :style="[{marginLeft:'100px'},{backgroundImage:form.videos.video_image? `url(${form.videos.video_image})`:''},{backgroundSize: '100% 100%'}]">
                                <i class="el-icon-plus" style="font-size:32px" v-if="!form.videos.video_image"></i>
                                <i class="el-icon-error" style=" position: absolute; right: 0;top: 0px;cursor: pointer;" @click="deleteVideoPicture" v-else></i>
                                <div style="    width: 100%;
                                  text-align: center;
                                  position: relative;
                                  background-color: #333333c2;
                                  color: #ffffff;" :style="{top: !form.videos.video_image ? '39px' : '55px' }">点击重新上传封面</div>
                            </div>
                        </div>
                        <div class="tips">设置后商品详情首图默认显示视频,建议时长9-30秒</div>
                        <div class="tips">视频封面不上传默认商品主图</div>
                    </el-form-item>
                    <el-form-item label="是否显示" label-width="100px">
                        <el-switch v-model="form.is_show" active-color="#13ce66" inactive-color="#ff4949"     :active-value=1 :inactive-value=0 >
                        </el-switch>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="vue-page">
            <div class="vue-center">
                <el-button type="primary" @click="submit">提交</el-button>
                <el-button @click="backTo">返回</el-button>
            </div>
        </div>
        <select-shop :select-member-visible="selectMemberVisible" @select-good='selectGood' @close="selectMemberVisible = false"></select-shop>
        <upload-multimedia-img :upload-show="uploadImgListShow" @sure="uploadImageList" :type="uploadType"  @replace="uploadImgListShow = false" sel-num="more" select="open"></upload-multimedia-img>
        <upload-multimedia-img :upload-show="uploadVideoShow" @sure="uploadVideo" :type="uploadTypes" @replace="uploadVideoShow = false" sel-num="one"></upload-multimedia-img>
        <upload-multimedia-img :upload-show="uploadImageShow" @sure="uploadImage" :type="uploadType" @replace="uploadImageShow = false" sel-num="one"></upload-multimedia-img>
    </div>
</div>
@include('Yunshop\MaterialCenter::material.SelectShop')
<script language='javascript'>
    let id = "{{ request()-> id }}"
    //vue
    var app = new Vue({
        el: "#app",
        delimiters: ['[[', ']]'],
        data() {
            return {
                selectGoods: null,
                uploadType:"",
                uploadTypes:"",
                uploadImgListShow: false,
                uploadVideoShow: false,
                uploadImageShow: false,
                firstTypeOptions: [],
                secondTypeOptions: [],
                selectMemberVisible: false,
                shopKeyword: '',
                tableData: [],
                page: 1,
                total: 1,
                pageSize: 12,
                category: {
                    parentid: [],
                    childid: []
                },
                form: {
                    is_show: 0,
                    title: '',
                    goods_id: '',
                    content: '',
                    images: [],
                    videos: {
                        video_url: '',
                        video_image: ''
                    }
                },
                value: '',
                rules: {
                    title: [{
                        required: true,
                        message: '请输入标题',
                        trigger: 'blur'
                    }],
                    content: [{
                        required: true,
                        message: '请输入素材文案',
                        trigger: 'blur'
                    }],
                }
            }
        },
        computed: {

        },
        created() {
            this.getCategory()

        },
        mounted() {
            if (id) {
                this.getDetail(id)
            }
        },
        methods: {
            //返回列表
            backTo() {
                let url = "{!! yzWebUrl('plugin.material-center.admin.material.index') !!}"
                window.location.href = url
            },
            //提交表单
            submit() {
                if (id) {
                    this.$refs["ruleForm"].validate((valid) => {
                        if (valid && this.form.images.length > 0 && this.category.parentid && this.form.images.length < 10) {
                            this.$http.post('{!! yzWebFullUrl("plugin.material-center.admin.material.edit") !!}', {
                                data: {
                                    ...this.form
                                },
                                category: this.category,
                                id:id
                            }).then(({
                                data
                            }) => {
                                if (data.result) {
                                    let url = "{!! yzWebUrl('plugin.material-center.admin.material.index') !!}"
                                    window.location.href = url

                                } else {
                                    this.$message.error(data.msg);
                                }
                            }, (response) => {
                                console.log(response);
                            });
                        } else if (this.form.images.length = 0) {
                            this.$message.error('请选择商品图')
                            return false;
                        } else if (!this.category.parentid) {
                            this.$message.error('请选择分类')
                            return false;
                        } else if (this.form.images.length > 9) {
                            this.$message.error('商品图多于9张')
                            return false;
                        }
                    });
                } else {
                    this.$refs["ruleForm"].validate((valid) => {
                        if (valid && this.form.images.length > 0 && this.category.parentid && this.form.images.length < 10) {
                            this.$http.post('{!! yzWebFullUrl("plugin.material-center.admin.material.add") !!}', {
                                data: {
                                    ...this.form
                                },
                                category: this.category
                            }).then(({
                                data
                            }) => {
                                if (data.result) {
                                    let url = "{!! yzWebUrl('plugin.material-center.admin.material.index') !!}"
                                    window.location.href = url

                                } else {
                                    this.$message.error(data.msg);
                                }
                            }, (response) => {
                                console.log(response);
                            });
                        } else if (this.form.images.length = 0) {
                            this.$message.error('请选择商品图')
                            return false;
                        } else if (!this.category.parentid) {
                            this.$message.error('请选择分类')
                            return false;
                        } else if (this.form.images.length > 9) {
                            this.$message.error('商品图多于9张')
                            return false;
                        }
                    });
                }

            },
            //选择商品
            select() {
                this.selectMemberVisible = false
            },
            selectShop() {
                this.selectMemberVisible = true
            },
            uploadImageList(name, image, imageUrl) {
                this.uploadImgListShow = false
                imageUrl.forEach(item => {
                    this.form.images.push(item.url)
                });
            },
            uploadVideo(name, show, video) {
                this.form.videos.video_url = video[0].url
            },
            uploadImage(name, image, imageUrl) {
                this.form.videos.video_image = imageUrl[0].url
            },
            replace() {
                this.uploadShow = false
            },
            getDetail(id) {
                console.log(id);
                this.$http.post('{!! yzWebFullUrl("plugin.material-center.admin.material.detail") !!}', {
                    id: id
                }).then(({
                    data
                }) => {
                    if (data.result) {
                       this.form.is_show = data.data.is_show
                       this.form.goods_id = data.data.goods_id
                       this.form.content = data.data.content
                       this.form.images = data.data.images
                       this.form.videos = data.data.videos
                       this.form.title = data.data.title



                       this.category.parentid[0]=  parseInt(data.data.has_many_goods_category.category_ids.split(',')[0])
                       this.getChildCategory(this.category.parentid[0])
                    this.category.childid[0]= parseInt(data.data.has_many_goods_category.category_ids.split(',')[1])
                    this.selectGoods = {}
                      this.selectGoods.thumb = data.data.goods.thumb
                      this.selectGoods.title = data.data.goods.title
                      this.selectGoods.id = data.data.goods.id
                      console.log(this.selectGoods);
                    } else {
                        this.$message.error(data.msg);
                    }
                }, (response) => {
                    console.log(response);
                });
            },
            //选择商品后回调
            selectGood(item) {
                this.selectMemberVisible = false
                this.selectGoods = item
                this.form.goods_id = item.id
            },
            //获取商品分类接口
            getCategory() {
                this.$http.post('{!! yzWebFullUrl("plugin.material-center.admin.material.get-category") !!}', {}).then(({
                    data
                }) => {
                    if (data.result) {
                        this.firstTypeOptions = data.data

                    } else {
                        this.$message.error(data.msg);
                    }
                }, (response) => {
                    console.log(response);
                });
            },
            getChildCategory(id) {
                this.$http.post('{!! yzWebFullUrl("plugin.material-center.admin.material.get-category") !!}', {
                    parent_id: id
                }).then(({
                    data
                }) => {
                    if (data.result) {
                        this.secondTypeOptions = data.data

                    } else {
                        this.$message.error(data.msg);
                    }
                }, (response) => {
                    console.log(response);
                });
            },
            deleteGoods() {
                this.selectGoods = null
                this.form.goods_id = ''
            },
            //移除商品图片
            deleteGoodsPicture(index) {
                this.form.images.splice(index, 1)
            },
            //删除视频封面
            deleteVideoPicture(event) {
                event.stopPropagation()
                this.form.videos.video_image = ''
            },
            //删除视频
            deleteVideo(event) {
                event.stopPropagation()
                this.form.videos.video_url = ''
            },
            uploadImgList(){
                this.uploadImgListShow = true
                this.uploadType = '1'
            },
            openVideoShow(){
                this.uploadVideoShow = true
                this.uploadTypes = '3'
            }
        },
        components: {

        }
    })
</script>

@endsection