<template>
  <div class="strategyAdd">
    <div class="content">
      <!-- 预览页 -->
      <div class="page">
        <div class="look">
          <el-button style="margin-left: 15px;" size="small" icon="el-icon-circle-close" @click="closePage">返回</el-button>
          <el-button style="margin-left: 15px;" type="primary" icon="el-icon-folder-add" size="small" @click="keepClick()">保存</el-button>
          <el-button :disabled="templateList.length===0" size="small" icon="el-icon-view" type="warning" @click="preview"> 预览</el-button>
        </div>

        <div class="ifreamBox">
          <iframe id="ifreamId" class="ifream" height="100%" width="100%" :src="ifreamSrc"></iframe>
        </div>

      </div>
      <!-- 设置页 -->
      <div class="set">
        <div>
          <el-tabs v-model="activeName">
            <el-tab-pane label="基础管理" name="0"></el-tab-pane>
            <el-tab-pane label="样式管理" name="1"></el-tab-pane>
            <el-tab-pane label="订购相关" name="2"></el-tab-pane>
            <el-tab-pane label="推荐管理" name="3"></el-tab-pane>
            <el-tab-pane label="活动对接" name="4"></el-tab-pane>
          </el-tabs>
        </div>
        <div class="main">
          <!-- 基础管理 -->
          <div class="info" v-if="activeName==='0'">
            <el-form :model="form" size="small" ref="form" label-width="100px" style="width:65%">
              <el-form-item>
                <template slot="label">
                  <el-tooltip :open-delay="500" content="当前策略名称" placement="top">
                    <span>策略名称</span>
                  </el-tooltip>
                </template>
                <el-input v-if='editId===null' @blur="inputBlur" v-model="form.strategyName" placeholder="策略名称"></el-input>
                <el-input v-else v-model="form.strategyName" placeholder="策略名称"></el-input>
              </el-form-item>
              <el-form-item>
                <template slot="label">
                  <el-tooltip :open-delay="500" content="当前配置主产品" placement="top">
                    <span>主产品</span>
                  </el-tooltip>
                </template>
                <el-select filterable v-model="form.primaryProductId" clearable placeholder="请选择主产品">
                  <el-option v-for="item in productInfoList" :key="item.id" :label="`${item.productName}/${item.remark}/${item.spid}`" :value="item.id" />
                </el-select>
                <el-button style="margin-left:15px" type="primary" icon="el-icon-folder-add" size="small" plain @click="productClick('add')">新增</el-button>
                <el-button size="small" type="warning" icon="el-icon-edit" plain @click="productClick('edit')">编辑</el-button>
                <el-button size="small" icon="el-icon-refresh" plain @click="getProductList">刷新</el-button>
              </el-form-item>
              <el-form-item>
                <template slot="label">
                  <el-tooltip :open-delay="500" content="聚合模板或炫彩聚合模板副产品,其余模板不生效" placement="top">
                    <span>副产品</span>
                  </el-tooltip>
                </template>
                <el-select v-model="viceProductId" filterable clearable placeholder="请选择副产品" @change="viceChange">
                  <el-option v-for="item in productInfoList" :key="item.id" :label="`${item.productName}/${item.remark}/${item.spid}`" :value="item.id" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <template slot="label">
                  <el-tooltip :open-delay="500" content="选择使用模板" placement="top">
                    <span>模板选择</span>
                  </el-tooltip>
                </template>
                <el-select v-model="form.templateId" clearable placeholder="请选择模板" @change="templateChange">
                  <el-option v-for="item in templateList" :key="item.id" :label="item.templateName" :value="item.id">
                    <span style="float: left; margin-right: 10px">{{
                          item.templateName
                        }}</span>
                    <el-popover :open-delay="500" placement="right" trigger="hover">
                      <img :src="item.templatePhoto" width="400" />
                      <img slot="reference" :src="item.templatePhoto" width="30" height="30" style="float: right" />
                    </el-popover>
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <template slot="label">
                  <el-tooltip :open-delay="500" content="选择产品的订购认证方式" placement="top">
                    <span>认证方式</span>
                  </el-tooltip>
                </template>
                <el-select v-model="extJson.attestation" placeholder="请选择认证方式">
                  <el-option label="统一认证-升级" :value="3">
                    <span style="float:left">统一认证-升级</span>
                    <span style="float:right;color:#F56C6C">推荐</span>
                  </el-option>
                  <el-option label="短信认证-升级" :value="4">
                    <span style="float:left">短信认证-升级</span>
                    <span style="float:right;color:#F56C6C">推荐</span>
                  </el-option>
                  <el-option label="简单认证-升级" :value="5">
                    <span style="float:left">简单认证-升级</span>
                    <span style="float:right;color:#F56C6C">推荐</span>
                  </el-option>
                  <el-option label="统一认证" :value="0" />
                  <el-option label="短信认证" :value="1" />
                  <el-option label="简单认证" :value="2" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <template slot="label">
                  <el-tooltip :open-delay="500" content="选择产品适配的客户端" placement="top">
                    <span>产品适配</span>
                  </el-tooltip>
                </template>
                <el-select v-model="extJson.dispose" clearable placeholder="客户端适配">
                  <el-option v-for="item in disposeList" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <template slot="label">
                  <el-tooltip :open-delay="500" content="选择策略回传埋点方式" placement="top">
                    <span>信息流回传</span>
                  </el-tooltip>
                </template>
                <el-select v-model="extJson.returnApi" clearable placeholder="选择回传方式">
                  <el-option label="点击订购" value="0" />
                  <el-option label="订购成功/超时" value="1" />
                </el-select>
              </el-form-item>
              <el-form-item label="备注信息">
                <el-input v-model="form.maskText" type="textarea" :rows="2" placeholder="请输入内容">
                </el-input>
              </el-form-item>
              <el-form-item>
                <template slot="label">
                  <el-popover :open-delay="500" placement="right" trigger="hover">
                    <img src="./totasImg/title.png" alt="">
                    <span slot="reference">页面标题</span>
                  </el-popover>
                </template>
                <el-input v-model="productJson.pageTitle" placeholder="请输入页面标题">
                </el-input>
              </el-form-item>
              <el-form-item>
                <template slot="label">
                  <el-popover :open-delay="500" placement="right" trigger="hover">
                    <img style="width:400px;height:120px" src="./totasImg/fx.jpg" alt="">
                    <span slot="reference">分享描述</span>
                  </el-popover>
                </template>
                <el-input v-model="productJson.remark3" placeholder="请输入分享简述">
                </el-input>
              </el-form-item>
              <el-form-item>
                <template slot="label">
                  <el-popover :open-delay="500" placement="right" trigger="hover">
                    <img src="./totasImg/tj.png" alt="">
                    <span slot="reference">推广图</span>
                  </el-popover>
                </template>
                <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'推广图')})">
                  <img v-if="form.promotePhoto!==''" :src="form.promotePhoto" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <span v-if="form.promotePhoto!==''" style="color: #F56C6C; cursor: pointer" @click="form.promotePhoto=''">删除</span>
              </el-form-item>
              <el-form-item>
                <template slot="label">
                  <el-popover :open-delay="500" placement="right" trigger="hover">
                    <img style="width:400px;height:120px" src="./totasImg/logo.jpg" alt="">
                    <span slot="reference">LOGO图</span>
                  </el-popover>
                </template>
                <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'logo')})">
                  <img v-if="productJson.logoPic !==''" :src="imgUrl+productJson.logoPic" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <span v-if="productJson.logoPic!==''" @click="productJson.logoPic=''" style="color: #F56C6C; cursor: pointer">删除</span>
              </el-form-item>
            </el-form>
          </div>
          <!-- 样式管理 -->
          <div class="info" v-else-if="activeName==='1'">
            <el-form size="small" ref="form" style="width:65%;" label-width="100px">
              <el-collapse v-model="collapseVal">
                <el-collapse-item title="配色方案-主产品" name="0">
                  <el-row style="margin:0" :gutter="24">
                    <el-col style="display: flex;" :span="7">
                      <el-tooltip :open-delay="500" effect="dark" content="页面背景底色" placement="top">
                        <el-button style="margin-right:20px ;width: 100px;" type="text">背景色</el-button>
                      </el-tooltip>
                      <el-color-picker v-model="productJson.pageBgcol" size="small" show-alpha />
                    </el-col>
                    <el-col style="display: flex;" :span="7">
                      <el-popover :open-delay="500" placement="right" trigger="hover">
                        <img src="./totasImg/dgBg.png" alt="">
                        <el-button style="margin-right:20px ;width: 100px;" slot="reference" type="text">订购窗背景</el-button>
                      </el-popover>
                      <el-color-picker v-model="productJson.orderBgcol" size="small" show-alpha />
                    </el-col>
                    <el-col style="display: flex;" :span="7">
                      <el-popover :open-delay="500" placement="right" trigger="hover">
                        <img src="./totasImg/dgBr.png" alt="">
                        <el-button style="margin-right:20px ;width: 100px;" slot="reference" type="text">订购窗边框</el-button>
                      </el-popover>
                      <el-color-picker v-model="productJson.orderBdcol" size="small" show-alpha />
                    </el-col>
                  </el-row>
                  <el-row style="margin:0" :gutter="24">
                    <el-col style="display: flex;" :span="7">
                      <el-popover :open-delay="500" placement="right" trigger="hover">
                        <img src="./totasImg/btnC1.png" alt="">
                        <el-button style="margin-right:20px ;width: 100px;" slot="reference" type="text">按钮色(上)</el-button>
                      </el-popover>
                      <el-color-picker v-model="productJson.btnTopcol" size="small" show-alpha />
                    </el-col>
                    <el-col style="display: flex;" :span="7">
                      <el-popover :open-delay="500" placement="right" trigger="hover">
                        <img src="./totasImg/btnC2.png" alt="">
                        <el-button style="margin-right:20px ;width: 100px;" slot="reference" type="text">按钮色(下)</el-button>
                      </el-popover>
                      <el-color-picker v-model="productJson.btnBotcol" size="small" show-alpha />
                    </el-col>
                  </el-row>
                  <el-row style="margin:0" :gutter="24">
                    <el-col style="display: flex;" :span="7">
                      <el-popover :open-delay="500" placement="right" trigger="hover">
                        <img src="./totasImg/qgNumC.png" alt="">
                        <el-button style="margin-right:20px ;width: 100px;" slot="reference" type="text">抢购人数配色</el-button>
                      </el-popover>
                      <el-color-picker v-model="productJson.orderNumcol" size="small" show-alpha />
                    </el-col>
                    <el-col style="display: flex;" :span="7">
                      <el-popover :open-delay="500" placement="right" trigger="hover">
                        <img src="./totasImg/qgTextC.png" alt="">
                        <el-button style="margin-right:20px ;width: 100px;" slot="reference" type="text">抢购文案配色</el-button>
                      </el-popover>
                      <el-color-picker v-model="productJson.orderTextcol" size="small" show-alpha />
                    </el-col>
                  </el-row>
                  <el-row style="margin:0" :gutter="24">
                    <el-col style="display: flex;" :span="7">
                      <el-popover :open-delay="500" placement="right" trigger="hover">
                        <img src="./totasImg/ymC.png" alt="">
                        <el-button style="margin-right:20px ;width: 100px;" slot="reference" type="text">页面文字配色</el-button>
                      </el-popover>
                      <el-color-picker v-model="productJson.pageTextcol" size="small" show-alpha />
                    </el-col>
                    <el-col style="display: flex;" :span="7">
                      <el-popover :open-delay="500" placement="right" trigger="hover">
                        <img src="./totasImg/ysC.png" alt="">
                        <el-button style="margin-right:20px ;width: 100px;" slot="reference" type="text">隐私声明配色</el-button>
                      </el-popover>
                      <el-color-picker v-model="productJson.hideCol" size="small" show-alpha />
                    </el-col>
                  </el-row>
                  <el-row style="margin:0" :gutter="24">
                    <el-col style="display: flex;" :span="7">
                      <el-popover :open-delay="500" placement="right" trigger="hover">
                        <img src="./totasImg/cpC2.png" alt="">
                        <el-button style="margin-right:20px ;width: 100px;" slot="reference" type="text">主产品键配色</el-button>
                      </el-popover>
                      <el-color-picker v-model="productJson.tabMaincol" size="small" show-alpha />
                    </el-col>
                    <el-col style="display: flex;" :span="7">
                      <el-popover :open-delay="500" placement="right" trigger="hover">
                        <img src="./totasImg/cpC1.png" alt="">
                        <el-button style="margin-right:20px ;width: 100px;" slot="reference" type="text">副产品键配色</el-button>
                      </el-popover>
                      <el-color-picker v-model="productJson.tabVicecol" size="small" show-alpha />
                    </el-col>
                  </el-row>
                </el-collapse-item>
                <el-collapse-item title="产品配图-主产品" name="1">
                  <el-form-item style="margin-top:20px">
                    <template slot="label">
                      <el-tooltip :open-delay="500" content="开启后控制页面banner图和上层图片素材进行动画缩放" placement="top">
                        <span>页面动效</span>
                      </el-tooltip>
                    </template>
                    <el-switch v-model="productJson.drawVal" active-text="勾选" inactive-text="不勾选" active-value="1" inactive-value="0" />
                  </el-form-item>
                  <el-form-item>
                    <template slot="label">
                      <el-tooltip :open-delay="500" content="底层banner背景图" placement="top">
                        <span>banner图</span>
                      </el-tooltip>
                    </template>
                    <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'主banner')})">
                      <img v-if="productJson.bannerImg" :src="imgUrl+productJson.bannerImg" class="avatar" />
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <span v-if="productJson.bannerImg!==''" @click="productJson.bannerImg=''" style="color: #F56C6C; cursor: pointer">删除</span>
                  </el-form-item>
                  <el-form-item>
                    <template slot="label">
                      <el-tooltip :open-delay="500" content="背景图之上的json动图" placement="top">
                        <span>动态文件</span>
                      </el-tooltip>
                    </template>
                    <div style="max-width:260px !important" id="lottie_box"></div>
                    <el-upload v-if="productJson.jsonImg===''" class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'主jsonImg')})">
                      <i class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <span v-if="productJson.jsonImg!==''" @click="svgRemove('主')" style="color: #F56C6C; cursor: pointer">删除</span>
                  </el-form-item>
                  <el-form-item>
                    <template slot="label">
                      <el-tooltip :open-delay="500" content="json动图上层的图片素材" placement="top">
                        <span>上层素材</span>
                      </el-tooltip>
                    </template>
                    <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'主upImg')})">
                      <img v-if="productJson.upImg!==''" :src="imgUrl+productJson.upImg" class="avatar" />
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <span v-if="productJson.upImg!==''" @click="productJson.upImg=''" style="color: #F56C6C; cursor: pointer">删除</span>
                  </el-form-item>
                  <el-form-item>
                    <template slot="label">
                      <el-tooltip :open-delay="500" content="最上层图片元素" placement="top">
                        <span>顶层素材</span>
                      </el-tooltip>
                    </template>
                    <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'主topImg')})">
                      <img v-if="productJson.topImg!==''" :src="imgUrl+productJson.topImg" class="avatar" />
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <span v-if="productJson.topImg!==''" @click="productJson.topImg=''" style="color: #F56C6C; cursor: pointer">删除</span>
                  </el-form-item>
                  <el-form-item>
                    <template slot="label">
                      <el-tooltip :open-delay="500" content="订购窗配图" placement="top">
                        <span>订购窗配图</span>
                      </el-tooltip>
                    </template>
                    <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'主explainImg')})">
                      <img v-if="productJson.explainImg !== ''" :src="imgUrl+productJson.explainImg" class="avatar" />
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <span v-if="productJson.explainImg!==''" @click="productJson.explainImg=''" style="color: #F56C6C; cursor: pointer">删除</span>
                  </el-form-item>
                  <el-form-item>
                    <template slot="label">
                      <el-tooltip :open-delay="500" content="页面中产品说明配图  产品说明title配图" placement="top">
                        <span>产品说明标题</span>
                      </el-tooltip>
                    </template>
                    <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'主orderImg')})">
                      <img v-if="productJson.orderImg !==''" :src="imgUrl+productJson.orderImg" class="avatar" />
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <span v-if="productJson.orderImg!==''" @click="productJson.orderImg=''" style="color: #F56C6C; cursor: pointer">删除</span>
                  </el-form-item>
                </el-collapse-item>
                <el-collapse-item v-if="form.viceProductIds.length>0" title="配色方案-副产品" name="2">
                  <el-row style="margin:0" :gutter="24">
                    <el-col style="display: flex;" :span="7">
                      <el-button style="margin-right:20px ;width: 100px;" type="text">背景色</el-button>
                      <el-color-picker v-model="viceJson.pageBgcol" size="small" show-alpha />
                    </el-col>
                    <el-col style="display: flex;" :span="7">
                      <el-button style="margin-right:20px ;width: 100px;" type="text">订购窗背景</el-button>
                      <el-color-picker v-model="viceJson.orderBgcol" size="small" show-alpha />
                    </el-col>
                    <el-col style="display: flex;" :span="7">
                      <el-button style="margin-right:20px ;width: 100px;" type="text">订购窗边框</el-button>
                      <el-color-picker v-model="viceJson.orderBdcol" size="small" show-alpha />
                    </el-col>
                  </el-row>
                  <el-row style="margin:0" :gutter="24">
                    <el-col style="display: flex;" :span="7">
                      <el-button style="margin-right:20px ;width: 100px;" type="text">按钮色(上)</el-button>
                      <el-color-picker v-model="viceJson.btnTopcol" size="small" show-alpha />
                    </el-col>
                    <el-col style="display: flex;" :span="7">
                      <el-button style="margin-right:20px ;width: 100px;" type="text">按钮色(下)</el-button>
                      <el-color-picker v-model="viceJson.btnBotcol" size="small" show-alpha />
                    </el-col>
                  </el-row>
                  <el-row style="margin:0" :gutter="24">
                    <el-col style="display: flex;" :span="7">
                      <el-button style="margin-right:20px ;width: 100px;" type="text">抢购人数配色</el-button>
                      <el-color-picker v-model="viceJson.orderNumcol" size="small" show-alpha />
                    </el-col>
                    <el-col style="display: flex;" :span="7">
                      <el-button style="margin-right:20px ;width: 100px;" type="text">抢购文案配色</el-button>
                      <el-color-picker v-model="viceJson.orderTextcol" size="small" show-alpha />
                    </el-col>
                  </el-row>
                  <el-row style="margin:0" :gutter="24">
                    <el-col style="display: flex;" :span="7">
                      <el-button style="margin-right:20px ;width: 100px;" type="text">页面文字配色</el-button>
                      <el-color-picker v-model="viceJson.pageTextcol" size="small" show-alpha />
                    </el-col>
                    <el-col style="display: flex;" :span="7">
                      <el-button style="margin-right:20px ;width: 100px;" type="text">隐私声明配色</el-button>
                      <el-color-picker v-model="viceJson.hideCol" size="small" show-alpha />
                    </el-col>
                  </el-row>
                  <el-row style="margin:0" :gutter="24">
                    <el-col style="display: flex;" :span="7">
                      <el-button style="margin-right:20px ;width: 100px;" type="text">主产品键配色</el-button>
                      <el-color-picker v-model="viceJson.tabMaincol" size="small" show-alpha />
                    </el-col>
                    <el-col style="display: flex;" :span="7">
                      <el-button style="margin-right:20px ;width: 100px;" type="text">副产品键配色</el-button>
                      <el-color-picker v-model="viceJson.tabVicecol" size="small" show-alpha />
                    </el-col>
                  </el-row>
                </el-collapse-item>
                <el-collapse-item v-if="form.viceProductIds.length>0" title="产品配图-副产品" name="3">
                  <el-form-item style="margin-top:20px">
                    <template slot="label">
                      <span>页面动效</span>
                    </template>
                    <el-switch v-model="viceJson.drawVal" active-text="勾选" inactive-text="不勾选" active-value="1" inactive-value="0" />
                  </el-form-item>
                  <el-form-item>
                    <template slot="label">
                      <span>banner图</span>
                    </template>
                    <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'副banner')})">
                      <img v-if="viceJson.bannerImg" :src="imgUrl+viceJson.bannerImg" class="avatar" />
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <span v-if="viceJson.bannerImg!==''" @click="viceJson.bannerImg=''" style="color: #F56C6C; cursor: pointer">删除</span>
                  </el-form-item>
                  <el-form-item>
                    <template slot="label">
                      <span>动态文件</span>
                    </template>
                    <div style="max-width:260px !important" id="lottieVice"></div>
                    <el-upload v-if="viceJson.jsonImg===''" class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'副jsonImg')})">
                      <i class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <span v-if="viceJson.jsonImg!==''" @click="svgRemove('副')" style="color: #F56C6C; cursor: pointer">删除</span>
                  </el-form-item>
                  <el-form-item>
                    <template slot="label">
                      <span>上层素材</span>
                    </template>
                    <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'副upImg')})">
                      <img v-if="viceJson.upImg" :src="imgUrl+viceJson.upImg" class="avatar" />
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <span v-if="viceJson.upImg!==''" @click="viceJson.upImg=''" style="color: #F56C6C; cursor: pointer">删除</span>
                  </el-form-item>

                  <el-form-item>
                    <template slot="label">
                      <span>顶层素材</span>
                    </template>
                    <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'副topImg')})">
                      <img v-if="viceJson.topImg" :src="imgUrl+viceJson.topImg" class="avatar" />
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <span v-if="viceJson.topImg!==''" @click="viceJson.topImg=''" style="color: #F56C6C; cursor: pointer">删除</span>
                  </el-form-item>
                  <el-form-item>
                    <template slot="label">
                      <span>订购窗配图</span>
                    </template>
                    <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'副explainImg')})">
                      <img v-if="viceJson.explainImg" :src="imgUrl+viceJson.explainImg" class="avatar" />
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <span v-if="viceJson.explainImg!==''" @click="viceJson.explainImg=''" style="color: #F56C6C; cursor: pointer">删除</span>
                  </el-form-item>
                  <el-form-item>
                    <template slot="label">
                      <span>产品说明标题</span>
                    </template>
                    <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'副orderImg')})">
                      <img v-if="viceJson.orderImg" :src="imgUrl+viceJson.orderImg" class="avatar" />
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <span v-if="viceJson.orderImg!==''" @click="viceJson.orderImg=''" style="color: #F56C6C; cursor: pointer">删除</span>
                  </el-form-item>
                </el-collapse-item>
                <el-collapse-item title="菜单按钮" name="4">
                  <el-row style="margin:0" :gutter="24">
                    <el-col style="display: flex;" :span="10">
                      <el-tooltip :open-delay="500" effect="dark" content="底部导航订购记录按钮" placement="top">
                        <span class="spanStyle">订购记录</span>
                      </el-tooltip>
                      <el-switch v-model="extJson.jiluBtn" active-text="勾选" inactive-text="不勾选" active-value="1" inactive-value="0" />
                    </el-col>
                    <el-col style="display: flex;" :span="10">
                      <el-tooltip :open-delay="500" effect="dark" content="底部导航流量激活按钮" placement="top">
                        <span class="spanStyle">流量激活</span>
                      </el-tooltip>
                      <el-switch v-model="extJson.jihuoBtn" active-text="勾选" inactive-text="不勾选" active-value="1" inactive-value="0" />
                    </el-col>
                  </el-row>
                  <el-row style="margin:0" :gutter="24">
                    <el-col style="display: flex;" :span="10">
                      <el-tooltip :open-delay="500" effect="dark" content="底部导航一键反馈按钮" placement="top">
                        <span class="spanStyle">一键反馈</span>
                      </el-tooltip>
                      <el-switch v-model="extJson.guanzhuBtn" active-text="勾选" inactive-text="不勾选" active-value="1" inactive-value="0" />
                    </el-col>
                    <el-col style="display: flex;" :span="10">
                      <el-tooltip :open-delay="500" effect="dark" content="底部导航退订产品按钮" placement="top">
                        <span class="spanStyle">退订产品</span>
                      </el-tooltip>
                      <el-switch v-model="extJson.tuidingBtn" active-text="勾选" inactive-text="不勾选" active-value="1" inactive-value="0" />
                    </el-col>
                  </el-row>
                  <el-row style="margin:0" :gutter="24">
                    <el-col style="display: flex;" :span="10">
                      <el-tooltip :open-delay="500" effect="dark" content="底部导航流量查询按钮" placement="top">
                        <span class="spanStyle">流量查询</span>
                      </el-tooltip>
                      <el-switch v-model="extJson.chaxunBtn" active-text="勾选" inactive-text="不勾选" active-value="1" inactive-value="0" />
                    </el-col>
                    <el-col style="display: flex;" :span="10">
                      <el-tooltip :open-delay="500" effect="dark" content="底部导航会员领取按钮" placement="top">
                        <span class="spanStyle">会员领取</span>
                      </el-tooltip>
                      <el-switch v-model="extJson.memberBtn" active-text="勾选" inactive-text="不勾选" active-value="1" inactive-value="0" />
                    </el-col>
                  </el-row>
                </el-collapse-item>
              </el-collapse>
            </el-form>
          </div>
          <!-- 订购相关 -->
          <div class="info" v-else-if="activeName==='2'">
            <el-form size="small" ref="form" label-width="100px" style="width:65%">
              <el-form-item>
                <template slot="label">
                  <el-popover :open-delay="500" placement="right" trigger="hover">
                    <img src="./totasImg/ysBtn.png" alt="">
                    <span slot="reference">隐私声明</span>
                  </el-popover>
                </template>
                <el-switch v-model="extJson.privacy" active-text="勾选" inactive-text="不勾选" active-value="1" inactive-value="0" />
              </el-form-item>
              <el-form-item>
                <template slot="label">
                  <el-popover :open-delay="500" placement="right" trigger="hover">
                    <img src="./totasImg/fj.png" alt="">
                    <span slot="reference">附加声明</span>
                  </el-popover>
                </template>
                <el-input v-model="extJson.privacyText" type="textarea" :rows="2" placeholder="请输入附加声明"></el-input>
              </el-form-item>
              <el-form-item>
                <template slot="label">
                  <el-tooltip content="用于产品退订时,是否开启合约期退订提示" placement="top">
                    <span>合约退订</span>
                  </el-tooltip>
                </template>
                <el-switch v-model="extJson.treaty" active-text="开启" inactive-text="不开启" active-value="1" inactive-value="0" />
              </el-form-item>
              <el-form-item>
                <template slot="label">
                  <el-popover :open-delay="500" placement="right" trigger="hover">
                    <img src="./totasImg/hy.png" alt="">
                    <span slot="reference">提示文案</span>
                  </el-popover>
                </template>
                <el-input v-model="extJson.treatyText" type="textarea" :rows="2" placeholder="默认为：合约期外退订无需缴纳违约金，合约期内退订需一次性支付违约金话费xxx元，是否退订"></el-input>
              </el-form-item>
              <el-form-item>
                <template slot="label">
                  <el-tooltip :open-delay="500" content="用于产品订购时是否开启遮罩层" placement="top">
                    <span>启用遮罩</span>
                  </el-tooltip>
                </template>
                <el-switch v-model="extJson.isMask" active-text="开启" inactive-text="不开启" active-value="1" inactive-value="0" />
              </el-form-item>
              <el-form-item>
                <template slot="label">
                  <el-popover :open-delay="500" placement="right" trigger="hover">
                    <img src="./totasImg/zz.png" alt="">
                    <span slot="reference">遮罩文案</span>
                  </el-popover>
                </template>
                <el-row :gutter="20">
                  <el-col :span="10">
                    <el-input v-model="extJson.maskText" type="textarea" :rows="2" placeholder="首行文案"></el-input>
                  </el-col>
                  <el-col :span="10">
                    <el-input v-model="extJson.maskText2" type="textarea" :rows="2" placeholder="配合文案"></el-input>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item v-if="form.viceProductIds.length>0" label="遮罩文案(副产品)">
                <el-row :gutter="20">
                  <el-col :span="10">
                    <el-input v-model="extJson.fitText" type="textarea" :rows="2" placeholder="首行文案"></el-input>
                  </el-col>
                  <el-col :span="10">
                    <el-input v-model="extJson.fitText2" type="textarea" :rows="2" placeholder="配合文案"></el-input>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item>
                <template slot="label">
                  <el-tooltip :open-delay="500" content="用于控制订购按钮的显示隐藏" placement="top">
                    <span>开启订购</span>
                  </el-tooltip>
                </template>
                <el-switch v-model="extJson.isBuy" active-text="开启" inactive-text="不开启" active-value="1" inactive-value="0" />
              </el-form-item>
              <el-form-item>
                <template slot="label">
                  <el-popover :open-delay="500" placement="right" trigger="hover">
                    <img src="./totasImg/btn1.png" alt="">
                    <span slot="reference">主产品文案</span>
                  </el-popover>
                </template>
                <el-input v-model="extJson.btnText" placeholder="主产品"></el-input>
              </el-form-item>
              <el-form-item>
                <template slot="label">
                  <el-popover :open-delay="500" placement="right" trigger="hover">
                    <img src="./totasImg/btn2.png" alt="">
                    <span slot="reference">副产品文案</span>
                  </el-popover>
                </template>
                <el-input v-model="extJson.btnTextAss" placeholder="副产品"></el-input>
              </el-form-item>
              <el-form-item>
                <template slot="label">
                  <el-popover :open-delay="500" placement="right" trigger="hover">
                    <img src="./totasImg/num.png" alt="">
                    <span slot="reference">订购人数</span>
                  </el-popover>
                </template>
                <el-row :gutter="24">
                  <el-col :span="5">
                    <el-input type="text" v-model="extJson.orderNum" placeholder="初始值" />
                  </el-col>
                  <el-col :span="4">
                    <el-input type="text" v-model="extJson.orderAdd" placeholder="步幅" />
                  </el-col>
                  <el-col :span="14">
                    <el-input type="text" v-model="extJson.orderText" placeholder="默认:用户已抢购成功" />
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item>
                <template slot="label">
                  <el-popover :open-delay="500" placement="right" trigger="hover">
                    <img src="./totasImg/td.png" alt="">
                    <span slot="reference">退订窗文案</span>
                  </el-popover>
                </template>
                <el-input v-model="extJson.unBuyText" placeholder="请输入退订窗文案"></el-input>
              </el-form-item>
              <el-form-item>
                <template slot="label">
                  <el-tooltip :open-delay="500" content="开启后,订购产品成功,自动调用领取会员" placement="top">
                    <span>会员自动直冲</span>
                  </el-tooltip>
                </template>
                <el-switch v-model="extJson.isZhic" active-text="启用" inactive-text="不启用" active-value="0" inactive-value="1" />
              </el-form-item>
              <el-form-item>
                <template slot="label">
                  <el-tooltip :open-delay="500" content="开启后,订购产品成功,自动调用流量激活" placement="top">
                    <span>流量自动激活</span>
                  </el-tooltip>
                </template>
                <el-switch v-model="extJson.activation" active-text="启用" inactive-text="不启用" active-value="1" inactive-value="0" />
              </el-form-item>
            </el-form>
          </div>
          <!-- 推荐管理 -->
          <div class="info" v-else-if="activeName==='3'">
            <el-form size="small" ref="form" label-width="100px" style="width:65%">
              <el-form-item>
                <template slot="label">
                  <el-tooltip :open-delay="500" content="用于推荐的策略" placement="top">
                    <span>推荐策略</span>
                  </el-tooltip>
                </template>
                <el-select v-model="form.recommendStrategyIds" multiple filterable placeholder="请选择推荐策略" @change="recommendChnage">
                  <el-option v-for="(item, index) in strategyInfoList" :key="index" :label="item.strategyName" :value="item.id" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <template slot="label">
                  <el-popover :open-delay="500" placement="right" trigger="hover">
                    <img src="./totasImg/tdyl.png" alt="">
                    <span slot="reference">退订引流</span>
                  </el-popover>
                </template>
                <el-select clearable v-model="unsubscribeStrategyIds" filterable placeholder="请选择退订引流产品" @change="unChange">
                  <el-option v-for="(item, index) in strategyInfoList" :key="index" :label="item.strategyName" :value="item.id" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <template slot="label">
                  <el-popover :open-delay="500" placement="right" trigger="hover">
                    <img src="./totasImg/cfyl.png" alt="">
                    <span slot="reference">重复订购引流</span>
                  </el-popover>
                </template>
                <el-select clearable v-model="extJson.orderRepeat" filterable placeholder="请选择重复订购引流产品">
                  <el-option v-for="(item, index) in strategyInfoList" :key="index" :label="item.strategyName" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <!-- 活动管理 -->
          <div class="info" v-else-if="activeName==='4'">
            <el-form size="small" ref="form" label-width="100px" style="width:65%">
              <el-form-item>
                <template slot="label">
                  <el-tooltip :open-delay="500" content="跳转活动页面的活动链接" placement="top">
                    <span>活动链接</span>
                  </el-tooltip>
                </template>
                <el-input v-model="form.linkUrl" placeholder="策略名称"></el-input>
              </el-form-item>
              <el-form-item>
                <template slot="label">
                  <el-tooltip :open-delay="500" content="当前跳转活动链接属于活动类型" placement="top">
                    <span>活动类型</span>
                  </el-tooltip>
                </template>
                <el-select v-model="form.activityType" clearable placeholder="选择活动类型">
                  <el-option label="无活动" :value="0"></el-option>
                  <el-option label="科创活动" :value="1"></el-option>
                  <el-option label="铂原活动" :value="2"></el-option>
                </el-select>
              </el-form-item>
              <!-- <el-form-item>
                <template slot="label">
                  <el-tooltip content="当前跳转活动链接属于活动类型" placement="top">
                    <span>活动ID</span>
                  </el-tooltip>
                </template>
                <el-select placeholder="选择活动类型"></el-select>
              </el-form-item> -->
              <el-form-item>
                <template slot="label">
                  <el-tooltip :open-delay="500" content="位于banner图侧方跳转活动logo图标" placement="top">
                    <span>活动LOGO</span>
                  </el-tooltip>
                </template>
                <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'活动logo')})">
                  <img v-if="form.activityLogo !==''" :src="form.activityLogo" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <span v-if="form.activityLogo!==''" @click="form.activityLogo=''" style="color: #F56C6C; cursor: pointer">删除</span>
              </el-form-item>
              <el-form-item>
                <template slot="label">
                  <el-tooltip :open-delay="500" content="位于推荐位可跳转活动页面活动海报" placement="top">
                    <span>活动海报</span>
                  </el-tooltip>
                </template>
                <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'活动海报')})">
                  <img v-if="form.posterPhoto!==''" :src="form.posterPhoto" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <span v-if="form.posterPhoto!==''" @click="form.posterPhoto=''" style="color: #F56C6C; cursor: pointer">删除</span>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <!-- <div class="footer">

        </div> -->
      </div>
    </div>

  </div>
</template>

<script>
import lottie from 'lottie-web';
import { post, get } from "@/api/common";
export default {
  data () {
    return {
      lottie: {},
      imgUrl: process.env.VUE_APP_BASE_IMG_URL,
      ifreamSrc: "",
      imgapi: process.env.VUE_APP_BASE_IMG_API, //上传图片地址
      activeName: '0',
      collapseVal: [],
      loading: true,
      form: {
        activityLogo: "", //活动logo
        posterPhoto: "", //活动海报
        activityType: '',  //活动类别 1科创活动,2铂原活动
        activityUuid: "",  //活动uuid
        linkUrl: "",        //活动链接
        extJson: "",  //策略json,
        productJson: "", // 产品json
        otherJson: "",    //备用json
        primaryProductId: '',  //主产品id
        promotePhoto: "",  //推广图
        strategyName: "", //策略名称
        strategyStatus: 1, //策略状态 0 失效 1生效
        strategyType: 0,  //	策略类型 0-基本策略 1-活动策略
        templateId: '',  //模板id
        templateCode: "",//  模板code
        maskText: "",// 策略备注
        recommendStrategyIds: [],  //	推荐策略ids
        unsubscribeStrategyIds: [],  //退订引流策略ids
        viceProductIds: []   //副产品ids
      },
      unsubscribeStrategyIds: null,
      viceProductId: null,
      extJson: {
        jiluBtn: "1",
        jihuoBtn: "1",
        memberBtn: "1",
        chaxunBtn: "1",
        guanzhuBtn: "1",
        tuidingBtn: "1",
        isBuy: "1",
        isMask: "0",
        Zoetrope: "0",
        orderNum: "",
        orderAdd: "",
        orderText: "",
        orderRepeat: "",
        privacy: "0",
        privacyText: "",
        attestation: 3,
        maskText: "",
        maskText2: "",
        dispose: "",
        activation: "0",
        // 回传api方式
        returnApi: "",
        extendImg: "",
        extendVal: "0",
        treaty: '0',
        treatyText: "",
        fitText: "",
        fitText2: "",
        btnText: "",
        btnTextAss: "",
        unBuyText: "",
        isZhic: "0"
      },   //策略json
      productJson: {
        logoPic: "",   //logo图   (对应原字段)
        pageTitle: "",  //页面标题  (新增)
        remark3: "",   //分享简述   (对应原字段)
        pageBgcol: "",  //页面背景色  ( 原 bgColor[0] )
        orderBgcol: "", // 订购窗背景色 ( 原 bgColor[2] )
        orderBdcol: "",  // 订购窗边框色 ( 原 bgColor[3] )
        btnTopcol: "", //订购按钮色1 (原themeColor[0])
        btnBotcol: "", //订购按钮色2 (原themeColor[1])
        orderNumcol: "", // 抢购人数配色  (原cacheSeatOne[0].rushC.s)
        orderTextcol: "", // 抢购文案配色  (原cacheSeatOne[0].rushC.e)
        pageTextcol: "", // 页面文字配色 (原cacheSeatOne[0].proC.s)
        hideCol: "",  // 隐私声明配色  (原cacheSeatOne[0].proC.e)
        tabMaincol: "",  //主产品建配色(原cacheSeatOne[0].tabC.s)
        tabVicecol: "",  //副产品建配色(原cacheSeatOne[0].tabC.e)
        bannerImg: "", // banner (原bannerPics[0])
        jsonImg: "", // 动态素材 (原bannerPics[1])
        upImg: "", // 上层素材 (原bannerPics[2])
        topImg: "",  //顶层素材 (原bannerPics[3])
        drawVal: "0", //开页动效 (原cacheSeatOne[0].dongHua)
        orderImg: "", //订购窗图
        explainImg: "", //产品说明图
        productV: "2",//产品ui样式

      },  //产品json
      otherJson: {}, // 备用json
      // 副产品json
      viceJson: {
        pageBgcol: "",  //页面背景色  
        orderBgcol: "", // 订购窗背景色 
        orderBdcol: "",  // 订购窗边框色 
        btnTopcol: "", //订购按钮色1 
        btnBotcol: "", //订购按钮色2 
        orderNumcol: "", // 抢购人数配色 
        orderTextcol: "", // 抢购文案配色 
        pageTextcol: "", // 页面文字配色
        hideCol: "",  // 隐私声明配色 
        tabMaincol: "",  //主产品建配色
        tabVicecol: "",  //副产品建配色
        bannerImg: "", // banner
        jsonImg: "", // 动态素材 
        upImg: "", // 上层素材 
        topImg: "",  //顶层素材 
        orderImg: "", //订购窗图
        explainImg: "", //产品说明图
        productV: "2",
        drawVal: "0", //副产品动画
      },
      // 客户端适配
      disposeList: [
        { value: "tencent", label: "腾讯客户端", },
        { value: "aqy", label: "爱奇艺客户端", },
        { value: "bili", label: "B站客户端", },
        { value: "kuaishou", label: "快手客户端", },
        { value: "ksInfo", label: "快手信息流", },
        { value: "ksJhuo", label: "快手激活", },
        { value: "zijie", label: "字节跳动信息流", },
        { value: "zijieStart", label: "字节星图信息流", },
      ],
      // 模板列表
      templateList: [],
      //产品列表
      productInfoList: [],
      //策略列表
      strategyInfoList: [],
      editId: null,
      copy: 0,
    }
  },
  created () {
    this.getTemplate()
    this.getProductList()
    this.getStrategyList()
  },
  mounted () {
    if (this.$route.query.id) {
      let id = this.$route.query.id
      this.getStrategyId(id)
    }
    if (this.$route.query.editId) {
      this.editId = this.$route.query.editId
    }
    if(this.$route.query.copy){
      this.copy = this.$route.query.copy
    }

  },
  methods: {
    inputBlur () {
      this.form.strategyName = this.$store.state.user.name + '——' + this.form.strategyName
    },
    // 选择模板
    templateChange (e) {
      if (e) {
        this.templateList.forEach(val => {
          if (this.form.templateId === val.id) {
            this.form.templateCode = val.templateCode
          }
        })
      }
    },
    // 点击预览
    preview () {
      this.ifreamSrc = process.env.VUE_APP_BASE_IFURL
      setTimeout(() => {
        let ifream = document.getElementById('ifreamId')
        const iframeWin = ifream.contentWindow
        let pageData = {
          item: this.form,
          extJson: this.extJson,
          productJson: this.productJson,
          viceJson: this.viceJson,
          template: this.form.templateCode
        }
        iframeWin.postMessage(pageData, this.ifreamSrc)
      }, 1000)

    },
    // 根据id查询策略信息
    getStrategyId (id) {
      post('/strategytemplate/' + id).then(res => {
        this.objVal(this.form, res.data)
        this.objVal(this.extJson, JSON.parse(this.form.extJson))
        this.objVal(this.productJson, JSON.parse(this.form.productJson).product)
        this.objVal(this.viceJson, JSON.parse(this.form.productJson).viceProduct)
        this.objVal(this.otherJson, JSON.parse(this.form.otherJson))
        this.viceProductId = this.form.viceProductIds[0]
        this.unsubscribeStrategyIds = this.form.unsubscribeStrategyIds[0]
        if (this.productJson.jsonImg !== '') {
          let imgUrl = this.imgUrl + this.productJson.jsonImg
          this.svgClick('主', imgUrl)
        }
        if (this.viceJson.jsonImg !== '') {
          let imgUrl = this.imgUrl + this.viceJson.jsonImg
          this.svgClick('副', imgUrl)
        }
        if (this.copy==='1') {
          this.form.strategyName = this.form.strategyName + '-复制'
        }
        setTimeout(() => {
          this.preview()
        }, 1000)
      })

    },
    // 获取新策略列表
    getStrategyList () {
      get('/strategytemplate/list', { pageNum: 1, pageSize: 9999 }).then(res => {
        this.strategyInfoList = res.data.list
      })
    },
    // 保存策略模板信息
    keepClick () {
      this.$confirm('确定保存模板信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let obj = {
          product: this.productJson,
          viceProduct: this.viceJson
        }
        this.form.productJson = JSON.stringify(obj)
        this.form.extJson = JSON.stringify(this.extJson)
        this.form.otherJson = JSON.stringify(this.otherJson)
        if (this.editId !== null) {
          let id = this.$route.query.id
          post('/strategytemplate/update/' + id, this.form).then(res => {
            if (res.code === 10000) {
              this.$message.success('编辑成功!')
              setTimeout(() => {
                this.$router.go(0)
              }, 1000)
            }
          })
        } else {
          if (this.form.strategyName === '') {
            this.$message.error('策略名称不能为空')
            return false
          }
          if (this.form.primaryProductId === '') {
            this.$message.error('主产品不能为空')
            return false
          }
          if (this.form.templateId === '') {
            this.$message.error('模板不能为空')
            return false
          }
          post('/strategytemplate/create', this.form).then(res => {
            if (res.code === 10000) {
              this.$message.success('新增成功!')
              this.clearValue(this.form)
              this.clearValue(this.extJson)
              this.clearValue(this.productJson)
              this.clearValue(this.otherJson)
              this.clearValue(this.viceJson)
              this.viceProductId = null
              if (this.$route.query.copy) {
                setTimeout(() => {
                  this.$router.go(-1)
                }, 2000)
              }
            }
          })

        }
      })
    },
    // 获取模板信息
    getTemplate () {
      get("/templateInfo/page", {
        pageSize: 9999,
        pageNum: 1,
      }).then((res) => {
        res.data.list.map((res) => {
          res.templatePhoto =
            process.env.VUE_APP_BASE_IMG_URL + res.templatePhoto;
        });
        this.templateList = res.data.list;
      });
    },
    // 获取产品信息
    getProductList () {
      get("/productInfo/page", {
        pageSize: 9999,
        pageNum: 1,
      }).then((res) => {
        this.productInfoList = res.data.list;
      });
    },
    // 获取策略信息
    getStrategyInfo () {
      get("/strategytemplate/list", {
        pageSize: 9999,
        pageNum: 1,
      }).then((res) => {
        this.strategyInfoNewList = res.data.list;
      });
    },
    //选择副产品  处理副产品
    viceChange (e) {
      if (e) {
        this.form.viceProductIds = []
        this.form.viceProductIds.push(e)
      } else {
        this.form.viceProductIds = []
      }
    },
    recommendChnage (e) {
      if (!e) {
        this.form.recommendStrategyIds = []
      }
    },
    unChange (e) {
      if (e) {
        this.form.unsubscribeStrategyIds = []
        this.form.unsubscribeStrategyIds.push(e)
      } else {
        this.form.unsubscribeStrategyIds = []
      }
    },
    // 主产品  新增  编辑
    productClick (val) {
      if (val === 'edit') {
        if (this.form.primaryProductId === '') {
          this.$message.warning('请选择产品')
        } else {
          const routeUrl = this.$router.resolve({
            path: "/productV2/editProduct",
            query: { id: this.form.primaryProductId },
          });
          window.open(routeUrl.href, "_blank");
        }

      } else if (val === 'add') {
        const routeUrl = this.$router.resolve({
          path: "/productV2/addProduct",
        });
        window.open(routeUrl.href, "_blank");
      }
    },
    // 清空对象中的value值
    clearValue (obj) {
      Object.keys(obj).forEach(key => {
        if (typeof obj[key] == 'object') {
          this.clearValue(obj[key])
        } else {
          obj[key] = '';
        }
      });
    },
    // 上传图片
    fileSuccess (file, fileList, name) {
      if (file.code === 10000) {
        if (name === '推广图') {
          this.form.promotePhoto = this.imgUrl + file.data
        } else if (name === 'logo') {
          this.productJson.logoPic = file.data
        } else if (name === '主banner') {
          this.productJson.bannerImg = file.data
        } else if (name === '主jsonImg') {
          this.productJson.jsonImg = file.data
          let imgUrl = this.imgUrl + file.data
          this.svgClick('主', imgUrl)
        } else if (name === '主upImg') {
          this.productJson.upImg = file.data
        } else if (name === '主topImg') {
          this.productJson.topImg = file.data
        } else if (name === '主orderImg') {
          this.productJson.orderImg = file.data
        } else if (name === '主explainImg') {
          this.productJson.explainImg = file.data
        } else if (name === '副banner') {
          this.viceJson.bannerImg = file.data
        } else if (name === '副jsonImg') {
          this.viceJson.jsonImg = file.data
          let imgUrl = this.imgUrl + file.data
          this.svgClick('副', imgUrl)
        } else if (name === '副upImg') {
          this.viceJson.upImg = file.data
        } else if (name === '副topImg') {
          this.viceJson.topImg = file.data
        } else if (name === '副orderImg') {
          this.viceJson.orderImg = file.data
        } else if (name === '副explainImg') {
          this.viceJson.explainImg = file.data
        } else if (name === '活动logo') {
          this.form.activityLogo = this.imgUrl + file.data
        } else if (name === '活动海报') {
          this.form.posterPhoto = this.imgUrl + file.data
        }

      }
    },
    // 对象赋值
    objVal (a, b) {
      Object.keys(a).forEach(val => {
        Object.keys(b).forEach(item => {
          if (val === item) {
            a[val] = b[item]
          }
        })
      })
    },
    svgClick (name, path) {
      if (name === '主') {
        this.lottie = lottie.loadAnimation({
          container: document.getElementById('lottie_box'),
          renderer: 'svg',
          loop: true,
          autoplay: true,
          path: path
        })
      } else if (name === '副') {
        this.lottie = lottie.loadAnimation({
          container: document.getElementById('lottieVice'),
          renderer: 'svg',
          loop: true,
          autoplay: true,
          path: path
        })
      }
    },
    svgRemove (name) {
      if (name === '主') {
        this.productJson.jsonImg = ''
        let div = document.getElementById('lottie_box')
        div.innerHTML = ""
      } else if (name === '副') {
        this.viceJson.jsonImg = ''
        let div = document.getElementById('lottieVice')
        div.innerHTML = ""
      }
    },
    closePage () {
      if (this.editId === '1' || this.copy === '1') {
        window.close()
      } else {
        this.$router.go(-1)
      }
    }
  },
}
</script>

<style lang="scss">
.content {
  width: 100%;
  height: 94vh;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .page {
    width: 45%;
    height: 100%;
    position: relative;
    .look {
      position: absolute;
      top: 20px;
      right: 50px;
    }
    .ifreamBox {
      width: 375px;
      height: 80%;
      margin: 80px auto;
      // border: 1px solid red;
      .ifream {
        overflow: hidden;
      }
    }
  }
  .set {
    flex: 1;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 8px 10px -5px rgb(0 0 0 / 20%),
      0 16px 24px 2px rgb(0 0 0 / 14%), 0 6px 30px 5px rgb(0 0 0 / 12%);
    .main {
      width: 100%;
      height: 100vh;
      overflow-y: scroll;
    }
    ::-webkit-scrollbar {
      display: none;
    }
  }
  // 上传图片组件样式

  .avatar-uploader {
    max-width: 260px;
    margin-right: 10px;
    display: inline-block;

    .el-upload {
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
  }

  .avatar-uploader-icon {
    background-color: #fbfdff;
    font-size: 28px;
    color: #8c939d;
    width: 98px;
    height: 98px;
    line-height: 98px;
    text-align: center;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
  }

  .avatar-uploader-icon:hover {
    border-color: #409eff;
  }

  .avatar {
    width: 100%;
    height: 100%;
    // width: 148px;
    // height: 148px;
    display: block;
  }
  .el-col {
    padding-left: 0 !important;
  }
  .spanStyle {
    display: block;
    margin-right: 20px;
    // font-size: 15px;
    // font-weight: bold;
  }
}
</style>