<template>
    <div id="contents">
        <div class="top">
           <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item>
                    <el-select v-model="formInline.region" placeholder="选择字段" value-key="id" style="width: 120px;">
                        <el-option
                            v-for="item in quyuitem"
                            :key="item.id"
                            :label="item.className"
                            :value="item"
                            >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="formInline.user" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item>
                    <!--<el-button type="primary">查询</el-button>-->
                    <el-button type="primary" width="40%" @click="getList(1)">筛选</el-button>
                    <el-button type="warning" width="40%" @click="reset">重置</el-button>
                </el-form-item>
                <el-form-item><el-button type="success" width="40%" @click="buildNewCon()" style="margin-left:100px">+新增商品</el-button></el-form-item>
            </el-form>
        </div>
        
        <div class="content_table">
            <div class="btn_search" style="margin-bottom: 20px">
                <div style="padding-right: 0">
                    <!--<el-input-->
                            <!--placeholder="请输入内容"-->
                            <!--small-->
                            <!--v-model="searchValue">-->
                        <!--<i slot="prefix" class="el-input__icon el-icon-search"></i>-->
                    <!--</el-input>-->
                </div>
            </div>
            <div class="btn_content">
                <el-table id="mytable" stripe :data="tableDatas" border :default-sort="{prop: 'date', order: 'descending'}">
                    <el-table-column label="序号" sortable width="80%" type="index"  :resizable="resizable">
                    </el-table-column>
                    
                    <el-table-column prop="oPictureUrlDto" label="商品缩略图" >
                        <template slot-scope="scope">
                            <img  :src="scope.row.oPictureUrlDto.url+scope.row.oPictureUrlDto.name  " alt="" style="width: 50px;height: 50px">
                        </template>
                    </el-table-column>
                    <el-table-column prop="productNumber" label="商品编码" >
                    </el-table-column>
                    
                    <el-table-column prop="barCode" label="商品条码" >
                    </el-table-column>
                    
                    <el-table-column prop="goodName" label="货名" >
                    </el-table-column>
                    
                    <el-table-column prop="productName" label="商品名称" >
                    </el-table-column>
                    
                    <el-table-column prop="lastUpdateTime" label="上次修改时间" >
                    </el-table-column>
                    <el-table-column prop="reviewStatus" label="状态" >
                        <template slot-scope="scope">
                            <span v-if="scope.row.reviewStatus === 1" class="el-tag el-tag--danger">待提交审核</span>
                            <span v-else-if="scope.row.reviewStatus === 2" class="el-tag el-tag--success">审核中</span>
                            <span v-else-if="scope.row.reviewStatus === 3" class="el-tag el-tag--warning">拒绝审核</span>
                            <span v-else-if="scope.row.reviewStatus === 4" class="el-tag el-tag--warning">已审核</span>
                        </template>
                    </el-table-column>
                    <el-table-column  label="操作">
                        <template slot-scope="scope">
                            <div class="operate-groups">
                                <el-button @click="submitexam(scope.$index, scope.row)"  type="text" style="margin: 2px 2px;" >提交审核 </el-button>
                                <el-button @click="editEach(scope.$index, scope.row)" type="text"  style="margin: 2px 2px;" >编辑 </el-button>
                                <el-button @click="deleteach(scope.$index, scope.row)" type="text" style="margin: 2px 2px;" >删除 </el-button>
                                <el-button @click="handleEdit(scope.$index, scope.row)" type="text" style="margin: 2px 2px;" >查看 </el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div id="pages">
                <pages :currentPage=currentPage :total=total   @setup="changepages"></pages>
            </div>
        </div>
        
        <!--//新增弹出新增的部分------------------------------------------------------------------>
        <div class="el-dialog__wrapper" style="background: rgba(0,0,0,0.5); z-index: 100;" v-show="showself">
            
        <div class="el-dialog" style="padding:20px 20px; margin-top: 20px;z-index: 1000;">
            <div class="el-dialog__header">
                <span class="el-dialog__title">{{this.buildTitle}}</span>
                <button type="button" aria-label="Close" class="el-dialog__headerbtn" @click="closeself">
                    <i class="el-dialog__close el-icon el-icon-close"></i>
                </button>
            </div>
            <el-form ref="form" :model="form" label-width="132px">
                <el-form-item class="changeclass">
                    <el-col :span="12" class="wocao">
                        <el-form-item label="商品编码：" :required="true">
                            <el-input v-model="form.editproNumber"  type="number"  @blur="firsttime()"></el-input>
                        </el-form-item>
                        <el-form-item label="商品名称：" :required="true" >
                            <el-input v-model="form.editproName"   maxlength="60"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="wocao">
                        <el-form-item label="商品条码：" :required="true">
                            <el-input v-model="form.editbarCode"   :maxlength="10" type="number"  @blur="firsttime()" ></el-input>
                        </el-form-item>
                        <el-form-item label="货名：" :required="true">
                            <el-input v-model="form.editgoodName"   maxlength="60" @blur="firsttime()"></el-input>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label="标签：">
                    <el-tag v-for="tag in dynamicTags" closable :disable-transitions="false" @close="handleClose(tag)">{{tag}}</el-tag>
                    <el-input
                        class="input-new-tag"
                        v-if="inputVisible"
                        v-model="inputValue"
                        ref="saveTagInput"
                        size="small"
                        @keyup.enter.native="handleInputConfirm"
                        @blur="handleInputConfirm"
                        :maxlength=10
                        >
                    </el-input>
                    <el-button v-else class="button-new-tag"  @click="showInput" >点击添加标签</el-button>
                </el-form-item>
                
                <el-form-item label="缩略图: (120*120)" :required="true">
                    <el-upload
                        id="yizhang"
                        class="avatar-uploader"
                        accept="image/jpg,image/png,image/jpeg"
                        action="http://ha.tongchengxianggou.com/sku/o-product/upload-tmp-pic-dothing/do"
                        list-type="picture-card"
                        :before-upload="beforeload"
                        :file-list="upImgList"
                        :on-remove="handleRemove"
                        :on-exceed="handleExceed"
                        :on-success='smallIMG'
                        :limit="1"
                        name="imgFileTmp"
                        >
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
                
                <el-form-item label="商品滚动图: (400*400)"  :required="true">
                    <el-upload
                        accept="image/jpg,image/png,image/jpeg"
                        action="http://ha.tongchengxianggou.com/sku/o-product/upload-tmp-pic-dothing/do"
                        list-type="picture-card"
                        :before-upload="uploadform"
                        :on-progress="handleProgress"
                        :file-list="imgUrls"
                        :on-remove="delupimgs"
                        :on-exceed="handleExceed"
                        :on-success='uploadSuc'
                        v-loading.fullscreen.lock="fullscreenLoading"
                        :limit="4"
                        name="imgFileTmp"
                        >
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
                
                <el-col :span="12">
                    <el-form-item label="重量(kg)："  :required="true">
                        <el-input type="number" v-model="form.editweight"  min="0">></el-input>
                    </el-form-item>
                    
                    <el-form-item label="市场价(元)：">
                        <input type="number" 
                            class="sichangjia"
                            v-model="form.editmarketPrice" 
                            placeholder="市场价" 
                            min=0
                            maxlength=4
                            @focus="changejiage()"
                            @input="sichangjia">
                        </input>
                    </el-form-item>
                </el-col>
                <!--------------新增的模板的样式开始--------------->
                <el-form-item label="商品模板：" style="overflow: hidden;clear: both;" :required="true" class="xuansel" >
                    <el-select  v-model="editselvalue" placeholder="模板选择" @change="currentSel" value-key="id" style="">
                        <el-option
                            v-for="item in templets"
                            :key="item.id"
                            :label="item.name"
                            :value="item"
                            >
                        </el-option>
                    </el-select>
                </el-form-item>
                
                <div style="overflow: hidden;padding: 4px; " class="mobanall">
                    <el-col :span="12" v-for="(item,index ) in buildmouldlist">
                        <div  v-if="item.attribute === 0">
                            <el-form-item :label="item.name" >
                                <i v-if="item.isMandatory===0" class="vip">*</i>
                                <el-input v-model="item.inputtxt" ></el-input>
                            </el-form-item>
                        </div>
                        
                        <div  v-if="item.attribute === 1">
                            <el-form-item :label="item.name" >
                                <i v-if="item.isMandatory===0" class="vip">*</i>
                                <el-select v-model="item.inputtxt" >
                                    <el-option
                                        v-for="(amount,index)  in item.pushdata"
                                        :key="index"
                                        :label="amount"
                                        :value="amount">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                </div>
                
                
                <!--<div @click="ceshi">asSASASDAD</div>-->
                
                
                <div class="buildeditorElem">
                    <el-form-item label="" >
                    </el-form-item>
                    <div id="editorElem" style="text-align:left; border-bottom: 1px solid #e1e1e1;"></div>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="viewsee" >预览文本框内容</el-button>
                <el-button type="primary" @click="onSubmit" >提  交</el-button>
            </div>
        </div>
        </div>
        <div class="el-dialog  made" v-show="viewlan" style="padding:20px 20px; margin-top: -20px; top: -200px; z-index: 999999999; width: 90%;">
            <h4>预览</h4>
            <button type="button" aria-label="Close" class="el-dialog__headerbtn" @click="closeview">
                <i class="el-dialog__close el-icon el-icon-close"></i>关闭
            </button>
            <div class="yulanmain" v-html="editorContent"></div>
        </div>
        
        <!--//查看弹出查看的部分------------------------------------------------------------------>
        <el-dialog title="查看" :visible.sync="dialogFormVisible">
            <el-row>
                <label class="el-form-item__label" style="width: 100px; text-align: center;">缩略图:</label>
                <div class="imgview">
                    <img :src="this.viewinames" style="width: 100%; height: 100%;">
                </div>
            </el-row>
            <el-row>
                <el-col :span="12"><span>商品编码：</span><span>{{viewproductNumber}}</span></el-col>
                <el-col :span="12"><span>商品条码：</span><span>{{viewbarCode}}</span></el-col>
            </el-row>
            <el-row>
                <el-col :span="12"><span>货名：</span><span>{{viewgoodName}}</span></el-col>
                <el-col :span="12"><span>商品名称：</span><span>{{viewproductName}}</span></el-col>
            </el-row>
            <el-row>
                <el-col :span="12"><span>标签：</span><span>{{viewtags}}</span></el-col>
            </el-row>
            <el-row>
                <div class="imgparts">
                    <label class="el-form-item__label" style="width: 100px; text-align: center;">滚动图:</label>
                    <div class="imgsallwall">
                        <span v-for="(item,index) in viewimgall">
                            <img :src="item.url+item.name" style="width: 100%; height:60px;width: 60px;">
                        </span>
                    </div>
                </div>
            </el-row>
            <el-row>
                <el-col :span="12"><span>重量：</span><span>{{viewheight}}</span></el-col>
                <el-col :span="12"><span>市场价：</span><span>{{viewprice}}</span></el-col>
            </el-row>
            <el-row>
                <el-col :span="12"><span>模板类型：</span><span>{{viewclass}}</span></el-col>
            </el-row>
            <el-row>
                <el-col :span="12"><span>模板单位：</span><span v-for="(item,inbdex) in viewtodo " style="display: inline-block; margin: 0px 8px;">{{item.attrName}}</span></el-col>
            </el-row>
            <el-row>
                <el-col :span="12"><span>浏览：</span><div id="viewhtml" v-html="vieweditor"></div></el-col>
            </el-row>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelrefuse" type="danger">拒 绝</el-button>
                <el-button type="primary" @click="sucesspuss">通  过</el-button>
            </div>
        </el-dialog>
    </div>
</template>


<script>
    import E from 'wangeditor'
    import pages from '../../component/pagination/pagination'
    import FileSaver from 'file-saver'
    import XLSX from 'xlsx'
    import {API} from '../../lib/api'
    import Qs from 'qs'
    export default {
        name: 'editor',
        data() {
            return {
                xindeshuju:"",
                quyuitem:[
                        {
                            id:1,
                            className:"商品编码",
                        },
                        {
                            id:2,
                            className:"商品条码",
                        },
                        {
                            id:3,
                            className:"货名",
                        },
                        {
                            id:4,
                            className:"商品名称",
                        },
                    ],
                fullscreenLoading: false,
                buildidmain:'',
                editor:{},
                transfer:[],
                viewlan: false,
                buildmouldlist:[],
                editselvalue:'',
                mouldid:'',
                showself:false,
                editorContent: '',
                buildTitle:'',
                //标签初始化
                dynamicTags: [],
                inputVisible: false,
                inputValue: '',
                //上传商品图片初始化
                dialogImageUrl: '',
                //上传商品缩略图的列表
                upImgList: [],
                picsList:[],
                imgUrls: [],
                builddata:[],
                dialogVisible: false,
                //表单初始化
                 form: {
                    editproNumber:'',//条码
                    editproName:'',//商品名称
                    editbarCode:'',//货名
                    editgoodName: '',//展示名称
                    editweight:'',//保质期
                    editmarketPrice:'',//市场价
                    goodsSales:'',//销量
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: '',
                    value:'',
                },
                formLabelWidth: '80px',
                dialogFormVisible: false,
                buildNewmain: false,
                showFlag: false,
                resizable:false,
                input9:'',
                value5:'',
                options: [],
                value1: -1,
                value2: '2',
                value3: '1',
                input: '',
                tableData:[],
                htmlTitle: '表格数据',
                searchValue:'',
                total:null,
                value4: '',
                currentPage:1,
                excelData:[],
                formDate:"",
                form:{},
                fileList:[],
                formInline: {
                    user: '',
                    region: ''
                },
                templets: [],
                value: '',
                obj:{},
                viewinames:'',
                viewbarCode:'',
                viewproductNumber:'',
                viewgoodName:'',
                viewproductName:'',
                viewid:'',
                viewtags:'',
                viewimgall:[],
                viewheight:'',
                viewprice:'',
                viewclass:'',
                viewtodo:[],
                vieweditor:'',
                editimgnum:[],
                smallimgall:[],
                moreimgall:[],
                smallname:'',
                smallurl:'',
                togoodName:'',
                tobarCode:'',
                toproductNumber:'',
                toproductName:'',
                mustfill: false,
                againfill:false
                

            }
        },
        created() {
            this.axios({
                method:'POST',
                url:`${API}/sku/productTemplate/list`,
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                data:Qs.stringify({
                    uuid:localStorage.getItem('uuid')
                })
            }).then(res=>{
                //console.log(res.data.msg)
                if (res.data.code=== 200){
                    console.log(res.data.data.listStockDetail)
                    this.templets=res.data.data.listStockDetail;
//                  this.templets=[{
//                      id:-1,
//                      className:"无需模板",
//                  }].concat(res.data.data);
                    //console.log(this.templets)
                }

            });
            this.getList(1);
        },
        components:{
            pages
        },
        methods: {
            ceshi(){
                //alert(this.editorContent)
            },
            
            firsttime(){
                let myData =Qs.stringify({
                    barCode: this.form.editbarCode,//商品条码
                    productNumber:this.form.editproNumber,//商品编码
                    goodName: this.form.editgoodName,
                    uuid:localStorage.getItem('uuid')
                });
                this.axios({
                    method: 'POST',
                    url: `${API}/sku/o-product/flag`,
                    data:myData,
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                }).then(res=>{
                    if(res.data.code==200){
                            
                    }else{
                        this.$message({
                            type: 'warning',
                            message: '不可以重复输入，请重新输入'
                        });
                        this.form.editgoodName="";
                        this.form.editproNumber="";
                        this.form.editbarCode=""
                    }
                })
            },
            sichangjia(e){
                console.log(e.target.value)
                e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
            },
            changejiage(e){
                console.log(e)
            },
            //缩略图
            beforeload (file) {
                let _this = this
                if(file.type.indexOf('image') < 0) {
                    this.$alert({
                        message: '图片格式不正确',
                        btn: false
                    })
                    return false
                }
                const isLt2M = file.size / 1024 / 1024 < 2;
                const isSize = new Promise(function(resolve, reject) {
                    let width = 120;
                    let height = 120;
                    let _URL = window.URL || window.webkitURL;
                    let img = new Image();
                    console.log(window.URL)
                    console.log(window.webkitURL)
                    console.log(_URL)
                    console.log(img)
                    img.onload = function() {
                        let valid = img.width <= width && img.height <= height;
                        console.log("实际长度"+img.width)
                        console.log("控制的长度"+width)
                        valid ? resolve() : reject();
                    }
                    img.src = _URL.createObjectURL(file);
                }).then(() => {
                    return file;
                }, () => {
                    _this.$message({
                        type: 'error',
                        message: '上传的缩略图不得大于120*120!'
                    });
                    return Promise.reject();
                });
                console.log(isSize)
                return isSize
            },
            uploadform (file) {
                let _this = this
                if(file.type.indexOf('image') < 0) {
                    this.$alert({
                        message: '图片格式不正确',
                        btn: false
                    })
                    return false
                }
                const isLt2M = file.size / 1024 / 1024 < 2;
                const isSize = new Promise(function(resolve, reject) {
                    let width = 400;
                    let height = 400;
                    let _URL = window.URL || window.webkitURL;
                    let img = new Image();
                    console.log(img)
                    img.onload = function() {
                        let valid = img.width <= width && img.height <= height;
                        valid ? resolve() : reject();
                    }
                    img.src = _URL.createObjectURL(file);
                }).then(() => {
                    return file;
                }, () => {
                    _this.$message({
                        type: 'error',
                        message: '上传的缩略图不得大于400*400!'
                    });
                    return Promise.reject();
                });
                return isSize
            },
            
            smallIMG(response, file, fileList){
                console.log(response)
                console.log(fileList)
                this.smallimgall =fileList; 
            },
            
            
            
            uploadSuc(response, file, fileList){
                this.fileChange(fileList);
            },
            delupimgs( file, fileList) {
                this.fileChange(fileList);
            },
            fileChange(fileList) {
                this.moreimgall = fileList;
            },
            deleteach(a,r){
                let formData = new FormData()
                formData.append('id', JSON.stringify(r.id))// 权限类型 系统  模块 菜单选择
                this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.axios({
                        method: 'POST',
                        url: `${API}/sku/o-product/delete/do`,
                        data:formData,
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        },
                    }).then(res=>{
                        if(res.data.code==200){
                            this.$message({
                                type: 'success',
                                message: '删除成功'
                            });
                            this.getList(1);    
                        }else{
                            this.$message({
                                type: 'warning',
                                message: '删除失败'
                            });
                        }
                    })
                })
            },
            //商品模板
            currentSel(val){
                this.mouldid = val.id;
                if(this.mouldid !== -1){
                        this.axios({
                        method:'POST',
                        url:`${API}/sku/productTemplateAttr/list`+"?ptId="+this.mouldid ,
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        },
                        data:Qs.stringify({
                            uuid:localStorage.getItem('uuid')
                        })
                    }).then(res=>{
                        console.log(res)
                        //比较烦开始 input为一个数组   下拉为一个数组
                        res.data.data.listStockDetail.map((item) => {
                            var inputtxt="";
                            var seltxt="";
                            var newsel=[];
                            newsel.push(item.attributeValue.split(';'))
                            this.$set(item, 'pushdata', item.attributeValue.split(';'))
                            this.$set(item, 'inputtxt', inputtxt)
                            console.log(item.pushdata)
                        });
                        console.log("变更后的数据")
                        console.log(res.data.data.listStockDetail)
                        this.buildmouldlist = res.data.data.listStockDetail
                        
                        
                    });
                }else{
                    this.buildmouldlist =[];
                }
            },
            //编辑的时候加载模板
            bianjimoban(val, mainobj){
                this.axios({
                    method:'POST',
                    url:`${API}/sku/productTemplateAttr/list`+"?ptId="+val ,
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    data:Qs.stringify({
                        uuid:localStorage.getItem('uuid')
                    })
                }).then(res=>{
                    console.log("三个数据都打印出来")
                    mainobj.map((item,index) => {
                        var inputtxt="";
                        var seltxt="";
                        var id="";
                        var newsel=[];
                        res.data.data.listStockDetail[index]["inputtxt"]= item.atrrValue
                    });
                    
                    res.data.data.listStockDetail.map((item) => {
                        this.$set(item, 'pushdata', item.attributeValue.split(';'))
                        this.buildmouldlist =  res.data.data.listStockDetail
                        //this.buildmouldlist.push(moduleobj)//这一步是显示
                    });
                    
                    
                    console.log(res.data.data.listStockDetail)//经过处理过后得到的可以循环的数据
                    console.log(mainobj)
                });
            },
            
            //标签初始化
            handleClose(tag) {
                this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
            },
            showInput() {
                this.inputVisible = true;
                this.$nextTick(_ => {
                    this.$refs.saveTagInput.$refs.input.focus();
                });
            },
            handleInputConfirm() {
                if(this.dynamicTags.length>3){
                    this.inputVisible = false;
                    this.$message({
                        type: 'warning',
                        message: '最多只能上传4个标签！'
                    });
                    this.inputValue = '';
                    return false;
                }
                let inputValue = this.inputValue;
                if (inputValue) {
                    this.dynamicTags.push(inputValue);
                }
                this.inputVisible = false;
                this.inputValue = '';
            },
            //上传超过的提示
            handleExceed(files, fileList) {
                this.$message.warning(`超出限制上传张数了!`);
            },
            /* //限制上传的方式
            onBeforeUpload(file){
                //////alert(file.type)
                const isIMAGE = file.type === 'image/jpeg'&&'image/gif'&&'image/png';
                //////alert(isIMAGE+"ss")
                if (!isIMAGE) {
                    this.$message.error('上传文件只能是图片格式!');
                }
                return isIMAGE;
            */
            //上传缩略图图片列表缩略图
            andleRemove(file, fileList) {
            },
            handlePreview(file) {
            },
            //上传商品图片初始化
            //删除图片的事件
            handleRemove(file, fileList) {
            },
            handleRemove2(file, fileList) {
            },
            // 滚动图上传前验证
            //提交审核
            submitexam(index, self ){
                let formData = new FormData()
                formData.append('id', JSON.stringify(self.id));
                formData.append('reviewStatus', 2)
                this.$confirm('是否提交审核？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.axios({
                        method: 'POST',
                        url: `${API}/sku/o-product/update-review/do`,
                        data:formData,
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        },
                    }).then(res=>{
                        this.getList(1);
                        if(res.data.code==200){
                            this.$message({
                                type: 'success',
                                message: '提交成功'
                            });
                            this.getList(1);    
                        }else{
                            this.$message({
                                type: 'warning',
                                message: '提交失败'
                            });
                        }
                    })
                })
            },
            //编辑bianjijjjjjjjjjjj点击编辑显示用的
            editEach(a,b){
                var buildid = b.id;
                this.buildidmain = b.id;
                this.axios({
                    method:'get',
                    url:`${API}/sku/o-product/query/byid/do`+"?id="+buildid,
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    data:Qs.stringify({
                        uuid:localStorage.getItem('uuid')
                    })
                }).then(res=>{
                    this.builddata = res.data.data;
                    
                    //this.editselvalue = this.builddata.goodName;
                    this.mouldid = this.builddata.productTempleId;
                    this.smallurl = this.builddata.thumbPicOPictureUrlList[0].url;
                    //alert(this.smallurl)
                    //this.smallname = this.builddata.skuProductClassDto.name;
                    this.form.editmarketPrice = this.builddata.marketPrice;
                    ////alert(this.builddata.marketPrice)
                    var newmodule =[];
                    var hightmodule=[];
                    this.buildmouldlist = [];
                    //hightmodule = JSON.parse(this.builddata.productTempleValue)
                    
                    this.bianjimoban(this.mouldid,this.builddata.productTempleValue)
                    this.editselvalue =this.builddata.productTempleName;
                    hightmodule = this.builddata.productTempleValue;
                    //console.log(hightmodule)
                    hightmodule.map((item) => {
                        let moduleobj ={
                            attribute:parseInt(item.attribute),
                            id:item.id,
                            inputtxt:item.atrrValue,
                            name:item.attrName,
                        };
//                      this.buildmouldlist.push(moduleobj)//这一步是显示
                    });
                    console.log("模板")
                    console.log(this.buildmouldlist)
                    //this.buildmouldlist = newmodule;
                    //this.editorContent = decodeURI(res.data.data.detailHtmlText);
                    this.editorContent = res.data.data.detailHtmlText;
                    this.editimgnum = res.data.data.scrollOPictureUrlList;
                    
                    //一张图回显
                    let suoimgobg =[];
                    let suoimgurl  = {
                        "url": res.data.data.thumbPic,
                    };
                    suoimgobg.push(suoimgurl)
                    this.upImgList = res.data.data.thumbPicOPictureUrlList;
                    for(var j = 0;j<res.data.data.thumbPicOPictureUrlList.length;j++){
                        this.upImgList[j].url = res.data.data.thumbPicOPictureUrlList[j].url+res.data.data.thumbPicOPictureUrlList[j].name;
                    }
                    //多图回显
                    var showimgs=[];
                    res.data.data.scrollOPictureUrlList.map((item) => {
                        if(item.name != ""){        
                            let showobj ={
                                name:item.name,
                                url:item.url,
                                id:item.id,
                            };
                            showimgs.push(showobj)
                        }
                    });
                    this.imgUrls = showimgs;
                    var imgall = [];
                    imgall = showimgs;
                    for(var j = 0;j<imgall.length;j++){
                        this.imgUrls[j].url = imgall[j].url +imgall[j].name;
                    }
                    this.editor.txt.html(this.editorContent);
                });
                this.buildTitle ="编辑";
                this.showself  = true;
                this.form.editproNumber = b.productNumber;
                this.form.editproName =b.productName;
                this.form.editbarCode =b.barCode;
                this.form.editgoodName =b.goodName;
                this.form.editweight =b.weight;
                if(b.tags==""){
                    this.dynamicTags=[];
                }else{
                    this.dynamicTags = b.tags.split(',') ;
                }
                this.imgUrls = b.buildall;
            },
            uploadFile(file){
                this.formDate.append('file', file.file);
            },
            //编辑和新增的表单提交事件
            closeself(){
                this.showself = false;
                this.viewlan = false;
            },
            handleProgress(){
                this.fullscreenLoading = true;
                setTimeout(() => {
                  this.fullscreenLoading = false;
                }, 1000);
            },
            //详情图
            pictsBefore(file){
                var that  = this;
            },
            onSubmit(){
                //alert(this.moreimgall.length)
                let param = new FormData();
                if(this.form.editproName ==""||this.form.editbarCode==""||this.form.editgoodName==""|| this.editselvalue==""){
                    this.$message({
                        showClose: true,
                        message: '带"*"为必填，请填写完整后，再次提交',
                        type: 'error'
                    });
                    return false;
                };
                this.buildmouldlist.map((item) => {
                    if(item.isMandatory==0){
                        if(item.inputtxt==""){
                            this.mustfill = true
                        }else{
                            this.mustfill= false
                        }
                    }
                });
                
                if(this.mustfill== true){
                    this.$message({
                        showClose: true,
                        message: '模板必填项请填写完整',
                        type: 'error'
                    });
                    return false;
                }
                
                if(this.buildTitle =="新增"){
                    //新增缩略图
                    var toimgsamll =[];
                    this.smallimgall.map((item) => {
                        var datasmall = JSON.parse(item.response.data)
                        let obj = {
                            "name": datasmall[0].name,
                            "url": datasmall[0].url,
                        };
                        toimgsamll.push(obj)
                    });
                    //新增滚动图
                    var toimgsbig =[];
                    this.moreimgall.map((item) => {
                        var datasmall = JSON.parse(item.response.data)
                        let obj = {
                            "name": datasmall[0].name,
                            "url": datasmall[0].url,
                        };
                        toimgsbig.push(obj)
                    });
                        this.transfer =[];
                    this.buildmouldlist.map((item) => {
                        this.transfer.push({
                            "attrName":item.name,
                            "atrrValue": item.inputtxt, //店名称
                            "id": item.id,
                            "attribute":item.attribute,
                            "isMandatory":item.isMandatory//这是我改动的一步
                        })
                    });
                    //this.buildmouldlist=[]
                    param.append('productNumber', this.form.editproNumber)//商品名称
                    param.append('productName', this.form.editproName)//商品名称
                    param.append('barCode', this.form.editbarCode)//条形码
                    param.append('goodName', this.form.editgoodName)//货名
                    param.append('tags',this.dynamicTags)//标签
                    param.append('weight',this.form.editweight)//重量
                    param.append('marketPrice',this.form.editmarketPrice)//市场价
                    ////alert(this.form.editmarketPrice)
                    param.append('productClassId',this.mouldid)//商品模板id
                    param.append('productClassAtrrValue', JSON.stringify(this.transfer))//模板json
                    param.append('detailHtmlText', this.editorContent)//富文本
                    //param.append('detailHtmlText', encodeURI(this.editorContent))//富文本
                    
                    param.append('thumbPicStr', JSON.stringify(toimgsamll))//suoluetu
                    param.append('  scrollPicStr', JSON.stringify(toimgsbig))//suoluetu
                    console.log(param)
                    this.axios({
                        method: 'POST',
                        url:`${API}/sku/o-product/add/do`,
                        data: param,
                        headers:{'Content-Type':'multipart/form-data'},
                    }).then(res=>{
                        if(res.data.code === 200){
                            this.buildNewmain = false;
                            this.showself = false;
                            this.getList(1);
                            this.$message({
                                message: res.data.msg,
                                type: 'success'
                            });
                        }else{
                            this.buildNewmain = true;
                            this.showself = true;
                            this.$message({
                                message: res.data.msg ,
                                type: 'error'
                            });
                        }
                    }).catch( function(res){
                        this.showself = true;
                        this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: 'error'
                        });
                    });
                }else if(this.buildTitle =="编辑"){
 //--------------------------------------点击编辑时候的交互 提交后台----------------------------------------------------------------------
                this.buildmouldlist.map((item) => {
                    if(item.isMandatory==0){
                        if(item.inputtxt==""){
                            this.againfill = true
                        }else{
                            this.againfill= false
                        }
                    }
                });
                if(this.againfill== true){
                    this.$message({
                        showClose: true,
                        message: '模板必填项请填写完整',
                        type: 'error'
                    });
                    return false;
                }
 
 
                    //判断缩略图是否重新上传
                    var toimgsamll =[];
                    var that = this;
                    this.transfer =[];
                    console.log(that.buildmouldlist)
                    that.buildmouldlist.map((item) => {
                        this.transfer.push({
                            "attrName":item.name,
                            "atrrValue": item.inputtxt, //店名称
                            "id": item.id,
                            "attribute":item.attribute,
                            "isMandatory":item.isMandatory//这是我改动的一步
                        })
                    });
                    if(this.smallimgall.length == 0){
                        this.upImgList.map((item) => {
                            let obj = {
                                "name": item.name,
                                "url": this.smallurl,
                            };
                            toimgsamll.push(obj)
                        });
                    }else if(this.smallimgall.length !== 0){
                        this.smallimgall.map((item) => {
                            var datasmall = JSON.parse(item.response.data)
                            let obj = {
                                "name": datasmall[0].name,
                                "url": this.smallurl,
                            };
                            toimgsamll.push(obj)
                        })
                    }
                    if(this.moreimgall.length == 0){
                        var toimgsbig =[];
                        this.editimgnum.map((item) => {
                            let obj = {
                                "name": item.name,
                                "url": this.smallurl,
                            };
                            toimgsbig.push(obj)
                        });
                    }else if(this.moreimgall.length !== 0){
                        var toimgsbig =[];
                        this.moreimgall.map((item) => {
                            if(item.size){      //这是编辑时候产生的size
                                var datasmall = JSON.parse(item.response.data)
                                //console.log(datasmall[0].name)
                                toimgsbig.push({
                                    name:datasmall[0].name,
                                    url:this.smallurl,
                                })
                            }else if(item.id){
                                toimgsbig.push({
                                    name:item.name,
                                    url:this.smallurl,
                                })
                            }
                            //toimgsbig.push(obj)
                        });
                    }
                    if(this.dynamicTags.length == 0){
                        param.append('tags', '')//标签
                    }else{
                        param.append('tags',this.dynamicTags)//标签
                    }
                     param.append('productNumber', this.form.editproNumber)//商品名称
                    param.append('id', this.buildidmain)//商品名称
                    param.append('productName', this.form.editproName)//商品名称
                    param.append('barCode', this.form.editbarCode)//条形码
                    param.append('goodName', this.form.editgoodName)//货名
                    //param.append('tags',this.dynamicTags)//标签
                    param.append('weight',this.form.editweight)//重量
                    param.append('marketPrice',this.form.editmarketPrice)//市场价
                    //alert(this.form.editmarketPrice)
                    param.append('productClassId',this.mouldid)//商品模板id
                    param.append('productClassAtrrValue', JSON.stringify(this.transfer))//模板json
                    //param.append('detailHtmlText', encodeURI(this.editorContent))//富文本
                    param.append('detailHtmlText', this.editorContent)//富文本
                    
                    param.append('thumbPicStr', JSON.stringify(toimgsamll))//suoluetu
                    param.append('  scrollPicStr', JSON.stringify(toimgsbig))//suoluetu
                    this.axios({
                        method: 'POST',
                        url:`${API}/sku/o-product/update/do`,
                        data: param,
                        headers:{'Content-Type':'multipart/form-data'},
                    }).then(res=>{
                        if(res.data.code === 200){
                            this.buildNewmain = false;
                            this.showself = false;
                            this.getList(1);
                            this.$message({
                                message: res.data.msg,
                                type: 'success'
                            });
                            
                        }else{
                            this.buildNewmain = true;
                            this.showself = true;
                            this.$message({
                                message: res.data.msg,
                                type: 'error'
                            });
                        }
                    }).catch( function(res){
                        this.showself = true;
                        this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: 'error'
                        });
                    });
                };
                this.getList(1);
            },
            //新增
            buildNewCon(){
                this.buildmouldlist=[],
                this.editselvalue='',
                this.buildTitle ="新增"
                this.showself = true;
                this.dynamicTags=[];
                this.upImgList=[];
                this.imgUrls=[];
                this.editor.txt.clear();
                 this.form={
                    editproNumber : "",
                    editproName:'',
                    editbarCode:'',
                    editgoodName: '',
                    editweight:'',
                    editmarketPrice:'',
                    goodsSales:'',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: '',
                    value:'',
                }
                
            },
            handleEdit(viewindex,viewitem) {
                console.log(viewitem.id)
                this.$router.push({
                    path: 'revisedet',
                    query: {
                        id: viewitem.id
                    }
                })
            },
            update() {
                this.dialogFormVisible = false;
            },
            cancelrefuse() {
                let formData = new FormData()
                formData.append('id', this.viewid);
                formData.append('reviewStatus', 3)
                this.$confirm('是否拒绝审核？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.axios({
                        method: 'POST',
                        url: `${API}/sku/o-product/update-review/do`,
                        data:formData,
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        },
                    }).then(res=>{
                        this.getList(1);
                        if(res.data.code === 200){
                            this.$message({
                                type: 'success',
                                message: '拒绝审核成功'
                            });
                            this.getList(1);    
                        }else{
                            this.$message({
                                type: 'warning',
                                message: '拒绝审核失败'
                            });
                        }
                    })
                })
                this.dialogFormVisible = false;
            },
            sucesspuss() {
                let formData = new FormData()
                formData.append('id', this.viewid);
                formData.append('reviewStatus', 4)
                this.$confirm('是否通过审核？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.axios({
                        method: 'POST',
                        url: `${API}/sku/o-product/update-review/do`,
                        data:formData,
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        },
                    }).then(res=>{
                        this.getList(1);
                        if(res.data.code==200){
                            this.$message({
                                type: 'success',
                                message: '通过审核成功'
                            });
                            this.getList(1);    
                        }else{
                            this.$message({
                                type: 'warning',
                                message: '通过审核失败'
                            });
                        }
                    })
                })
                this.dialogFormVisible = false;
            },
            radioEvent(){
                this.showFlag = false;
            },
            changepages(a){
                this.currentPage=a
            },
            reset(){
                this.toproductNumber = "";
                this.tobarCode ="";
                this.togoodName ="";
                this.toproductName ="";
                this.formInline.region = '';
                this.formInline.user=''
                this.getList(1);
            },
            
            //table 展示数据的接口
            viewsee(){
                this.viewlan = true;
            },
            closeview(){
                this.viewlan = false;
            },
            getList(a){
                let toData = new FormData();
                    this.tobarCode ="";
                    this.toproductNumber="";
                    this.togoodName ="";
                    this.toproductName ="";
                if(this.formInline.region.id == 1){
                    this.toproductNumber = this.formInline.user;
                    this.tobarCode ="";
                    this.togoodName ="";
                    this.toproductName ="";
                } else if(this.formInline.region.id == 2){
                    this.tobarCode = this.formInline.user;
                    this.toproductNumber="";
                    this.togoodName ="";
                    this.toproductName ="";
                } else if(this.formInline.region.id == 4){
                    this.toproductName = this.formInline.user;
                    this.tobarCode ="";
                    this.toproductNumber="";
                    this.togoodName ="";
                } else if(this.formInline.region.id == 3){
                    this.togoodName = this.formInline.user;
                    this.tobarCode ="";
                    this.toproductNumber="";
                    this.toproductName ="";
                };
                toData.append('page', a);
                toData.append('max', 10);
                toData.append('uuid', localStorage.getItem('uuid'));
                toData.append('productNumber', this.toproductNumber);
                toData.append('barCode', this.tobarCode);
                toData.append('productName', this.toproductName);
                toData.append('goodName', this.togoodName);
                this.axios({
                    method: 'post',
                    url: `${API}/sku/o-product/review/search/by-parameter/do`,
                    data: toData,
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                }).then(res=>{
                    if (res.data.code == 200) {
                        this.tableData = res.data.data;
                        this.total = res.data.totalCount
                    }
                })
            },
            printContent(){
                let wpt = document.getElementById('mytable');
                let newContent = wpt.innerHTML;
                let oldContent = document.body.innerHTML;
                document.body.innerHTML = newContent;
                window.print(); //打印方法
                window.localtion.reload();
                document.body.innerHTML = oldContent
            },
        },
        computed: {
            tableDatas: function() {
                var search = this.searchValue;
                if (search) {
                    return this.tableData.filter(function(product) {
                        return Object.keys(product).some(function(key) {
                            return String(product[key]).toLowerCase().indexOf(search) > -1
                        })
                    })
                }
                return this.tableData;
            }
        },
        watch:{
            currentPage:function () {
                this.getList(this.currentPage)
            },
        },
        mounted(){
            this.$nextTick(() => {
            this.editor = new E('#editorElem');
            this.editor.customConfig.onchange = (html) => {
                this.editorContent = html
            }
            this.editor.customConfig.uploadImgShowBase64 = true; // base 64 存储图片
            this.editor.customConfig.uploadImgServer =  "http://ha.tongchengxianggou.com/sku/o-product/detail/upload-tmp-pic-dothing/do"; // 配置服务器端地址
            //this.editor.customConfig.uploadImgServer = "http://192.168.124.45:8080/web/web/sku/o-product/detail/upload-tmp-pic-dothing/do"; // 配置服务器端地址
            this.editor.customConfig.uploadFileName = "imgFileTmp"; // 后端接受上传文件的参数名
            this.editor.customConfig.uploadImgMaxSize = 2 * 1024 * 1024; // 将图片大小限制为 2M
            this.editor.customConfig.uploadImgMaxLength = 1; // 限制一次最多上传 3 张图片
            this.editor.customConfig.uploadImgTimeout = 2 * 60 * 1000; // 设置超时时间
            this.editor.customConfig.zindex = 20000;
            this.editor.customConfig.menus = [
                "head", // 标题
                "bold", // 粗体
                "fontSize", // 字号
                "fontName", // 字体
                "italic", // 斜体
                "underline", // 下划线
                "strikeThrough", // 删除线
                "foreColor", // 文字颜色
                "backColor", // 背景颜色
                "link", // 插入链接
                "list", // 列表
                "justify", // 对齐方式
                "quote", // 引用
                "image", // 插入图片
                "undo", // 撤销
                "redo", // 重复
            ];
            //下面是最重要的的方法
            this.editor.customConfig.uploadImgHooks = {
                before: function(xhr, editor, files) {
                    // 图片上传之前触发
                    // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
                    // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
                    // return {
                    //    prevent: true,
                    //    msg: '放弃上传'
                    // }
        
                },
                success: function(xhr, editor, result) {
                    // 图片上传并返回结果，图片插入成功之后触发
                    // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
                    //this.imgUrl = Object.values(result.data).toString();
                },
                fail: function(xhr, editor, result) {
                    // 图片上传并返回结果，但图片插入错误时触发
                    // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
                },
                error: function(xhr, editor) {
                    // 图片上传出错时触发
                    // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
                },
                timeout: function(xhr, editor) {
                    // 图片上传超时时触发
                    // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
                },
                // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
                // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
                customInsert: function(insertImg, result, editor) {
                    var databack = JSON.parse(result.data);
                    var datanew=[];
                    databack.map((item) => {
                        let obj = {
                            "url": item.url+item.name,
                        };
                        datanew.push(obj);
                    });
                    var newurl =datanew[0].url
                    insertImg(newurl);
                    
                }
            };
            this.editor.create();  
            })
        },
    }
</script>

<style >
.wocao .el-form-item{
    padding: 20px 0px 0px 0px;
}

.sichangjia{
    height: 40px;
    line-height: 40px;
    -webkit-appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    outline: 0;
    padding: 0 15px;
    transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    width: 100%;
}


.yulanmain{
    width: 60%;
    margin: auto;
    border: 1px solid #e1e1e1;
    border-radius: 10px;
    box-sizing:border-box;
    padding: 0px 8px;
}
.changeclass div:nth-child(1){
    margin-left: 0px!important;
}
.dialog-footer{
    margin-top: 20px;
}
.yulan{
    width: 100%;
    position: relative;
    width: 80%;
    height: 100%;
    z-index: 1000;
    background: white;
    position: absolute;
    top: 0px;
}
.el-table td, .el-table th{
    text-align: center!important;
}
.el-col-12 span{
    display: inline-block;
    margin: 9px 0px;
}
.el-col-12 span:nth-child(1){
    width: 108px;
    text-align: center;
    display: inline-block!important;
}
.disabled .el-upload--picture-card {
    display: none;
}
.el-form-item__content span{
    margin: 0px 10px;
}
.imgview{overflow: hidden;
    background-color: #fff;
    border: 1px solid #c0ccda;
    border-radius: 6px;
    box-sizing: border-box;
    width: 148px;
    height: 148px;
    margin: 0 8px 8px 0;
    display: inline-block;
}
.imgsallwall img{
    display: inline-block;
    margin: 0px 10px;
}
.imgparts{
    overflow: hidden;
    margin: 10px 0px;
    clear: both;
}
.made{
    top: -681px!important;
    margin-top: 0px!important;
}
.nimabide .el-upload--picture-card{
    display: none!important;
}
  .el-form-item .el-select {
    width: 100%;
  }
.xuansel .el-select{
    width: 42%!important;
}
.el-upload-list__item-actions{
    margin: 0px!important;
}
.mobanall .el-form-item__label{
    width: 100px!important;
    overflow:hidden!important;
    display:inline-block;
    white-space:nowrap!important;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    margin-left:20px!important;
}
.vip{
    display: inline-block;
    color: red;
    position: absolute;
    right: 428px;
}
</style>