@extends('layouts.base')
@section('title', trans('新增模块'))
@section('content')
@include('public.admin.uploadMultimediaImg')
@include('public.admin.tinymceee')
    <link rel="stylesheet" href="{{resource_get('plugins/pc-terminal-two/views/css/index.css')}}">
    <link rel="stylesheet" href="{{resource_get('plugins/pc-terminal-two/views/css/vue-img.css')}}">
    <script src="{{resource_get('static/yunshop/tinymce4.7.5/tinymce.min.js')}}"></script>
    <div class="all">
        <div id="app" v-cloak>
            <el-form ref="form" :model="form" :rules="rules" label-width="15%">
                <div class="vue-main" style="min-height: 500px;">
                    <div class="vue-main-title">
                        <div class="vue-main-title-left"></div>
                        <div class="vue-main-title-content">新增模块</div>
                        <el-button type="primary" class="createModule" @click="returnModule">返回列表</el-button>
                    </div>

                    <div class="vue-main-form">
                        <el-form-item label="排序" prop="">
                            <el-input type="age" maxlength="15" v-model.number="form.sort" clearable
                                      style="width:30%"></el-input>
                        </el-form-item>

                        <el-form-item label="状态">
                            <el-switch v-model="form.status" :active-value="1" :inactive-value="0"></el-switch>
                        </el-form-item>

                        <el-form-item label="标题" prop="title">
                            <el-input v-model="form.title" clearable style="width:50%"></el-input>
                        </el-form-item>

                        <el-form-item label="副标题" prop="subtitle">
                            <el-input v-model="form.subtitle" clearable style="width:50%"></el-input>
                        </el-form-item>

                        <el-form-item label="跳转分类链接" prop="category_link">
                            <el-input v-model="form.category_link" clearable style="width:50%"></el-input>
                        </el-form-item>

                        <el-form-item label="选择供应商">
                            <el-button @click="querySupplier">点击选择供应商</el-button>

                            <el-dialog title="供应商" center :visible.sync="dialogFormVisible">
                                <template>
                                    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                                        <el-form-item label="">
                                            <el-input v-model="searchForm.member_key" placeholder="id/手机号码/昵称/姓名"></el-input>
                                        </el-form-item>
                                        <el-form-item label="">
                                            <el-input v-model="searchForm.supplier_username" placeholder="供应商用户名"></el-input>
                                        </el-form-item>
                                        <el-form-item label="">
                                            <el-button type="primary" @click="getSupplier">搜索</el-button>
                                        </el-form-item>
                                    </el-form>

                                    <el-table :data="supplier.data">
                                        <el-table-column prop="" label="会员ID">
                                            <template slot-scope="scope">
                                                <div v-if="scope.row.has_one_member">[[scope.row.has_one_member.uid]]</div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="" label="会员信息">
                                            <template slot-scope="scope">
                                                <div>
                                                    <div v-if="scope.row.has_one_member"><img :src="scope.row.has_one_member.avatar_image" alt="" style="width:40px;height:40px;border-radius:50%"></div>
                                                    <div style="line-height:32px;color:#29BA9C;cursor: pointer;" class="vue-ellipsis" v-if="scope.row.has_one_member">[[scope.row.has_one_member.nickname]]</div>
                                                </div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="" label="供应商ID">
                                            <template slot-scope="scope">
                                                <div>[[scope.row.id]]</div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="" label="供应商用户名">
                                            <template slot-scope="scope">
                                                <div>[[scope.row.username]]</div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="操作">
                                            <template slot-scope="scope">
                                                <el-button @click="selectSupplier(scope.row)">选择</el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>

                                    <el-row>
                                        <el-col align="right">
                                            <el-pagination layout="prev, pager, next"
                                                           @current-change="searchStorePage"
                                                           :total="supplier.total"
                                                           :page-size="supplier.per_page"
                                                           :current-page="supplier.current_page"
                                                           background
                                            ></el-pagination>
                                        </el-col>
                                    </el-row>
                                </template>

                                <div slot="footer" class="dialog-footer">
                                    <el-button type="primary" @click="dialogFormVisible = false">关闭</el-button>
                                </div>
                            </el-dialog>

                            <div class="demo-image storeInfo">
                                <div class="block storeInfoL" v-for="supplier in form.select_supplier" :key="supplier.id">
                                    <i class="el-icon-circle-close iconSet" @click="delStore(supplier.id)"></i>
                                    <el-image
                                            style="width: 150px; height: 150px"
                                            :src="supplier.thumb"
                                            fit="cover"></el-image>
                                    <span style=""> 供应商ID: [[ supplier.id ]]</span>
                                    <span style="margin-top: -20px;"> 供应商模块: [[ supplier.username ]]</span>
                                </div>
                            </div>
                        </el-form-item>

                        <el-form-item label="供应商自动切换时间" prop="">
                            <el-input type="age" maxlength="15" v-model.number="form.switch_second" clearable
                                      style="width:30%"><template slot="append">秒</template></el-input>
                            <p style="color:#d6d6d6;">为0为空不切换</p>
                        </el-form-item>

                        <el-form-item label="左侧轮播图一">
                            <div class="upload-box" @click="openUpload('carousel_first_img',1,'one')" v-if="!form.carousel_first_img_url" style="width:150px;height:250px;">
                                <i class="el-icon-plus" style="font-size:32px;"></i>
                            </div>
                            <div @click="openUpload('carousel_first_img',1,'one')" class="upload-boxed" v-if="form.carousel_first_img_url" style="width:150px;height:250px;">
                                <img :src="form.carousel_first_img_url" alt=""
                                     style="width:150px;height:250px;border-radius: 5px;cursor: pointer;">
                                <div class="upload-boxed-text">点击重新上传</div>
                                <i class="el-icon-close" @click.stop="clearImg('carousel_first_img')" title="点击清除图片"></i>
                            </div>
                            <span style="margin-left: 20px;color:#d6d6d6;position: absolute;top: 220px;">建议尺寸: 268 * 610</span>
                        </el-form-item>

                        <el-form-item label="左侧轮播图一跳转链接" prop="carousel_first_link">
                            <el-input v-model="form.carousel_first_link" clearable style="width:50%" ></el-input>
                        </el-form-item>

                        <el-form-item label="左侧轮播图二">
                            <div class="upload-box" @click="openUpload('carousel_second_img',1,'one')" v-if="!form.carousel_second_img_url" style="width:150px;height:250px;">
                                <i class="el-icon-plus" style="font-size:32px;"></i>
                            </div>
                            <div @click="openUpload('carousel_second_img',1,'one')" class="upload-boxed" v-if="form.carousel_second_img_url" style="width:150px;height:250px;">
                                <img :src="form.carousel_second_img_url" alt=""
                                     style="width:150px;height:250px;border-radius: 5px;cursor: pointer;">
                                <div class="upload-boxed-text">点击重新上传</div>
                                <i class="el-icon-close" @click.stop="clearImg('carousel_second_img')" title="点击清除图片"></i>
                            </div>
                            <span style="margin-left: 20px;color:#d6d6d6;position: absolute;top: 220px;">建议尺寸: 268 * 610</span>
                        </el-form-item>

                        <el-form-item label="左侧轮播图二跳转链接" prop="carousel_second_link">
                            <el-input v-model="form.carousel_second_link" clearable style="width:50%" ></el-input>
                        </el-form-item>

                        <el-form-item label="左侧轮播图三">
                            <div class="upload-box" @click="openUpload('carousel_third_img',1,'one')" v-if="!form.carousel_third_img_url" style="width:150px;height:250px;">
                                <i class="el-icon-plus" style="font-size:32px;"></i>
                            </div>
                            <div @click="openUpload('carousel_third_img',1,'one')" class="upload-boxed" v-if="form.carousel_third_img_url" style="width:150px;height:250px;">
                                <img :src="form.carousel_third_img_url" alt=""
                                     style="width:150px;height:250px;border-radius: 5px;cursor: pointer;">
                                <div class="upload-boxed-text">点击重新上传</div>
                                <i class="el-icon-close" @click.stop="clearImg('carousel_third_img')" title="点击清除图片"></i>
                            </div>
                            <span style="margin-left: 20px;color:#d6d6d6;position: absolute;top: 220px;">建议尺寸: 268 * 610</span>
                        </el-form-item>

                        <el-form-item label="左侧轮播图三跳转链接" prop="carousel_third_link">
                            <el-input v-model="form.carousel_third_link" clearable style="width:50%" ></el-input>
                        </el-form-item>


                    </div>
                </div>

                <div class="vue-page">
                    <div class="vue-center">
                        <el-button type="primary" @click="submitForm">提交</el-button>
                    </div>
                </div>
            </el-form>
            <upload-multimedia-img :upload-show="uploadShow" :type="typeStatus" :name="chooseImgName" :sel-Num="selNum"
                                   @replace="changeProp" @sure="sureImg"></upload-multimedia-img>
        </div>
    </div>



    <script>
        let supplier_open = ({!! app('plugins')->isEnabled('supplier') ? 1 : 0 !!})
        let app = new Vue({
            el: "#app",
            delimiters: ['[[', ']]'],
            data() {
                return {
                    form: {
                        sort: 0,
                        title: '',
                        subtitle: '',
                        status: 0,
                        category_link: '',
                        switch_second: 0,
                        carousel_first_img: '',
                        carousel_first_link: '',
                        carousel_second_img: '',
                        carousel_second_link: '',
                        carousel_third_img: '',
                        carousel_third_link: '',
                        select_supplier: []
                    },
                    supplier_open: supplier_open,
                    repeated_submit: false,
                    clear_img: false,
                    srepeated_submit: false,
                    rules: {
                        title: [
                            {required: true, message: '请输入标题', trigger: 'blur'},
                        ],
                        subtitle: [
                            {required: true, message: '请输入副标题', trigger: 'blur'},
                        ],
                        category_link: [
                            {required: true, message: '请输入分类跳转链接', trigger: 'blur'},
                        ],
                    },
                    uploadShow: false,
                    typeStatus: '',
                    selNum: '',
                    chooseImgName: '',
                    submit_url: '',
                    showVisible: false,

                    searchForm: {
                        member_key: ''
                    },
                    dialogFormVisible: false,
                    supplier: [],
                    storesPage: 1
                }
            },
            methods: {
                returnModule() {
                    history.back()
                },
                submitForm() {
                    if (this.srepeated_submit) return false
                    let formData = new FormData();
                    formData.append('sort', this.form.sort)
                    formData.append('title', this.form.title)
                    formData.append('subtitle', this.form.subtitle)
                    formData.append('status', this.form.status)
                    formData.append('select_supplier', JSON.stringify(this.form.select_supplier))
                    formData.append('category_link', this.form.category_link)
                    formData.append('switch_second', this.form.switch_second)
                    formData.append('carousel_first_img', this.form.carousel_first_img)
                    formData.append('carousel_first_link', this.form.carousel_first_link)
                    formData.append('carousel_second_img', this.form.carousel_second_img)
                    formData.append('carousel_second_link', this.form.carousel_second_link)
                    formData.append('carousel_third_img', this.form.carousel_third_img)
                    formData.append('carousel_third_link', this.form.carousel_third_link)

                    this.$refs['form'].validate((valid) => {
                        if (valid) {
                            this.srepeated_submit = true
                            this.$http.post(`{!! yzWebFullUrl('plugin.pc-terminal-two.backend.supplier-module.generate') !!}`, formData).then(function (response) {
                                if (response.data.result) {
                                    this.$message({
                                        message: response.data.msg,
                                        type: 'success'
                                    });
                                    setTimeout(function () {
                                        window.location.href = `{!! yzWebUrl('plugin.pc-terminal-two.backend.supplier-module.index') !!}`
                                    }, 200);
                                } else {
                                    this.$message({
                                        message: response.data.msg,
                                        type: 'error'
                                    });
                                }
                            }, function (response) {
                                this.$message({
                                    message: response.data.msg,
                                    type: 'error'
                                });
                            });
                        } else {
                            this.srepeated_submit = false
                            this.$message({
                                message: '请检查输入参数',
                                type: 'error'
                            });
                            return false;
                        }
                    });
                },
                clearImg(img) {
                    this.form[img] = '';
                    this.form[img + '_url'] = '';
                    this.$forceUpdate();
                },
                openUpload(str, type, sel) {
                    this.chooseImgName = str;
                    this.uploadShow = true;
                    this.typeStatus = String(type)
                    this.selNum = sel
                },
                sureImg(name, uploadShow, fileList) {
                    if (fileList.length <= 0) {
                        return
                    }
                    this.form[name] = fileList[0].attachment
                    this.form[name + '_url'] = fileList[0].url
                },
                changeProp(val) {
                    if (val == true) {
                        this.uploadShow = false;
                    } else {
                        this.uploadShow = true;
                    }
                },
                getSupplier() {
                    let params = {
                        search: this.searchForm,
                        page: this.storesPage
                    }

                    this.$http.post(`{!! yzWebFullUrl('plugin.pc-terminal-two.backend.supplier-module.search-supplier') !!}`, params).then(function (response) {
                        if (response.data.result) {
                            this.supplier = response.data.data
                        }
                    });
                },
                selectSupplier(supplier)
                {
                    let selected = {
                        id: supplier.id,
                        nickname: supplier.has_one_member.nickname,
                        thumb: supplier.has_one_member.avatar_image
                    }

                    let found = this.form.select_supplier.find(item => { return item.id === selected.id })

                    if (!found) {
                        this.form.select_supplier.push(selected)
                    }

                },
                querySupplier() {
                    if (!this.supplier_open) {
                        this.$message({
                            message: '请开启供应商插件',
                            type: 'error'
                        });
                        return;
                    }

                    this.dialogFormVisible = true
                    this.getSupplier()
                },
                searchStorePage(page) {
                    this.storesPage = page
                    this.getSupplier()
                },
                delStore(store_id) {
                    this.form.select_supplier.splice(this.form.select_supplier.findIndex(e => e.id === store_id), 1)
                }
            }
        })
    </script>
    <style>
        .createModule {
            background-color: #e5f6f1;
            color: #48c1a7;
        }
        .storeInfo {
            display: flex;
            flex-wrap: wrap;
        }
        .storeInfoL {
            margin-right: 10px;
            margin-top: 10px;
            display: flex;
            flex-direction: column;
            position: relative;
            background: white;
        }
        .iconSet {
            position: absolute;
            right: 2px;
            top: 1px;
            z-index: 1;
        }
    </style>
@endsection