<template>
    <obj-modal class="obj-modal" ref="modal" labelWidth="150px" :modalConfig="modalConfig" :modalData="modalData"
        :modalHandles="modalHandles">
        <div slot="dialog__content">
            <el-card class="box-card mt14" :body-style="{ padding: '0 20px 20px' }" shadow="never" :bordered="false">
                <el-tabs class="list-tabs" v-model="currentTab">
                    <el-tab-pane v-for="(item, index) in headTab" :key="index" :label="item.tit"
                        :name="item.name"></el-tab-pane>
                </el-tabs>
                <el-form ref="formValidate" v-loading="fullscreenLoading" class="formValidate form-boder-padding"
                    :rules="ruleValidate" :model="formValidate" label-width="108px" @submit.native.prevent>
                    <el-row v-show="currentTab === '1'" :gutter="24">
                        <!-- 商品信息-->
                        <el-col v-bind="grid2">
                            <el-form-item label="商品名称：" prop="name">
                                <el-input class="from-ipt-width" v-model.trim="formValidate.name" maxlength="249"
                                    placeholder="请输入商品名称" :disabled="isDisabled" />
                            </el-form-item>
                        </el-col>
                        <el-col v-bind="grid2">
                            <el-form-item label="商户商品分类：" prop="cateIds">
                                <el-cascader class="from-ipt-width" v-model="formValidate.cateIds"
                                    :options="getProductCategory" :props="props2" clearable :show-all-levels="false"
                                    :disabled="isDisabled" />
                                <el-button class="ml15" @click="handleAddMenu({ id: 0, name: '顶层目录' })">添加分类</el-button>
                            </el-form-item>
                        </el-col>
                        <el-col v-bind="grid2">
                            <el-form-item label="平台商品分类：" prop="categoryId">
                                <el-cascader class="from-ipt-width" @change="onChangeCategory"
                                    v-model="formValidate.categoryId" :options="productClassify" :props="props1"
                                    filterable clearable :show-all-levels="false" :disabled="isDisabled" />
                            </el-form-item>
                        </el-col>
                        <el-col v-bind="grid2">
                            <el-form-item label="品牌：" prop="brandId">
                                <el-select class="from-ipt-width" clearable filterable v-model="formValidate.brandId"
                                    :loading="loading" remote :disabled="isDisabled || !formValidate.categoryId"
                                    placeholder="请选择品牌">
                                    <el-option v-for="user in brandList" :key="user.id" :label="user.name"
                                        :value="user.id"> </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col v-bind="grid2">
                            <el-form-item label="单位：" prop="unitName">
                                <el-input v-model.trim="formValidate.unitName" placeholder="请输入单位"
                                    class="from-ipt-width" :disabled="isDisabled" />
                            </el-form-item>
                        </el-col>
                        <el-col v-if="formValidate.type !== 5 && formValidate.type !== 6" :xs="18" :sm="18" :md="18"
                            :lg="12" :xl="12">
                            <!-- <el-form-item label="运费模板：" prop="tempId">
                                <el-select v-model="formValidate.tempId" placeholder="请选择" :disabled="isDisabled"
                                    class="from-ipt-width mr20">
                                    <el-option v-for="item in shippingTemplates" :key="item.id" :label="item.name"
                                        :value="item.id" />
                                </el-select>
                            </el-form-item> -->
                        </el-col>
                        <el-col v-bind="grid2">
                            <el-form-item label="商品关键字：">
                                <div class="from-tips">用户可以根据关键字进行商品搜索</div>
                            </el-form-item>
                        </el-col>
                        <el-col v-bind="grid2">
                            <el-form-item label="商品简介：" prop="intro">
                                <el-input class="from-ipt-width" v-model.trim="formValidate.intro" type="textarea"
                                    maxlength="250" :rows="3" placeholder="请输入商品简介" :disabled="isDisabled" />
                                <div class="from-tips">通过公众号分享商品详情，会展示此简介信息</div>
                            </el-form-item>
                        </el-col>
                        <el-col v-bind="grid2">
                            <el-form-item label="商品封面图：" prop="image">
                                <div class="upLoadPicBox acea-row" @click="modalPicTap('1')" :disabled="isDisabled">
                                    <div v-if="formValidate.image" class="pictrue"><img :src="formValidate.image" />
                                    </div>
                                    <div v-else class="upLoad">
                                        <i class="el-icon-camera cameraIconfont" />
                                    </div>
                                </div>
                                <div class="from-tips" v-show="!isDisabled">建议尺寸：800*800px，上传小于500kb的图片</div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="商品轮播图：" prop="sliderImages">
                                <div class="acea-row">
                                    <div v-for="(item, index) in formValidate.sliderImages" :key="index" class="pictrue"
                                        draggable="true" @dragstart="handleDragStart($event, item)"
                                        @dragover.prevent="handleDragOver($event, item)"
                                        @dragenter="handleDragEnter($event, item)"
                                        @dragend="handleDragEnd($event, item)">
                                        <img :src="item" />
                                        <i v-show="!isDisabled" class="el-icon-error btndel"
                                            @click="handleRemove(index)" />
                                    </div>
                                    <div v-if="formValidate.sliderImages.length < 10 && !isDisabled"
                                        class="upLoadPicBox" @click="modalPicTap('2')">
                                        <div class="upLoad">
                                            <i class="el-icon-camera cameraIconfont" />
                                        </div>
                                    </div>
                                </div>
                                <div class="from-tips">建议尺寸：800*800px，上传小于500kb的图片；最多可上传10张图片，拖动可调整顺序</div>
                            </el-form-item>
                        </el-col>
                        <el-col v-bind="grid2">
                            <el-form-item label="保障服务：">
                                <div class="acea-row row-middle mb5">
                                    <el-select class="from-ipt-width" v-model="formValidate.guaranteeIdsList"
                                        placeholder="请选择保障服务" clearable filterable :multiple="multiples"
                                        :disabled="isDisabled" @change="changeGuarantee">
                                        <el-option :value="item.id" v-for="(item, index) in guaranteeNew" :key="index"
                                            :label="item.name"></el-option>
                                    </el-select>
                                    <el-switch :disabled="isDisabled" class="ml10" v-model="isShowGroup"
                                        :active-value="true" :inactive-value="false" active-text="多选" inactive-text="单选"
                                        @change="onchangeIsShow" />
                                </div>
                                <el-tag v-for="(item, index) in guaranteeName" :key="index" class="mr10">{{ item
                                    }}</el-tag>
                            </el-form-item>
                        </el-col>
                        <el-col v-bind="grid2">
                            <el-form-item label="主图视频：" prop="video_link">
                                <div class="acea-row">
                                    <el-input v-model="videoLink" :disabled="isDisabled" size="small"
                                        class="from-ipt-width" placeholder="请输入MP4格式的视频链接">
                                        <input ref="refid" type="file" style="display: none" />
                                        <el-upload class="upload-demo" action slot="append"
                                            :http-request="handleUploadForm" :before-upload="beforeAvatarUpload"
                                            :headers="myHeaders" :show-file-list="false" :disabled="isDisabled"
                                            multiple>
                                            <el-button :disabled="isDisabled" size="small">
                                                {{ videoLink ? '确认添加' : '上传视频' }}</el-button>
                                        </el-upload>
                                    </el-input>
                                </div>
                                <div class="from-tips">请上传小于20M的视频</div>
                                <div v-if="videoLink" class="iview-video-style">
                                    <video class="from-ipt-width" style="height: 100% !important; border-radius: 10px"
                                        :src="videoLink" controls="controls">
                                        您的浏览器不支持 video 标签。
                                    </video>
                                    <div class="mark" />
                                    <i class="el-icon-delete iconv" @click="delVideo" />
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <!-- 商品规格-->
                    <el-row v-show="currentTab === '2'" :gutter="24">
                        <el-col :span="24">
                            <el-form-item label="商品规格：" props="specType">
                                <el-radio-group v-model="formValidate.specType"
                                    @change="onChangeSpec(formValidate.specType)" :disabled="isDisabled">
                                    <el-radio :label="false" class="radio">单规格</el-radio>
                                    <el-radio :label="true">多规格</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="佣金设置：" props="isSub">
                                <el-radio-group v-model="formValidate.isSub" @change="onChangetype(formValidate.isSub)"
                                    :disabled="isDisabled">
                                    <el-radio :label="true" class="radio">单独设置</el-radio>
                                    <el-radio :label="false">默认设置</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="会员商品：" required>
                                <el-radio-group v-model="formValidate.isPaidMember"
                                    @change="onChangetype(formValidate.isSub)" :disabled="isDisabled">
                                    <el-radio :label="true" class="radio">是</el-radio>
                                    <el-radio :label="false">否</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <!-- 多规格添加-->
                        <el-col v-if="formValidate.specType && !isDisabled" :span="24" class="noForm">
                            <el-form-item label="选择规格：" prop="">
                                <div class="acea-row">
                                    <el-select v-model="formValidate.selectRule" style="width: 600px">
                                        <el-option v-for="item in ruleList" :key="item.id" :label="item.ruleName"
                                            :value="item.id" />
                                    </el-select>
                                    <el-button type="primary" class="ml20" @click="confirm">确认</el-button>
                                    <el-button @click="addRule">添加规格</el-button>
                                </div>
                            </el-form-item>
                            <!-- <el-form-item v-if="formValidate.attr.length">
                                <div class="from-tips mb5">规格值支持拖拽排序,调整默认选中的规格</div>
                                <div v-for="(item, index) in formValidate.attr" :key="index">
                                    <div class="acea-row row-middle">
                                        <span class="mr5">{{ item.attrName }}</span><i class="el-icon-circle-close"
                                            @click="handleRemoveAttr(index)" />
                                    </div>
                                    <div class="acea-row row-middle">
                                        <div v-for="(j, indexn) in item.attrValue" :key="indexn" draggable="true"
                                            @dragstart="handleDragStart($event, j)"
                                            @dragover.prevent="handleDragOver($event, j)"
                                            @dragenter="handleDragEnter($event, j, index)"
                                            @dragend="handleDragEnd($event, j)">
                                            <el-tag closable size="medium" :disable-transitions="false"
                                                class="mb5 mr10 pointer" @close="handleClose(item.attrValue, indexn)">
                                                {{ j }}
                                            </el-tag>
                                        </div>
                                        <el-input v-if="item.inputVisible" ref="saveTagInput" placeholder="按回车键添加"
                                            v-model.trim="item.attrValue.attrsVal" class="input-new-tag" size="small"
                                            @keyup.enter.native="createAttr(item.attrValue.attrsVal, index)" />
                                        <el-button v-else class="button-new-tag" size="small" @click="showInput(item)">+
                                            添加</el-button>
                                    </div>
                                </div>
                            </el-form-item> -->
                            <div class="acea-row">
                                <el-form-item label="规格：">
                                    <el-input v-model.trim="formDynamic.attrsName" placeholder="请输入规格"
                                        style="width: 255px" />
                                </el-form-item>
                                <el-form-item label="规格值：" label-width="90px">
                                    <el-input v-model.trim="formDynamic.attrsVal" placeholder="请输入规格值"
                                        style="width: 254px" />
                                </el-form-item>
                                <el-form-item label-width="0px">
                                    <el-button class="ml20" size="small" type="primary"
                                        @click="createAttrName">确定</el-button>
                                    <el-button size="small" @click="offAttrName">取消</el-button>
                                </el-form-item>
                            </div>
                        </el-col>
                        <!-- 批量设置-->
                        <el-col v-if="formValidate.attr.length > 0 && formValidate.specType && !isDisabled" :span="24"
                            class="noForm">
                            <el-form-item label="批量设置：">
                                <el-alert title="价格设置范围 0.01~999999.99" type="info"> </el-alert>
                                <el-table :data="oneFormBatch" border class="tabNumWidth" size="small">
                                    <el-table-column label="图片" width="80" align="center">
                                        <template slot-scope="scope">
                                            <div class="upLoadPicBox" @click="modalPicTap('1', 'pi')">
                                                <div v-if="scope.row.image" class="pictrue tabPic"><img
                                                        :src="scope.row.image" /></div>
                                                <div v-else class="upLoad tabPic">
                                                    <i class="el-icon-camera cameraIconfont" />
                                                </div>
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column v-if="formValidate.isSub" label="一级返佣(%)" min-width="120"
                                        align="center">
                                        <template slot-scope="scope">
                                            <el-input maxlength="6" v-model.trim="scope.row.brokerage" min="0"
                                                :max="scope.row.price" class="priceBox"
                                                @keyup.native="keyupEventBrokerage('brokerage', scope.$index, 1)" />
                                        </template>
                                    </el-table-column>
                                    <el-table-column v-if="formValidate.isSub" label="二级返佣(%)" min-width="120"
                                        align="center">
                                        <template slot-scope="scope">
                                            <el-input maxlength="6" v-model.trim="scope.row.brokerageTwo" min="0"
                                                :max="scope.row.price" class="priceBox"
                                                @keyup.native="keyupEventBrokerage('brokerageTwo', scope.$index, 1)" />
                                        </template>
                                    </el-table-column>
                                    <el-table-column v-for="(item, iii) in attrValue" :key="iii"
                                        :label="formThead[iii].title" min-width="120" align="center">
                                        <template slot-scope="scope">
                                            <el-input v-if="iii === 'barCode'" v-model="scope.row[iii]" maxlength="40"
                                                type="test" class="priceBox" :readonly="false" />
                                            <el-input-number v-else v-model.trim="scope.row[iii]" :max="999999.99"
                                                :step="iii === 'stock' ? 1 : 0.01" controls-position="right"
                                                step-strictly></el-input-number>
                                        </template>
                                    </el-table-column>
                                    <template v-if="formValidate.isSub"> </template>
                                    <el-table-column label="操作" width="70" align="center">
                                        <template>
                                            <a class="submission" @click="batchAdd">批量添加</a>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-form-item>
                        </el-col>
                        <el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
                            <!-- 单规格表格-->
                            <el-form-item v-if="formValidate.specType === false">
                                <el-alert title="价格设置范围 0.01~999999.99" type="info"> </el-alert>
                                <el-table :data="OneattrValue" border class="tabNumWidth" size="small">
                                    <el-table-column label="图片" width="77" align="center">
                                        <template slot-scope="scope">
                                            <div class="upLoadPicBox" @click="modalPicTap('1', 'dan', 'pi')">
                                                <div v-if="scope.row.image" class="pictrue tabPic"><img
                                                        :src="scope.row.image" /></div>
                                                <div v-else class="upLoad tabPic">
                                                    <i class="el-icon-camera cameraIconfont" />
                                                </div>
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <template v-if="formValidate.isSub">
                                        <el-table-column label="一级返佣(%)" min-width="120" align="center">
                                            <template slot-scope="scope">
                                                <el-input maxlength="6" :disabled="isDisabled"
                                                    v-model.trim="scope.row.brokerage" min="0" class="priceBox"
                                                    @keyup.native="keyupEventBrokerage('brokerage', scope.$index, 2)" />
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="二级返佣(%)" min-width="120" align="center">
                                            <template slot-scope="scope">
                                                <el-input maxlength="6" :disabled="isDisabled"
                                                    v-model.trim="scope.row.brokerageTwo" min="0" class="priceBox"
                                                    @keyup.native="keyupEventBrokerage('brokerageTwo', scope.$index, 2)" />
                                            </template>
                                        </el-table-column>
                                    </template>
                                    <el-table-column v-for="(item, iii) in attrValue" :key="iii"
                                        :label="formThead[iii].title" min-width="120" align="center">
                                        <template slot-scope="scope">
                                            <el-input v-if="iii === 'barCode'" :disabled="isDisabled"
                                                v-model="scope.row[iii]" maxlength="40" type="test" class="priceBox"
                                                :readonly="false" />
                                            <el-input-number v-else v-model.trim="scope.row[iii]" :disabled="isDisabled"
                                                :min="iii === 'stock' ? 1 : 0.01" :max="formValidate.isPaidMember && iii === 'vipPrice' ? Number(scope.row.price) - 0.01 : 999999.99
                                                    " :step="iii === 'stock' ? 1 : 0.01" controls-position="right"
                                                step-strictly></el-input-number>
                                        </template>
                                    </el-table-column>
                                    <template v-if="formValidate.type == 5">
                                        <el-table-column label="云盘设置" min-width="120" align="center">
                                            <template slot-scope="scope">
                                                <el-button v-if="!scope.row.expand" size="small"
                                                    @click="handleAddVirtually(0, 'OneattrValue', 1)">添加链接</el-button>
                                                <el-button v-else class="seeCatMy pointer" type="text" size="small"
                                                    @click="seeVirtually(OneattrValue[0], 'OneattrValue', 0, 1)">已设置</el-button>
                                            </template>
                                        </el-table-column>
                                    </template>
                                    <template v-if="formValidate.type == 6">
                                        <el-table-column label="卡密设置" min-width="120" align="center">
                                            <template slot-scope="scope">
                                                <el-button v-if="!scope.row.cdkeyId" size="small"
                                                    @click="handleAddVirtually(0, 'OneattrValue', 2)">添加卡密</el-button>
                                                <el-button v-else type="text" class="seeCatMy pointer"
                                                    @click="seeVirtually(OneattrValue[0], 'OneattrValue', 0, 2)">{{
                                                        scope.row.cdkeyLibraryName }}</el-button>
                                            </template>
                                        </el-table-column>
                                    </template>
                                </el-table>
                            </el-form-item>
                            <el-form-item label="全部sku：" v-if="$route.params.id && showAll">
                                <el-button type="default" @click="showAllSku()" :disabled="isDisabled">展示</el-button>
                            </el-form-item>
                            <!-- 多规格表格-->
                            <el-form-item v-if="formValidate.attr.length > 0 && formValidate.specType" label="商品属性："
                                class="labeltop" :class="isDisabled ? 'disLabel' : 'disLabelmoren'">
                                <el-alert title="价格设置范围 0.01~999999.99" type="info"> </el-alert>
                                <el-table :data="ManyAttrValue" border class="tabNumWidth" size="small">
                                    <template v-if="manyTabDate">
                                        <el-table-column v-for="(item, iii) in manyTabDate" :key="iii"
                                            :label="manyTabTit[iii].title" min-width="80" align="center">
                                            <template slot-scope="scope">
                                                <span class="priceBox" v-text="scope.row[iii]" />
                                            </template>
                                        </el-table-column>
                                    </template>
                                    <el-table-column label="图片" width="80" align="center">
                                        <template slot-scope="scope">
                                            <div class="upLoadPicBox" @click="modalPicTap('1', 'duo', scope.$index)">
                                                <div v-if="scope.row.image" class="pictrue tabPic"><img
                                                        :src="scope.row.image" /></div>
                                                <div v-else class="upLoad tabPic">
                                                    <i class="el-icon-camera cameraIconfont" />
                                                </div>
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column v-if="formValidate.isSub" label="一级返佣(%)" min-width="120"
                                        align="center">
                                        <template slot-scope="scope">
                                            <el-input :disabled="isDisabled" v-model.trim="scope.row.brokerage"
                                                maxlength="6" min="0" class="priceBox"
                                                @keyup.native="keyupEventBrokerage('brokerage', scope.$index, 3)" />
                                        </template>
                                    </el-table-column>
                                    <el-table-column v-if="formValidate.isSub" label="二级返佣(%)" min-width="120"
                                        align="center">
                                        <template slot-scope="scope">
                                            <el-input maxlength="6" :disabled="isDisabled"
                                                v-model.trim="scope.row.brokerageTwo" min="0" class="priceBox"
                                                @keyup.native="keyupEventBrokerage('brokerageTwo', scope.$index, 3)" />
                                        </template>
                                    </el-table-column>
                                    <el-table-column v-for="(item, iii) in attrValue" :key="iii"
                                        :label="formThead[iii].title" min-width="120" align="center">
                                        <template slot-scope="scope">
                                            <el-input v-if="iii === 'barCode'" :disabled="isDisabled"
                                                v-model="scope.row[iii]" maxlength="40" type="test" class="priceBox"
                                                :readonly="false" />
                                            <el-input-number v-else v-model.trim="scope.row[iii]" :disabled="isDisabled"
                                                :min="iii === 'stock' ? 1 : 0.01" :max="formValidate.isPaidMember && iii === 'vipPrice' ? Number(scope.row.price) - 0.01 : 999999.99
                                                    " :step="iii === 'stock' ? 1 : 0.01" controls-position="right"
                                                step-strictly></el-input-number>
                                        </template>
                                    </el-table-column>
                                    <template v-if="formValidate.isSub"></template>
                                    <template v-if="formValidate.type == 5">
                                        <el-table-column label="云盘设置" min-width="120" align="center">
                                            <template slot-scope="scope">
                                                <el-button v-if="!scope.row.expand" size="small"
                                                    @click="handleAddVirtually(scope.$index, 'ManyAttrValue', 1)">添加链接</el-button>
                                                <el-button v-else class="seeCatMy pointer" type="text" size="small"
                                                    @click="seeVirtually(ManyAttrValue[scope.$index], 'ManyAttrValue', scope.$index, 1)">已设置</el-button>
                                            </template>
                                        </el-table-column>
                                    </template>
                                    <template v-if="formValidate.type == 6">
                                        <el-table-column label="卡密设置" min-width="120" align="center">
                                            <template slot-scope="scope">
                                                <el-button v-if="!scope.row.cdkeyId" size="small"
                                                    @click="handleAddVirtually(scope.$index, 'ManyAttrValue', 2)">添加卡密</el-button>
                                                <el-button v-else type="text" class="seeCatMy pointer"
                                                    @click="seeVirtually(ManyAttrValue[scope.$index], 'ManyAttrValue', scope.$index, 2)">{{
                                                        scope.row.cdkeyLibraryName }}</el-button>
                                            </template>
                                        </el-table-column>
                                    </template>
                                    <el-table-column v-if="!isDisabled" key="3" label="操作" width="70" align="center">
                                        <template slot-scope="scope">
                                            <a class="submission" @click="delAttrTable(scope.$index)">删除</a>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <!-- 商品详情-->
                    <el-row v-show="currentTab === '3' && !isDisabled">
                        <el-col :span="24">
                            <el-form-item label="商品详情：">
                                <Tinymce v-model.trim="formValidate.content"></Tinymce>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row v-show="currentTab === '3' && isDisabled">
                        <el-col :span="24">
                            <el-form-item label="商品详情：">
                                <span v-html="formValidate.content || '无'"></span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <!-- 其他设置-->
                    <el-row v-show="currentTab === '4'">
                        <el-form-item label="排序：">
                            <el-input-number v-model.trim="formValidate.sort" :min="1" :max="9999" placeholder="请输入排序"
                                @keyup.native="proving1" :disabled="isDisabled" />
                        </el-form-item>
                        <div class="acea-row">
                            <el-form-item label="赠送优惠券：" class="proCoupon">
                                <div class="from-tips mb14">用户购买商品后赠送的优惠券</div>
                                <div class="acea-row">
                                    <el-tag v-for="(tag, index) in formValidate.coupons" :key="index" class="mr10 mb10"
                                        :closable="!isDisabled" :disable-transitions="false"
                                        @close="handleCloseCoupon(tag)">
                                        {{ tag.name }}
                                    </el-tag>
                                    <span class="mr15" v-if="formValidate.couponIds == null">无</span>
                                    <el-button v-if="!isDisabled" size="small" class="mr15"
                                        @click="addCoupon">选择优惠券</el-button>
                                </div>
                            </el-form-item>
                        </div>
                    </el-row>
                    <el-form-item>
                        <el-button v-if="Number(currentTab) > 1" class="submission priamry_border"
                            @click="handleSubmitUp">上一步</el-button>
                        <el-button v-show="Number(currentTab) < 4" class="priamry_border"
                            @click="handleSubmitNest('formValidate')">下一步</el-button>
                        <el-button v-show="(currentTab === '3' || $route.params.id) && !isDisabled" type="primary"
                            class="submission" @click="handleSubmit('formValidate')"
                            :loading="loadingBtn">保存</el-button>
                        <el-button v-show="(currentTab === '3' || $route.params.id) &&
                            !isDisabled &&
                            (this.productSwitch || this.formValidate.auditStatus > 0)
                            " type="primary" class="submission" @click="handleSubmitAndAudit('formValidate')"
                            :loading="loadingBtn">保存并提审</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </div>
    </obj-modal>
</template>
<script>
const defaultObj = {
    image: '',
    sliderImages: [],
    sliderImage: '',
    name: '',
    intro: '',
    keyword: '',
    cateIds: [], // 商品分类id
    cateId: null, // 商品分类id传值
    unitName: '',
    sort: 0,
    isShow: false,
    tempId: '',
    attrValue: [
        {
            image: '',
            price: 0.01,
            vipPrice: 0.01,
            cost: 0.01,
            otPrice: 0.01,
            stock: 0,
            barCode: '',
            weight: 0,
            volume: 0,
            brokerage: 0,
            brokerageTwo: 0,
            cdkeyId: null,
            cdkeyLibraryName: '',
            expand: '',
        },
    ],
    attr: [],
    selectRule: '',
    isSub: false,
    isPaidMember: false,
    content: '',
    specType: false,
    id: undefined,
    couponIds: [],
    coupons: [],
    categoryId: 0,
    guaranteeIds: '',
    guaranteeIdsList: [] || null,
    brandId: '',
    type: 0, // 商品类型
    isAutoSubmitAudit: false, //是否自动提审
    isAutoUp: false, //是否自动上架
};
const objTitle = {
    price: {
        title: '售价（元）',
    },
    vipPrice: {
        title: '会员价（元）',
    },
    cost: {
        title: '成本价（元）',
    },
    otPrice: {
        title: '原价（元）',
    },
    stock: {
        title: '库存',
    },
    barCode: {
        title: '商品编号',
    },
    weight: {
        title: '重量（KG）',
    },
    volume: {
        title: '体积(m³)',
    },
    brokerage: {
        title: '一级返佣(%)',
    },
    brokerageTwo: {
        title: '二级返佣(%)',
    },
};
import Tinymce from "@/components/tinymce";
import { debounce, cloneDeep } from "lodash";
export default {
    components: { Tinymce },
    data() {
        return {
            modalData: {},
            modalConfig: {
                title: "编辑商品",
                show: false,
                width: "1300px",
                fullscreen: true,
            },
            //添加商品
            headTab: [
                { tit: '商品信息', name: '1' },
                { tit: '规格库存', name: '2' },
                { tit: '商品详情', name: '3' },
                { tit: '其他设置', name: '4' },
            ],
            form: 2,
            url: '',
            copyConfig: {},
            labelarr: [],
            isDisabled: this.$route.params.isDisabled === '1' ? true : false,
            isCopy: this.$route.params.isCopy === '1' ? true : false, //是否是采集
            props2: {
                children: 'childList',
                label: 'name',
                value: 'id',
                multiple: false,
                emitPath: false,
                checkStrictly: true,
            },
            props1: {
                children: 'childList',
                label: 'name',
                value: 'id',
                multiple: false,
                emitPath: false,
            },
            tabs: [],
            fullscreenLoading: false,
            props: { multiple: true },
            active: 0,
            OneattrValue: [Object.assign({}, defaultObj.attrValue[0])], // 单规格
            ManyAttrValue: [Object.assign({}, defaultObj.attrValue[0])], // 多规格
            ruleList: [],
            merCateList: [], // 商户分类筛选
            shippingList: [], // 运费模板
            formThead: Object.assign({}, objTitle),
            formValidate: Object.assign({}, defaultObj),
            formDynamics: {
                ruleName: '',
                ruleValue: [],
            },
            tempData: {
                page: 1,
                limit: 9999,
            },
            manyTabTit: {},
            manyTabDate: {},
            grid2: {
                xl: 24,
                lg: 24,
                md: 24,
                sm: 24,
                xs: 24,
            },
            // 规格数据
            formDynamic: {
                attrsName: '',
                attrsVal: '',
            },
            isBtn: false,
            manyFormValidate: [],
            currentTab: '1',
            isChoice: '',
            grid: {
                xl: 24,
                lg: 24,
                md: 24,
                sm: 24,
                xs: 24,
            },
            ruleValidate: {
                name: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
                categoryId: [{ required: true, message: '请选择平台商品分类', trigger: 'change' }],
                cateIds: [{ required: true, message: '请选择商户商品分类', trigger: 'change', min: '1' }],
                unitName: [{ required: true, message: '请输入单位', trigger: 'blur' }],
                intro: [{ required: true, message: '请输入商品简介', trigger: 'blur' }],
                tempId: [{ required: true, message: '请选择运费模板', trigger: 'change' }],
                image: [{ required: true, message: '请上传商品图', trigger: 'change' }],
                sliderImages: [{ required: true, message: '请上传商品轮播图', type: 'array', trigger: 'change' }],
                specType: [{ required: true, message: '请选择商品规格', trigger: 'change' }],
                brandId: [{ required: true, message: '请选择商品品牌', trigger: 'change' }],
            },
            attrInfo: {},
            tableFrom: {
                page: 1,
                limit: 9999,
                keywords: '',
            },
            tempRoute: {},
            keyNum: 0,
            isAttr: false,
            showAll: false,
            guaranteeList: [],
            brandList: [],
            search: {
                limit: 10,
                page: 1,
                cid: '',
                brandName: '',
            },
            totalPage: 0,
            total: 0,
            loading: false,
            loadingBtn: false,
            isShowGroup: false,
            guaranteeGroupList: [],
            guaranteeNew: [],
            guaranteeName: [],
            multiples: true,
            productClassify: [], //平台商品分类
            productType: [
                { tit: '普通商品', id: 0, tit2: '实体货物' },
                { tit: '云盘商品', id: 5, tit2: '同一链接发货' },
                { tit: '卡密商品', id: 6, tit2: '不同充值码发货' },
            ],

            carMytabIndex: 0,
            carMytabName: '',
            cloudDisk: '', //云盘地址
            upload: {
                videoIng: false, // 是否显示进度条；
            },
            videoLink: '', //视频地址
            progress: 10, // 进度条默认0
            myHeaders: { 'token': this.$cookie.get('token') },
            cdkeyId: null, //卡密库id
            cdkeyLibraryInfo: null, //卡密库对象
            editDialogConfig: {
                visible: false,
                isCreate: 0, // 0=创建，1=编辑
                prent: {}, // 父级对象
                data: {},
                biztype: { name: '产品分类', value: 1, shortName: '产品' }, // 统一主业务中的目录类型
            }, //商品分类
            isSwitch: false, //商户开关
            productSwitch: false, //商品是否需要审核 true需要审核，false免审
        };
    },
    mounted() { },
    methods: {
        toggle(e) {
            if (this.modalConfig.show == false) {
                this.modalConfig.show = true;
            } else {
                this.ctxBg.clear();
                this.modalConfig.show = false;
            }
            if (e) {
                console.log(e);
                this.init(cloneDeep(e.row));
            }
            return {
                add: (item) => {
                    console.log(item);
                    this.isAdd = true;
                },
                update: (row) => {
                    this.modalData = row;
                    this.isAdd = false;
                },
            };
        },
        init(row) { },
        onChangeCategory() { },
        changeGuarantee() { },
        onchangeIsShow() { },
        handleUploadForm() { },
        beforeAvatarUpload() { },
        addCoupon() { }
    },
    computed: {
        modalHandles() {
            return [
                {
                    label: "下载平面图",
                    type: "info",
                    plain: true,
                    icon: "el-icon-download",
                    loading: this.isLoading,
                    // submit: true,
                    handle: debounce(() => {
                        this.download();
                    }, 300),
                },
                {
                    label: "确定",
                    type: "primary",
                    loading: this.isLoading,
                    // submit: true,
                    handle: debounce(() => {
                    }, 300),
                },
            ];
        },
    },
    asyncComputed: {
        async getProductCategory() {
            let res = await this.$api.mer_admin.getProductCategory();
            return res.data.data;

        }
    },
};
</script>
<style lang="scss" scoped></style>