<template>
  <div>
    <div style="margin:2% 0;display: inline-block;">
      <el-input
        style="width: 180px;"
        @keydown.enter.native="select"
        clearable
        placeholder="请输入活动名称"
        v-model="integralName"
      ></el-input>
    </div>
    <div style="position: relative;display: inline-block;margin: 10px 0px;">
      <span>活动类型：</span>
      <el-select
        v-model="ifType"
        placeholder="请选择活动类型"
        style="width:150px;"
        @change="select()"
      >
        <el-option
          v-for="item in huoType"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option> </el-select
      >&nbsp;&nbsp;&nbsp;&nbsp;
    </div>
    <div style="display: inline-block;">
      <el-button
        style="margin-left:15px;"
        size="mini"
        type="primary"
        icon="document"
        @click="select"
        >查询
      </el-button>
      <el-button
        style="margin-left:15px;"
        size="mini"
        type="primary"
        icon="document"
        @click="cleans"
        >重置
      </el-button>
    </div>
    <div style="float: right;margin-right:2%;">
      <el-button
        style="margin: 10px 0;"
        :disabled="!isAuth('integral:add')"
        size="mini"
        type="primary"
        icon="document"
        @click="addNotice"
        >添加活动</el-button
      >
      <!-- <el-button style='margin: 10px 0;' :disabled="!isAuth('integral:delete') || checkBoxData.length <= 0"
				size="mini" type="danger" icon="document" @click="choideletes()">批量删除</el-button> -->
    </div>
    <el-table v-loading="tableDataLoading" :data="tableData.list">
      <!-- <el-table-column type="selection">  @selection-change="changeFun"
			</el-table-column> -->
      <el-table-column prop="id" label="编号" width="80"> </el-table-column>
      <el-table-column prop="title" label="活动名称" width="150">
      </el-table-column>
      <el-table-column prop="image" label="活动图片" width="200">
        <template slot-scope="scope">
          <div v-if="scope.row.image">
            <div
              v-for="(item, index) in scope.row.image.split(',')"
              :key="index"
              style="display: inline-block; margin: 3px;"
            >
              <el-popover placement="top-start" title="" trigger="hover">
                <img
                  style="width: 50px; height: 50px"
                  :src="item"
                  alt=""
                  slot="reference"
                />
                <img style="width: 300px; height: auto" :src="item" alt="" />
              </el-popover>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="活动类型">
        <template slot-scope="scope">
          <span v-if="scope.row.type == 1">普通活动</span>
          <span v-else-if="scope.row.type == 2">时段优惠</span>
          <span v-else-if="scope.row.type == 3">满额优惠</span>
          <span v-else-if="scope.row.type == 4">全场优惠</span>
        </template>
      </el-table-column>
      <el-table-column prop="content" label="活动内容">
        <template slot-scope="scope">
          <div
            style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;max-height:80px;"
          >
            {{ scope.row.content }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="updateTime" label="创建时间" width="160">
      </el-table-column>
      <el-table-column prop="enableFlag" label="状态" width="80">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.enableFlag"
            @change="changeType(scope.row.enableFlag, scope.row)"
            :disabled="!isAuth('integral:update')"
            :active-value="openValue"
            :inactive-value="closeValue"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="allowShop" label="是否允许商户主动加入" width="80">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.allowShop"
            @change="changeS(scope.row.allowShop, scope.row)"
            :disabled="!isAuth('integral:update')"
            :active-value="openValue"
            :inactive-value="closeValue"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="180">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            :disabled="!isAuth('integral:update')"
            @click="updates(scope.row)"
            style="margin: 3px;"
            >修改
          </el-button>
          <el-button
            size="mini"
            type="danger"
            :disabled="!isAuth('integral:delete')"
            @click="deleteuser(scope.row)"
            style="margin: 3px;"
            v-if="scope.row.id != 14"
            >删除
          </el-button>
          <el-button
            size="mini"
            type="warning"
            :disabled="!isAuth('integral:update')"
            @click="shopListBtn(scope.row)"
            style="margin: 3px;"
            >活动商家
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: center;margin-top: 10px;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 15, 20, 25]"
        :page-size="limit"
        :current-page="page"
        layout="total,sizes, prev, pager, next"
        :total="tableData.totalCount"
      >
      </el-pagination>
    </div>
    <!-- 添加弹框 -->
    <el-dialog
      title="添加活动"
      :visible.sync="dialogFormVisible"
      center
      width="70%"
    >
      <div style="margin-bottom: 10px;">
        <span style="width: 200px;display: inline-block;text-align: right;"
          >活动名称：</span
        >
        <el-select
          v-model="activityTitle"
          style="width:50%;"
          placeholder="请选择"
        >
          <el-option
            v-for="item in huodongList"
            :key="item.name"
            :label="item.name"
            :value="item.name"
          >
          </el-option>
        </el-select>
      </div>
      <div style="margin-bottom: 10px;">
        <div style="width: 200px;display: inline-block;text-align: right;">
          活动图片：
        </div>
        <div class="imgs" v-for="(item, index) in img" :key="index">
          <img width="100%" class="images" height="100%" :src="item" alt="" />
          <span class="dels">
            <i class="el-icon-delete" @click="dels(index)"></i>
          </span>
        </div>
        <div class="imgs" style="width: 50%;">
          <el-upload
            :action="Tupiantou"
            list-type="picture-card"
            :show-file-list="false"
            :on-success="handleRemove"
            :on-progress="onprogress1"
            :before-upload="beforeAvatarUpload"
          >
            <el-progress
              v-if="percentage1 > 0 && percentage1 < 100"
              type="circle"
              :percentage="percentage1"
            >
            </el-progress>
            <i v-else class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </div>
      </div>
      <div style="margin-bottom: 10px;">
        <span style="width: 200px;display: inline-block;text-align: right;"
          >状态：</span
        >
        <el-radio-group v-model="isEnable">
          <el-radio :label="'1'">开启</el-radio>
          <el-radio :label="'0'">关闭</el-radio>
        </el-radio-group>
      </div>
      <div style="margin-bottom: 10px;">
        <span style="width: 200px;display: inline-block;text-align: right;"
          >活动类型：</span
        >
        <el-select
          v-model="activityType"
          style="width:50%;"
          placeholder="请选择"
        >
          <el-option
            v-for="item in huodongType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <!-- 时段优惠 -->
      <div style="margin-bottom: 10px;" v-if="activityType == 2">
        <span style="width: 200px;display: inline-block;text-align: right;"
          >活动时间：</span
        >
        <div class="times" @click="addShiduan" v-if="shiyouhui.length == 0">
          <i class="el-icon-plus" style="margin-left: 5px;"></i>
        </div>
        <div
          style="margin-bottom: 10px;margin-left: 200px;margin-top: 10px;"
          v-for="(item, index) in shiyouhui"
          :key="index"
        >
          <el-time-picker
            v-model="item.startTime"
            :picker-options="{
              start: '00:00:00',
              step: '01:00:00',
              end: '24:00:00'
            }"
            placeholder="开始时间"
            style="width:20%;"
            format="HH:mm:ss"
            value-format="HH:mm:ss"
          >
          </el-time-picker
          >——
          <el-time-picker
            v-model="item.endTime"
            :picker-options="{
              start: '00:00:00',
              step: '01:00:00',
              end: '24:00:00'
            }"
            placeholder="结束时间"
            style="width:20%;"
            format="HH:mm:ss"
            value-format="HH:mm:ss"
          >
          </el-time-picker>
          <span>打</span>
          <el-input
            v-model="item.discountContent"
            type="number"
            style="width:13%;display: inline-table;"
          ></el-input>
          <span>折</span>
          <div class="times" @click="jianShiduan(item, index)">
            <i class="el-icon-minus" style="margin-left: 5px;"></i>
          </div>
        </div>
      </div>
      <!-- 满额优惠 -->
      <div
        style="margin-bottom: 10px;margin-left: 200px;"
        v-if="activityType == 3"
      >
        <el-radio v-model="maneyou.type" :label="'2'">订单满</el-radio>
        <el-input
          v-model="maneyou.minAmount"
          type="number"
          style="width:13%;display: inline-table;"
        ></el-input>
        <span>打</span>
        <el-input
          v-model="maneyou.discountContent"
          type="number"
          style="width:13%;display: inline-table;margin-bottom: 10px;"
        ></el-input>
        <span>折</span><br />
        <el-radio v-model="maneyou.type" :label="'1'">订单满</el-radio>
        <el-input
          v-model="maneyou.minAmount"
          type="number"
          style="width:13%;display: inline-table;"
        ></el-input>
        <span>减</span>
        <el-input
          v-model="maneyou.discountContent"
          type="number"
          style="width:13%;display: inline-table;"
        ></el-input>
        <span>元</span>
      </div>
      <!-- 全场优惠 -->
      <div
        style="margin-bottom: 10px;margin-left: 200px;"
        v-if="activityType == 4"
      >
        <span>全场打</span>
        <el-input
          v-model="quanchangyou.discountRate"
          type="number"
          style="width:13%;display: inline-table;margin-bottom: 10px;"
        ></el-input>
        <span>折</span>
      </div>
      <div style="margin-bottom: 10px;">
        <span style="width: 200px;display: inline-block;text-align: right;"
          >是否允许商户主动加入：</span
        >
        <el-radio-group v-model="isAllowShop">
          <el-radio :label="'1'">是</el-radio>
          <el-radio :label="'0'">否</el-radio>
        </el-radio-group>
      </div>
      <div style="margin-bottom: 10px;">
        <span style="width: 200px;display: inline-block;text-align: right;"
          >活动日期：</span
        >
        <!-- <el-date-picker
				v-model="valuestart"
				type="date"
				placeholder="选择日期" style="width:20%;">
				</el-date-picker>——
				<el-date-picker
				v-model="valueend"
				type="date"
				placeholder="选择日期" style="width:20%;">
				</el-date-picker> -->
        <el-date-picker
          v-model="valuestart"
          type="datetimerange"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="至"
          :picker-options="pickerBeginOption"
          start-placeholder="开始日期"
          style="width:40%;"
          :default-time="['00:00:00', '23:59:59']"
          end-placeholder="结束日期"
          @change="handleChange"
        >
        </el-date-picker>
      </div>
      <div style="margin-bottom: 10px;">
        <span style="width: 200px;display: inline-block;text-align: right;"
          >活动描述：</span
        >
        <!-- display: inline-table; -->
        <quill-editor
          ref="myTextEditor"
          v-model="activityContent"
          :options="quillOption"
          style="padding-bottom: 50px;height: 300px;width: 72%;margin-bottom: 60px;margin-left: 200px;"
        >
        </quill-editor>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addNoticeTo()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改弹框 -->
    <el-dialog
      title="修改活动"
      :visible.sync="dialogFormVisible1"
      center
      width="70%"
    >
      <el-form :model="form">
        <el-form-item label="活动名称：" :label-width="formLabelWidth">
          <!--					<el-input v-model="form.activityTitle" style="width:65%;"></el-input>-->
          <el-select
            v-model="form.activityTitle"
            style="width:50%;"
            placeholder="请选择"
          >
            <el-option
              v-for="item in huodongList"
              :key="item.name"
              :label="item.name"
              :value="item.name"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动图片：" :label-width="formLabelWidth">
          <div class="imgs" v-for="(item, index) in form.img" :key="index">
            <img width="100%" class="images" height="100%" :src="item" alt="" />
            <span class="dels">
              <i class="el-icon-delete" @click="dels2(index)"></i>
            </span>
          </div>
          <div class="imgs" style="width: 50%;">
            <el-upload
              :action="Tupiantou"
              list-type="picture-card"
              :show-file-list="false"
              :on-success="handleRemove2"
              :on-progress="onprogress1"
              :before-upload="beforeAvatarUpload"
            >
              <el-progress
                v-if="percentage1 > 0 && percentage1 < 100"
                type="circle"
                :percentage="percentage1"
              >
              </el-progress>
              <i v-else class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </div>
        </el-form-item>
        <el-form-item label="活动状态：" :label-width="formLabelWidth">
          <el-radio-group v-model="form.isEnable">
            <el-radio :label="'1'">开启</el-radio>
            <el-radio :label="'0'">关闭</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="活动类型：" :label-width="formLabelWidth">
          <el-select
            v-model="form.activityType"
            style="width:50%;"
            placeholder="请选择"
            @change="shopTypeSelect()"
          >
            <el-option
              v-for="item in huodongType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 时段优惠 -->
        <el-form-item
          label="活动时间："
          :label-width="formLabelWidth"
          v-if="form.activityType == 2"
        >
        <div class="times" @click="addShiduanXiu" v-if="form.shiyouhui.length == 0">
          <i class="el-icon-plus" style="margin-left: 5px;"></i>
        </div>
          <div
            style="margin-bottom: 10px;margin-top: 10px;"
            v-for="(item, index) in form.shiyouhui"
            :key="index"
          >
            <el-time-picker
              v-model="item.startTime"
              :picker-options="{
                start: '00:00:00',
                step: '00:15:00',
                end: '24:00:00'
              }"
              placeholder="开始时间"
              style="width:20%;"
              value-format="HH:mm:ss"
            >
            </el-time-picker
            >——
            <el-time-picker
              v-model="item.endTime"
              :picker-options="{
                start: '00:00:00',
                step: '00:15:00',
                end: '24:00:00'
              }"
              placeholder="结束时间"
              style="width:20%;"
              value-format="HH:mm:ss"
            >
            </el-time-picker>
            <span>打</span>
            <el-input
              v-model="item.discountContent"
              type="number"
              style="width:13%;display: inline-table;"
            ></el-input>
            <span>折</span>
            <div class="times" @click="jianShiduanXiu(item, index)">
              <i class="el-icon-minus" style="margin-left: 5px;"></i>
            </div>
          </div>
        </el-form-item>

        <!-- 满额优惠 -->
        <div
          style="margin-bottom: 10px;margin-left: 200px;"
          v-if="form.activityType == 3"
        >
          <el-radio v-model="form.maneyou.type" :label="'2'">订单满</el-radio>
          <el-input
            v-model="form.maneyou.minAmount"
            type="number"
            style="width:13%;display: inline-table;"
          ></el-input>
          <span>打</span>
          <el-input
            v-model="form.maneyou.discountContent"
            type="number"
            style="width:13%;display: inline-table;margin-bottom: 10px;"
          ></el-input>
          <span>折</span><br />
          <el-radio v-model="form.maneyou.type" :label="'1'">订单满</el-radio>
          <el-input
            v-model="form.maneyou.minAmount"
            type="number"
            style="width:13%;display: inline-table;"
          ></el-input>
          <span>减</span>
          <el-input
            v-model="form.maneyou.discountContent"
            type="number"
            style="width:13%;display: inline-table;"
          ></el-input>
          <span>元</span>
        </div>
        <!-- 全场优惠 -->
        <div
          style="margin-bottom: 10px;margin-left: 200px;"
          v-if="form.activityType == 4"
        >
          <span>全场打</span>
          <el-input
            v-model="form.quanchangyou.discountRate"
            type="number"
            style="width:13%;display: inline-table;margin-bottom: 10px;"
          ></el-input>
          <span>折</span>
        </div>

        <el-form-item
          label="是否允许商户主动加入："
          :label-width="formLabelWidth"
        >
          <el-radio-group v-model="form.isAllowShop">
            <el-radio :label="'1'">是</el-radio>
            <el-radio :label="'0'">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <div style="margin-bottom: 10px;">
          <span style="width: 200px;display: inline-block;text-align: right;"
            >活动日期：</span
          >
          <el-date-picker
            v-model="form.valuestart"
            type="datetimerange"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            :picker-options="pickerBeginOption"
            start-placeholder="开始日期"
            style="width:40%;"
            :default-time="['00:00:00', '23:59:59']"
            end-placeholder="结束日期"
            @change="handleChange"
          >
          </el-date-picker>
        </div>

        <el-form-item label="活动描述：" :label-width="formLabelWidth">
          <quill-editor
            ref="myTextEditor"
            v-model="form.activityContent"
            :options="quillOption"
            style="padding-bottom: 50px;height: 300px;width: 72%;display: inline-table;margin-bottom: 60px;"
          >
          </quill-editor>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="amendNoticeTo()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 活动商家 -->
    <el-dialog
      title="活动商家"
      :visible.sync="dialogFormVisibleShop"
      center
      width="70%"
    >
      <div class="tianshang" @click="addShop">添加商家</div>
      <el-table v-loading="tableDataLoadingShop" :data="shopData.list">
        <el-table-column label="编号" prop="shopId" width="80" fixed="left">
        </el-table-column>
        <el-table-column label="名称" prop="shopName" fixed="left">
        </el-table-column>
        <el-table-column label="店铺手机号" prop="shopPhone" width="120">
        </el-table-column>
        <el-table-column label="商铺类型" prop="shopTypeName">
        </el-table-column>
        <el-table-column prop="shopImg" label="封面图" width="150">
          <template slot-scope="scope">
            <div style="display: inline-block; margin: 3px;">
              <el-popover placement="top-start" title="" trigger="hover">
                <img
                  style="width: 50px; height: 50px"
                  :src="scope.row.shopImg"
                  alt=""
                  slot="reference"
                />
                <img
                  style="width: 300px; height: auto"
                  :src="scope.row.shopImg"
                  alt=""
                />
              </el-popover>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="shopSwiperImg" label="轮播图" width="150">
          <template slot-scope="scope">
            <div v-if="scope.row.shopSwiperImg">
              <div
                v-for="(item, index) in scope.row.shopSwiperImg.split(',')"
                :key="index"
                style="display: inline-block; margin: 3px;"
              >
                <el-popover placement="top-start" title="" trigger="hover">
                  <img
                    style="width: 50px; height: 50px"
                    :src="item"
                    alt=""
                    slot="reference"
                  />
                  <img style="width: 300px; height: auto" :src="item" alt="" />
                </el-popover>
              </div>
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column label="营业状态" prop="putawayFlag">
				  <template slot-scope="scope">
				    <span>{{scope.row.putawayFlag==0?'上班啦':'打烊啦'}}</span>
				  </template>
				</el-table-column> -->

        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              :disabled="!isAuth('integral:update')"
              @click="deleteuserShop(scope.row)"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: center;margin-top: 10px;">
        <el-pagination
          @size-change="handleSizeChangeShop"
          @current-change="handleCurrentChangeShop"
          :page-sizes="[10, 15, 20, 25]"
          :page-size="limit1"
          :current-page="page1"
          layout="total,sizes, prev, pager, next"
          :total="shopData.totalCount"
        >
        </el-pagination>
      </div>
    </el-dialog>
    <!-- 添加商家弹框 -->
    <el-dialog
      title="添加商家"
      :visible.sync="dialogFormVisibleaddshop"
      center
      width="70%"
    >
      <div style="margin:2% 0;display: inline-block;">
        <span>店铺名称：</span>
        <el-input
          style="width: 180px;"
          @keydown.enter.native="selectAdd"
          clearable
          placeholder="请输入店铺名称"
          v-model="shopName"
        ></el-input>
      </div>
      <div style="display: inline-block;">
        <el-button
          style="margin-left:15px;"
          size="mini"
          type="primary"
          icon="document"
          @click="selectAdd"
          >查询
        </el-button>
      </div>
      <!--:row-key="getRowKeys"
        	@selection-change="selectionChange"
		 :reserve-selection="true"  -->
      <el-table
        v-loading="tableDataLoadingaddShop"
        :data="typeDatas.list"
        ref="dataTable"
        :key="randomKey"
        @select="selectdan"
        @select-all="selectAll"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="编号" prop="shopId" width="80" fixed="left">
        </el-table-column>
        <el-table-column label="名称" prop="shopName" fixed="left">
        </el-table-column>
        <el-table-column label="店铺手机号" prop="phone" width="120">
        </el-table-column>
        <el-table-column label="类型" prop="shopTypeName"> </el-table-column>
        <el-table-column prop="shopCover" label="封面图" width="150">
          <template slot-scope="scope">
            <div style="display: inline-block; margin: 3px;">
              <el-popover placement="top-start" title="" trigger="hover">
                <img
                  style="width: 50px; height: 50px"
                  :src="scope.row.shopCover"
                  alt=""
                  slot="reference"
                />
                <img
                  style="width: 300px; height: auto"
                  :src="scope.row.shopCover"
                  alt=""
                />
              </el-popover>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="营业状态" prop="putawayFlag">
          <template slot-scope="scope">
            <span>{{ scope.row.putawayFlag == 0 ? "上班啦" : "打烊啦" }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div
        class="tianshang"
        style="margin-top: 10px;margin-left: 30px;"
        @click="addShoplist()"
      >
        确定
      </div>
      <div style="text-align: center;margin-top: 10px;">
        <el-pagination
          @size-change="handleSizeChangeShop2"
          @current-change="handleCurrentChangeShop2"
          :page-sizes="[10, 15, 20, 25]"
          :page-size="limit2"
          :current-page="page2"
          layout="total,sizes, prev, pager, next"
          :total="typeDatas.totalCount"
        >
        </el-pagination>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import quillConfig from "../allocation/quill-config.js";
export default {
  name: "news",
  components: {
    quillEditor
  },
  data() {
    return {
      limit: 10,
      page: 1,
      limit1: 10,
      page1: 1,
      limit2: 10,
      page2: 1,
      integralName: "",
      activityTitle: "",
      activityType: "1", //活动类型
      activityContent: "",
      activityImage: "",
      money: "",
      activityId: "",
      isAllowShop: "1",
      checkBoxData: [], //多选框选择的值
      zhekou: 0,
      ifType: "",
      form: {
        img: [], //任务轮播图
        activityId: "",
        activityTitle: "",
        activityType: 1, //活动类型
        activityContent: "",
        activityImage: "",
        money: "",
        isEnable: "0",
        createTime: "",
        isAllowShop: "1",
        shiyouhui: [], // 时段优惠数组
        maneyou: {
          discountContent: 1,
          minAmount: 10,
          type: "1"
        }, //满额优惠
        quanchangyou: {
          discountRate: 1
        }, //全场优惠
        valuestart: [] //活动开始日期
      },
      formLabelWidth: "200px",
      dialogFormVisible: false,
      dialogFormVisible1: false,
      tableDataLoading: true,
      tableData: [],
      quillOption: quillConfig,
      percentage1: 0, //进度条
      img: [], //任务轮播图
      dialogVisible: false,
      dialogImageUrl: [],
      isEnable: "0",
      openValue: "1",
      closeValue: "0",
      dialogFormVisibleShop: false,
      tableDataLoadingShop: false,
      dialogFormVisibleaddshop: false, //添加商家弹框
      tableDataLoadingaddShop: false,
      shopData: {},
      typeDatas: {}, //所有店铺
      selectedItems: [], //存储选中的数组
      randomKey: Math.random(),
      shopName: "",
      huodongList: [],
      huoType: [
        {
          value: "",
          label: "全部活动"
        },
        {
          value: 1,
          label: "普通活动"
        },
        {
          value: 2,
          label: "时段优惠"
        },
        {
          value: 3,
          label: "满额优惠"
        },
        {
          value: 4,
          label: "全场优惠"
        }
      ],
      huodongType: [
        {
          value: "1",
          label: "普通活动"
        },
        {
          value: "2",
          label: "时段优惠"
        },
        {
          value: "3",
          label: "满额优惠"
        },
        {
          value: "4",
          label: "全场优惠"
        }
      ],
      shiyouhui: [], // 时段优惠数组
      maneyou: {
        discountContent: 1,
        minAmount: 10,
        type: "1"
      }, //满额优惠
      quanchangyou: {
        discountRate: 1
      }, //全场优惠
      valuestart: [], //活动开始日期
      pickerBeginOption: {
        disabledDate: time => {
          return time.getTime() < Date.now() - 1 * 24 * 60 * 60 * 1000;
        }
      }
    };
  },
  methods: {
    // 多选
    changeFun(val) {
      this.checkBoxData = val;
    },
    // 详情跳转
    look(row) {
      this.$router.push({
        path: "/integralDetail",
        query: {
          id: row.id
        }
      });
    },
    handleSizeChange(val) {
      this.limit = val;
      this.dataSelect();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.dataSelect();
    },
    handleSizeChangeShop(val) {
      this.limit1 = val;
      this.shopList(this.activityId);
    },
    handleCurrentChangeShop(val) {
      this.page1 = val;
      this.shopList(this.activityId);
    },
    //添加店铺时弹框
    handleSizeChangeShop2(val) {
      this.limit2 = val;
      this.shopAlllist(this.activityId);
    },
    handleCurrentChangeShop2(val) {
      this.page2 = val;
      this.shopAlllist(this.activityId);
    },
    // 查询
    select() {
      this.page = 1;
      this.dataSelect();
    },
    // 重置
    cleans() {
      this.integralName = "";
      this.ifType = "";
      this.dataSelect();
    },
    gethuodongList() {
      this.$http({
        url: this.$http.adornUrl("banner/selectBannerList"),
        method: "get",
        params: this.$http.adornParams({
          state: -1,
          classify: 12
        })
      }).then(({ data }) => {
        if (data.code == 0) {
          this.huodongList = data.data;
        }
      });
    },
    //添加活动弹框
    addNotice() {
      this.dialogImageUrl = [];
      this.img = [];
      this.activityTitle = "";
      this.activityType = "1";
      this.activityContent = "";
      this.activityImage = "";
      this.isEnable = "0";
      this.isAllowShop = "1";
      this.valuestart = [];
      this.dialogFormVisible = true;
    },
    //时段优惠添加时间段
    addShiduan() {
      this.shiyouhui.push({
        startTime: "00:00",
        endTime: "24:00",
        discountContent: 1
      });
    },
    //减少
    jianShiduan(item, index) {
      this.shiyouhui.splice(index, 1);
    },
    //修改活动时切换类型
    shopTypeSelect() {
      if (this.form.activityType == 1) {
        this.form.shiyouhui = null;
        this.form.maneyou = null;
        this.form.quanchangyou = null;
      } else if (this.form.activityType == 2) {
        this.form.shiyouhui = [];
        this.form.maneyou = null;
        this.form.quanchangyou = null;
      } else if (this.form.activityType == 3) {
        this.form.shiyouhui = null;
        this.form.maneyou = [];
        this.form.quanchangyou = null;
      } else if (this.form.activityType == 4) {
        this.form.shiyouhui = null;
        this.form.maneyou = null;
        this.form.quanchangyou = [];
      }
    },
    //修改活动时添加时段优惠
    addShiduanXiu() {
      this.form.shiyouhui.push({
        startTime: "00:00",
        endTime: "24:00",
        discountContent: 1
      });
    },
    //减少
    jianShiduanXiu(item, index) {
      this.form.shiyouhui.splice(index, 1);
    },
    //选择活动开始结束时间
    handleChange(value) {
      console.log(value,this.form.valuestart, "ppp");
    },
    // 添加活动
    addNoticeTo() {
      if (this.activityTitle == "") {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "请输入活动名称",
          type: "warning"
        });
        return;
      }
      if (this.img.length == 0) {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "请输入上传图片",
          type: "warning"
        });
        return;
      }
      if (this.activityContent == "") {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "请输入活动内容",
          type: "warning"
        });
        return;
      }
      // 		if (this.activityType == 0) {
      // 	this.$notify({
      // 		title: '提示',
      // 		duration: 1800,
      // 		message: '请选择活动类型',
      // 		type: 'warning'
      // 	});
      // 	return
      // }
      if (this.valuestart.length == 0) {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "请选择活动日期",
          type: "warning"
        });
        return;
      }
      // if (this.shiyouhui[0].startTime>=this.shiyouhui[0].endTime) {
      // 	this.$message({
      // 		message: '时段活动开始时间不能大于结束时间',
      // 		type: 'error',
      // 		duration: 1500,
      // 		onClose: () => {
      // 		}
      // 	})
      // 	return
      // }
      if (this.activityType == 1) {
        var shiduan = null;
        var mane = null;
        var quanchang = null;
      } else if (this.activityType == 2) {
        var shiduan = this.shiyouhui;
        var mane = null;
        var quanchang = null;
      } else if (this.activityType == 3) {
        var shiduan = null;
        var mane = this.maneyou;
        var quanchang = null;
      } else if (this.activityType == 4) {
        var shiduan = null;
        var mane = null;
        var quanchang = this.quanchangyou;
      }

      this.$http({
        url: this.$http.adornUrl("admin/activity"),
        method: "post",
        data: this.$http.adornData({
          title: this.activityTitle,
          content: this.activityContent,
          image: this.img.toString(),
          enableFlag: this.isEnable,
          allowShop: this.isAllowShop,
          startTime: this.valuestart[0],
          endTime: this.valuestart[1],
          type: this.activityType, //活动类型
          fullReductionInfo: mane,
          globalDiscountsInfo: quanchang,
          timeIntervalInfos: shiduan
        })
      }).then(({ data }) => {
        if (data.msg == "success") {
          this.dialogFormVisible = false;
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              this.dataSelect();
            }
          });
        } else {
          this.$message({
            message: data.msg,
            type: "error",
            duration: 1500,
            onClose: () => {}
          });
        }
      });
    },
    // 修改推送活动
    updates(rows) {
      console.log(rows, "llk",rows.globalDiscountsInfo, rows.type == 2, rows.type);
      this.dialogFormVisible1 = true;
      this.form.activityId = rows.id;
      this.form.activityTitle = rows.title;
      this.form.activityContent = rows.content;
      this.form.isEnable = rows.enableFlag;
      this.form.isAllowShop = rows.allowShop;
      this.form.valuestart = [rows.startTime, rows.endTime];
      this.form.activityType = rows.type;
      this.form.shiyouhui = rows.timeIntervalInfos;
      this.form.maneyou = rows.fullReductionInfo;
      this.form.quanchangyou = rows.globalDiscountsInfo;
      if (rows.image) {
        this.form.img = rows.image.split(",");
      } else {
        this.form.img = [];
      }
    },
    // 修改
    amendNoticeTo() {
      // if (this.form.shiyouhui[0].startTime>=this.form.shiyouhui[0].endTime) {
      // 	this.$message({
      // 		message: '时段活动开始时间不能大于结束时间',
      // 		type: 'error',
      // 		duration: 1500,
      // 		onClose: () => {
      // 		}
      // 	})
      // 	return
      // }
      this.$http({
        url: this.$http.adornUrl("admin/activity"),
        method: "put",
        data: this.$http.adornData({
          id: this.form.activityId,
          title: this.form.activityTitle,
          content: this.form.activityContent,
          image: this.form.img.toString(),
          enableFlag: this.form.isEnable,
          allowShop: this.form.isAllowShop,
          startTime: this.form.valuestart[0],
          endTime: this.form.valuestart[1],
          type: this.form.activityType, //活动类型
          fullReductionInfo: this.form.maneyou,
          globalDiscountsInfo: this.form.quanchangyou,
          timeIntervalInfos: this.form.shiyouhui
        })
      }).then(({ data }) => {
        if (data.msg == "success") {
          this.dialogFormVisible1 = false;
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              this.dataSelect();
            }
          });
        } else {
          this.$message({
            message: data.msg,
            type: "error",
            duration: 1500,
            onClose: () => {}
          });
        }
      });
    },
    // 批量删除任务
    choideletes(sendMoneyId) {
      var ids = sendMoneyId
        ? [sendMoneyId]
        : this.checkBoxData.map(item => {
            return item.sendMoneyId;
          });
      this.$http({
        url: this.$http.adornUrl(
          `integral/deleteSendMoney`//?sendMoneyIds=${ids}
        ),
        method: "post",
        data: this.$http.adornData({
          'sendMoneyIds':ids
        })
      }).then(({ data }) => {
        this.$message({
          message: "批量删除成功",
          type: "success",
          duration: 1500,
          onClose: () => {
            this.dataSelect();
          }
        });
      });
    },
    // 删除
    deleteuser(row) {
      let delid = [row.id];
      this.$confirm(`确定删除此条信息?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("admin/activity"),
            method: "delete",
            // data: delid
            data: this.$http.adornData(delid)
          }).then(({ data }) => {
            if (data.msg == "success") {
              this.$message({
                message: "删除成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.dataSelect();
                }
              });
            } else {
              this.$message({
                message: data.msg,
                type: "error",
                duration: 1500,
                onClose: () => {}
              });
            }
          });
        })
        .catch(() => {});
    },
    // 获取数据列表
    dataSelect() {
      this.tableDataLoading = true;
      if (this.ifType == "") {
        var data = {
          page: this.page,
          limit: this.limit,
          title: this.integralName,
          isEnable: ""
        };
      } else {
        var data = {
          page: this.page,
          limit: this.limit,
          title: this.integralName,
          isEnable: "",
          type: this.ifType
        };
      }
      this.$http({
        url: this.$http.adornUrl("admin/activity/page"),
        method: "get",
        params: this.$http.adornParams(data)
      }).then(({ data }) => {
        console.log(data,'活动')
        if (data.msg == "success") {
          this.tableDataLoading = false;
          let returnData = data.data;
          this.tableData = returnData;
        } else {
          this.$message({
            message: data.msg,
            type: "warning",
            duration: 1500,
            onClose: () => {}
          });
        }
      });
    },
    onprogress1(event, file, fileList) {
      console.log("详情图上传进度", parseInt(event.percent));
      this.percentage1 = parseInt(event.percent);
    },
    beforeAvatarUpload(file) {
      return this.$processImage(this, file, false);
    },
    // 轮播图片上传
    handleRemove(file) {
      console.log(file, this.img);
      this.img.push(file.data);
      this.form.img.push(file.data);
    },
    handleDownload(file) {
      console.log(file, this.img);
    },
    // 删除轮播图
    dels(index) {
      this.img.splice(index, 1);
      this.form.img.splice(index, 1);
      console.log(this.img);
    },
    //修改时
    // 轮播图片上传
    handleRemove2(file) {
      this.form.img.push(file.data);
    },
    // 删除轮播图
    dels2(index) {
      this.form.img.splice(index, 1);
    },
    // 修改活动状态
    changeType(enableFlag, row) {
      console.log("row.enableFlag", row);
      this.$http({
        url: this.$http.adornUrl(
          `admin/activity/status/${row.id}/${row.enableFlag}`
        ),
        method: "put"
      }).then(({ data }) => {
        this.dialogFormVisible1 = false;
        this.$message({
          message: "操作成功",
          type: "success",
          duration: 1500,
          onClose: () => {
            this.dataSelect();
          }
        });
      });
    },
    // 修改商户是否可主动加入
    changeS(allowShop, row) {
      console.log("row.enableFlag", row);
      this.$http({
        url: this.$http.adornUrl(
          `admin/activity/join/${row.id}/${row.allowShop}`
        ),
        method: "put"
      }).then(({ data }) => {
        this.dialogFormVisible1 = false;
        this.$message({
          message: "操作成功",
          type: "success",
          duration: 1500,
          onClose: () => {
            this.dataSelect();
          }
        });
      });
    },
    // 活动商家
    shopListBtn(row) {
      this.activityId = row.id;
      this.shopList(row.id);
      this.dialogFormVisibleShop = true;
    },
    //添加商家弹框
    addShop(row) {
      this.shopAlllist(row.id);
      this.dialogFormVisibleaddshop = true;
    },
    // 获取商家列表
    shopList(id) {
      this.tableDataLoadingShop = true;
      this.$http({
        url: this.$http.adornUrl(
          `admin/activity-shop/activity-shop-page/${id}`
        ),
        method: "get",
        params: this.$http.adornParams({
          page: this.page1,
          limit: this.limit1
        })
      }).then(({ data }) => {
        this.tableDataLoadingShop = false;
        let returnData = data.data;
        this.shopData = returnData;
      });
    },
    //添加商家弹框搜索
    selectAdd() {
      this.page2 = 1;
      this.shopAlllist();
    },
    // 获取所有商家列表去配置添加商家弹框
    shopAlllist() {
      this.tableDataLoadingaddShop = true;
      this.$http({
        url: this.$http.adornUrl("admin/goods/selectAllShop"),
        method: "get",
        params: this.$http.adornParams({
          page: this.page2,
          limit: this.limit2,
          shopName: this.shopName
        })
      }).then(({ data }) => {
        this.tableDataLoadingaddShop = false;
        for (var i in data.data.list) {
          if (data.data.list[i].shopBanner) {
            data.data.list[i].shopBanner = data.data.list[i].shopBanner.split(
              ","
            );
          }
        }
        let returnData = data.data;
        this.typeDatas = returnData;
        //randomKey是table数据改动时，刷新table的
        this.randomKey = Math.random();
        this.selectedPreExisting(this.selectedItems);

        // let list = []
        // this.typeDatas.forEach((item) => {
        //   alert(1)
        //   this.shopData.forEach(val => {
        //     alert(2)
        //     if (val.shopId === item.shopId) {
        //       alert(item.shopName)
        //       list.push(item)
        //     }
        //   })
        // })
        // if (list) {
        //   list.forEach((row) => {
        //     this.$refs.dataTable.toggleRowSelection(row, true)
        //   })
        // }
      });
    },
    // 表格的选中 可以获得当前选中的数据
    // selectionChange(val) {

    // 	// 将选中的数据存储起来
    // 	// this.selectData = val.shopId
    // 	for(let i in val){//去重以免发生意外的push
    // 	if(!this.selectData.includes(val[i].shopId)){
    // 		this.selectData.push(val[i].shopId)
    // 	}
    // 	}
    // 	console.log(this.selectData,'选择')
    // },
    //保留分页选中数据
    // getRowKeys(row) {
    // 	return row.id
    // },
    //选中table已有数据
    selectedPreExisting(rows) {
      if (rows.length > 0) {
        //这里使用this.$nextTick是防止表格未渲染完成就执行，导致无法添加选中效果
        this.$nextTick(() => {
          rows.forEach(row => {
            //判断row是存在当前tableData
            let selectedItem = this.typeDatas.list.find(
              item => item.shopId == row.shopId
            );
            this.$refs.dataTable.toggleRowSelection(selectedItem);
          });
        });
      } else {
        this.$refs.dataTable.clearSelection();
      }
    },
    //表格单选
    selectdan(selection, row) {
      //因为翻页之后，点选时selection会出现undefined,所以这里需要进行判断
      //这里可以通过判断选择selection中有没有row，就可以判断出是增加还是删减
      if (
        selection &&
        selection.find(item => item && item.shopId == row.shopId)
      ) {
        this.addRows([row]);
      } else {
        this.deleteRows([row]);
      }
    },
    //表格全选
    selectAll(selection) {
      //判断是选中还是取消tableData
      if (selection.length > 0) {
        this.addRows(this.typeDatas.list);
      } else {
        this.deleteRows(this.typeDatas.list);
      }
    },
    //添加选中
    addRows(rows) {
      rows.forEach(row => {
        //过滤，当selectedItems有此条数据时，则直接返回，不执行添加
        if (this.selectedItems.find(item => item.shopId == row.shopId)) {
          return;
        }
        this.selectedItems.push(row);
      });
    },
    //取消选中
    deleteRows(rows) {
      //当selectedItems为空数组时，不执行删除
      if (this.selectedItems.length == 0) {
        return;
      }
      rows.forEach(row => {
        this.selectedItems = this.selectedItems.filter(
          item => item.shopId !== row.shopId
        );
      });
    },

    //添加商家确定
    addShoplist() {
      if (this.selectedItems.length <= 0) {
        this.$message("请勾选需要添加的商家");
        return;
      }
      var shopIds = [];
      this.selectedItems.forEach(item => {
        shopIds.push(item.shopId);
      });
      this.$http({
        url: this.$http.adornUrl("admin/activity-shop/join"),
        method: "post",
        data: this.$http.adornData({
          activityId: this.activityId,
          limitType: "1",
          limitValue: "",
          shopIds: shopIds,
          suitType: "1"
        })
      }).then(({ data }) => {
        if (data.msg == "success") {
          this.$message({
            message: "添加成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              this.$refs.dataTable.clearSelection();
              this.selectedItems = [];
              this.dialogFormVisibleaddshop = false;
              this.shopList(this.activityId);
            }
          });
        } else {
          this.$message({
            message: data.msg,
            type: "warning",
            duration: 1500,
            onClose: () => {}
          });
        }
      });
    },
    // 删除商家
    deleteuserShop(row) {
      this.$confirm(`确定删除活动商家?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("admin/activity-shop/quit"),
            method: "put",
            params: this.$http.adornParams({
              activityId: row.activityId,
              shopId: row.shopId
            })
          }).then(({ data }) => {
            if (data.msg == "success") {
              this.$message({
                message: "删除成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.shopList(this.activityId);
                }
              });
            } else {
              this.$message({
                message: data.msg,
                type: "warning",
                duration: 1500,
                onClose: () => {}
              });
            }
          });
        })
        .catch(() => {});
    }
  },
  mounted() {
    this.dataSelect();
    this.gethuodongList();
  }
};
</script>

<style>
.imgs {
  position: relative;
  border-radius: 6px;
  width: 148px;
  height: 148px;
  margin-right: 10px;
  display: inline-block;
}
.times {
  position: relative;
  border: 1px dashed rgba(206, 214, 222, 1);
  width: 28px;
  height: 28px;
  border-radius: 3px;
  background: rgba(245, 246, 247, 1);
  margin-right: 10px;
  display: inline-block;
}

.dels {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

.dels .el-icon-delete {
  line-height: 148px;
  padding-left: 58px;
  font-size: 25px;
  color: #fff;
}

.imgs:hover .dels {
  width: 100%;
  height: 100%;
  background: #000;
  display: block;
  opacity: 0.5;
}

.bqList {
  padding: 4px 14px;
  margin: 4px;
  border: 1px solid #efefef;
  font-size: 12px;
  color: #999;
  border-radius: 4px;
  margin-right: 15px;
}

.delss {
  display: none;
  position: relative;
}

.delss .el-icon-delete {
  position: absolute;
  top: 0;
}

.bqList:hover .delss {
  display: initial;
  opacity: 0.5;
}

.tj {
  padding: 6px !important;
  margin: 4px;
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.el-upload--picture-card {
  vertical-align: unset !important;
}
.tianshang {
  margin-left: 690px;
  margin-top: -20px;
  width: 69px;
  height: 26px;
  opacity: 1;
  border-radius: 5px;
  background: rgba(62, 142, 247, 1);
  font-size: 12px;
  font-weight: 400;
  line-height: 26px;
  color: rgba(255, 255, 255, 1);
  text-align: center;
}
</style>
