<template>
  <div class="appconter">
    <el-card style="margin-bottom: 20px">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
        <el-form-item label="活动名称" prop="activeName">
          <el-input
            v-model="queryParams.activeName"
            placeholder="请输入活动名称"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
<!--        <el-form-item label="状态">-->
<!--          <el-select v-model="queryParams.status" clearable placeholder="请选择活动状态">-->
<!--            <el-option label="启用" value="0"></el-option>-->
<!--            <el-option label="禁用" value="1"></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
        <el-form-item label="是否在线" prop="isonline">
          <el-select v-model="queryParams.isonline" clearable placeholder="请选择是否在线">
            <el-option label="在线" value="0"></el-option>
            <el-option label="下线" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>

        </el-form-item>
      </el-form>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="addActivef"
          >新增</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card>
      <el-table v-loading="loading" :data="zList"  @selection-change="handleSelectionChange">
        <el-table-column
          type="index"
          align="center"
          label="序号"
        >
        </el-table-column>
        <!--      <el-table-column label="活动编号" align="center" prop="id" />-->
        <el-table-column label="活动名称" align="center" prop="activeName" />
        <el-table-column label="活动时间" align="center" prop="adaptUserType" >
          <template slot-scope="scope">
            <span >{{scope.row.activeStartTime || 0}}-{{scope.row.activeEndTime || 0}}</span>
          </template>
        </el-table-column>
        <el-table-column label="活动状态 " align="center" prop="status" >
          <template slot-scope="scope">
            <span style="cursor: pointer;"  v-if="scope.row.status == 0"> <el-tag>进行中</el-tag > </span>
            <span style="cursor: pointer;"  v-if="scope.row.status == 1"> <el-tag type="danger">待生效</el-tag>  </span>
            <span style="cursor: pointer;"  v-if="scope.row.status == 2"> <el-tag type="danger">已结束</el-tag>  </span>
          </template>
        </el-table-column>
        <el-table-column label="赠送积分" align="center" prop="adaptUserType" >
          <template slot-scope="scope">
            <span >{{scope.row.points || 0}}</span>
          </template>
        </el-table-column>
        <el-table-column label="赠送成长值" align="center" prop="adaptUserType" >
          <template slot-scope="scope">
            <span >{{scope.row.growthValue || 0}}</span>
          </template>
        </el-table-column>
        <el-table-column label="活动更新时间" align="center" prop="updateTime" >
          <template slot-scope="scope">
            <span >{{scope.row.updateTime || '暂无更新'}}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"

            >修改</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-view"
              @click="lookDetail(scope.row)"
            >详情</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDeletexia(scope.row)"
              v-if="scope.row.isonline == 0"
            >下线</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="Deleteshan(scope.row)"
              v-if="scope.row.isonline == 1"
            >删除</el-button>

          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getactivelist"
      />

    </el-card>

    <el-dialog  title="推荐有礼" :visible.sync="xzshow" width="55%">
<!--      <div slot="header" class="clearfix">-->
<!--        <span style="font-size: 20px">推荐有礼</span>-->
<!--      </div>-->

      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="left" class="demo-ruleForm" label-width="110px">
        <el-row :gutter="20">
          <el-col :span="20">
            <el-form-item label="活动名称" prop="activeName">
              <el-input style="width: 90%" v-model="ruleForm.activeName" placeholder="请输入活动名称" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="活动开始时间" prop="activeStartTime">
              <el-date-picker clearable
                              v-model="ruleForm.activeStartTime"
                              type="datetime"
                              value-format="yyyy-MM-dd HH:mm:ss"
                              placeholder="请选择活动开始时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="活动结束时间" prop="activeEndTime">
              <el-date-picker clearable
                              v-model="ruleForm.activeEndTime"
                              type="datetime"
                              value-format="yyyy-MM-dd HH:mm:ss"
                              placeholder="请选择活动结束时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="邀请人获得" prop="inviterGiftType">
          <el-checkbox-group v-model="ruleForm.inviterGiftType" >
            <el-checkbox v-for="city in Typelist" :label="city.type" :key="city.type">{{city.text}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
<!--        优惠券-->
        <div class="xh-box"  v-if="ruleForm.inviterGiftType && ruleForm.inviterGiftType.indexOf('0')>-1"  >
          <div class="box-bt"> <div >赠送卡券</div>  <el-button type="primary" icon="el-icon-plus" @click="getlistFavorable()" >新增</el-button>  </div>
          <div style="margin: 10px 0px">
            <el-table
              :data="ruleForm.ylist"
              border
              style="width: 100%">
              <el-table-column
                prop="giftCardName"
                label="卡券名称"
               >
              </el-table-column>
              <el-table-column
                prop="giftCardType"
                label="券类型"
               >
                <template slot-scope="scope">
                  <span v-if="scope.row.giftCardType == 0" >油品券</span>
                  <span v-if="scope.row.giftCardType == 1"  >商品券</span>
                  <span v-if="scope.row.giftCardType == 2"  >通用券</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="date"
                label="券详情"
                >
                <template slot-scope="scope">
                  <span>{{scope.row.giftCardDetail}}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="instruction"
                label="使用说明"
              >
              </el-table-column>
              <el-table-column
                prop="date"
                label="有效期（天）"
                >
                <template slot-scope="scope">
                  <span v-if="scope.row.timeType == 0" >    <el-input-number v-model="scope.row.validityZero" controls-position="right"  :min="1" :max="9999"></el-input-number> </span>
                  <span v-if="scope.row.timeType == 1" >   <el-input-number v-model="scope.row.validityOne" controls-position="right"  :min="1" :max="9999"></el-input-number> </span>
                  <span v-if="scope.row.timeType == 2" >     <el-input-number v-model="scope.row.validityTwo" controls-position="right"  :min="1" :max="9999"></el-input-number></span>
                </template>
              </el-table-column>
              <el-table-column
                prop="date"
                label="数量"
                >
                <template slot-scope="scope">
                  <el-input-number v-model="scope.row.giftCardTotal" controls-position="right"  :min="1" :max="9999"></el-input-number>
                </template>
              </el-table-column>

              <el-table-column
                prop="address"
                label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    @click="deletedata(scope.row)"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
<!--       兑换券-->
        <div class="xh-box" v-if="ruleForm.inviterGiftType && ruleForm.inviterGiftType.indexOf('1')>-1"  >
          <div class="box-bt"> <div >选择兑换券</div>  <el-button type="primary" icon="el-icon-plus" @click="getlistExchange()" >新增</el-button>  </div>
          <div style="margin: 10px 0px">

            <el-table
              :data="ruleForm.dlist"
              border
              style="width: 100%">
              <el-table-column
                prop="giftCardName"
                label="卡券名称"
                >
              </el-table-column>
              <el-table-column
                prop="date"
                label="券类型"
                >
                <template slot-scope="scope">
                  <span v-if="scope.row.giftCardType == 0" >油品券</span>
                  <span v-if="scope.row.giftCardType == 1"  >商品券</span>
                  <span v-if="scope.row.giftCardType == 2"  >通用券</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="date"
                label="券详情"
                >
                <template slot-scope="scope">
                  <span>{{scope.row.giftCardDetail}}</span>
                  <!--                  <span>满{{scope.row.fullDeduction}}减 {{scope.row.discountAmount}}元 </span>-->
                </template>
              </el-table-column>
              <el-table-column
                prop="instruction"
                label="使用说明"
              >
              </el-table-column>
              <el-table-column
                prop="date"
                label="有效期（天）"
                >
                <template slot-scope="scope">
                  <span >    <el-input-number v-model="scope.row.giftCardTime" controls-position="right"  :min="1" :max="9999"></el-input-number> </span>
                </template>
              </el-table-column>
              <el-table-column
                prop="date"
                label="数量"
              >
                <template slot-scope="scope">
                  <el-input-number v-model="scope.row.giftCardTotal" controls-position="right"  :min="1" :max="9999"></el-input-number>
                </template>
              </el-table-column>
              <el-table-column
                prop="address"
                label="操作"

              >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    @click="deletedhdata(scope.row)"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>

          </div>
        </div>
        <el-form-item label="积分" prop="points" v-if="ruleForm.inviterGiftType && ruleForm.inviterGiftType.indexOf('3')>-1" >
          <el-input-number v-model="ruleForm.points" controls-position="right"  :min="0" :max="999999999"></el-input-number>

        </el-form-item>
        <el-form-item label="成长值 " prop="growthValue" v-if="ruleForm.inviterGiftType && ruleForm.inviterGiftType.indexOf('2')>-1">
          <el-input-number v-model="ruleForm.growthValue" controls-position="right"  :min="0" :max="999999999"></el-input-number>

        </el-form-item>

<!-- 新用户-->
        <div class="xh-box" style="margin-bottom: 20px" >
          <div class="box-bt"> <div style="font-size: 16px;font-weight: bold" >新用户获得</div> <div><el-button type="primary" icon="el-icon-plus" @click="gethuodonglist()" >选择活动</el-button> </div>   </div>
         <div class="box-bt" style="margin-top: 15px" v-if="ruleForm.activeNewName">
           <div style="font-size: 16px;font-weight: bold">活动名称：{{ruleForm.activeNewName}} </div>
           <el-button type="danger" icon="el-icon-delete" circle @click="scxrhd()" ></el-button>
         </div>
        </div>
        <el-form-item label="活动规则" prop="activeRule">
          <el-input type="textarea" v-model="ruleForm.activeRule"></el-input>
        </el-form-item>
        <el-form-item label="活动状态" prop="status">
          <el-radio-group v-model="ruleForm.status">
            <el-radio label="0">开启</el-radio>
<!--            <el-radio label="1">待生效</el-radio>-->
            <el-radio label="2">关闭</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>

        </el-form-item>
      </el-form>

    </el-dialog>
<!--    新用户活动-->
    <el-dialog title="活动列表" :visible.sync="huodongshow">
      <div style="display: flex;align-items: center; margin-bottom: 20px ">
        <el-input v-model="huodongname" placeholder="优惠券名称"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="xgetlistFavorable" >搜索</el-button>

      </div>
      <el-table
        :data="huodonglist"
        border
        style="width: 100%">
        <el-table-column
          prop="name"
          label="活动名称"
         >
        </el-table-column>


        <el-table-column
          prop="date"
          label="有效期（天）"
          >
          <template slot-scope="scope">
            <span>{{scope.row.activeEndTime}}</span> -
            <span>{{scope.row.activeStartTime}}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="address"
          label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="huodongxz(scope.row)"
            >选择</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div><pagination
        v-show="zquerys.total>0"
        :total="zquerys.total"
        :page.sync="zquerys.pageNum"
        :limit.sync="zquerys.pageSize"
        @pagination="gethuodonglist"
      /></div>
    </el-dialog>
    <el-dialog title="详情统计" :visible.sync="opendetails" width="45%" append-to-body>
      <div style="display: flex;justify-content: space-between;width: 100%;">
        <div class="x-box">
          <div>优惠券数量统计</div>
          <div>总数量: {{statisticsyou.count ||0}}</div>
          <div>已使用数量: {{statisticsyou.countEd ||0}}</div>
          <div>未使用数量: {{statisticsyou.countLd ||0}}</div>
        </div>
        <div class="x-box">
          <div>兑换券数量统计</div>
          <div>总数量: {{statisticsyou.counts ||0}}</div>
          <div>已使用数量: {{statisticsyou.countEds ||0}}</div>
          <div>未使用数量: {{statisticsyou.countLds ||0}}</div>
        </div>
      </div>
      <el-table
        :data="looklist"
        style="width: 100%">
        <el-table-column
          prop="name"
          label="昵称"
        >
        </el-table-column>
        <el-table-column
          prop="mobile"
          label="联系方式"
        >
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="领取日期"
        >
        </el-table-column>
        <el-table-column
          prop="exchangeFrom"
          label="获取方式"
        >
        </el-table-column>
      </el-table>
    </el-dialog>
    <!--    优惠券列表 - 新用户获得 -->
    <el-dialog title="优惠券列表" :visible.sync="xdialogTableVisible">
      <div style="display: flex;align-items: center; margin-bottom: 20px ">
        <el-input v-model="xyouhuiquan.name" placeholder="优惠券名称"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="xgetlistFavorable" >搜索</el-button>
      </div>
      <el-table
        :data="xylist"
        border
        style="width: 100%">
        <el-table-column
          prop="name"
          label="卡券名称"
          width="80">
        </el-table-column>
        <el-table-column
          prop="date"
          label="券类型"
          width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.type == 0" >油品券</span>
            <span v-if="scope.row.type == 1"  >商品券</span>
            <span v-if="scope.row.type == 2"  >通用券</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="date"
          label="券详情"
          width="100">
          <template slot-scope="scope">
            <span>满{{scope.row.satisfiedAmount}}减 {{scope.row.discountAmount}}元 </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="date"
          label="有效期（天）"
          width="180">
          <template slot-scope="scope">
            <span v-if="scope.row.timeType == 0" >{{scope.row.validityZero}}天 </span>
            <span v-if="scope.row.timeType == 1" >{{scope.row.validityOne}}天 </span>
            <span v-if="scope.row.timeType == 2" >{{scope.row.validityTwo}}天 </span>
          </template>
        </el-table-column>

        <el-table-column
          prop="address"
          label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="chosedataxyh(scope.row)"
            >选择</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div><pagination
        v-show="xytotal>0"
        :total="xytotal"
        :page.sync="xyouhuiquan.pageNum"
        :limit.sync="xyouhuiquan.pageSize"
        @pagination="xgetlistFavorable"
      /></div>
    </el-dialog>
    <!--    优惠券列表 - 邀请人获得 -->
    <el-dialog title="优惠券列表" :visible.sync="dialogTableVisible">
      <div style="display: flex;align-items: center; margin-bottom: 20px ">
        <el-input v-model="youhuiquan.name" placeholder="优惠券名称"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="getlistFavorable" >搜索</el-button>
      </div>
      <el-table
        :data="ylist"
        border
        style="width: 100%">
        <el-table-column
          prop="name"
          label="卡券名称"
          width="80">
        </el-table-column>
        <el-table-column
          prop="date"
          label="券类型"
          width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.type == 0" >油品券</span>
            <span v-if="scope.row.type == 1"  >商品券</span>
            <span v-if="scope.row.type == 2"  >通用券</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="date"
          label="券详情"
          width="100">
          <template slot-scope="scope">
            <span>满{{scope.row.satisfiedAmount}}减 {{scope.row.discountAmount}}元 </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="date"
          label="有效期（天）"
          width="180">
          <template slot-scope="scope">
            <span v-if="scope.row.timeType == 0" >{{scope.row.validityZero}}天 </span>
            <span v-if="scope.row.timeType == 1" >{{scope.row.validityOne}}天 </span>
            <span v-if="scope.row.timeType == 2" >{{scope.row.validityTwo}}天 </span>
          </template>
        </el-table-column>

        <el-table-column
          prop="address"
          label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="chosedata(scope.row)"
            >选择</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div><pagination
        v-show="ytotal>0"
        :total="ytotal"
        :page.sync="youhuiquan.pageNum"
        :limit.sync="youhuiquan.pageSize"
        @pagination="getlistFavorable"
      /></div>
    </el-dialog>
    <!--    兑换券列表-->
    <el-dialog title="兑换券列表" :visible.sync="dialogTableVisibledh">
      <div style="display: flex;align-items: center; margin-bottom: 20px ">
        <el-input v-model="duihuanquan.name" placeholder="兑换券名称"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="getlistExchange" >搜索</el-button>
      </div>
      <el-table
        :data="dlist"
        border
        style="width: 100%">
        <el-table-column
          prop="name"
          label="卡券名称"
          width="100">
        </el-table-column>
        <el-table-column
          prop="date"
          label="券类型"
          width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.type == 0" >油品券</span>
            <span v-if="scope.row.type == 1"  >商品券</span>
            <span v-if="scope.row.type == 2"  >通用券</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="date"
          label="使用说明"
          width="100">
          <template slot-scope="scope">
            <span>{{scope.row.useInstructions}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="date"
          label="有效期（天）"
          width="180">
          <template slot-scope="scope">
            <span  >{{scope.row.validity}}天 </span>
          </template>
        </el-table-column>

        <el-table-column
          prop="address"
          label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="Favorabledata(scope.row)"
            >选择</el-button>
          </template>
        </el-table-column>

      </el-table>
      <div><pagination
        v-show="dtotal>0"
        :total="dtotal"
        :page.sync="duihuanquan.pageNum"
        :limit.sync="duihuanquan.pageSize"
        @pagination="getlistExchange"
      /></div>

    </el-dialog>
    <!-- 添加或修改推荐有礼对话框 -->
  </div>
</template>

<script>
import { listActiveRecommend, getActiveRecommend, delActiveRecommend, addActiveRecommend, updateActiveRecommend,listFavorable,listExchange } from "@/api/EventMarketing/activeRecommend";
import  ImageUpload  from  '@/components/ImageUpload'
import {getToken} from "@/utils/auth";
import {
  delActiveNewlyweds,
  getActiveNewlyweds,
  listActiveNewlyweds,
  updateActiveNewlyweds
} from "@/api/EventMarketing/activeNewlyweds";
import {looklook, looklooklook} from "@/api/EventMarketing/activeConsumption";
export default {
  name: "ActiveRecommend",
  data() {
    return {
      opendetails:false,
      looklist:[],
      statisticsyou:{},
      xzshow:false,
      //请求优惠券 - 新人 列表时的参数
      xyouhuiquan:{
        name:'',
        pageNum: 1,
        pageSize: 10,
      },
      xytotal:0,
      //请求优惠券列表时的参数
      youhuiquan:{
        name:'',
        pageNum: 1,
        pageSize: 10,
      },
      ytotal:0,
      //请求兑换券列表时的参数
      duihuanquan:{
        name:'',
        pageNum: 1,
        pageSize: 10,
        total:0
      },
      zquerys: {
        pageNum: 1,
        pageSize: 10,
        total:0
      },
      dtotal:0,
      imagePath:process.env.VUE_APP_SERVER_URL,
      // 上传地址
      uploadAction: process.env.VUE_APP_SERVER_URL + 'backendApi/file/upload',
      // 上传文件列表
      uploadFiles: [],
      uploadHeader: { 'Access-Token' : getToken() },
      pddhidlist:[],//承载兑换券id的数组
      xpdidlist:[],//承载兑换券id的数组 邀请用户
      pdidlist:[],//承载优惠券id的数组
      xdialogTableVisible:false,
      dialogTableVisible:false,//优惠券
      dialogTableVisibledh:false,//兑换券
      huodonglist:[],
      huodongname:'',
      huodongquerys: {
        pageNum: 1,
        pageSize: 10,
      },
      huodongshow:false,
      ruleForm: {
        id:null,
        activePictureUrl: '',
        titleUrl:'',
        ylist:[],
        dlist:[],
        xylist:[],
        inviterGiftType:[],
        name: '',
        points:'',
        growthValue:'',
        region: '',
        activeConsumptionChildList:[],
        activeNewName:'',
        activeNewId:'',

      },
      xylist:[],
      Typelist:[
        {text:'优惠券',type:'0'},
        {text:'兑换券',type:'1'},
        {text:'成长值',type:'2'},
        {text:'积分',type:'3'},
      ],
      ylist:[],
      dlist:[],
      zList:[],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 推荐有礼表格数据
      activeRecommendList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        activeName:null,
        pageNum: 1,
        pageSize: 10,
        id:null,
        chainStoreId: null,
        storeId: null,
        activePictureUrl: null,
        inviterGiftType: null,
        points: null,
        growthValue: null,
        newuserGiftType: null,
        title: null,
        invitationCodeType: null,
        rewardDisplay: null,
        activeRule: null,
        status: null,
        isonline: null,
      },
      // 表单参数
      form: {
        activeName:'',
      },
      // 表单校验
      rules: {
        /*activePictureUrl: [
          { required: true, message: '必填项不能为空', trigger: 'blur' },
        ],*/
        activeName: [
          { required: true, message: '必填项不能为空', trigger: 'blur' },
        ],
        inviterGiftType: [
          { required: true, message: '必填项不能为空', trigger: 'blur' },
        ],
        points: [
          { required: true, message: '必填项不能为空', trigger: 'blur' },
        ],
        growthValue: [
          { required: true, message: '必填项不能为空', trigger: 'blur' },
        ],
        invitationCodeType:[
          { required: true, message: '必填项不能为空', trigger: 'blur' },
        ],
        rewardDisplay:[
          { required: true, message: '必填项不能为空', trigger: 'blur' },
        ],
        status:[
          { required: true, message: '必填项不能为空', trigger: 'blur' },
        ],
        activeStartTime: [
          { required: true, message: '必填项不能为空', trigger: 'change' },
        ],
        activeEndTime: [
          { required: true, message: '必填项不能为空', trigger: 'change' },
        ],
        activeRule:[
          { required: true, message: '必填项不能为空', trigger: 'blur' },
        ]
      }
    };
  },
  created() {
    this.getactivelist()
    // this.getList();
  },

  components:{
    ImageUpload
  },
  methods: {
    addActivef(){
      this.ruleForm ={
        id:null,
          activePictureUrl: '',
          titleUrl:'',
          ylist:[],
          dlist:[],
          xylist:[],
          inviterGiftType:[],
          name: '',
          points:'',
          growthValue:'',
          region: '',
          activeConsumptionChildList:[],
        activeNewName:'',
        activeNewId:'',

      },
      this.xzshow = true
    },
    // 图片上传成功
    handleUploadSuccess(file) {
      console.log('图片上传成功',file)
      this.ruleForm.activePictureUrl = file.data.fileName
    },
    // 图片上传成功
    handleUploadSuccesss(file) {
      console.log('图片上传成功',file)
      this.ruleForm.titleUrl = file.data.fileName
    },

    getactivelist(){
      this.loading = true;
      listActiveRecommend(this.queryParams).then(res=>{
        console.log(res,111)
        this.zList = res.data.records
        this.total = res.data.total
        this.loading = false;
      })
    },
    /** 查询推荐有礼列表 */
    getList() {
      // this.loading = true;
      getActiveRecommend(1).then(response => {
      this.ruleForm = response.data
        this.ruleForm.xylist = response.data.activeRecommendChildList.filter(item => item.giftUserType == '1')
        this.ruleForm.ylist = response.data.activeRecommendChildList.filter(item => { return  item.activeGift === '1' &&  item.giftUserType=== '0'; })
        this.ruleForm.dlist = response.data.activeRecommendChildList.filter(item => item.activeGift == '2')
        console.log( "1", this.ruleForm.xylist)//优惠券数组 新用户获得
        console.log( "2",this.ruleForm.ylist)// 优惠券数组
        console.log( "3",this.ruleForm.dlist)//兑换券数组

      });
    },

    // 获取优惠券 - 新人有礼
    xgetlistFavorable(){
      this.xylist = []
      listFavorable(this.xyouhuiquan).then(res=>{
        if(res.code == 200){
          this.xdialogTableVisible = true
          this.xylist  = res.data.records
          this.xytotal = res.data.total
        }
      })
    },
    // 新人活动列表
    gethuodonglist(){
      listActiveNewlyweds(this.zquerys).then(res=>{
        this.huodongshow = true
          this.huodonglist = res.data.records

          console.log(res)
      })
    },
    // 请求优惠券
    getlistFavorable(){
      this.ylist = []
      listFavorable(this.youhuiquan).then(res=>{
        if(res.code == 200){
          this.dialogTableVisible = true
          this.ylist  = res.data.records
          this.ytotal = res.data.total
        }

      })
    },
    // 请求兑换券
    getlistExchange(){
      this.dlist = []
      listExchange(this.duihuanquan).then(res=>{
        if(res.code==200){
          this.dialogTableVisibledh = true
          this.dlist  = res.data.records
          this.dtotal = res.data.total
        }
      })

    },

    // 兑换券券列表选择
    Favorabledata(row){
      this.dialogTableVisibledh = false
      if(this.pddhidlist.indexOf(row.id)>-1 ){
        this.$message.error("该兑换卡券已存在")
        return
      }
      this.pddhidlist.push(row.id)
      console.log(row)
      let data ={
        giftUserType:0,//邀请人获得
        activeGift: 2, //活动奖品 0：赠送积分1：赠送优惠券 2. 赠送兑换券 3：赠送成长值 4. 赠送实物
        goodsIds: "", //商品id
        goodsName:"" , //商品名称
        goodsTotal: "", //商品数量
        vouchersId:row.id, //券id
        giftCardName:row.name, //赠送卡券名称
        giftCardType: row.type, //券类型
        validityZero: null,
        validityOne: null,
        validityTwo:null,
        validity:row.validity,
        giftCardDetail: row.useInstructions , //券详情
        giftCardTime: row.validity, //券有效期
        giftCardTotal: 1 //券数量
      }

      this.ruleForm.dlist.push(data)
      this.$message.success("新增成功")
    },
    huodongxz(row){
      console.log(row)
      this.ruleForm.activeNewName = row.name
      this.ruleForm.activeNewId = row.id
      this.huodongshow = false
    },
    scxrhd(){
      this.ruleForm.activeNewName = null
      this.ruleForm.activeNewId = null
    },
    //优惠券 新用户
    chosedataxyh(row){
      this.xdialogTableVisible = false

      if(this.xpdidlist.indexOf(row.id)>-1 ){
        this.$message.error("该优惠卡券已存在")
        return
      }
      this.xpdidlist.push(row.id)

      let data ={
        giftUserType:1,//新用户获得
        activeGift: 1, //活动奖品 0：赠送积分1：赠送优惠券 2. 赠送兑换券 3：赠送成长值 4. 赠送实物
        goodsIds: "", //商品id
        goodsName:"" , //商品名称
        goodsTotal: "", //商品数量
        vouchersId:row.id, //券id
        giftCardName:row.name, //赠送卡券名称
        giftCardType: row.type, //券类型
        timeType: row.timeType,
        validityZero: row.validityZero,
        validityOne: row.validityOne,
        validityTwo:row.validityTwo,
        giftCardDetail: "满"+ row.satisfiedAmount+"减 "+row.discountAmount+"元" , //券详情
        giftCardTime: "", //券有效期
        giftCardTotal: 1//券数量
      }
      this.ruleForm.xylist.push(data)
      this.$message.success("新增成功")
    },
    // 优惠券
    chosedata(row){
      this.dialogTableVisible = false
      if(this.pdidlist.indexOf(row.id)>-1 ){
        this.$message.error("该优惠卡券已存在")
        return
      }

      this.pdidlist.push(row.id)
      let data ={
        giftUserType:0,//邀请人获得
        activeGift: 1, //活动奖品 0：赠送积分1：赠送优惠券 2. 赠送兑换券 3：赠送成长值 4. 赠送实物
        goodsIds: "", //商品id
        goodsName:"" , //商品名称
        goodsTotal: "", //商品数量
        vouchersId:row.id, //券id
        giftCardName:row.name, //赠送卡券名称
        giftCardType: row.type, //券类型
        timeType: row.timeType,
        validityZero: row.validityZero,
        validityOne: row.validityOne,
        validityTwo:row.validityTwo,
        giftCardDetail: "满"+ row.satisfiedAmount+"减 "+row.discountAmount+"元" , //券详情
        giftCardTime: "", //券有效期
        giftCardTotal: 1//券数量
      }
      console.log(data)
      this.ruleForm.ylist.push(data)
      console.log(this.ruleForm.ylist)
      this.$message.success("新增成功")
    },
    // 新优惠券删除
    xdeletedata(row){
      if(this.ruleForm.xylist&&this.ruleForm.xylist.length>0){
        let delIdx=-1;
        for ( let item of this.ruleForm.xylist) {
          delIdx++;
          if (item.id===row.id){
            break
          }
        }
        this.pdidlist.splice(delIdx,1);
        this.ruleForm.xylist.splice(delIdx,1);


      }
    },

    // 优惠券删除
    deletedata(row){
      if(this.ruleForm.ylist&&this.ruleForm.ylist.length>0){
        let delIdx=-1;
        for ( let item of this.ruleForm.ylist) {
          delIdx++;
          if (item.id===row.id){
            break
          }
        }
        this.pdidlist.splice(delIdx,1);
        this.ruleForm.ylist.splice(delIdx,1);


      }
    },
    // 兑换券删除
    deletedhdata(row){
      if(this.ruleForm.dlist&&this.ruleForm.dlist.length>0){
        let delIdx=-1;
        for ( let item of this.ruleForm.dlist) {
          delIdx++;
          if (item.id===row.id){
            break
          }
        }
        this.pddhidlist.splice(delIdx,1);
        this.ruleForm.dlist.splice(delIdx,1);


      }
    },
    lookDetail(row){
      this.opendetails = true
      let data = {
        id:row.id,
        exchangeFrom:"推荐有礼"
      }
      looklook(data).then(res=>{
        this.looklist = res.data

        console.log('详情',res)
      })
      looklooklook(row.id).then(resp=>{
        this.statisticsyou = resp.data
        console.log('优惠券详情统计',resp)
      })
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {

      this.ruleForm = {
        id: null,
        activeName:null,
        chainStoreId: null,
        storeId: null,
        activePictureUrl: null,
        inviterGiftType: null,
        points: null,
        growthValue: null,
        newuserGiftType: null,
        title: null,
        invitationCodeType: null,
        rewardDisplay: null,
        activeRule: null,
        status: null,
        isonline: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        activeRecommendChildList:[],
        updateTime: null
      };
      // this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getactivelist();
      // this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加推荐有礼";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.ruleForm ={
        id:null,
        activePictureUrl: '',
        titleUrl:'',
        ylist:[],
        dlist:[],
        xylist:[],
        inviterGiftType:[],
        name: '',
        points:'',
        growthValue:'',
        region: '',
        activeConsumptionChildList:[],

      }
      const id = row.id || this.ids
      // getActiveRecommend(id).then(response => {
      //   this.form = response.data;
      //   this.xzshow = true;
      //   this.title = "修改推荐有礼";
      // });
      getActiveRecommend(id).then(response => {
        this.ruleForm = response.data
        this.xzshow = true;
        if(response.data.activeRecommendChildList){
          this.ruleForm.xylist = response.data.activeRecommendChildList.filter(item => item.giftUserType == '1')
          this.ruleForm.ylist = response.data.activeRecommendChildList.filter(item => { return  item.activeGift === '1' &&  item.giftUserType=== '0'; })
          this.ruleForm.dlist = response.data.activeRecommendChildList.filter(item => item.activeGift == '2')
        }



      });
    },
    handleDeletexia(row){
      // getActiveRecommend(row.id).then(response => {
      //
      //   let data = response.data
      //   data.isonline = 1
      //   data.status = 2
      //   updateActiveRecommend(data).then(response => {
      //     this.$modal.msgSuccess("下线成功");
      //
      //     this.getactivelist()
      //   });
      //
      // });

      this.$modal.confirm('是否确认下线此条推荐有礼活动的信息？').then(function() {
        return updateActiveRecommend({id:row.id,isonline : 1,status : 2});
      }).then(() => {
        this.$modal.msgSuccess("下线成功");

        this.getactivelist()
      }).catch(() => {});
    },
    /** 提交按钮 */
    submitForm() {

      this.ruleForm.activeRecommendChildList = this.ruleForm.ylist.concat(this.ruleForm.dlist,this.ruleForm.xylist);

      // this.ruleForm.id = 1

      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
                if(this.ruleForm.id ){
                  console.log(this.ruleForm.id,'修改')
                  updateActiveRecommend(this.ruleForm).then(response => {
                    this.$modal.msgSuccess("修改成功");
                    this.xzshow = false;
                    this.getactivelist()
                  });
                }else {
                  console.log(this.ruleForm.id,'新增')
                  addActiveRecommend(this.ruleForm).then(response => {
                    this.$modal.msgSuccess("新增成功");
                    this.xzshow = false;
                    this.getactivelist()
                  });
                }
          // if (this.ruleForm.id != '') {
          //   console.log(this.ruleForm.id,'新增')

          //
          // } else {
          //   console.log(this.ruleForm.id,'修改')

          // }
        }
      });
    },
    /** 删除按钮操作 */
    Deleteshan(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除此项推荐有礼数据？').then(function() {
        return delActiveRecommend(ids);
      }).then(() => {
        this.getactivelist()
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('business/marketingActivity/activeRecommend/export', {
        ...this.queryParams
      }, `activeRecommend_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
<style scoped lang="scss">
.list-img{
  width: 100%;
  height: 100%;
}
.box-bt{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.appconter{
  box-sizing: border-box;
  padding: 15px;
}
.x-box{
  background: #f9f9f9;
  border-radius: 6px;
  box-sizing: border-box;
  padding: 15px;
  width: 45%;
}
</style>
