<template>
  <div class="strategyList">
    <el-form size="small" inline>
      <el-form-item label="策略名称">
        <el-input v-model="form.strategyName" placeholder="输入策略名称"></el-input>
      </el-form-item>
      <el-form-item label="产品" placeholder="选择产品">
        <el-select v-model="form.productId" filterable clearable>
          <el-option v-for="item in productList" :key="item.id" :label="`${item.productName}/${item.remark}/${item.spid}`" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="form.strategyStatus" clearable>
          <el-option label="有效" :value="1"></el-option>
          <el-option label="无效" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button plain icon="el-icon-refresh" @click="reset">重置</el-button>
        <el-button type="primary" icon="el-icon-search" @click="getStrategyList">搜索</el-button>
        <el-button size="small" plain type="primary" icon="el-icon-add" @click="addClick('add')">新增</el-button>
        <el-button size="small" type="warning" @click="addClick('record')">历史记录</el-button>
      </el-form-item>
    </el-form>
    <div class="infoList">
      已选择{{ deleteDatas.length }}项
      <el-button v-if="deleteDatas.length > 0" style="margin-left: 20px" type="primary" icon="el-icon-delete" size="mini" @click="removeAll">批量删除</el-button>
      <el-button v-if="deleteDatas.length > 1" style="margin-left: 20px" type="primary" icon="el-icon-edit" size="mini" @click="drawerClick">批量修改</el-button>
    </div>
    <el-table :key="key" highlight-current-row v-loading="loading" :data="datas" :header-cell-style="{ 'background-color': '#E4E7ED', color: '#000' }" @selection-change="selectionChnage">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="strategyName" label="策略名称"></el-table-column>
      <el-table-column prop="maskText" label="策略备注"></el-table-column>
      <el-table-column label="产品">
        <template slot-scope="scope">
          <!-- <span>{{productList.find(val => { return val.id === scope.row.primaryProductId }).productName}}</span> -->
          <span>{{ getProductName(scope.row.primaryProductId) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="模板">
        <template slot-scope="scope">
          <!-- <span>{{templateList.find(val => { return val.id === scope.row.templateId }).templateName}}</span> -->
          <span>{{ getTemplateName(scope.row.templateId) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="strategyStatus" label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.strategyStatus === 1">有效</span>
          <span v-if="scope.row.strategyStatus === 0" style="color: #f56c6c">无效</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" icon="el-icon-document-copy" @click="addClick('copy', scope.row)">复制</el-button>
          <el-button type="text" size="small" icon="el-icon-edit" @click="addClick('edit', scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="invalid(scope.row)">{{scope.row.strategyStatus == 0?'生效':'失效'}}</el-button>
          <el-button type="text" size="small" icon="el-icon-delete" @click="addClick('remove', scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="float: right" background layout="total, sizes, prev, pager, next, jumper" :total="total" :current-page="form.pageNum" :page-size="form.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
    <el-drawer title="批量修改" :visible.sync="drawer" direction="rtl" :close-on-press-escape="false" :wrapperClosable="false" :with-header="false">
      <div style="padding: 10px; margin: 15px; border: 1px solid #e0e0e0">
        <el-tag style="margin-left: 15px" :key="index" v-for="(tag, index) in deleteDatas" :disable-transitions="false">
          {{ tag.strategyName }}</el-tag>
      </div>
      <div style="padding:30px 10px; margin: 30px">
        <el-form size="small" ref="form" style="width: 100%" label-width="120px">
          <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>
                <img-Content :imgValue="imgUrl + productJson.bannerImg" @imgVal="productJson.bannerImg =$event" @removeClick="productJson.bannerImg = $event" />
                <!-- <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>
                <img-Content :imgValue="imgUrl+productJson.upImg" @imgVal="productJson.upImg =$event" @removeClick="productJson.upImg = $event" />
                <!-- <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>
                <img-Content :imgValue="imgUrl+productJson.topImg" @imgVal="productJson.topImg =$event" @removeClick="productJson.topImg = $event" />
                <!-- <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 label="订购窗标题">
                <img-Content :imgValue="imgUrl+productJson.explainTitle" @imgVal="productJson.explainTitle =$event" @removeClick="productJson.explainTitle = $event" />
                <!-- <el-upload class="avatar-uploader" :show-file-list="false" :action="imgapi" :on-success="((file,fileList)=>{fileSuccess(file,fileList,'explainTitle')})">
                      <img v-if="productJson.explainTitle !== ''" :src="imgUrl+productJson.explainTitle" class="avatar" />
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <span v-if="productJson.explainTitle!==''" @click="productJson.explainTitle=''" 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>
                <img-Content :imgValue="imgUrl+productJson.explainImg" @imgVal="productJson.explainImg =$event" @removeClick="productJson.explainImg = $event" />
                <!-- <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>
                <img-Content :imgValue="imgUrl+productJson.orderImg" @imgVal="productJson.orderImg =$event" @removeClick="productJson.orderImg = $event" />
                <!-- <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 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 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>
                <img-Content :imgValue="imgUrl + viceJson.bannerImg" @imgVal="viceJson.bannerImg =$event" @removeClick="viceJson.bannerImg = $event" />
                <!-- <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>
                <img-Content :imgValue="imgUrl + viceJson.upImg" @imgVal="viceJson.upImg =$event" @removeClick="viceJson.upImg = $event" />
                <!-- <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>
                <img-Content :imgValue="imgUrl + viceJson.topImg" @imgVal="viceJson.topImg =$event" @removeClick="viceJson.topImg = $event" />
                <!-- <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>
                <img-Content :imgValue="imgUrl + viceJson.explainImg" @imgVal="viceJson.explainImg =$event" @removeClick="viceJson.explainImg = $event" />
                <!-- <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>
                <img-Content :imgValue="imgUrl + viceJson.orderImg" @imgVal="viceJson.orderImg =$event" @removeClick="viceJson.orderImg = $event" />
                <!-- <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>
        </el-form>
      </div>
      <div style="position: absolute; bottom: 0; width: 100%; padding: 10px">
        <div style="display: flex; justify-content: flex-end">
          <el-button icon="el-icon-circle-close" @click="cancelClick">取消</el-button>
          <el-button @click="editClick" icon="el-icon-edit" type="primary">修改</el-button>
        </div>
      </div>
    </el-drawer>
    <!-- 历史记录 -->
    <vxe-modal v-model="recordShow" width="60%" title="历史记录">
      <template #default>

        <vxe-toolbar>
          <template #buttons>
            <vxe-input v-model="schemelogParam.notes" type="search" clearable placeholder="搜索操作记录"></vxe-input>
            <vxe-input v-model="schemelogParam.userName" type="search" clearable placeholder="搜索操作人"></vxe-input>
            <vxe-button @click="searchEvent" content="搜索"></vxe-button>
          </template>
        </vxe-toolbar>

        <vxe-table auto-resize height="600" :data="schemelog">
          <vxe-table-column field="createTime" title="时间"></vxe-table-column>
          <vxe-table-column field="notes" title="操作记录">
            <template slot-scope="props">
              <div v-html="props.row.notes"></div>
            </template>
          </vxe-table-column>
          <vxe-table-column field="userName" title="操作人"></vxe-table-column>
        </vxe-table>
        <vxe-pager :loading="loading" :current-page="schemelogParam.pageNum" :page-size="schemelogParam.pageSize" :total="schemelogParam.totalResult" :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']" @page-change="handlePageChangeChannelog" />
      </template>
    </vxe-modal>
  </div>
</template>

<script>
const XEUtils = require("xe-utils");
import { post, get } from "@/api/common";
import imgContent from '../../components/imgBox/index.vue'
export default {
  components: {
    imgContent
  },
  data () {
    return {
      schemelog: [],
      recordShow: false,
      schemelogParam: {
        pageNum: 1,
        pageSize: 10,
        totalResult: 0
      },
      drawer: false,
      loading: false,
      form: {
        productId: '',
        pageNum: 1,
        pageSize: 10,
        strategyName: "",
        strategyStatus: null,
      },
      total: 0,
      datas: [],
      deleteDatas: [], //删除所选数据
      templateList: [], //模板列表
      productList: [], //产品列表
      key: 0,
      productName: "",
      templateName: "",
      // ...................................
      imgUrl: process.env.VUE_APP_BASE_IMG_URL,
      imgapi: process.env.VUE_APP_BASE_IMG_API, //上传图片地址
      activeName: "0",
      collapseVal: [],
      productJson: {
        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)
        explainTitle: "0",
        orderImg: "", //订购窗图
        explainImg: "", //产品说明图
      }, //产品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: "", //产品说明图
        drawVal: "0", //副产品动画
      },
    };
  },
  mounted () {
    this.getProductList();
  },
  methods: {
    cancelClick () {
      for (let key in this.productJson) {
        this.productJson[key] = ''
      }
      for (let key in this.viceJson) {
        this.viceJson[key] = ''
      }
      this.drawer = false
    },
    drawerClick () {
      if (this.deleteDatas.length > 5) {
        this.$confirm("单次批量修改不能超过5条！", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });
      } else {
        this.$confirm("批量修改前，请先确认所选的策略在素材、副产品等项目上配置是否一致，错误选择可能造成线上页面显示问题！", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(async () => {
          this.drawer = true;
          let res = await this.getStrategyId(this.deleteDatas[0].id);
          let product = JSON.parse(res.data.productJson).product
          for (let key in this.productJson) {
            this.productJson[key] = product[key]
          }
          let viceProduct = JSON.parse(res.data.productJson).viceProduct
          for (let key in this.viceJson) {
            this.viceJson[key] = viceProduct[key]
          }
          // 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)
          // }
        })
      }
    },
    selectionChnage (e) {
      if (e) {
        this.deleteDatas = e;
      }
    },
    editClick () {
      this.$confirm("该修改将影响多条策略，且不可逆，是否确认继续？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.deleteDatas.forEach(async (val, index) => {
          let res = await this.getStrategyId(val.id);
          this.keepClick(res.data, index);
        })
      }).catch(() => {
        this.drawer = false
        this.deleteDatas = []
      })
    },
    // 新增修改策略记录
    addRecord (item) {
      let text = "策略：" + item.strategyName;
      let productJson = new Object();
      for (let key in this.productJson) {
        productJson[key] = JSON.parse(item.productJson).product[key];
      }
      let product1 = productJson;
      let product2 = this.productJson;
      XEUtils.objectEach(product2, (i, k) => {
        if (i != product1[k]) {
          text += `\n主产品${k}:${product1[k]} 改为 ${i ? i : "空"}`;
        }
      });
      let viceProduct = new Object();
      for (let key in this.viceJson) {
        viceProduct[key] = JSON.parse(item.productJson).viceProduct[key];
      }
      let vice1 = viceProduct;
      let vice2 = this.viceJson;
      XEUtils.objectEach(vice2, (i, k) => {
        if (i != vice1[k]) {
          text += `\n副产品${k}:${vice1[k]} 改为 ${i ? i : "空"}`;
        }
      });
      let params = {
        notes: text,
        strategyId: item.id,
        strategyName: item.strategyName,
        type: 0,
      };
      post("/strategyInfoNew/savelog", params);
    },
    keepClick (item, index) {
      let oldItem = Object.assign({}, item);
      let oldProduct = JSON.parse(item.productJson).product;
      let newProduct = { ...oldProduct, ...this.productJson };
      let oldViceProduct = JSON.parse(item.productJson).viceProduct;
      let newViceProduct = { ...oldViceProduct, ...this.viceJson };
      let obj = {
        product: newProduct,
        viceProduct: newViceProduct,
      };
      item.productJson = JSON.stringify(obj);
      post("/strategytemplate/update/" + item.id, item).then((res) => {
        this.addRecord(oldItem);
        if (res.code === 10000) {
          if (this.deleteDatas.length - 1 == index) {
            this.$message.success("修改成功");
            this.drawer = false
          }

        }
      });
    },
    // 根据id查询策略信息
    getStrategyId (id) {
      return post("/strategytemplate/" + id);
    },
    // 清空对象中的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 === "主jsonImg") {
          this.productJson.jsonImg = file.data;
          let imgUrl = this.imgUrl + file.data;
          this.svgClick("主", imgUrl);
        } else if (name === "副jsonImg") {
          this.viceJson.jsonImg = file.data;
          let imgUrl = this.imgUrl + file.data;
          this.svgClick("副", imgUrl);
        }
        // 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  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 === "副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 = "";
      }
    },
    getProductName (id) {
      let obj = this.productList.find((val) => {
        return val.id === id;
      });
      // return this.productName
      if (obj) {
        return obj.productName;
      }
    },
    getTemplateName (id) {
      let obj = this.templateList.find((val) => {
        return val.id === id;
      });
      // return this.templateName
      if (obj) {
        return obj.templateName;
      }
    },
    // 批量删除
    removeAll () {
      let arr = this.deleteDatas.map((val) => {
        return val.id;
      });
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        post("/strategytemplate/delete", { ids: arr }).then((res) => {
          this.$message.success("删除成功!");
          this.getStrategyList();
        });
      });
    },
    // 获取新策略列表
    getStrategyList () {
      this.loading = true
      this.key++;
      get("/strategytemplate/list", this.form).then((res) => {
        this.loading = false;
        this.datas = res.data.list;
        this.total = res.data.total;
        this.form.pageNum = res.data.pageNum;
        this.form.pageSize = res.data.pageSize;
      });
    },
    // 编辑策略
    addClick (val, item) {
      if (val === "add") {
        this.$router.push({ path: "/strategy/add" });
      } else if (val === "edit") {
        const routeUrl = this.$router.resolve({
          path: "/strategy/add",
          query: { id: item.id, editId: 1 },
        });
        window.open(routeUrl.href, "_blank");
      } else if (val === "remove") {
        this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          let id = [];
          id.push(item.id);
          post("/strategytemplate/delete", { ids: id }).then((res) => {
            this.$message.success("删除成功!");
            this.getStrategyList();
          });
        });
      } else if (val === "copy") {
        const routeUrl = this.$router.resolve({
          path: "/strategy/add",
          query: { id: item.id, copy: 1 },
        });
        window.open(routeUrl.href, "_blank");
      } else if (val === 'record') {
        this.recordShow = true
        this.searchEvent()
      }
    },
    // 获取模板信息
    getTemplate () {
      get("/templateInfo/page", {
        pageSize: 9999,
        pageNum: 1,
      }).then((res) => {
        this.templateList = res.data.list;
        this.getStrategyList();
      });
    },
    // 获取产品信息
    getProductList () {
      get("/productInfo/page", {
        pageSize: 9999,
        pageNum: 1,
      }).then((res) => {
        this.productList = res.data.list;
        this.getTemplate();
      });
    },
    // 每页数量
    handleSizeChange (val) {
      this.form.pageNum = 1;
      this.form.pageSize = val;
      this.getProductList();
    },
    // 当前页
    handleCurrentChange (val) {
      this.form.pageNum = val;
      this.getProductList();
    },
    // 数据失效处理
    invalid (item) {
      if (item.strategyStatus === 1) {
        post("/strategytemplate/update/" + item.id, { strategyStatus: 0 }).then(
          (res) => {
            this.$message.success("修改成功!");
            this.getProductList();
          }
        );
      } else {
        post("/strategytemplate/update/" + item.id, { strategyStatus: 1 }).then(
          (res) => {
            this.$message.success("修改成功!");
            this.getProductList();
          }
        );
        // this.$message.error("当前策略以失效!");
      }
    },
    // 重置
    reset () {
      this.form.pageNum = 1;
      this.form.pageSize = 10;
      this.form.strategyName = "";
      this.form.strategyStatus = null;
      this.getProductList();
    },
    handlePageChangeChannelog ({
      currentPage,
      pageSize
    }) {
      this.schemelogParam.pageNum = currentPage
      this.schemelogParam.pageSize = pageSize
      get('/strategyInfoNew/getlog', this.schemelogParam).then(res => {
        this.schemelog = res.data.list
        this.schemelogParam.totalResult = res.data.total
      })
    },
    searchEvent () {
      get('/strategyInfoNew/getlog', this.schemelogParam).then(res => {
        this.schemelog = res.data.list
        this.schemelogParam.totalResult = res.data.total
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.strategyList {
  padding: 20px !important;
  .infoList {
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding-left: 20px;
    border: 1px solid #409eff;
    background-color: #e1eefc;
    font-size: 13px;
    border-radius: 10px;
    margin-top: 40px;
  }
  .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>