<template>
  <div class="content">
    <div class="tab-box">
      <div class="tab_" :class="{active:index== tabindex }" @click="getindex(index)" v-for="(item,index) in  tabs"
           :key="index">
        {{ item.name }}
      </div>
    </div>

    <div class="cot-box" v-if="tabindex==0">
      <div>
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="120px">

          <el-form-item label="" prop="groupName" style="width: 180px">
            <el-input
              v-model="queryParams.groupName"
              placeholder="请输入分组名称"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="">
            <el-date-picker
              v-model="beginTime"
              style="width: 160px"
              type="date"
              placeholder="开始日期">
            </el-date-picker>
            至
            <el-date-picker
              v-model="endTime"
              style="width: 160px"
              type="date"
              placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item style="float: right;margin-right: 0px">
            <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
            <el-button type="primary" @click="handleAdd">新增分组</el-button>
          </el-form-item>

        </el-form>
      </div>
      <!--      -->
      <div style="height: 72vh;overflow: auto">
        <el-table
          :data="userGroupList"
          border
          style="width: 100%">
          <el-table-column type="index" width="50" align="center" label="序号"/>
          <el-table-column prop="groupName" align="center" label="分组名称" width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.groupName || "--" }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="remark" align="center" label="备注" width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.remark || "--" }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="userNum" align="center" label="会员数量">
            <template slot-scope="scope">
              <span>{{ scope.row.userNum || 0 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="userProportion" align="center" label="会员占比">
            <template slot-scope="scope">
              <span>{{ scope.row.userProportion || 0 }}%</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="status" label="状态">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                active-value="qy"
                inactive-value="jy"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="accountName" align="center" label="创建人">
            <template slot-scope="scope">
              <span>{{ scope.row.accountName || "--" }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" align="center" label="创建时间">
            <template slot-scope="scope">
              <span>{{ scope.row.createTime || "--" }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="updateTime" align="center" label="更新时间">
            <template slot-scope="scope">
              <span>{{ scope.row.updateTime || "--" }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="120">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="handleUpdate(scope.row)"
              >修改
              </el-button>
              <el-button
                size="mini"
                type="text"
                @click="handleDelete(scope.row)"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.page"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

    </div>
    <div class="cot-box" v-if="tabindex==1">
      <div>
        <el-form :model="queryParams1" ref="queryForm" size="small" :inline="true" label-width="120px">
          <el-form-item label="" prop="name" style="width: 180px">
            <el-input
              v-model="queryParams1.name"
              placeholder="请输入活动名称"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="">
            <el-date-picker
              v-model="beginTime1"
              style="width: 160px"
              type="date"
              placeholder="开始日期">
            </el-date-picker>
            至
            <el-date-picker
              v-model="endTime1"
              style="width: 160px"
              type="date"
              placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item style="float: right;margin-right: 0px">
            <el-button type="primary" icon="el-icon-search" @click="handleQuery1">搜索</el-button>
            <el-button icon="el-icon-refresh" @click="resetQuery1">重置</el-button>
            <el-button type="primary" @click="handleAdd1">新增定时群发</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!--      -->
      <div style="height: 72vh;overflow: auto">
        <el-table
          :data="massSendList"
          border
          style="width: 100%">
          <el-table-column type="index" width="50" align="center" label="序号"/>
          <el-table-column prop="name" align="center" label="活动名称" width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.name || "--" }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="activityTimeType" align="center" label="活动时间" width="190">
            <template slot-scope="scope">
              <span v-if="scope.row.activityTimeType==0">永久有效</span>
              <span v-else>{{ scope.row.activityTimeFront }} ~ {{ scope.row.activityTimeAfter }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="sendFrequency" align="center" label="发送频次">
            <template slot-scope="scope">
              <span v-if="scope.row.sendFrequency==0">每天一次</span>
              <span v-if="scope.row.sendFrequency==1">周固定时间</span>
              <span v-if="scope.row.sendFrequency==2">月固定时间</span>
              <span v-if="scope.row.sendFrequency==3">法定节日时间</span>
            </template>
          </el-table-column>
          <el-table-column prop="sendUserNum" align="center" label="群发会员">
            <template slot-scope="scope">
              <span>{{ scope.row.sendUserNum || 0 }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="senfGift" align="center" label="群发礼品">
            <template slot-scope="scope">
              <span>{{ scope.row.senfGift || "--" }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="status" align="center" label="活动状态">
            <template slot-scope="scope">
              <div v-if="scope.row.status == 0" style="color: #FF7E00">未开始</div>
              <div v-if="scope.row.status == 1" style="color: #00CAFF">进行中</div>
              <div v-if="scope.row.status == 2" style="color: #0DC291">已结束</div>
            </template>
          </el-table-column>
          <el-table-column prop="accountName" align="center" label="创建人">
            <template slot-scope="scope">
              <span>{{ scope.row.accountName || "--" }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" align="center" label="创建时间">
            <template slot-scope="scope">
              <span>{{ scope.row.createTime || "--" }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="120">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                v-if="scope.row.status == 0"
                @click="handleUpdate1(scope.row)"
              >修改
              </el-button>
              <el-button
                size="mini"
                type="text"
                @click="handleDelete1(scope.row)"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <pagination
        v-show="total1>0"
        :total="total1"
        :page.sync="queryParams1.page"
        :limit.sync="queryParams1.pageSize"
        @pagination="getList1"
      />
    </div>
    <div class="cot-box" v-if="tabindex==2">
      <div>
        <el-form :model="queryParams2" ref="queryForm" size="small" :inline="true" label-width="120px">
          <el-form-item label="" prop="groupName" style="width: 180px">
            <el-input placeholder="请输入活动名称"  v-model="queryParams.tableName"/>
          </el-form-item>

          <el-form-item label="" prop="groupName" style="width: 180px">
            <el-select v-model="queryParams2.status" placeholder="请选择状态">
              <el-option label="已发送" value="0"></el-option>
              <el-option label="发送失败" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-date-picker
              v-model="beginTime2"
              style="width: 160px"
              type="date"
              placeholder="开始日期">
            </el-date-picker>
            至
            <el-date-picker
              v-model="endTime2"
              style="width: 160px"
              type="date"
              placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item style="float: right;margin-right: 0px">
            <el-button type="primary" icon="el-icon-search" @click="handleQuery2">搜索</el-button>
            <el-button icon="el-icon-refresh" @click="resetQuery2">重置</el-button>
          </el-form-item>

        </el-form>
      </div>
      <!--      -->
      <div style="height: 72vh;overflow: auto">
        <el-table
          :data="massSendRecordList"
          border
          style="width: 100%">
          <el-table-column type="index" width="50" align="center" label="序号"/>
          <el-table-column prop="activityName" align="center" label="活动名称" width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.activityName || "--" }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="sendGift" align="center" label="群发礼品">
            <template slot-scope="scope">
              <span>{{ scope.row.sendGift || "--" }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="sendWay" align="center" label="群发方式">
            <template slot-scope="scope">
              <span>{{ scope.row.sendWay || "--" }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="massContent" align="center" label="群发内容" width="220">
            <template slot-scope="scope">
              <span>{{ scope.row.massContent || "--" }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="userNum" align="center" label="群发会员数量">
            <template slot-scope="scope">
              <span>{{ scope.row.userNum || 0 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="successNum" align="center" label="成功数量">
            <template slot-scope="scope">
              <span>{{ scope.row.successNum || 0 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="failNum" align="center" label="失败数量">
            <template slot-scope="scope">
              <span>{{ scope.row.failNum || 0 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="status" align="center" label="状态">
            <template slot-scope="scope">
              <div v-if="scope.row.status == 0" style="color: #0DC291">已发送</div>
              <div v-if="scope.row.status == 1" style="color: #F44522">发送失败</div>
            </template>
          </el-table-column>
          <el-table-column prop="address" align="center" label="已领取数量">
            <template slot-scope="scope">
              <span>{{ scope.row.userNum || 0 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="address" align="center" label="已核销数量">
            <template slot-scope="scope">
              <span>{{ scope.row.userNum || 0 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="address" align="center" label="未核销数量">
            <template slot-scope="scope">
              <span>{{ scope.row.userNum || 0 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="accountName" align="center" label="操作人员">
            <template slot-scope="scope">
              <span>{{ scope.row.accountName || "--" }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" align="center" label="群发时间" width="160">
            <template slot-scope="scope">
              <span>{{ scope.row.createTime || "--" }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="120">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="handleDelete2(scope.row)"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <pagination
        v-show="total2>0"
        :total="total2"
        :page.sync="queryParams2.page"
        :limit.sync="queryParams2.pageSize"
        @pagination="getList2"
      />
    </div>
    <div style="width: 100%; height: 10px;"></div>


    <!-- 添加或修改对话框 -->
    <el-dialog center :title="title" :close-on-click-modal="false" :visible.sync="open" width="55%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <div class="flax_box">
            <el-form-item label="分组名称" prop="groupName">
              <el-input style="width: 424px;" v-model="form.groupName" placeholder="请输入分组名称" maxlength="30"/>
            </el-form-item>

            <el-form-item label="会员等级" prop="gradeId">
              <el-select  v-model="form.gradeId" placeholder="请选择会员等级" style="width: 424px">
                <el-option v-for="(item,index) in userGradeList" :key="index" :label="item.name"
                           :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </div>
        <div  class="flax_box">
          <el-form-item label="会员标签" prop="userLabelId">
            <el-select v-model="form.userLabelId" multiple placeholder="请选择会员标签（多选）" style="width: 424px">
              <el-option v-for="(item,index) in userLabelList" :key="index" :label="item.labelName"
                         :value="item.id+''"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="会员性别" prop="userSex">
            <el-checkbox-group v-model="form.userSex">
              <el-checkbox type="name" label="1">男</el-checkbox>
              <el-checkbox type="name" label="0">女</el-checkbox>
              <el-checkbox type="name" label="2">不详</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </div>

      <div class="flax_box">
        <el-form-item label="会员年龄" prop="paymentType">
          <div class="d-s">
            <el-input placeholder="请输入年龄" v-model="form.userAgeFront" style="width: 190px"></el-input>
            <div style="margin: 0 15px">至</div>
            <el-input placeholder="请输入年龄" v-model="form.userAgeAfter" style="width: 190px"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="会员余额" prop="paymentType">
          <div class="d-s">
            <el-input placeholder="请输入余额" v-model="form.userBalanceFront" style="width: 190px"></el-input>
            <div style="margin: 0 15px">至</div>
            <el-input placeholder="请输入余额" v-model="form.userBalanceAfter" style="width: 190px"></el-input>
          </div>
        </el-form-item>
      </div>
      <div class="flax_box">
        <el-form-item label="会员积分" prop="paymentType">
          <div class="d-s">
            <el-input placeholder="请输入积分" v-model="form.userPointFront" style="width: 190px"></el-input>
            <div style="margin: 0 15px">至</div>
            <el-input placeholder="请输入积分" v-model="form.userPointAfter" style="width: 190px"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="充值次数" prop="paymentType">
          <div class="d-s">
            <el-input placeholder="请输入充值次数" v-model="form.rechargeNumFront" style="width: 190px"></el-input>
            <div style="margin: 0 15px">至</div>
            <el-input placeholder="请输入充值次数" v-model="form.rechargeNumAfter" style="width: 190px"></el-input>
          </div>
        </el-form-item>
      </div>
        <div class="flax_box">
          <el-form-item label="充值金额" prop="paymentType">
            <div class="d-s">
              <el-input placeholder="请输入充值金额" v-model="form.rechargeAmountFront" style="width: 190px"></el-input>
              <div style="margin: 0 15px">至</div>
              <el-input placeholder="请输入充值金额" v-model="form.rechargeAmountAfter" style="width: 190px"></el-input>
            </div>
          </el-form-item>
          <el-form-item label="消费次数" prop="paymentType">
            <div class="d-s">
              <el-input placeholder="请输入消费次数" v-model="form.consumeNumFront" style="width: 190px"></el-input>
              <div style="margin: 0 15px">至</div>
              <el-input placeholder="请输入消费次数" v-model="form.consumeNumAfter" style="width: 190px"></el-input>
            </div>
          </el-form-item>

        </div>

        <div class="flax_box">
          <el-form-item label="消费油品" prop="consumeOil">
            <el-select  style="width: 424px" v-model="form.consumeOil" multiple placeholder="请选择油品（多选）" >
              <el-option v-for="(item,index) in oilNumberList" :key="index"
                         :label="getOilNamess(oilNameList,item.oilName)" :value="item.oilName"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="消费金额" prop="paymentType">
            <div class="d-s">
              <el-input placeholder="请输入消费金额" v-model="form.consumeAmountFront" style="width: 190px"></el-input>
              <div style="margin: 0 15px">至</div>
              <el-input placeholder="请输入消费金额" v-model="form.consumeAmountAfter" style="width: 190px"></el-input>
            </div>
          </el-form-item>
        </div>

      <div class="flax_box">
        <el-form-item label="平均消费" prop="paymentType">
          <div class="d-s">
            <el-input placeholder="请输入平均消费金额" v-model="form.averageConsumeFront"
                      style="width: 190px"></el-input>
            <div style="margin: 0 15px">至</div>
            <el-input placeholder="请输入平均消费金额" v-model="form.averageConsumeAfter"
                      style="width: 190px"></el-input>
          </div>
        </el-form-item>

        <el-form-item label="状态" prop="status">
          <el-switch
            v-model="form.status"
            active-value="qy"
            inactive-value="jy"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </el-form-item>
      </div>
        <el-form-item label="消费周期" prop="consumeCycle">
          <div class="d-s">
            <div class="icon-type" v-for="(item,index) in paymentTypelist" :key="index"
                 :class="{ 'acvtive' : index === tindex }" @click="Typeindex(index)">
              <img src="../../assets/images/wx.png" style="width: 20px;height: 20px" v-if="index != tindex">
              <img src="../../assets/images/xz.png" style="width: 20px;height: 20px" v-if="index == tindex">
              {{ item }}
            </div>
          </div>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.remark" placeholder="请输入备注" type="textarea"/>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 添加或修改对话框 -->
    <el-dialog center :title="title" :close-on-click-modal="false" :visible.sync="open1" width="35%" append-to-body>
      <el-form ref="form1" :model="form1" :rules="rules" label-width="80px">

        <el-form-item label="活动名称" prop="name">
          <el-input v-model="form1.name" placeholder="请输入活动名称" maxlength="30"/>
        </el-form-item>

        <el-form-item label="群发会员" prop="userGroupId">
          <el-select v-model="form1.userGroupId" @change="chooseGroup" placeholder="请选择群发会员" style="width: 100%">
            <el-option v-for="(item,index) in groupList" :key="index" :label="item.groupName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动时间" prop="activityTimeType">
          <div class="d-s">
            <div class="icon-type" v-for="(item,index) in activityTimeTypeList" :key="index"
                 :class="{ 'acvtive' : index === tindex1 }" @click="Typeindex1(index)">
              <img src="../../assets/images/wx.png" style="width: 20px;height: 20px" v-if="index != tindex1">
              <img src="../../assets/images/xz.png" style="width: 20px;height: 20px" v-if="index == tindex1">
              {{ item }}
            </div>
            <el-date-picker
              v-model="form1.activityTimeFront"
              style="width: 160px"
              type="date"
              placeholder="开始日期">
            </el-date-picker>
            <span style="margin: 0px 15px">至</span>
            <el-date-picker
              v-model="form1.activityTimeAfter"
              style="width: 160px"
              type="date"
              placeholder="结束日期">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="发送频次" prop="sendFrequency">
          <div class="d-s">
            <div class="icon-type" v-for="(item,index) in sendFrequencyList" :key="index"
                 :class="{ 'acvtive' : index === tindex2 }" @click="Typeindex2(index)">
              <img src="../../assets/images/wx.png" style="width: 20px;height: 20px" v-if="index != tindex2">
              <img src="../../assets/images/xz.png" style="width: 20px;height: 20px" v-if="index == tindex2">
              {{ item }}
            </div>
          </div>
          <div>
            <el-checkbox-group v-model="weekDay" v-if="form1.sendFrequency==1">
              <el-checkbox v-for="(item,index) in weekList" :key="index" :label="item"></el-checkbox>
            </el-checkbox-group>
            <el-checkbox-group v-model="monthDay" v-if="form1.sendFrequency==2">
              <el-checkbox v-for="item in 31" :key="item" :label="item+''">{{ item }}日</el-checkbox>
            </el-checkbox-group>
            <el-time-picker
              v-model="form1.sendTime"
              format="HH:mm"
              placeholder="请选择发送时间点">
            </el-time-picker>
          </div>
        </el-form-item>
        <el-form-item label="群发方式" prop="sendWay">
          <div style="display: flex">
            <el-checkbox-group v-model="form1.sendWay">
              <el-checkbox label="短信消息"></el-checkbox>
            </el-checkbox-group>
            <el-tooltip class="item" effect="light" content="仅对有手机号的会员进行群发" placement="right">
              <img style="width: 16px;height: 16px;margin-top: 9px;margin-left: 10px" src="@/assets/images/wenhao.png">
            </el-tooltip>
          </div>
        </el-form-item>
        <el-form-item label="群发礼品" prop="senfGift">
          <el-checkbox-group v-model="form1.senfGift">
            <el-checkbox label="积分"></el-checkbox>
            <el-checkbox label="优惠券"></el-checkbox>
            <el-checkbox label="成长值"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="短信模板" prop="messageId">
          <el-select v-model="form1.messageId" placeholder="请选择短信模板名称" style="width: 100%">
            <el-option v-for="(item,index) in messageList" :key="index" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="跳转链接" prop="jumpLink">
          <div class="d-s">
            <div class="icon-type" v-for="(item,index) in jumpLinkList" :key="index"
                 :class="{ 'acvtive' : index === tindex3 }" @click="Typeindex3(index)">
              <img src="../../assets/images/wx.png" style="width: 20px;height: 20px" v-if="index != tindex3">
              <img src="../../assets/images/xz.png" style="width: 20px;height: 20px" v-if="index == tindex3">
              {{ item }}
            </div>
          </div>
          <el-select v-if="form1.jumpLink==0" v-model="form1.appletJumpPage" placeholder="请选择跳转页面"
                     style="width: 100%">
            <el-option v-for="(item,index) in jumpPageList" :key="index" :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
<!--        <el-form-item label="会员数量">-->
<!--          {{ form1.sendUserNum }}-->
<!--        </el-form-item>-->

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm1">确 定</el-button>
        <el-button @click="cancel1">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import {addUserGroup, deleteUserGroup, editUserGroup, getUserGroup, listUserGroup} from "../../api/userGroup/usergroup";
import {
  addUserMassSend,
  deleteUserMassSend,
  editUserMassSend,
  getUserMassSend,
  listUserMassSend
} from "@/api/userGroup/userMassSend";
import {deleteUserMassSendRecord, listUserMassSendRecord} from "@/api/userGroup/userMassSendRecord";
import {listUserLabel} from "@/api/staff/user/userlabel";
import {listUserGrade} from "@/api/staff/user/usergrade";
import {getOilNameList, oilNumberList} from "@/api/order/oilnumgun";
import {getListApi} from "@/api/setting/message";

export default {
  data() {
    return {
      tabindex: 0,
      tindex: 0,
      tindex1: 0,
      tindex2: 0,
      tindex3: 0,
      paymentTypelist: [
        "不限制", "7天", "15天", "30天", "60天", "90天", "180天",
      ],
      activityTimeTypeList: [
        "永久有效", "自定义"
      ],
      sendFrequencyList: [
        "每天一次", "周固定时间", "月固定时间", "法定节日时间"
      ],
      jumpLinkList: [
        "小程序链接", "常用链接"
      ],
      weekList: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      weekDay: [],
      monthDay: [],
      tableData: [{
        status: 0,
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        status: 0,
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        status: 0,
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        status: 0,
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      input: '',
      value: '',
      tabs: [
        {
          name: "分组管理",
        },
        {
          name: "定时群发",
        },
        {
          name: "群发记录",
        }
      ],

      total: 0,
      queryParams: {
        page: 1,
        pageSize: 10
      },
      beginTime: "",
      endTime: "",
      userGroupList: [],

      total1: 0,
      queryParams1: {
        page: 1,
        pageSize: 10
      },
      beginTime1: "",
      endTime1: "",
      massSendList: [],

      total2: 0,
      queryParams2: {
        page: 1,
        pageSize: 10
      },
      beginTime2: "",
      endTime2: "",
      massSendRecordList: [],

      title: '',
      open: false,
      form: {userSex: []},
      userLabelList: [],
      userGradeList: [],
      oilNameList: [],
      // 油号列表
      oilNumberList: [],

      open1: false,
      form1: {userSex: []},
      messageList: [],
      jumpPageList: [
        {id: 0, name: "首页"},
        {id: 1, name: "一键加油"},
        {id: 2, name: "储值卡充值"},
        {id: 3, name: "囤油卡充值"},
        {id: 4, name: "礼品卡兑换"},
        {id: 5, name: "消费有礼"},
        {id: 6, name: "折扣营销"},
        {id: 7, name: "满减营销"},
        {id: 8, name: "积分商城"},
        {id: 9, name: "邀请有礼"},
      ],
      groupList:[],

      // 表单校验
      rules: {
        groupName: [
          {required: true, message: "分组名称不能为空", trigger: "blur"},
        ],
        status: [
          {required: true, message: "状态不能为空", trigger: "blur"}
        ],
        name: [
          {required: true, message: "活动名称不能为空", trigger: "blur"}
        ],
        userGroupId: [
          {required: true, message: "群发会员不能为空", trigger: "blur"}
        ],
        activityTimeType: [
          {required: true, message: "活动时间不能为空", trigger: "blur"}
        ],
        sendFrequency: [
          {required: true, message: "发送频次不能为空", trigger: "blur"}
        ],
        sendWay: [
          {required: true, message: "群发方式不能为空", trigger: "blur"}
        ],
        senfGift: [
          {required: true, message: "群发礼品不能为空", trigger: "blur"}
        ],
        messageId: [
          {required: true, message: "短信模板不能为空", trigger: "blur"}
        ],
      }
    };
  },
  created() {
    this.getList()
    this.getUserLabelList()
  },
  methods: {
    // 定时群发选择分组
    chooseGroup(){
      this.groupList.forEach(item => {
        if (this.form1.userGroupId==item.id){
          this.form1.sendUserNum = item.userNum
        }
      })
    },
    getUserLabelList() {
      listUserLabel({page: 1, pageSize: 10, status: 'qy'}).then(res => {
        this.userLabelList = res.data.records
      })
      listUserGrade({page: 1, pageSize: 20}).then(response => {
        this.userGradeList = response.data.records;
      });
      getOilNameList().then(response => {
        this.oilNameList = response.data;
      })
      oilNumberList().then(response => {
        this.oilNumberList = response.data.records;
      })
    },
    getMessageList() {
      getListApi({page: 1, pageSize: 10000, status: '1'}).then(res => {
        this.messageList = res.data.records;
      })

      listUserGroup({page: 1, pageSize: 10000, status: 'qy'}).then(res => {
        this.groupList = res.data.records
      })
    },
    getOilNamess(list, id) {
      let name = ""
      if (list != null && list != "") {
        list.forEach(item => {
          if (item.id == id) {
            name = item.oilName;
          }
        })
      }
      return name;
    },
    // 取消按钮
    cancel1() {
      this.open1 = false;
      this.reset();
    },
    // 提交按钮
    submitForm1: function () {
      this.$refs["form1"].validate(valid => {
        if (valid) {
          this.form1.sendWay = this.form1.sendWay.toString()
          this.form1.senfGift = this.form1.senfGift.toString()
          if (this.form1.sendFrequency==1){
            if (this.weekDay.length>0) this.form1.sendDate = this.weekDay.toString()
          }else if (this.form1.sendFrequency==2){
            if (this.monthDay.length>0) this.form1.sendDate = this.monthDay.toString()
          }
          if (!this.form1.id) {
            addUserMassSend(this.form1).then(res => {
              this.$message.success("添加成功")
              this.open1 = false
              this.queryParams1.page = 1;
              this.getList1()
            })
          } else {
            editUserMassSend(this.form1).then(res => {
              this.$message.success("修改成功")
              this.open1 = false
              this.queryParams1.page = 1;
              this.getList1()
            })
          }
        }
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 提交按钮
    submitForm: function () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.userSex) this.form.userSex = this.form.userSex.toString()
          if (this.form.userLabelId) this.form.userLabelId = this.form.userLabelId.toString()
          if (this.form.consumeOil) this.form.consumeOil = this.form.consumeOil.toString()
          if (!this.form.id) {
            addUserGroup(this.form).then(res => {
              this.$message.success("添加成功")
              this.open = false
              this.queryParams.page = 1;
              this.getList()
            })
          } else {
            editUserGroup(this.form).then(res => {
              this.$message.success("修改成功")
              this.open = false
              this.queryParams.page = 1;
              this.getList()
            })
          }
        }
      });
    },
    Typeindex(index) {
      this.tindex = index
      this.form.consumeCycle = index
    },
    Typeindex1(index) {
      this.tindex1 = index
      this.form1.activityTimeType = index
    },
    Typeindex2(index) {
      this.tindex2 = index
      this.form1.sendFrequency = index
    },
    Typeindex3(index) {
      this.tindex3 = index
      this.form1.jumpLink = index
    },
    getList() {
      let dateRange = []
      if (this.beginTime && this.endTime) {
        dateRange.push(this.beginTime.toLocaleDateString())
        dateRange.push(this.endTime.toLocaleDateString())
      }
      listUserGroup(this.addDateRange(this.queryParams, dateRange)).then(res => {
        this.userGroupList = res.data.records
        this.total = res.data.total
      })
    },
    getList1() {
      let dateRange = []
      if (this.beginTime1 && this.endTime1) {
        dateRange.push(this.beginTime1.toLocaleDateString())
        dateRange.push(this.endTime1.toLocaleDateString())
      }
      listUserMassSend(this.addDateRange(this.queryParams1, dateRange)).then(res => {
        this.massSendList = res.data.records
        this.total1 = res.data.total
      })
    },
    getList2() {
      let dateRange = []
      if (this.beginTime2 && this.endTime2) {
        dateRange.push(this.beginTime2.toLocaleDateString())
        dateRange.push(this.endTime2.toLocaleDateString())
      }
      listUserMassSendRecord(this.addDateRange(this.queryParams2, dateRange)).then(res => {
        this.massSendRecordList = res.data.records
        this.total2 = res.data.total
      })
    },
    // 修改按钮操作
    handleUpdate(row) {
      this.reset();
      getUserGroup(row.id).then(res => {
        this.open = true;
        this.form = res.data;
        if (res.data.userSex) {
          this.form.userSex = res.data.userSex.split(",")
        } else {
          this.form.userSex = []
        }
        if (res.data.userLabelId) this.form.userLabelId = res.data.userLabelId.split(",")
        if (res.data.consumeOil) this.form.consumeOil = res.data.consumeOil.split(",")
        if (res.data.consumeCycle) this.tindex = res.data.consumeCycle
        this.title = "修改会员分组"
      })
    },
    // 修改按钮操作
    handleUpdate1(row) {
      getUserMassSend(row.id).then(res => {
        this.open1 = true;
        this.form1 = res.data;
        if (res.data.sendDate){
          if (res.data.sendFrequency==1) {
            this.weekDay = res.data.sendDate.split(",")
          }else if (res.data.sendFrequency==2){
            this.monthDay = res.data.sendDate.split(",")
          }
        }else {
          this.monthDay = []
          this.weekDay = []
        }
        this.form1.sendWay = res.data.sendWay.split(",")
        this.form1.senfGift = res.data.senfGift.split(",")
        this.title = "修改定时群发"
      })
    },
    // 表单重置
    reset() {
      this.resetForm("form");
    },
    // 删除按钮操作
    handleDelete(row) {
      const name = row.labelName || this.id;
      this.$modal.confirm('是否删除本条数据，删除后无法恢复！').then(function () {
        return deleteUserGroup(row.id);
      }).then(() => {
        this.queryParams.page = 1
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    // 删除按钮操作
    handleDelete1(row) {
      const name = row.labelName || this.id;
      this.$modal.confirm('是否删除本条数据，删除后无法恢复！').then(function () {
        return deleteUserMassSend(row.id);
      }).then(() => {
        this.queryParams1.page = 1
        this.getList1();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    // 删除按钮操作
    handleDelete2(row) {
      const name = row.labelName || this.id;
      this.$modal.confirm('是否删除本条数据，删除后无法恢复！').then(function () {
        return deleteUserMassSendRecord(row.id);
      }).then(() => {
        this.queryParams2.page = 1
        this.getList2();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    // 新增按钮操作
    handleAdd1() {
      this.tindex1 = 0
      this.tindex2 = 0
      this.tindex3 = 0
      this.form1 = {
        sendWay: [],
        senfGift: [],
        activityTimeType:this.tindex1,
        sendFrequency:this.tindex2,
        jumpLink:this.tindex3,
        sendUserNum:0,
      }
      this.monthDay = []
      this.weekDay = []
      this.open1 = true;
      this.title = "新增定时群发";
    },
    // 新增按钮操作
    handleAdd() {
      this.tindex = 0
      this.reset();
      this.form = {
        status: "qy",
        userSex: [],
        consumeCycle: this.tindex
      }
      this.open = true;
      this.title = "新增会员标签";
    },
    // 搜索按钮操作
    handleQuery2() {
      this.queryParams2.page = 1;
      this.getList2();
    },
    // 重置按钮操作
    resetQuery2() {
      this.queryParams2 = {
        page: 1,
        pageSize: 10,
      }
      this.beginTime2 = ''
      this.endTime2 = ''
      this.handleQuery2();
    },
    // 搜索按钮操作
    handleQuery1() {
      this.queryParams1.page = 1;
      this.getList1();
    },
    // 重置按钮操作
    resetQuery1() {
      this.queryParams1 = {
        page: 1,
        pageSize: 10,
      }
      this.beginTime1 = ''
      this.endTime1 = ''
      this.handleQuery1();
    },
    // 搜索按钮操作
    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },
    // 重置按钮操作
    resetQuery() {
      this.dateRange = [];
      this.queryParams = {
        page: 1,
        pageSize: 10,
      }
      this.beginTime = ''
      this.endTime = ''
      this.handleQuery();
    },
    getindex(index) {
      this.tabindex = index
      if (index == 0) {
        this.getList()
        this.getUserLabelList()
      } else if (index == 1) {
        this.getList1()
        this.getMessageList()
      } else if (index == 2) {
        this.getList2()
      }
    }
  }
}
</script>
<style scoped lang="scss">
.content {
  background: #f5f7f8;
  width: 100%;
}

.tab-box {
  width: 100%;
  height: 40px;
  background: #fff;
  display: flex;
  box-sizing: border-box;
 border-top: 1px solid #eceff1;
  margin-bottom: 10px;

}

.tab_ {
  width: 75px;
  height: 100%;
  //border-bottom: 2px solid #FF770F;
  display: flex;
  font-weight: 500;
  font-size: 14px;
  color: #999999;
  align-items: center;
  justify-content: center;
  margin-left: 50px;
  cursor: pointer;
}

.active {
  border-bottom: 2px solid #FF770F !important;
  color: #FF770F !important;
}

.cot-box {
  width: 99%;
  border-radius: 8px;
  background: #fff;
  box-sizing: border-box;
  padding: 20px;
  margin: 0 auto;
}

.d-s-b {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 25px;
}

.d-s {
  display: flex;
  align-items: center;
}

.icon-type {
  display: flex;
  align-items: center;
  font-weight: 400;
  font-size: 14px;
  color: #999999;
  margin-right: 20px;
  cursor: pointer;
}
.flax_box{
  display: flex;
  align-items: center;
}
.acvtive {
  color: #FF770F !important;
}
</style>
