
<template>
  <div class="goodsListEdit">
    <div class="head-title">
        <span @click="CommonJump('goodsList')" class="blue point">商品列表</span> / 添加商品
    </div>
    <div style="background:#fff;margin-top:10px;padding:10px 20px 20px">
        <el-form class="app-batch" :model="addMsg" :rules="rules" ref="addMsg" label-width="180px">
            <el-tabs v-model="activeName">
                <el-tab-pane label="商品设置" name="first">
                    <el-card shadow="never">
                        <div slot="header" class="clearfix">
                            <span>选择分类</span>
                        </div>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="商品分类">
                                    <template v-if="addMsg.CategoryList && addMsg.CategoryList.length>0">   
                                        <el-tag type="warning" style="margin-right:10px;" @close="exitCheck(item,index)" v-for="(item,index) in addMsg.CategoryList" :key="index" closable>{{item.Name}}</el-tag>
                                    </template>
                                    <el-button type="primary" @click="flDig=true,keepCategoryList=addMsg.CategoryList" style="margin:0 10px;" size="small">选择分类</el-button>
                                    <span @click="CommonJump('addGoodsClass')" class="blue point">添加分类</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-card>
                    <el-card style="margin-top:20px" shadow="never">
                        <div slot="header" class="clearfix">
                            <span>基本信息</span>
                        </div>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="商城商品编码">
                                    <el-tooltip class="item" effect="dark" content="只能从商城中获取商品信息，且基本信息与商城商品保持一致" placement="top"
                                        style="position: absolute;left: -22px;top:12px">
                                        <i class="el-tooltip el-icon-info"></i>
                                    </el-tooltip>
                                    <el-input v-model="addMsg.Id" type="number" min="1" size="small" placeholder="请输入内容" class="input-with-select">
                                        <el-button slot="append">获取</el-button>
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="商品名称" prop="Name">
                                    <el-input v-model="addMsg.Name" size="small" placeholder="请输入内容" maxlength="100" show-word-limit>
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="商品轮播图(多张)">
                                    <el-tooltip class="item" effect="dark" content="第一张图片为封面图" placement="top"
                                        style="position: absolute;left: -22px;top:12px">
                                        <i class="el-tooltip el-icon-info"></i>
                                    </el-tooltip>
                                    <p style="color:#c9c9c9;margin-bottom: 12px;">第一张图片为缩略图,其它图片为轮播图,建议像素750*750,最多支持上传9张</p>
                                    <div flex="dir:left">
                                        <div flex="dir:left">
                                            <div v-for="(item,index) in addMsg.CarouselImageList" :key="index" style="margin-right: 20px; position: relative; ">
                                                <div class="colapp-image" :style="{backgroundImage:'url(' +domainManager().ImageUrl+ item.Path + ')'}"></div>
                                                <el-button @click="ClearCarouse(index)" class="delBtn" type="danger" icon="el-icon-close" circle></el-button>
                                            </div>
                                            <div @click="openChangeDig(1)" class="add-image-btn 2222">
                                                + 添加图片
                                            </div>
                                        </div>
                                    </div>
                                </el-form-item>
                                <el-form-item label="商品视频">
                                    <el-input v-model="addMsg.VideoAddress" size="small" placeholder="请输入内容">
                                        <el-button @click="changeState1=true" slot="append">添加视频</el-button>
                                    </el-input>
                                    <a v-if="addMsg.VideoAddress!=''" class="blue noline" :href="addMsg.VideoAddress" target="_blank">视频链接</a>
                                </el-form-item>
                                <el-form-item label="自定义分享标题">
                                    <el-tooltip class="item" effect="dark" content="分享给好友时，作为商品名称" placement="top"
                                        style="position: absolute;left: -22px;top:12px">
                                        <i class="el-tooltip el-icon-info"></i>
                                    </el-tooltip>
                                    <el-input v-model="addMsg.CustomShareTitles" size="small" placeholder="请输入内容" class="input-with-select"></el-input>
                                    <p class="blue point" @click="imgDig=true">查看图例</p>
                                </el-form-item>
                                <el-form-item class="commonLabel discount" label="自定义分享图片">
                                    <el-tooltip class="item" effect="dark" content="分享给好友时，作为分享图片" placement="top-start"
                                        style="position: absolute;left: -22px;top:12px">
                                        <i class="elzk el-tooltip el-icon-info"></i>
                                    </el-tooltip>
                                    <el-tooltip class="item" effect="dark" content="建议尺寸420*336" placement="top">
                                        <el-button @click="openChangeDig(2)" size="small">选择图片</el-button>
                                    </el-tooltip>
                                    <div class="app-gallery-item" style="position: relative;width: 100px;margin-top: 10px;">
                                        <img v-if="!addMsg.CustomShareImagePath || addMsg.CustomShareImagePath==''" src="../../assets/img/default.png" style="width:80px;height:80px" alt="">
                                        <el-button @click="clearCustom" style="position: absolute;right: 6px;top: -10px;" v-if="addMsg.CustomShareImagePath && addMsg.CustomShareImagePath!=''" size="mini" type="danger" icon="el-icon-close" circle></el-button>
                                        <img style="width:80px;height:80px" :src="domainManager().ImageUrl+addMsg.CustomShareImagePath" alt="">
                                    </div>
                                    <p style="margin-top:-15px" class="blue f12">
                                        <span class="point" @click="imgDig=true">查看图例</span>
                                    </p>
                                </el-form-item>
                                <el-form-item label="上架状态">
                                    <el-switch
                                        v-model="addMsg.GoodsStatus"
                                        active-color="#409EFF"
                                        :active-value="1"
                                        :inactive-value="0">
                                    </el-switch>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-card>
                    <el-card style="margin-top:20px" shadow="never">
                        <div slot="header" class="clearfix">
                            <span>价格库存</span>
                        </div>
                        <el-row>
                            <el-col :span="12">
                                
                                <el-form-item label="排序">
                                    <el-tooltip class="item" effect="dark" content="排序值越小排序越靠前" placement="top-start"
                                        style="position: absolute;left: -22px;top:12px">
                                        <i class="elzk el-tooltip el-icon-info"></i>
                                    </el-tooltip>
                                    <el-input v-model="addMsg.InventoryNum" type="number" min="1" size="small" placeholder="请输入内容" class="input-with-select"></el-input>
                                </el-form-item>
                                <el-form-item label="售价" prop="SellingPrice">
                                    <el-input v-model="addMsg.SellingPrice" type="number" min="1" size="small" placeholder="请输入内容" class="input-with-select">
                                        <el-button slot="append">元</el-button>
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="原价" prop="OriginalPrice">
                                    <el-tooltip class="item" effect="dark" content="以划线形式显示" placement="top-start"
                                        style="position: absolute;left: -22px;top:12px">
                                        <i class="elzk el-tooltip el-icon-info"></i>
                                    </el-tooltip>
                                    <el-input v-model="addMsg.OriginalPrice" type="number" min="1" size="small" placeholder="请输入内容" class="input-with-select">
                                        <el-button slot="append">元</el-button>
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="单位" prop="Unit">
                                    <el-input v-model="addMsg.Unit" size="small" placeholder="请输入内容" class="input-with-select">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="成本价">
                                    <el-input v-model="addMsg.CostPrice" type="number" min="1" size="small" placeholder="请输入内容" class="input-with-select">
                                        <el-button slot="append">元</el-button>
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="商品面议">
                                    <el-tooltip class="item" effect="dark" content="如果开启面议，则商品无法在线支付" placement="top-start"
                                        style="position: absolute;left: -22px;top:12px">
                                        <i class="elzk el-tooltip el-icon-info"></i>
                                    </el-tooltip>
                                    <el-switch
                                        v-model="addMsg.IsGoodsNegotiable"
                                        active-color="#409EFF"
                                        :active-value="1"
                                        :inactive-value="0">
                                    </el-switch>
                                </el-form-item>
                                <el-form-item label="已出售量">
                                    <el-tooltip class="item" effect="dark" content="前端展示的销量=实际销量+已出售量" placement="top-start"
                                        style="position: absolute;left: -22px;top:12px">
                                        <i class="elzk el-tooltip el-icon-info"></i>
                                    </el-tooltip>
                                    <el-input v-model="addMsg.SalesNum" type="number" min="1" size="small" placeholder="请输入内容" class="input-with-select">
                                        <el-button slot="append">件</el-button>
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="商品总库存" prop="InventoryNum">
                                    <el-input v-model="addMsg.InventoryNum" type="number" min="1" size="small" placeholder="请输入内容" class="input-with-select"></el-input>
                                </el-form-item>
                                <el-form-item label="默认规则名">
                                    <el-input v-model="addMsg.DefaultSpecificationName" size="small" placeholder="请输入内容" class="input-with-select"></el-input>
                                </el-form-item>
                                <el-form-item label="商品规格">
                                    <el-tooltip class="item" effect="dark" content="如有颜色、尺码等多种规格，请添加商品规格" placement="top-start"
                                        style="position: absolute;left: -22px;top:12px">
                                        <i class="elzk el-tooltip el-icon-info"></i>
                                    </el-tooltip>
                                    <div style="width:130%">
                                        <div class="app-attr-group">
                                            <div v-for="(item,index) in SpecificationList" :key="index" style="margin-bottom:16px;">
                                                <div flex="dir:left cross:center" class="bg">
                                                    <span>规格名:</span>  
                                                    <el-input v-model="item.Name" size="mini" style="width: 94px;margin: 0px 16px;"></el-input> 
                                                    <el-checkbox @change="CheckBox" v-show="index==0" v-model="item.EnabledImage" :true-label="1" :false-label="2">规格图片</el-checkbox> 
                                                    <div style="margin-left: auto; line-height: 1;">
                                                        <div @click="DeleteggModule(item,index)" class="el-image del-img">
                                                            <img src="../../assets/img/userman/del1.png" class="el-image__inner">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div flex="dir:left" style="padding: 0px 10px;margin-top: 16px;">
                                                    <div class="box-grow-0">规格值：</div>
                                                    <div v-for="(item2,index2) in item.SpecificationValueList" :key="index2" flex="dir:left" style="flex-wrap: wrap;">
                                                        <div class="attr-list">
                                                            <el-input size="mini" v-model="item2.Name" width="152px"></el-input>
                                                            <i @click="Deleteggz(item,index,index2)" class="el-icon-error close"></i>
                                                            <div v-if="index==0 && item.EnabledImage==1" flex="cross:center main:center" class="img-box">
                                                                <div class="attr-jt"></div>
                                                                <div class="app-attachment">
                                                                    <div style="line-height: normal; display: inline-block;">
                                                                        <span>+添加图片</span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div> 
                                            <div v-if="SpecificationList.length<6" flex="dir:left cross:center" class="bg">
                                                <el-button @click="addggModeule" size="small">添加规格模板</el-button>
                                                <el-button size="small">添加规格项目</el-button>
                                                <span style="padding-left: 14px;color: rgb(201, 201, 201)">注：规格名最多添加5个</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div style="width: 130%; margin-top: 24px;">
                                        <div class="app-attr">    
                                            <div class="box">
                                                <!-- <el-checkbox v-model="val2">全选</el-checkbox> -->
                                                <el-form-item label-width="90px" style="display:inline-block" label="批量设置">
                                                    <el-input style="width:560px" size="small" v-model="addMsg.GoodsNumbers" placeholder="请输入内容" class="input-with-select">
                                                        <el-select  v-model="val2" slot="prepend" placeholder="请选择">
                                                            <el-option label="餐厅名" value="1"></el-option>
                                                            <el-option label="订单号" value="2"></el-option>
                                                            <el-option label="用户电话" value="3"></el-option>
                                                        </el-select>
                                                         <el-button slot="append" >确定</el-button>
                                                    </el-input>
                                                </el-form-item>
                                            </div>
                                            <el-table
                                                ref="table"
                                                :data="tableData"
                                                border
                                                style="width: 100%"
                                                @selection-change="TbaleSelectionChange">
                                                <el-table-column
                                                type="selection"
                                                width="55">
                                                </el-table-column>
                                                
                                                <el-table-column
                                                    v-for="(item,index) in SpecificationList"
                                                    :key="index"
                                                    :label="item.Name">
                                                </el-table-column>
                                                <el-table-column
                                                :render-header="renderHeader"
                                                label="价格">
                                                    <template slot-scope="scope">
                                                        <el-input size="small"></el-input>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column
                                                :render-header="renderHeader"
                                                label="库存">
                                                    <template slot-scope="scope">
                                                        <el-input size="small"></el-input>

                                                    </template>
                                                </el-table-column>
                                                <el-table-column
                                                label="重量">
                                                    <template slot-scope="scope">
                                                        <el-input size="small"></el-input>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column
                                                prop="address"
                                                label="货号">
                                                <template slot-scope="scope">
                                                        <el-input size="small"></el-input>
                                                    </template>
                                                </el-table-column>
                                            </el-table>
                                        </div>
                                    </div>
                                </el-form-item>
                                <el-form-item label="商品货号">
                                    <el-input v-model="addMsg.GoodsNumbers" size="small" placeholder="请输入内容" class="input-with-select">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="商品重量">
                                    <el-input v-model="addMsg.GoodsWeight" type="number" min="1" size="small" placeholder="请输入内容" class="input-with-select">
                                        <el-button slot="append">克</el-button>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-card> 
                    <el-card style="margin-top:20px" shadow="never">
                        <div slot="header" class="clearfix">
                            <span>商品服务</span>
                        </div>
                        <el-row> 
                            <el-col :span="12">
                                <el-form-item label="商品服务">
                                    <template v-if="addMsg.ServiceList && addMsg.ServiceList.length>0">   
                                        <el-tag style="margin-right:10px;" @close="ServiceCheck(item,index)" v-for="(item,index) in addMsg.ServiceList" :key="index" closable>{{item.Name}}</el-tag>
                                    </template>
                                    <el-button @click="serviceDig=true,keepServiceList=addMsg.ServiceList" v-if="addMsg.IsDefaultService==2" size="mini">新增服务</el-button>
                                    <el-checkbox v-model="addMsg.IsDefaultService" :true-label='1' :false-label="2">默认服务</el-checkbox>
                                </el-form-item>
                                <!-- FreightId -->
                                <el-form-item label="运费设置">
                                    <el-tooltip class="item" effect="dark" content="选择第一项（默认运费）将会根据运费管理的（默认运费）变化而变化" placement="top-start"
                                        style="position: absolute;left: -22px;top:12px">
                                        <i class="elzk el-tooltip el-icon-info"></i>
                                    </el-tooltip>
                                    <template v-if="addMsg.FreightName && addMsg.FreightName!=''">   
                                        <el-tag style="margin-right:10px;" @close="addMsg.FreightName='',addMsg.FreightId=-1" closable>{{addMsg.FreightName}}</el-tag>
                                    </template>
                                    <el-button @click="chooseyfDig=true,keepFreightId=addMsg.FreightId" size="mini">选择运费</el-button>
                                </el-form-item>
                                <el-form-item label="自定义表单">
                                    <el-tooltip class="item" effect="dark" content="选择第一项（默认表单）将会根据表单列表的（默认表单）变化而变化" placement="top-start"
                                        style="position: absolute;left: -22px;top:12px">
                                        <i class="elzk el-tooltip el-icon-info"></i>
                                    </el-tooltip>
                                    <template v-if="addMsg.FormsName && addMsg.FormsName!=''">   
                                        <el-tag style="margin-right:10px;" @close="addMsg.FormsName='',addMsg.FormsId=-1" closable>{{addMsg.FormsName}}</el-tag>
                                    </template>
                                    <el-button @click="choosebdDig=true,keepFormsId=addMsg.FormsId" size="mini">选择表单</el-button>
                                </el-form-item>
                                <el-form-item label="限购数量">
                                    <el-form-item label-width="60px" label="商品">
                                        <el-input :disabled="BuyGoodsNumState" v-model="addMsg.LimitBuyGoodsNum" style="width:420px;margin-left:15px" type="number" min="1" size="small" placeholder="请输入内容" class="input-with-select">
                                            <el-button slot="append">件</el-button>
                                        </el-input>
                                        <el-checkbox style="margin-left:10px" v-model="BuyGoodsNumState">不限制</el-checkbox>
                                    </el-form-item>
                                    <el-form-item label-width="60px" label="订单">
                                        <el-input :disabled="BuyOrderNumState" v-model="addMsg.LimitBuyOrderNum" style="width:420px;margin-left:15px" type="number" min="1" size="small" placeholder="请输入内容" class="input-with-select">
                                            <el-button slot="append">单</el-button>
                                        </el-input>
                                        <el-checkbox style="margin-left:10px" v-model="BuyOrderNumState">不限制</el-checkbox>
                                    </el-form-item>
                                </el-form-item>
                                <el-form-item label="单品满件包邮">
                                    <el-tooltip class="item" effect="dark" content="如果设置0或空，则不支持满件包邮" placement="top-start"
                                        style="position: absolute;left: -22px;top:12px">
                                        <i class="elzk el-tooltip el-icon-info"></i>
                                    </el-tooltip>
                                    <el-input v-model="addMsg.FullNumPinkage" type="number" min="1" size="small" placeholder="请输入内容" class="input-with-select">
                                        <el-button slot="append">件</el-button>
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="单品满额包邮">
                                    <el-tooltip class="item" effect="dark" content="如果设置0或空，则不支持满额包邮" placement="top-start"
                                        style="position: absolute;left: -22px;top:12px">
                                        <i class="elzk el-tooltip el-icon-info"></i>
                                    </el-tooltip>
                                    <el-input v-model="addMsg.FullMoneyPinkage" type="number" min="1" size="small" placeholder="请输入内容" class="input-with-select">
                                        <el-button slot="append">元</el-button>
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="区域购买">
                                    <el-switch
                                        v-model="addMsg.IsAreaBuy"
                                        active-color="#409EFF"
                                        :active-value="1"
                                        :inactive-value="0">
                                    </el-switch>
                                </el-form-item>
                                <el-form-item v-if="addMsg.IsAreaBuy==1" label="允许购买区域">
                                    <span v-if="addMsg.AreaList.length==0" @click="addOf" class="blue point">+添加地区</span>
                                    <div v-if="addMsg.AreaList.length>0" style="border: 1px solid #EBEEF5;padding:20px" flex="dir:left box:last">
                                        <div>
                                            <div flex="dir:left" style="flex-wrap: wrap; width: 90%;">
                                                <span>区域：</span>
                                                <el-tag v-for="item in addMsg.AreaList" :key="item.Id" type="info" style="margin:5px">{{item.Name}}</el-tag>
                                            </div>
                                        </div>
                                        <div>
                                            <img @click="editQy" src="../../assets/img/userman/edit.png" alt="">
                                            <img @click="addMsg.AreaList=[],AreaList=[]" style="margin-left:15px" src="../../assets/img/userman/del.png" alt="">
                                        </div>
                                    </div>
                                </el-form-item>


                            </el-col>
                        </el-row>
                    </el-card> 
                    <el-card style="margin-top:20px" shadow="never">
                        <div slot="header" class="clearfix">
                            <span>营销设置</span>
                        </div>
                        <el-row> 
                            <el-col :span="12">
                                <el-form-item label="积分赠送">
                                    <el-tooltip class="item" effect="dark" placement="top"
                                        style="position: absolute;left: -10px;top:12px">
                                        <div slot="content">
                                            用户购物赠送的积分, 如果不填写或填写0，则默认为不赠送积分<br/>
                                            如果为百分比则为按成交价格的比例计算积分<br/>
                                            如: 购买2件，设置10 积分, 不管成交价格是多少， 则购买后获得20积分<br/>
                                            如: 购买2件，设置10%积分, 成交价格2 * 200= 400， 则购买后获得 40 积分（400*10%)<br/>
                                            </div>
                                        <i class="el-tooltip el-icon-info"></i>
                                    </el-tooltip>
                                    <el-input v-model="addMsg.IntegralPresent" style="width:670px;margin-left:15px" type="number" min="1" size="small" placeholder="请输入内容" class="input-with-select">
                                        <el-button slot="append">
                                            分
                                            <el-radio v-model="addMsg.IntegralPresentType" :label="2">固定值</el-radio>
                                            <el-radio v-model="addMsg.IntegralPresentType" :label="1">百分比</el-radio>
                                        </el-button>
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="积分抵扣">
                                    <el-tooltip class="item" effect="dark" content="如果设置0，则不支持积分抵扣 如果带%则为按成交价格的比例计算抵扣多少元" placement="top"
                                        style="position: absolute;left: -10px;top:12px">
                                        <i class="el-tooltip el-icon-info"></i>
                                    </el-tooltip>
                                    <el-input v-model="addMsg.PointsDeduction" style="width:670px;margin-left:15px" type="number" min="1" size="small" placeholder="请输入内容" class="input-with-select">
                                    <template slot="prepend">最多抵扣</template>
                                        <el-button slot="append">
                                            分
                                            <el-radio v-model="addMsg.PointsDeductionType" :label="2">固定值</el-radio>
                                            <el-radio v-model="addMsg.PointsDeductionType" :label="1">百分比</el-radio>
                                        </el-button>
                                    </el-input>
                                </el-form-item>
                                <el-form-item label-width="110px">
                                    <el-checkbox v-model="addMsg.IsMultipleDeduction" :true-label="1" :false-label="2">允许多件抵扣</el-checkbox>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-card>  
                    <el-card style="margin-top:20px" shadow="never">
                        <div slot="header" class="clearfix">
                            <span>商品详情</span>
                        </div>
                        <el-row> 
                            <el-col :span="12">
                                <UE :defaultMsg=defaultMsg :config=config ref="ue" ></UE>
                            </el-col>
                        </el-row>
                    </el-card>  
                </el-tab-pane>
                <el-tab-pane label="分销价设置" name="second">
                    <el-form-item label="是否开启单独分销">
                        <el-switch
                            v-model="addMsg.SeparateDistribution"
                            active-color="#409EFF"
                            :active-value="1"
                            :inactive-value="0">
                        </el-switch>
                    </el-form-item>
                    <el-form-item label="分销类型">
                        <el-radio v-model="addMsg.SeparateDistributionType" :label="1">普通设置</el-radio>
                        <el-radio v-model="addMsg.SeparateDistributionType" :label="2">详细设置</el-radio>
                    </el-form-item>
                    <el-form-item label="分销佣金类型">
                        <el-radio v-model="addMsg.SeparateDistributionMoneyType" :label="2">固定金额</el-radio>
                        <el-radio v-model="addMsg.SeparateDistributionMoneyType" :label="1">百分比</el-radio>
                    </el-form-item>
                </el-tab-pane>
                <el-tab-pane label="会员价设置" name="third">
                    <el-form-item label="是否享受会员功能">
                        <el-switch
                            v-model="addMsg.EnjoyMember"
                            active-color="#409EFF"
                            :active-value="1"
                            :inactive-value="0">
                        </el-switch>
                    </el-form-item>
                    <el-form-item label="是否单独设置会员价">
                        <el-switch
                            v-model="addMsg.SeparateDistribution"
                            active-color="#409EFF"
                            :active-value="1"
                            :inactive-value="0">
                        </el-switch>
                    </el-form-item>
                    <el-form-item label="会员价设置">
                        <el-button @click="CommonJump('setMember')" size="small" type="danger">如需设置请先添加会员</el-button>   
                    </el-form-item>
                    
                </el-tab-pane>
            </el-tabs>
        </el-form>
        <div class="bottom-div" style="margin-top:20px">
            <el-button size="small" type="primary" @click="Save('addMsg')">保存</el-button>
            <el-button size="small">预览</el-button>
        </div>
    </div>
    <!-- 选择分类 -->
    <el-dialog custom-class="app-add-cat" title="选择分类" :visible.sync="flDig" width="1100px">
        <el-row>
            <el-col :span="8" style="padding:0 10px;box-sizing:border-box">
                <h3 style="padding:15px 0">一级分类</h3>
                <div class="app-goods-cat-list active">
                    <el-checkbox-group v-model="addMsg.CategoryList" @change="handleCheckChange">
                        <div v-for="(item,index) in fenleiData" :key="index" flex="dir:left box:first" class="cat-item">
                            <el-checkbox :label="item">
                                <span style="display: none;">{{item.Name}}</span>
                            </el-checkbox>
                            <div flex="box:last cross:center">
                                <span>{{item.Name}}</span>
                                <i v-if="item.ChildList.length>0" @click="getChild2(item.ChildList)" class="el-icon-arrow-right"></i>
                            </div>
                        </div>
                    </el-checkbox-group>
                    
                </div>
            </el-col>
            <el-col v-show="childList2.length>0" :span="8" style="padding:0 10px;box-sizing:border-box">
                <h3 style="padding:15px 0">二级分类</h3>
                <div class="app-goods-cat-list active">
                    <el-checkbox-group v-model="addMsg.CategoryList">
                        <div v-for="(item,index) in childList2" :key="index" flex="dir:left box:first" class="cat-item">
                            <el-checkbox :label="item">
                                <span style="display: none;">{{item.Name}}</span>
                            </el-checkbox>
                            <div flex="box:last cross:center">
                                <span>{{item.Name}}</span>
                                <i v-if="item.ChildList.length>0" @click="getChild3(item.ChildList)" class="el-icon-arrow-right"></i>
                            </div>
                        </div>
                    </el-checkbox-group>
                    
                </div>
            </el-col>
            <el-col v-show="childList3.length>0" :span="8" style="padding:0 10px;box-sizing:border-box">
                <h3 style="padding:15px 0">三级分类</h3>
                <div class="app-goods-cat-list active">
                    <el-checkbox-group v-model="addMsg.CategoryList">
                        <div v-for="(item,index) in childList3" :key="index" flex="dir:left box:first" class="cat-item">
                            <el-checkbox :label="item">
                                <span style="display: none;">{{item.Name}}</span>
                            </el-checkbox>
                            <div flex="box:last cross:center">
                                <span>{{item.Name}}</span>
                                <i class="el-icon-arrow-right"></i>
                            </div>
                        </div>
                    </el-checkbox-group>
                    
                </div>
            </el-col>
        </el-row>
        <div class="tag-box">
            <el-tag @close="exitCheck(item)" v-for="(item,index) in addMsg.CategoryList" :key="index" type="warning" closable style="margin-right:5px">{{item.Name}}</el-tag>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="flDig=false,addMsg.CategoryList=keepCategoryList">取 消</el-button>
            <el-button @click="flDig = false" size="small" type="primary">确 定</el-button>
        </span>
    </el-dialog>   
    <!-- 查看图例 -->
    <el-dialog title="查看自定义分享图片图例" :visible.sync="imgDig" width="30%">
        <div class="center">
            <img style=" width: 310px;height: 360px;" src="../../assets/img/userman/app-share-name.png" alt="">
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="imgDig = false" size="small" type="primary">我知道了</el-button>
        </span>
    </el-dialog>  
    <!-- 选择图片 -->
    <el-dialog title="选择文件" :visible.sync="changeState" width="1240px">
        <ChooseImg  @SelectId="SelectId"></ChooseImg>   
    </el-dialog>
    <!-- 选择视频 -->
    <el-dialog title="选择文件" :visible.sync="changeState1" width="1240px">
        <Choosevideo  @Selectvideo="Selectvideo"></Choosevideo>   
    </el-dialog>
    <!-- 选择商品服务 -->
    <el-dialog title="选择商品服务" :visible.sync="serviceDig" width="30%">
        <div style="border: 1px solid #EBEEF5;padding:20px 0">
            <el-checkbox-group v-model="checkService">
                <el-checkbox style="margin:5px" v-for="item in serviceList" :label="item" :key="item.Id">{{item.Name}}</el-checkbox>
            </el-checkbox-group>
        </div>  
        <span slot="footer" class="dialog-footer">
            <el-button @click="addMsg.ServiceList=keepServiceList" size="small">取消</el-button>
            <el-button @click="addMsg.ServiceList=checkService,serviceDig = false" size="small" type="primary">确定</el-button>
        </span> 
    </el-dialog>
    <!-- 选择运费 -->
    <el-dialog title="选择运费" top="2%" :visible.sync="chooseyfDig" width="30%">
        <div>
            <el-radio-group v-model="val">
                <el-radio @change="YfSelect" style="padding-bottom:10px" class="yfradio" :label="{RulesName:'默认运费',ID:0}">默认运费</el-radio>
                <el-radio @change="YfSelect" style="padding-bottom:10px" class="yfradio" v-for="(item,index) in ruleList" :key="index" :label="item">{{item.RulesName}}</el-radio>
            </el-radio-group>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="chooseyfDig = false,addMsg.FreightId=keepFreightId">取 消</el-button>
            <el-button size="small" @click="chooseyfDig = false" type="primary">确 定</el-button>
        </span>
    </el-dialog> 
    <!-- 选择表单 -->
    <el-dialog title="选择表单" top="2%" :visible.sync="choosebdDig" width="30%">
        <div>
            <el-radio-group v-model="val1">
                <el-radio @change="YfSelect1" style="padding-bottom:10px" class="yfradio" :label="{Name:'默认运费',Id:0}">默认表单</el-radio>
                <!-- <el-radio @change="YfSelect" style="padding-bottom:10px" class="yfradio" v-for="(item,index) in ruleList" :key="index" :label="item">{{item.RulesName}}</el-radio> -->
            </el-radio-group>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="choosebdDig = false,addMsg.FormsId=keepFormsId">取 消</el-button>
            <el-button size="small" @click="choosebdDig = false" type="primary">确 定</el-button>
        </span>
    </el-dialog>
    <!--新增规则弹窗-->
    <el-dialog custom-class="regionDig" title="新增规则" :visible.sync="dialogFormVisible" >
        <region_Choice @event1="change($event)" :List="AreaList" ref="child"></region_Choice>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" size="small" @click="Addto">确 定</el-button>
        </div>
    </el-dialog> 
    <!-- 选择规格模板 -->
    <el-dialog custom-class="speciDig" title="选择规格模板" :visible.sync="speciDig" width="680px">
        <div flex="dir:left">
            <div class="tpl-box">
                <div class="tpl-head">规格名选择</div>
                <div class="tpl-scrollbar el-scrollbar">
                    <el-checkbox @change="speciDigActive=index,changeCheckAll(item,index)" v-for="(item,index) in speciList" v-model="item.checkAll" :key="index">{{item.Name}}</el-checkbox>
                    
                </div>
            </div>
            <div class="tpl-box" style="margin-left:10px">
                <div class="tpl-head">规格值选择</div>
                <div class="tpl-scrollbar el-scrollbar">
                    <el-checkbox-group v-model="item.SpecificationValueList" @change="changeSpeciList(item,index)" v-for="(item,index) in speciList" :key="index" >
                        <span v-if="speciDigActive==index">
                            <el-checkbox style="padding-left:10px" v-for="(item2,index1) in item.NewSpecList" :label="item2" :key="index1">{{item2.Name}}</el-checkbox>
                        </span>    
                    </el-checkbox-group>
                </div>
            </div>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" size="small" @click="chooseSpecificationValueList">确定选择</el-button>
        </div>
    </el-dialog> 
  </div>
</template>
<script>
import ChooseImg from "@/components/global/ChooseImg.vue";
import Choosevideo from "@/components/global/Choosevideo.vue";
import region_Choice from '@/components/setup/view/regionChoice'
import UE from '@/components/global/UE.vue'
export default {
    components: {
      ChooseImg,Choosevideo,region_Choice,UE
    },
    data() {
        return {
            tableData:[{
                Id:1
            }],
            SpecificationList:[],
            SpecificationPriceList:[],
            speciDigActive:-1,
            newSpecificationValueList:[],
            SpecificationValueList:[],
            speciDig:false,
            speciList:[],
            
            val2:'',
            defaultMsg: '',
            config: {
                initialFrameWidth: null,
                initialFrameHeight: 350,
            },
            dialogFormVisible:false,
            choosebdDig:false,
            chooseyfDig:false,
            serviceDig:false,
            changeState1:false,
            changeState:false,
            BuyGoodsNumState:true,
            BuyOrderNumState:true,
            imgDig:false,
            activeName:'first',
            flDig:false,
            addMsg:{
                Id:0,
                CategoryList:[],
                Name:'',
                CarouselImageList:[],
                VideoAddress:'',
                CustomShareTitles:'',
                CustomShareImage:'',
                CustomShareImagePath:'',
                GoodsStatus:0,
                InventoryNum:0,
                DefaultSpecificationName:'',
                SpecificationList:[],
                SpecificationPriceList:[],
                SellingPrice:0,
                OriginalPrice:0,
                Unit:'件',
                CostPrice:0,
                IsGoodsNegotiable:2,
                SalesNum:0,
                GoodsNumbers:'',
                IsCustomSpecification:2,
                GoodsWeight:'',
                IsDefaultService:1,
                ServiceList:[],
                FreightId:-1,
                FreightName:'',
                FormsId:-1,
                FormsName:'',
                LimitBuyGoodsNum:-1,
                LimitBuyOrderNum:-1,
                IsAreaBuy:2,
                AreaList:[],
                IntegralPresent:0,
                IntegralPresentType:2,
                PointsDeduction:0,
                PointsDeductionType:2,
                IsMultipleDeduction:2,
                GoodsDetails:'',
                SeparateDistribution:2,
                SeparateDistributionType:1,
                SeparateDistributionMoneyType:1,
                EnjoyMember:1,
                SeparateSetMember:2,
                IsQuickBuy:1,

                

            },
            fenleiData:[],
            checkList:[],
            childList2:[],
            childList3:[],
            keepCategoryList:[],
            rules:{
                CategoryIdNew: [
                    { required: true, message: '分类不能为空', trigger: 'change' }
                ],
                Name: [
                    { required: true, message: '请输入商品名称', trigger: 'blur' }
                ],
                InventoryNum: [
                    { required: true, message: '请输入商品总库存', trigger: 'blur' }
                ],
                SellingPrice: [
                    { required: true, message: '请输入商品售价', trigger: 'blur' }
                ],
                OriginalPrice: [
                    { required: true, message: '请输入商品原价', trigger: 'blur' }
                ],
                Unit: [
                    { required: true, message: '请输入商品单位', trigger: 'blur' }
                ],
            },
            imgType:1,
            serviceList:[],
            checkService:[],
            keepServiceList:[],
            keepFreightId:-1,

            ruleList:[],
            val:{},
            val1:{},
            keepFormsId:-1,
            AreaList:[],
        };
    },
    created(){},
    mounted() {
        if(this.$route.query.UserId){
            this.UserId=this.$route.query.UserId;
            // this.getData()

        }else{
            this.$refs.ue.InitData();
        }
        this.getTree();
        this.getService();
        this.getRule();
        this.getSpeciList();

    },
    methods: {
        TbaleSelectionChange(){},
        renderHeader (h,{column}) { // h即为cerateElement的简写，具体可看vue官方文档
            return h(
            'div',
                [ 
                h('span', column.label),
                    h('i', {
                    class:'iconfont icon-xinghao1',
                    style:'color:#F56C6C;left: -41px;position: relative;'
                    })
                ]
            );
        },
        CheckBox(val){
            console.log(val);
        },
        // 删除规格模板
        DeleteggModule(item,index){
            this.SpecificationList.splice(index,1);
            this.$forceUpdate();
        },
        // 删除规格值
        Deleteggz(item,index,index2){
            this.SpecificationList[index].SpecificationValueList.splice(index2,1);
            this.$forceUpdate();
        },
        // 全选
        changeCheckAll(item,index){
            if(item.checkAll){
                this.speciList[index].SpecificationValueList=item.NewSpecList;
            }else{
                this.speciList[index].SpecificationValueList=[];
            }
            this.$forceUpdate();
        },
        changeSpeciList(val,index){
            this.$forceUpdate();

        },
        chooseSpecificationValueList(){
            if(!this.SpecificationList){
                this.SpecificationList=[];
            }
            let arr=[];
            this.speciList.forEach(item=>{
                if(item.checkAll){
                    arr.push(item);
                }  
            })
            this.SpecificationList=JSON.parse(JSON.stringify(this.SpecificationList.concat(arr)))
            this.SpecificationList.forEach((item,index)=>{
                item.EnabledImage=2;
                item.Sort=index;
                item.SpecificationValueList.forEach((list,index2)=>{
                    list.Image="";
                    list.Sort=index2;
                })
            })
            console.log("this.SpecificationList",this.SpecificationList)
            let SpecificationPriceList=[];
            let data=this.SpecificationList;
            let namerr=[];
            for(let i=0;i<data.length;i++){
                namerr.push(`name${i}`)
                console.log("namerr",namerr)
               for(let j=0;j<data[i].SpecificationValueList.length;j++){
                    let list= data[i].SpecificationValueList;
                    for(let k=0;k<namerr.length;k++){
                        let obj={
                            GoodsNumbers:'',
                            GoodsWeight:0,
                            InventoryNum:0,
                            SellingPrice:0,
                            SpecificationSort:'',
                        }
                        obj[namerr[k]]=list[j].Name;
                        SpecificationPriceList.push(obj);

                    }
                } 
            }
            console.log("SpecificationPriceList",SpecificationPriceList)
            this.speciDig=false;
        },
        addggModeule(){
            this.speciDig=true;
            this.speciList.forEach(item=>{
                item.NewSpecList=[];
                item.checkAll=false;
                item.SpecificationValueList=[];
                item.SpecList.forEach(val=>{
                    let obj={
                        Id:item.Id,
                        Name:val
                    }
                    item.NewSpecList.push(obj)
                })  
            })
        },
        Save(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let content = this.$refs.ue.getUEContent();
                    this.addMsg.GoodsDetails=content;
                    this.apipost("/api/product/SetProductGoodsInfo",this.addMsg, res => {
                        if(res.data.resultCode==1){
                            this.Success(res.data.message)
                            this.CommonJump('goodsList')
                        }else{
                            this.Error(res.data.message)
                        }
                        
                    })
                } else {
                    return false;
                }
          });
        },
        getSpeciList(){
            let msg={
                pageIndex:1,
                pageSize:999,
                Name:'',
                Id:0,
                Content:'',
            }
            this.apipost("/api/product/GetProductSpecificationPageList", msg, res => {
                if(res.data.resultCode==1){
                    let pageData=res.data.data.pageData;
                    this.speciList=pageData;
                    this.speciList.forEach(item=>{
                        item.NewSpecList=[];
                        item.checkAll=false;
                        item.SpecList.forEach(val=>{
                            let obj={
                                Id:item.Id,
                                Name:val
                            }
                            item.NewSpecList.push(obj)
                        })  
                    })
                    
                    console.log("speciList",this.speciList)
                }
                
            })
        },
        editQy(){
            this.dialogFormVisible=true;
            setTimeout(()=>{
                    this.$refs.child.Receive(this.AreaList)
            },1000)
        },
        Addto(){
            this.addMsg.AreaList=[];
            this.AreaList.forEach(item=>{
                let obj={
                    Id:item.RegionId,
                    Name:item.RegionName,
                }
                this.addMsg.AreaList.push(obj);
            })
            this.dialogFormVisible=false; 
        },
        addOf(){
          this.dialogFormVisible=true;
          this.AreaList=[];
          this.addMsg.AreaList=[];
          setTimeout(()=>{
            this.$refs.child.Receive(this.AreaList)
          },1000)
        },
        change(data){
            this.AreaList=data;
        },
        YfSelect1(val){
            this.addMsg.FormsId=val.Id;
            this.addMsg.FormsName=val.Name; 
        },
        YfSelect(val){
            this.addMsg.FreightId=val.ID;
            this.addMsg.FreightName=val.RulesName;
            
        },
        ServiceCheck(item,index){
            this.addMsg.ServiceList.forEach((list,k)=>{
                if(list.Id==item.Id){
                    this.addMsg.ServiceList.splice(k,1);
                }
            })
        },
        clearCustom(){
            this.addMsg.CustomShareImage='';
            this.addMsg.CustomShareImagePath='';
        },
        Selectvideo(val){
            this.addMsg.VideoAddress=val.Path;
            this.changeState1=false; 
        },
        ClearCarouse(index){
            this.addMsg.CarouselImageList.splice(index,1);
        },
        openChangeDig(val){
            this.changeState=true;
            this.imgType=val;
        },
        SelectId(msg){
            if(this.imgType==1){
                let obj={
                    Id:msg.selectId,
                    Path:msg.url,
                }
                this.addMsg.CarouselImageList.push(obj);
            }
            if(this.imgType==2){
                this.addMsg.CustomShareImage=msg.selectId;
                this.addMsg.CustomShareImagePath=msg.url;
            }
            this.changeState=false; 
        },
        
        getChild3(ChildList){
            this.childList3=ChildList;
        },
        getChild2(ChildList){
            this.childList2=ChildList;
        },
        handleCheckChange(){
            this.addMsg.CategoryList.forEach((item,k)=>{
                item.CategoryId=item.Id;
            })
        },
        exitCheck(item,index){
            this.addMsg.CategoryList.forEach((list,k)=>{
                if(list.Id==item.Id){
                    this.addMsg.CategoryList.splice(k,1);
                }
            })
        },
        getTree(){
            let msg1={
                Id:0,
                Name:'',
                Tier:0,
                ParentId:0,
                Enabled:1,
                IsShow:1,
            }
            this.apipost("/api/product/GetProductCategoryTreeList", msg1, res => {
                if(res.data.resultCode==1){
                    let pageData=res.data.data;
                    this.fenleiData=pageData;  
                }
                
            })
        },
        getData(){
            this.apipost("/api/user/GetMemberUserInfo",{UserId:this.UserId}, res => {
                this.userInfo=res.data.data;
            })
        },
        getRule(){
            let msg1={
                pageIndex:1,
                pageSize:999,
                RulesName:'',
            }
            this.apipost("/api/MallBase/GetLogisticsRulesPage", msg1, res => {
                if(res.data.resultCode==1){
                    let pageData=res.data.data.pageData;
                    this.ruleList=pageData;  
                }
                
            })
        },
        getService(){
            let msg={
                pageIndex:1,
                pageSize:200,
                Name:'',
                IsDefault:0,
            };
            this.apipost("/api/product/GetProductServicePageList",msg, res => {
                if(res.data.resultCode==1){
                    this.total=res.data.data.count;
                    let pageData=res.data.data.pageData;
                    this.serviceList=pageData;
                }
                
            })
        },

    },
  };

</script>
<style>
.goodsListEdit .el-table th>.cell{
    padding-left: 20px!important;
}
.goodsListEdit .app-attr .box {
    line-height: 64px;
    border-top: 1px solid #E8EAEE;
    border-left: 1px solid #E8EAEE;
    border-right: 1px solid #E8EAEE;
    padding: 0 16px;
}
.speciDig .tpl-scrollbar .el-checkbox {
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    padding:10px 0;
}
.speciDig .tpl-scrollbar {
    height: calc(440px - 44px - 10px);
}
.speciDig .tpl-box .tpl-head {
    padding: 0 20px;
    font-size: 15px;
    color: #909399;
    margin-bottom: 10px;
    line-height: 44px;
    background: #f5f7fa;
}
.speciDig .tpl-box {
    width: 300px;
    height: 440px;
}
.goodsListEdit .app-attr-group .attr-jt {
    background: #ffffff;
    width: 6px;
    height: 6px;
    border-top: 1px solid rgb(235, 238, 245);
    border-right: 1px solid #EBEEF5;
    transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    position: absolute;
    top: -5px;
}
.goodsListEdit .app-attr-group .img-box {
    position: relative;
    height: 100px;
    width: 100px;
    margin-top: 8px;
    border: 1px solid #EBEEF5;
}
.goodsListEdit .app-attr-group .close {
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 16px;
    cursor: pointer;
}
.goodsListEdit .app-attr-group .attr-list {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
    position: relative;
    cursor: move;
}
.goodsListEdit .box-grow-0 {
    min-width: 0;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}
.goodsListEdit .app-attr-group .del-img {
    height: 20px;
    width: 20px;
    cursor: pointer;
}
.goodsListEdit .app-attr-group .bg {
    height: 44px;
    padding: 0 10px;
    background: #f8f8f8;
}
.regionDig .regionChoice .item_b{
    margin-bottom:10px;
}
.goodsListEdit .app-attr-group .bg {
    height: 44px;
    padding: 0 10px;
    background: #f8f8f8;
}
.goodsListEdit .app-attr-group {
    border: 1px solid #EBEEF5;
    padding: 10px;
}
.goodsListEdit .delBtn{
    position: absolute;
    right: -8px;
    top: -8px;
    padding: 4px 4px;
}
.goodsListEdit .add-image-btn {
    width: 100px;
    height: 100px;
    line-height: 100px;
    color: #419EFB;
    border: 1px solid #e2e2e2;
    cursor: pointer;
    text-align: center;
}
.goodsListEdit .colapp-image{
    background-size: cover; 
    background-position: center center; 
    width: 100px; height: 100px; 
    border-radius: 0%;
}
.goodsListEdit .el-form-item__label{
    padding-right:26px;
}
.app-add-cat .el-checkbox-group{
    font-size: 14px!important;
}
.app-add-cat .el-checkbox {
    margin-right: 0;
}
.app-add-cat .el-dialog__body{
    padding:10px 20px!important;
}
.app-add-cat .tag-box .tag-item {
    margin-right: 5px;
}
.app-add-cat .tag-box {
    margin: 20px 0;
}
.app-add-cat .app-goods-cat-list .active {
    background: #FAFAFA;
}
.app-add-cat .app-goods-cat-list .cat-item {
    cursor: pointer;
    padding: 5px 10px;
}
.app-add-cat .app-goods-cat-list {
    border: 1px solid #E8EAEE;
    border-radius: 5px;
    margin-top: -5px;
    padding: 10px 0;
    overflow: scroll;
    height: 400px;
}
.goodsListEdit .bottom-div {
    border-top: 1px solid #E3E3E3;
    position: fixed;
    bottom: 0;
    background-color: #ffffff;
    z-index: 999;
    padding: 10px;
    width: 80%;
}

</style>
