<template>
    <div id="contents">
        <el-steps :active="dian" finish-status="success" simple style="margin-top: 20px;width: 60%;margin-left:auto;margin-right: auto;">
            <el-step title="基本信息" ></el-step>
            <el-step title="其他屬性" ></el-step>
            <el-step title="商品詳情" ></el-step>
        </el-steps>
        <div style="padding:20px 20px; margin-top: 20px;z-index: 1000;">
            <el-form ref="form" :model="form" label-width="132px">
                <el-row :gutter="20" v-show="firstnext">
                    <el-col :span="4">
                        <el-form-item label="" :required="true">
                            <el-upload
                              class="avatar-uploader"
                              action="http://ha.tongchengxianggou.com/sku/o-product/upload-tmp-pic-dothing/do"
                              :show-file-list="false"
                              :on-success="handleAvatarSuccess"
                              :before-upload="beforeAvatarUpload"
                              name="imgFileTmp"
                              >
                              <img v-if="imageUrl" :src="imageUrl" class="avatar">
                              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                            
                            <!--
                            <el-upload
                                id="yizhang"
                                :class="{'showitself':isActive}"
                                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>
                            -->
                            <span style="display: block;text-align: center;"><i style="display: inline-block;margin-right: 4px;color: red;">*</i>縮略圖上傳</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="14">
                        <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"></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"></el-input>
                                </el-form-item>
                                <el-form-item label="貨名：" :required="true">
                                    <el-input v-model="form.editgoodName"   maxlength="60"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="標(biāo)簽：">
                            <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" >點(diǎn)擊添加標(biāo)簽</el-button>
                        </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="text" 
                                    class="sichangjia"
                                    v-model="form.editmarketPrice" 
                                    placeholder="市場價" 
                                    min=0
                                    maxlength=4
                                    >
                                </input>
                            </el-form-item>
                            
                            
                            <el-form-item label="保質(zhì)期："  :required="true" class="baozhiqi">
                                <el-input type="number" v-model="form.Shelflife"  min="0" style="width: 40%;"></el-input>
                                <el-select v-model="form.lifeTime" style="width: 40%; margin-left: 10%;" @change="leftsel">
                                    <el-option
                                        :key="item.id"
                                        v-for="item in timelist"
                                        :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            
                            
                            
                            
                        </el-col>

                        <el-col :span="24">
                            <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>
                    </el-col>
                </el-row>
                <span class="nextclick" @click="nextclick" v-if="firstnext">下一步</span>
                
                
<!-------------------------------------------------第二步開始----------------------------------------------------------------->
                
                <el-row :gutter="20" v-if="twostep" >
                    <el-col :span="14">
                        <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>
                    </el-col>
                </el-row>
                <p class="zhuanxiang">
                    <span class="" @click="twoclick" v-if="twostep">下一步</span>
                    <span class="" @click="backclick" v-if="twostep">上一步</span>
                </p>
<!-------------------------------------------------第三步開始----------------------------------------------------------------->
                <el-row :gutter="20" v-show="threestep">
                    <div style="width: 60%;margin: auto;">
                        <div class="buildeditorElem">
                            <el-form-item label="" >
                            </el-form-item>
                            <div id="editorElem" style="text-align:left; border-bottom: 1px solid #e1e1e1;"></div>
                        </div>
                        <div class="dialog-footer">
                            <el-button type="primary" @click="viewsee" >預(yù)覽文本框內(nèi)容</el-button>
                            <el-button type="primary" @click="onSubmit" >提  交</el-button>
                        </div>
                        <div class="el-dialog  made" v-show="viewlan" style="padding:20px 20px; margin-top: -20px; top: -200px; z-index: 999999999; width: 100%;">
                            <h4>預(yù)覽</h4>
                            <button type="button" aria-label="Close" class="el-dialog__headerbtn" @click="closeview">
                                <i class="el-dialog__close el-icon el-icon-close"></i>關(guān)閉
                            </button>
                            <div class="yulanmain" v-html="editorContent"></div>
                        </div>
                    </div>
                    <span class="nextclick" @click="backtwo" v-if="threestep">上一步</span>
                </el-row>
            </el-form>
                
        </div>
    </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 {
                imageUrl:'',
                Shelflife:'',
                timelist:[
                    {
                        name: '天',
                        label: '天',
                        id:0,
                    },{
                        name: '月',
                        label: '月',
                        id:1,
                    },{
                        name: '年',
                        label: '年',
                        id:2,
                    }
                ],
                xindeshuju:"",
                fullscreenLoading: false,
                editor:{},
                transfer:[],
                viewlan: false,
                buildmouldlist:[],
                editselvalue:'',
                mouldid:'',
                editorContent: '',
                buildTitle:'',
                //標(biāo)簽初始化
                dynamicTags: [],
                inputVisible: false,
                inputValue: '',
                //上傳商品圖片初始化
                dialogImageUrl: '',
                //上傳商品縮略圖的列表
                upImgList: [],
                picsList:[],
                imgUrls: [],
                dialogVisible: false,
                //表單初始化
                 form: {
                    editproNumber:'',//條碼
                    editproName:'',//商品名稱
                    editbarCode:'',//貨名
                    editgoodName: '',//展示名稱
                    editweight:'',//保質(zhì)期
                    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: '表格數(shù)據(jù)',
                searchValue:'',
                total:null,
                value4: '',
                currentPage:1,
                excelData:[],
                formDate:"",
                form:{},
                fileList:[],
                formInline: {
                    user: '',
                    region: ''
                },
                templets: [],
                value: '',
                obj:{},
                viewinames:'',
                viewbarCode:'',
                viewtags:'',
                viewimgall:[],
                viewheight:'',
                viewprice:'',
                viewclass:'',
                viewtodo:[],
                vieweditor:'',
                editimgnum:[],
                smallimgall:[],
                moreimgall:[],
                smallname:'',
                smallurl:'',
                togoodName:'',
                tobarCode:'',
                toproductNumber:'',
                toproductName:'',
                mustfill: false,
                againfill:false,
                firstnext: true,
                twostep:false,
                threestep: false,
                dian:1,
                builddata:[],
                smalllength:[]
                

            }
        },
        created() {
            //第一步要拿到傳過來的id
            //alert(this.$route.query.id)
            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=>{
                if (res.data.code=== 200){
                    console.log(res.data.data.listStockDetail)
                    this.templets=res.data.data.listStockDetail;
                }

            });
            this.editEach()
        },
        components:{
            pages
        },
        methods: {
            handleAvatarSuccess(res, file){
                console.log("圖像上傳成功")
                this.smallimgall = JSON.parse(file.response.data)
                console.log(this.smallimgall)
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(){
                
            },
            //編輯時候根據(jù)id渲染頁面的數(shù)據(jù)方法
            editEach(){
                this.buildidmain = this.$route.query.id;
                this.axios({
                    method:'get',
                    url:`${API}/sku/o-product/query/byid/do`+"?id="+this.buildidmain,
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    data:Qs.stringify({
                        uuid:localStorage.getItem('uuid')
                    })
                }).then(res=>{
                    console.log(res.data.data)
                    this.builddata= res.data.data;
                    console.log("啥玩意啊")
                    console.log(this.builddata)
                    this.form.Shelflife = res.data.data.lifetime;
                    this.form.lifeTime = parseInt(res.data.data.lifeState);
                    
                    this.mouldid = this.builddata.productTempleId;
                    this.smallurl = this.builddata.thumbPicOPictureUrlList[0].url;
                    this.form.editmarketPrice = this.builddata.marketPrice;
                    var newmodule =[];
                    var hightmodule=[];
                    this.buildmouldlist = [];
                    this.bianjimoban(this.mouldid,this.builddata.productTempleValue)
                    this.editselvalue =this.builddata.productTempleName;
                    hightmodule = this.builddata.productTempleValue;
                    hightmodule.map((item) => {
                        let moduleobj ={
                            attribute:parseInt(item.attribute),
                            id:item.id,
                            inputtxt:item.atrrValue,
                            name:item.attrName,
                        };
                    });
                    console.log("模板")
                    console.log(this.buildmouldlist)
                    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;
                    this.imageUrl = res.data.data.thumbPicOPictureUrlList[0].url+res.data.data.thumbPicOPictureUrlList[0].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.form.editproNumber = this.builddata.productNumber;
                    this.form.editproName =this.builddata.productName;
                    this.form.editbarCode =this.builddata.barCode;
                    this.form.editgoodName =this.builddata.goodName;
                    this.form.editweight =this.builddata.weight;
                    if(this.builddata.tags==""){
                        this.dynamicTags=[];
                    }else{
                        this.dynamicTags = this.builddata.tags.split(',') ;
                    }
                });
            },
            ceshi(){
                //alert(this.editorContent)
            },
            //第一次點(diǎn)擊下一步的時候
            nextclick(){
                if(this.form.editproName ==""||this.form.editbarCode==""||this.form.editgoodName==""|| this.form.editproNumber==""||this.form.editweight==""){
                    this.$message({
                        showClose: true,
                        message: '帶"*"為必填疏旨，請?zhí)顚懲暾螅俅翁峤?,
                        type: 'error'
                    });
                }
                /*
                else if(this.smallimgall.length == 0||this.moreimgall.length == 0){
                    this.$message({
                        showClose: true,
                        message: '請上傳商品滾動圖 和縮略圖',
                        type: 'error'
                    });
                }
                */
                else{
                    this.dian=2
                    this.firstnext= false
                    this.twostep = true
                };
                
            },
            //第二次點(diǎn)擊下一步
            twoclick(){
                /*
                this.dian=3
                this.threestep = true;
                this.twostep = false;
                */
                if(this.editselvalue==""){
                    this.$message({
                        showClose: true,
                        message: '帶"*"為必填扎酷，請?zhí)顚懲暾蠖士妫俅翁峤?,
                        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: '模板必填項(xiàng)請?zhí)顚懲暾?,
                        type: 'error'
                    });
                    return false;
                }
                this.dian=3
                this.threestep = true;
                this.twostep = false;
            },
            backclick(){
                this.dian=1
                this.firstnext= true
                this.twostep = false
            },
            backtwo(){
                this.dian=2
                this.firstnext= false
                this.twostep = true
                this.threestep = false
            },
            //驗(yàn)證不可以重復(fù)的問題
            firsttime(){
                if(this.form.editbarCode==undefined){
                    this.form.editbarCode="";
                }else{
                    this.form.editbarCode=this.form.editbarCode
                }
                
                if(this.form.editproNumber==undefined){
                    this.form.editproNumber="";
                }else{
                    this.form.editproNumber=this.form.editproNumber
                }
                
                if(this.form.editgoodName==undefined){
                    this.form.editgoodName="";
                }else{
                    this.form.editgoodName=this.form.editgoodName
                }
                
                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: '不可以重復(fù)輸入，請重新輸入'
                        });
                        this.form.editgoodName="";
                        this.form.editproNumber="";
                        this.form.editbarCode=""
                    }
                })
            },
            //縮略圖
            beforeAvatarUpload (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("實(shí)際長度"+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
            },
            
            uploadSuc(response, file, fileList){
                this.fileChange(fileList);
            },
            delupimgs( file, fileList) {
                this.fileChange(fileList);
            },
            fileChange(fileList) {
                this.moreimgall = fileList;
            },
            //商品模板
            leftsel(){
                this.$forceUpdate()
            },
            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為一個數(shù)組   下拉為一個數(shù)組
                        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("變更后的數(shù)據(jù)")
                        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("三個數(shù)據(jù)都打印出來")
                    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)//經(jīng)過處理過后得到的可以循環(huán)的數(shù)據(jù)
                    console.log(mainobj)
                });
            },
            
            //標(biāo)簽初始化
            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個標(biāo)簽尸红！'
                    });
                    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(`超出限制上傳張數(shù)了!`);
            },
            andleRemove(file, fileList) {
            },
            handlePreview(file) {
            },
            //上傳商品圖片初始化
            //刪除圖片的事件
            handleRemove(file, fileList) {
            },
            handleRemove2(file, fileList) {
            },
            uploadFile(file){
                this.formDate.append('file', file.file);
            },
            handleProgress(){
                this.fullscreenLoading = true;
                setTimeout(() => {
                  this.fullscreenLoading = false;
                }, 1000);
            },
            //詳情圖
            pictsBefore(file){
                var that  = this;
            },
            onSubmit(){
                let param = new FormData();
                //判斷縮略圖是否重新上傳
                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": item.name,
                            "url": item.url,
                        };
                        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){      //這是編輯時候產(chǎn)生的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', '')//標(biāo)簽
                }else{
                    param.append('tags',this.dynamicTags)//標(biāo)簽
                }
                
                
                if(this.form.editmarketPrice == undefined){
                    param.append('marketPrice','')//市場價
                }else{
                    param.append('marketPrice',this.form.editmarketPrice)//市場價
                }
                
                
                param.append('lifetime', this.form.Shelflife)//商品名稱
                param.append('lifeState', this.form.lifeTime)//商品名稱
                
                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('weight',this.form.editweight)//重量
                
                //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('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.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                        this.$router.push({
                            path:'../commodity/toview'
                        });
                    }else{
                        this.buildNewmain = true;
                        this.$message({
                            message: res.data.msg,
                            type: 'error'
                        });
                    }
                }).catch( function(res){
                    
                });
                
            },
            update() {
                this.dialogFormVisible = false;
            },
            radioEvent(){
                this.showFlag = false;
            },
            changepages(a){
                this.currentPage=a
            },
            
            //table 展示數(shù)據(jù)的接口
            viewsee(){
                this.viewlan = true;
            },
            closeview(){
                this.viewlan = false;
            },
            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:{
            
        },
        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"; // 配置服務(wù)器端地址
            //this.editor.customConfig.uploadImgServer = "http://192.168.124.45:8080/web/web/sku/o-product/detail/upload-tmp-pic-dothing/do"; // 配置服務(wù)器端地址
            this.editor.customConfig.uploadFileName = "imgFileTmp"; // 后端接受上傳文件的參數(shù)名
            this.editor.customConfig.uploadImgMaxSize = 2 * 1024 * 1024; // 將圖片大小限制為 2M
            this.editor.customConfig.uploadImgMaxLength = 1; // 限制一次最多上傳 3 張圖片
            this.editor.customConfig.uploadImgTimeout = 2 * 60 * 1000; // 設(shè)置超時時間
            this.editor.customConfig.zindex = 20000;
            this.editor.customConfig.menus = [
                "head", // 標(biāo)題
                "bold", // 粗體
                "fontSize", // 字號
                "fontName", // 字體
                "italic", // 斜體
                "underline", // 下劃線
                "strikeThrough", // 刪除線
                "foreColor", // 文字顏色
                "backColor", // 背景顏色
                "link", // 插入鏈接
                "list", // 列表
                "justify", // 對齊方式
                "quote", // 引用
                "image", // 插入圖片
                "undo", // 撤銷
                "redo", // 重復(fù)
            ];
            //下面是最重要的的方法
            this.editor.customConfig.uploadImgHooks = {
                before: function(xhr, editor, files) {
                    // 圖片上傳之前觸發(fā)
                    // xhr 是 XMLHttpRequst 對象兄旬，editor 是編輯器對象，files 是選擇的圖片文件
                    // 如果返回的結(jié)果是 {prevent: true, msg: 'xxxx'} 則表示用戶放棄上傳
                    // return {
                    //    prevent: true,
                    //    msg: '放棄上傳'
                    // }
        
                },
                success: function(xhr, editor, result) {
                    // 圖片上傳并返回結(jié)果凡纳，圖片插入成功之后觸發(fā)
                    // xhr 是 XMLHttpRequst 對象窃植，editor 是編輯器對象，result 是服務(wù)器端返回的結(jié)果
                    //this.imgUrl = Object.values(result.data).toString();
                },
                fail: function(xhr, editor, result) {
                    // 圖片上傳并返回結(jié)果荐糜，但圖片插入錯誤時觸發(fā)
                    // xhr 是 XMLHttpRequst 對象巷怜，editor 是編輯器對象葛超，result 是服務(wù)器端返回的結(jié)果
                },
                error: function(xhr, editor) {
                    // 圖片上傳出錯時觸發(fā)
                    // xhr 是 XMLHttpRequst 對象，editor 是編輯器對象
                },
                timeout: function(xhr, editor) {
                    // 圖片上傳超時時觸發(fā)
                    // xhr 是 XMLHttpRequst 對象延塑，editor 是編輯器對象
                },
                // 如果服務(wù)器端返回的不是 {errno:0, data: [...]} 這種格式绣张，可使用該配置
                // （但是，服務(wù)器端返回的必須是一個 JSON 格式字符串９卮＝暮！否則會報(bào)錯）
                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{
    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;
}
.zhuanxiang{
    box-sizing: border-box;
    width:320px;
    margin: auto; 
    text-align: center;
    display:block;
    padding: 10px 15px;
    cursor:pointer
}
.zhuanxiang span{
    box-sizing: border-box;
    width:120px;
    margin: auto 10px; 
    text-align: center;
    display:block;
    float: left;
    border: 1px solid #D1DBE5;
    padding: 10px 15px;
    cursor:pointer
}
.nextclick{
    border: 1px solid #D1DBE5;
    box-sizing: border-box;
    width:120px;
    margin: auto; 
    text-align: center;
    display:block;
    padding: 10px 15px;
    cursor:pointer
}

    
    
    
    .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
  }
  .avatar {
    width: 150px;
    height: 150px;
    display: block;
  }
</style>

<style scoped>
    .made{
        top: -407px!important;
    }
    
</style>