<template>
  <div class="app-container">

    <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 class="clearfix" style="display: flex;margin-bottom: 15px">
        <div class="levelBorder"></div>
        <div style="margin-right: 15px">会员等级</div>
        <el-switch
          v-model="chainStoreConfig.isEnableLevel"
          active-value="yes"
          inactive-value="no"
          active-color="#13ce66"
          inactive-color="#ff4949">
        </el-switch>
      </div>
      <div>
        <!--        <div style="display: flex;justify-content: space-between">-->
        <!--          <span style="color: grey;">会员等级规则说明</span>-->
        <!--          <el-button v-show="level1" @click="editLevel1" type="primary"-->
        <!--                     v-hasPermi="['userGrade:index:open']"-->
        <!--                     round> 开启等级功能-->
        <!--          </el-button>-->
        <!--          <el-button v-show="level2" @click="editLevel2" type="danger"-->
        <!--                     v-hasPermi="['userGrade:index:open']"-->

        <!--                     round>关闭等级功能-->
        <!--          </el-button>-->
        <!--        </div>-->
        <div class="kuang">
          <p v-for="(item,index) in memberLevelRule" :id="index">
            {{ item }}
          </p>
        </div>
      </div>
      <div style="margin-top: 15px">
        <div class="clearfix" style="display: flex">
          <div class="levelBorder"></div>
          <span>会员清算规则</span>
        </div>
        <div style="margin-top: 10px">
          <!--          <template>-->
          <!--            <el-radio v-model="clear" label="clear_month">按月清算</el-radio>-->
          <!--            <el-radio v-model="clear" label="clear_year">按年清算</el-radio>-->
          <!--            <el-radio v-model="clear" label="clear_no">不清算</el-radio>-->
          <!--          </template>-->
          <div class="d-s" style="margin-top: 15px;margin-bottom: 15px">
            <div class="icon-type" v-for="(item,index) in clearList" :key="index"
                 :class="{ 'acvtive' : index === tindex }" @click="Typeindex(index,item)">
              <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.label }}
            </div>
          </div>
          <!--          <el-button type="primary" round @click="updateClearConfig"-->
          <!--                     v-hasPermi="['userGrade:index:save']">-->
          <!--            保存-->
          <!--          </el-button>-->
        </div>
        <div class="kuang">
          <p v-for="(item,index) in levelClearRule" :key="index">
            {{ item }}
          </p>
        </div>
      </div>
      <div style="margin-top: 15px;margin-bottom: 15px">
        <div class="clearfix" style="display: flex">
          <div class="levelBorder"></div>
          <span>成长值计算方式</span>
        </div>
        <div style="display: flex;justify-content: space-between">
          <div class="czz">
            <span class="czzbl">汽油成长值比例：每消费</span>
            <el-select v-model="chainStoreConfig.gasConsumeAmount" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <span class="czzbl">元，获得</span>
            <el-input v-model="chainStoreConfig.gasGrowthValue" style="width: 120px"/>
            <span class="czzbl">成长值</span>
            <!--            <el-input v-model="gasGrowthValue" disabled style="margin: 10px 10px">-->
            <!--              <template slot="prepend">汽油成长值比例,每消费1元积</template>-->
            <!--              <template slot="append">成长值</template>-->
            <!--            </el-input>-->
          </div>
          <div class="czz">
            <span class="czzbl">天然气成长值比例：每消费</span>
            <el-select v-model="chainStoreConfig.naturalConsumeAmount" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <span class="czzbl">元，获得</span>
            <el-input v-model="chainStoreConfig.naturalGrowthValue" style="width: 120px"/>
            <span class="czzbl">成长值</span>
            <!--            <el-input v-model="naturalGrowthValue" disabled style="margin: 10px 10px">-->
            <!--              <template slot="prepend">天然气成长值比例,每消费1元积</template>-->
            <!--              <template slot="append">成长值</template>-->
            <!--            </el-input>-->
          </div>
        </div>
        <div style="display: flex;justify-content: space-between">
          <div class="czz">
            <span class="czzbl">柴油成长值比例：每消费</span>
            <el-select v-model="chainStoreConfig.dieselConsumeAmount" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <span class="czzbl">元，获得</span>
            <el-input v-model="chainStoreConfig.dieselGrowthValue" style="width: 120px"/>
            <span class="czzbl">成长值</span>
            <!--            <el-input v-model="dieselGrowthValue" disabled style="margin: 10px 10px">-->
            <!--              <template slot="prepend">柴油成长值比例,每消费1元积</template>-->
            <!--              <template slot="append">成长值</template>-->
            <!--            </el-input>-->
          </div>
          <div class="czz">
            <span class="czzbl">会员充值成长值比例：每消费</span>
            <el-select v-model="chainStoreConfig.rechargeConsumeAmount" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <span class="czzbl">元，获得</span>
            <el-input v-model="chainStoreConfig.rechargeGrowthValue" style="width: 120px"/>
            <span class="czzbl">成长值</span>
            <!--            <el-input v-model="naturalGrowthValue" disabled style="margin: 10px 10px">-->
            <!--              <template slot="prepend">会员充值成长值比例：每消费1元积</template>-->
            <!--              <template slot="append">成长值</template>-->
            <!--            </el-input>-->
          </div>
        </div>
        <div class="kuang">
          <p v-for="(item,index) in growthValueRule" :id="index">
            {{ item }}
          </p>
        </div>
      </div>

      <el-button type="primary" @click="editChainStoreConfig">保存</el-button>
    </div>

    <div class="cot-box" v-if="tabindex == 1">
      <el-row :gutter="10" class="mb8">
        <el-col :span="21">
          <span style="font-size: 18px">会员等级</span>
          <span style="font-size: 14px">（最多支持20个等级）</span>
        </el-col>
        <!--        <el-col :span="3">-->
        <!--          <el-button-->
        <!--            type="primary"-->
        <!--            icon="el-icon-plus"-->
        <!--            @click="handleAdd"-->
        <!--          >新增会员等级</el-button>-->
        <!--        </el-col>-->
        <!--        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->
      </el-row>
      <div>
        <el-form :model="queryParams1" ref="queryForm" size="small" :inline="true" label-width="120px">

          <el-form-item label="" prop="groupName" style="width: 180px">
            <el-input placeholder="请输入会员等级" v-model="queryParams1.input"></el-input>
          </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">
            <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="handleAdd">新增等级</el-button>
          </el-form-item>

        </el-form>
      </div>
      <div style="height: 65vh;overflow: auto">
        <el-table ref="tables" v-loading="loading" :data="list" border>
          <el-table-column label="序号" align="center" type="index" width="55"/>
          <el-table-column label="会员等级名称" align="center" prop="name">
            <template slot-scope="scope">
              <span>{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="会员数量" align="center" prop="userNum">
            <template slot-scope="scope">
              <span>{{ scope.row.userNum }}</span>
            </template>
          </el-table-column>
          <el-table-column label="开卡金额（元）" align="center" prop="openCardAmount">
            <template slot-scope="scope">
              <span>{{ scope.row.openCardAmount || 0 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="升降排序" align="center" prop="grade">
            <template slot-scope="scope">
              <span>{{ scope.row.grade }}</span>
            </template>
          </el-table-column>
          <el-table-column label="升级所需成长值" align="center" prop="growthValue">
            <template slot-scope="scope">
              <span>{{ scope.row.growthValue }}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建人" align="center" prop="accountName">
            <template slot-scope="scope">
              <span>{{ scope.row.accountName || "--" }}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center" prop="createTime">
            <template slot-scope="scope">
              <span>{{ scope.row.createTime }}</span>
            </template>
          </el-table-column>
          <!--        <el-table-column label="优惠类型" align="center" prop="preferential">-->
          <!--        </el-table-column>-->
          <!--        <el-table-column label="特权信息">-->
          <!--          <template slot-scope="scope">-->
          <!--            <div v-show="scope.row.preferential=='自定义优惠'">-->
          <!--              <p>-->
          <!--                汽油：-->
          <!--                <span style="margin-left: 10px">{{ scope.row.gasolineDiscount }}</span>-->
          <!--                <span v-if="scope.row.gasolineRule!=null && scope.row.gasolineRule!=''"-->
          <!--                      style="color: grey;font-size: 12px">-->
          <!--                  <div style="margin-left: 10px"-->
          <!--                       v-if="scope.row.gasolineDiscount=='满减优惠'"-->
          <!--                       v-for="(item,index) in scope.row.gasolineRuleList"-->
          <!--                       :key="index">-->
          <!--                    消费满{{ item.gasolineRule1 }}元,立减{{ item.gasolineRule2 }}元-->
          <!--                  </div>-->
          <!--                  <div style="margin-left: 10px"-->
          <!--                       v-if="scope.row.gasolineDiscount=='每升优惠'"-->
          <!--                       v-for="(item,index) in scope.row.gasolineRuleList"-->
          <!--                       :key="index">-->
          <!--                    消费满{{ item.gasolineRule1 }}元,每升优惠{{ item.gasolineRule3 }}元-->
          <!--                  </div>-->
          <!--                </span>-->
          <!--              </p>-->
          <!--              <p>-->
          <!--                柴油：-->
          <!--                <span style="margin-left: 10px">{{ scope.row.dieselDiscount }}</span>-->
          <!--                <span v-if="scope.row.dieselRule!=null && scope.row.dieselRule!=''"-->
          <!--                      style="margin-left: 10px;color: grey;font-size: 12px">-->
          <!--                  <div style="margin-left: 10px"-->
          <!--                       v-if="scope.row.dieselDiscount=='满减优惠'"-->
          <!--                       v-for="(item,index) in scope.row.dieselRuleList"-->
          <!--                       :key="index">-->
          <!--                    消费满{{ item.dieselRule1 }}元,立减{{ item.dieselRule2 }}元-->
          <!--                  </div>-->
          <!--                  <div style="margin-left: 10px"-->
          <!--                       v-if="scope.row.dieselDiscount=='每升优惠'"-->
          <!--                       v-for="(item,index) in scope.row.dieselRuleList"-->
          <!--                       :key="index">-->
          <!--                    消费满{{ item.dieselRule1 }}元,每升优惠{{ item.dieselRule3 }}元-->
          <!--                  </div>-->
          <!--                </span>-->
          <!--              </p>-->
          <!--              <p>-->
          <!--                天然气：-->
          <!--                <span style="margin-left: 10px">{{ scope.row.naturalGasDiscount }}</span>-->
          <!--                <span v-if="scope.row.naturalGasRule!=null && scope.row.naturalGasRule!=''"-->
          <!--                      style="margin-left: 10px;color: grey;font-size: 12px">-->
          <!--                  <div style="margin-left: 10px"-->
          <!--                       v-if="scope.row.naturalGasDiscount=='满减优惠'"-->
          <!--                       v-for="(item,index) in scope.row.naturalGasRuleList"-->
          <!--                       :key="index">-->
          <!--                    消费满{{ item.naturalGas1 }}元,立减{{ item.naturalGas2 }}元-->
          <!--                  </div>-->
          <!--                  <div style="margin-left: 10px"-->
          <!--                       v-if="scope.row.naturalGasDiscount=='每单位优惠'"-->
          <!--                       v-for="(item,index) in scope.row.naturalGasRuleList"-->
          <!--                       :key="index">-->
          <!--                    消费满{{ item.naturalGas1 }}元,每单位优惠{{ item.naturalGas3 }}元-->
          <!--                  </div>-->
          <!--                </span>-->
          <!--              </p>-->
          <!--            </div>-->
          <!--            <div v-show="scope.row.preferential=='优惠活动组'">-->
          <!--              优惠活动组：-->
          <!--              <span style="margin-left: 10px">{{ scope.row.promotionGroup }}</span>-->
          <!--            </div>-->
          <!--          </template>-->
          <!--        </el-table-column>-->
          <!--        <el-table-column label="状态" align="center" prop="status">-->
          <!--          <template slot-scope="scope">-->
          <!--            <el-tag v-if="scope.row.status == 'qy'">启用</el-tag>-->
          <!--            <el-tag v-else type="info">禁用</el-tag>-->
          <!--          </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-delete"
                @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 == 2">
      <div>
        <el-form :model="queryParams2" ref="queryForm" size="small" :inline="true" label-width="120px">

          <el-form-item label="" prop="gradeId" style="width: 180px">
            <el-select v-model="queryParams2.gradeId" placeholder="请选择会员等级" style="width: 100%">
              <el-option v-for="(item,index) in gradeList" :key="index" :label="item.name"
                         :value="item.id"></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">
            <el-button type="primary" icon="el-icon-search" @click="handleQuery2">搜索</el-button>
            <el-button icon="el-icon-refresh" @click="resetQuery2">重置</el-button>
            <el-button type="primary" @click="handleAdd2">新增折扣</el-button>
          </el-form-item>

        </el-form>
      </div>
      <!--      -->
      <div style="height: 68vh;overflow: auto">
        <el-table
          :data="discountList"
          border
          style="width: 100%">
          <el-table-column type="index" width="50" align="center" label="序号"/>
          <el-table-column prop="gradeName" align="center" label="会员等级" width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.gradeName }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="discount" align="center" label="折扣">
            <template slot-scope="scope">
              <span>{{ scope.row.discount }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="usePaymentWay" align="center" label="可使用支付方式">
            <template slot-scope="scope">
              <span>{{ getPayTypeStr(scope.row.usePaymentWay) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="consumeAmount" align="center" label="最低消费金额" width="220">
            <template slot-scope="scope">
              <span>{{ scope.row.consumeAmount }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="suitDateType" align="center" label="限制时间">
            <template slot-scope="scope">
              <span v-if="scope.row.suitDateType=='0'">无</span>
              <span v-else>{{ scope.row.suitTimeSlotFront }} ~ {{ scope.row.suitTimeSlotAfter }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="noUseDate" align="center" label="不可用日期">
            <template slot-scope="scope">
              <div v-if="scope.row.noUseDate">
                <span v-for="(item,index) in scope.row.noUseDate.split(',')" :key="index">{{ item }}日，</span>
              </div>
              <div v-else>永久有效</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="创建时间" 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="handleUpdate2(scope.row)"
              >修改
              </el-button>
              <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>

    <!-- 添加或修改对话框 -->
    <el-dialog :title="title" :visible.sync="open" :close-on-click-modal="false" width="50%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="14">
            <el-form-item label="会员等级名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入会员等级名称"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="14">
            <el-form-item label="升降顺序" prop="grade">
              <el-input v-model="form.grade" placeholder="0" maxlength="10"/>
              <div style="font-size: 12px;color: #FF9655">默认0为最低一级顺序</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="14">
            <el-form-item label="开卡金额" prop="openCardAmount">
              <el-input v-model="form.openCardAmount" placeholder="0" maxlength="200"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="14">
            <el-form-item label="升级所需成长值" prop="growthValue">
              <el-input v-model="form.growthValue" placeholder="达到当前等级需要的成长值"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item label="会员降级规则" prop="relegateRuleType">
              <!--              <el-input v-model="form.growthValue" placeholder="达到当前等级需要的成长值"/>-->
              <div class="d-s">
                <div class="icon-type" v-for="(item,index) in useGradeList" :key="index"
                     :class="{ 'acvtive' : index === tindex5 }" @click="Typeindex5(index)">
                  <img src="../../assets/images/wx.png" style="width: 20px;height: 20px" v-if="index != tindex5">
                  <img src="../../assets/images/xz.png" style="width: 20px;height: 20px" v-if="index == tindex5">
                  {{ item }}
                </div>
                <img src="../../assets/images/tjb.png" style="width: 20px;height: 20px;cursor: pointer"
                     @click="addlsit()">
              </div>
              <div v-if="tindex5 == 0">
                <div v-for="(item,index) in amount" :key="index">
                  <div v-if="item.value == '选项1' " class="d-s" style="margin-bottom: 15px">
                    <el-input v-model="item.moon" placeholder="0" style="width: 100px"></el-input>
                    <div class="h-size">个月内，</div>
                    <el-select v-model="item.value" placeholder="指定消费金额" style="width: 200px">
                      <el-option
                        v-for="item in vptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                    <div class="h-size">未触达</div>
                    <el-input v-model="item.first" placeholder="0" style="width: 100px"></el-input>
                    <div class="h-size">元，降至</div>
                    <el-select v-model="item.grade" placeholder="请选择会员级别">
                      <el-option
                        v-for="item in gradeList"
                        :key="index"
                        :label="item.name"
                        :value="item.id">
                      </el-option>
                    </el-select>
                    <img src="../../assets/images/ljt.png" style="width: 25px;height: 25px;"
                         @click="deleteamount(index)">
                  </div>
                  <div v-if="item.value == '选项2' " class="d-s" style="margin-bottom: 15px">
                    <el-input v-model="item.moon" placeholder="0" style="width: 100px"></el-input>
                    <div class="h-size">个月内，</div>
                    <el-select v-model="item.value" placeholder="指定消费金额" style="width: 200px">
                      <el-option
                        v-for="item in vptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                    <div class="h-size">未触达</div>
                    <el-input v-model="item.first" placeholder="0" style="width: 100px"></el-input>
                    <div class="h-size">次，降至</div>
                    <el-select v-model="item.grade" placeholder="请选择会员级别">
                      <el-option
                        v-for="item in viplist"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                    <img src="../../assets/images/ljt.png" style="width: 25px;height: 25px;"
                         @click="deleteamount(index)">
                  </div>
                  <div v-if="item.value == '选项3' " class="d-s" style="margin-bottom: 5px">
                    <el-input v-model="item.moon" placeholder="0" style="width: 100px"></el-input>
                    <div class="h-size">个月内，</div>
                    <el-select v-model="item.value" placeholder="指定消费金额" style="width: 200px">
                      <el-option
                        v-for="item in vptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>

                    <div class="h-size" style="width: 35px">降至</div>
                    <el-select v-model="item.grade" placeholder="请选择会员级别">
                      <el-option
                        v-for="item in vptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                    <img src="../../assets/images/ljt.png" style="width: 25px;height: 25px;">
                  </div>
                </div>


              </div>
              <div v-if="tindex5 == 1" v-for="(item,index) in balance" :key="index">
                <div class="d-s" style="margin-bottom: 15px">
                  <el-select v-model="item.card" placeholder="指定消费金额" style="width: 200px">
                    <el-option
                      v-for="item in caedlist"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                  <div class="h-size" style="width: 160px">储值余额小于等于</div>
                  <el-input v-model="item.first" placeholder="0" style="width: 100px"></el-input>
                  <div class="h-size">元，降至</div>
                  <el-select v-model="item.grade" placeholder="请选择会员级别">
                    <el-option
                      v-for="item in vptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                  <img src="../../assets/images/ljt.png" style="width: 25px;height: 25px;" @click="deleteamount(index)">
                </div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="14">
            <el-form-item label="等级说明" prop="gradeIllustrate">
              <el-input v-model="form.gradeIllustrate" placeholder="请输入等级说明信息" type="textarea"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="14">
            <el-form-item label="会员权益" prop="userEquity">
              <el-input v-model="form.userEquity" placeholder="请输入会员权益信息" type="textarea"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="14">
            <el-form-item label="升级送积分" prop="givePoint">
              <el-input v-model="form.givePoint" placeholder="0">
                <template slot="append">积分</template>
              </el-input>
              <span
                style="font-size: 12px;color: grey">请设置升级该等级赠送的积分，不填写表示不赠送;降级时不送积分</span>
            </el-form-item>
          </el-col>
        </el-row>

      </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 :title="title" :visible.sync="open2" append-to-body width="42%">
      <el-form ref="form2" :model="form2" :rules="rules" label-width="120px">

        <el-form-item label="会员等级" prop="gradeId">
          <el-select v-model="form2.gradeId" placeholder="请选择会员等级" style="width: 100%">
            <el-option v-for="(item,index) in gradeList" :key="index" :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="可使用支付方式" prop="usePaymentWay">
          <el-checkbox-group v-model="form2.usePaymentWay">
            <el-checkbox
              v-for="dict in dict.type.payment_type"
              v-if="dict.value!='APPLET_CODE'"
              :key="dict.value"
              :label="dict.value"
              :value="dict.value">{{ dict.label }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="折扣" prop="discount">
          <el-input v-model="form2.discount" placeholder="0" maxlength="30">
            <template slot="append">折</template>
          </el-input>
        </el-form-item>
        <el-form-item label="最低消费金额" prop="consumeAmount">
          <el-input v-model="form2.consumeAmount" placeholder="0" maxlength="30">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>

        <el-form-item label="节假日是否通用" prop="holidayIsUse">
          <el-radio-group v-model="form2.holidayIsUse">
            <el-radio :label="'0'">可用</el-radio>
            <el-radio :label="'1'">不可用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="适用日期" prop="suitDateType">
          <div class="d-s">
            <el-radio-group v-model="form2.suitDateType">
              <el-radio :label="'0'">永久</el-radio>
              <el-radio :label="'1'">自定义</el-radio>
            </el-radio-group>

            <el-date-picker
              value-format="yyyy-MM-dd HH:mm:ss"
              v-model="form2.suitDateFront"
              style="width: 160px;margin-left: 10px;"
              type="date"
              placeholder="开始日期">
            </el-date-picker>
            <div style="margin: 0 10px;">至</div>
            <el-date-picker
              value-format="yyyy-MM-dd HH:mm:ss"
              v-model="form2.suitDateAfter"
              style="width: 160px"
              type="date"
              placeholder="结束日期">
            </el-date-picker>
          </div>
        </el-form-item>

        <el-form-item label="时间段设置" prop="availableOrUn">
          <el-radio-group v-model="form2.availableOrUn">
            <el-radio :label="'0'">适用时间段</el-radio>
            <el-radio :label="'1'">不可用时间段</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="form2.availableOrUn == '0'" label="适用时间段" prop="suitTimeSlotType">
          <div style="width: 100px;margin-top: 10px">
            <el-radio-group v-model="form2.suitTimeSlotType">
              <div style="display: flex; width: 500px;margin-bottom: 15px;">
                <el-radio :label="'1'">每周</el-radio>
                <el-checkbox-group v-model="weekDay" style="margin-left: 20px" :disabled="form2.suitTimeSlotType!='1'">
                  <el-checkbox v-for="(item,index) in weekList" :key="index" :label="item"></el-checkbox>
                </el-checkbox-group>
              </div>

              <el-radio :label="'2'">每月
                <el-select :disabled="form2.suitTimeSlotType!='2'" v-model="monthDay" placeholder="请选择每月固定日期" multiple
                           style="margin-left: 20px">
                  <el-option
                    v-for="item in 31"
                    :key="item+''"
                    :label="item+'日'"
                    :value="item+''">
                  </el-option>
                </el-select>
              </el-radio>
            </el-radio-group>
          </div>
          <div style="margin-top: 20px">
            <el-form-item label="时间段" prop="suitTimeSlotFront" label-width="70px">
              <el-time-picker
                v-model="form2.suitTimeSlotFront"
                format="HH:mm"
                value-format="HH:mm"
                placeholder="请选择开始时间点">
              </el-time-picker>
              至
              <el-time-picker
                v-model="form2.suitTimeSlotAfter"
                format="HH:mm"
                value-format="HH:mm"
                placeholder="请选择结束时间点">
              </el-time-picker>
            </el-form-item>
          </div>
        </el-form-item>
        <el-form-item v-else label="不适用时间段" prop="noUseTimeType">
          <div>
            <el-radio-group v-model="form2.noUseTimeType">
              <el-radio :label="'1'">每周
                <el-checkbox-group v-model="weekDay1" style="margin-left: 20px" :disabled="form2.noUseTimeType!='1'">
                  <el-checkbox v-for="(item,index) in weekList" :key="index" :label="item"></el-checkbox>
                </el-checkbox-group>
              </el-radio>
              <el-radio :label="'2'">每月
                <el-select :disabled="form2.noUseTimeType!='2'" v-model="monthDay1" placeholder="请选择每月固定日期" multiple
                           style="margin-left: 20px">
                  <el-option
                    v-for="item in 31"
                    :key="item+''"
                    :label="item+'日'"
                    :value="item+''">
                  </el-option>
                </el-select>
              </el-radio>
            </el-radio-group>
          </div>
          <div style="margin-top: 20px">
            <el-form-item label="时间段" prop="noUseTimeFront" label-width="70px">
              <el-time-picker
                v-model="form2.noUseTimeFront"
                format="HH:mm"
                value-format="HH:mm"
                placeholder="请选择开始时间点">
              </el-time-picker>
              至
              <el-time-picker
                v-model="form2.noUseTimeAfter"
                format="HH:mm"
                value-format="HH:mm"
                placeholder="请选择结束时间点">
              </el-time-picker>
            </el-form-item>
          </div>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm2">确 定</el-button>
        <el-button @click="cancel2">取 消</el-button>
      </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="tableData"
        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.discountType == 0">满减券</span>
            <span v-if="scope.row.discountType == 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="tableDatadh"
        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 {updateUserGradeStatus} from "@/api/userGrade";
import {
  addUserGrade,
  delUserGrade,
  getUserGrade,
  listUserGrade,
  queryUserGrade,
  updateUserGrade
} from "@/api/staff/user/usergrade";
import {getChainStoreConfig, updateChainStoreConfig} from "@/api/staff/user/chainstoreconfig";
import {getSysConfig} from "@/api/staff/user/sysconfig";
import {updateStoreRule} from "@/api/staff/store";
import {listExchange, listFavorable} from "@/api/EventMarketing/activeConsumption";
import {
  addUserDiscount,
  deleteUserDiscount,
  editUserDiscount,
  getUserDiscount,
  listUserDiscount
} from "@/api/userGroup/userDiscount";

export default {
  name: "UserGradeIndex",
  dicts: ['yhlx', 'zhzt', 'yhhdz', 'payment_type'],
  data() {
    return {
      vptions: [{
        value: '选项1',
        label: '指定消费金额'
      }, {
        value: '选项2',
        label: '指定消费次数'
      }, {
        value: '选项3',
        label: '无消费金额与次数'
      },],
      caedlist: [{
        value: '选项1',
        label: '储值卡'
      }, {
        value: '选项2',
        label: '囤油卡'
      }, {
        value: '选项3',
        label: '借记卡'
      },],
      viplist: [
        {
          value: '选项1',
          label: '青铜会员'
        }, {
          value: '选项2',
          label: '白银会员'
        },
      ],
      options: [{
        value: 1,
        label: 1
      }, {
        value: 10,
        label: 10
      }, {
        value: 100,
        label: 100
      }, {
        value: 1000,
        label: 1000
      }],
      value: '',
      tabindex: 0,
      tabs: [
        {
          name: "会员设置",
        },
        {
          name: "会员等级",
        },
        {
          name: "会员折扣",
        },
      ],
      tableDatas: [],//公共选择区域
      tableDatas1: [],//公共选择区域
      tableDatadh: [],//兑换券
      //请求优惠券列表时的参数
      youhuiquan: {
        name: '',
        pageNum: 1,
        pageSize: 10,
      },
      //请求兑换券列表时的参数
      duihuanquan: {
        name: '',
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      ytotal: 0,
      dtotal: 0,
      dialogTableVisible: false,
      dialogTableVisibledh: false,//兑换券
      tableData: [],
      level1: true,
      level2: false,
      // 是否开启等级功能
      isEnableLevel: "",
      chainStoreConfig: {
        isEnableLevel: "no"
      },
      // 优惠值
      gasolinePreferential: [
        {
          gasolineRule1: 1,
          gasolineRule2: 1,
          gasolineRule3: 1,
        }
      ],
      dieselPreferential: [
        {
          dieselRule1: 1,
          dieselRule2: 1,
          dieselRule3: 1,
        }
      ],
      naturalGasPreferential: [
        {
          naturalGas1: 1,
          naturalGas2: 1,
          naturalGas3: 1,
        }
      ],
      // 会员等级规则说明
      memberLevelRule: [],
      // 等级清算规则
      levelClearRule: [],
      // 成长值计算规则
      growthValueRule: [],
      // 汽油消费金额
      gasConsumeAmount: 0,
      // 汽油成长值
      gasGrowthValue: 0,
      // 柴油消费金额
      dieselConsumeAmount: 0,
      // 柴油成长值
      dieselGrowthValue: 0,
      // 天然气消费金额
      naturalConsumeAmount: 0,
      // 天然气成长值
      naturalGrowthValue: 0,
      // 会员充值消费金额
      rechargeConsumeAmount: 0,
      // 会员充值成长值
      rechargeGrowthValue: 0,
      clear: '',
      // 遮罩层
      loading: true,
      // 标题
      title: "",
      // 选中数组
      ids: [],
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      // 升级条件
      catchTypeList: [],
      // 是否显示弹出层
      open: false,
      form2: {
        availableOrUn: '0'
      },
      open2: false,
      gradeList: [],

      clearList: [
        {value: 'clear_month', label: '按月清算'},
        {value: 'clear_year', label: '按年清算'},
        {value: 'clear_no', label: '不清算'},
      ],
      tindex: 0,
      useGradeList: ["根据消费金额降级", "根据储值卡余额降级"],
      useTypeList: ["可用", "不可用"],
      tindex1: 0,
      dateTypeList: ["永久", "自定义"],
      tindex2: 0,
      weekMonthTypeList: ["每周", "每月"],
      tindex3: 0,
      tindex4: 0,
      tindex5: 0,
      weekList: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      weekDay: [],
      monthDay: [],
      weekDay1: [],
      monthDay1: [],

      // 等级开启信息
      map: {
        isEnableLevel: this.isEnableLevel,
        isMonthClear: this.clear,
      },
      // 默认排序
      defaultSort: {prop: 'createTime', order: 'descending'},
      // 表单参数
      form: {
        id: '', grade: "", name: '', gasoline: 1, dieselOil: 1, naturalGas: 1, preferential: '自定义优惠',
        gasolineDiscount: '无优惠', dieselDiscount: '无优惠', naturalGasDiscount: '无优惠', promotionGroup: '',
        // catchCondition: '', userPrivilege: '', catchType: '', catchValue: '', validDay: '',discount: '', speedPoint: '',
        status: 'qy',
        tableDatas: [],
      },
      // 查询参数
      queryParams: {
        page: 1,
        pageSize: 10,
        name: '',
        catchType: '',
        status: ''
      },
      amount: [],//金额数组
      balance: [],//余额数组
      pdidlist: [],//判断优惠券id
      pddhidlist: [],//判断兑换券id
      // 查询参数
      queryParams1: {
        page: 1,
        pageSize: 10,
      },
      beginTime1: "",
      endTime1: "",
      total1: 0,
      discountList: [],
      // 查询参数
      queryParams2: {
        page: 1,
        pageSize: 10,
      },
      beginTime2: "",
      endTime2: "",
      total2: 0,
      // 表单校验
      rules: {
        availableOrUn: [
          {required: true, message: "不能为空", trigger: "blur"},
        ],
        grade: [
          {required: true, message: "升降顺序不能为空", trigger: "blur"},
          {pattern: /^[0-9]{1,10}$/, message: `必须正整数`, trigger: 'blur'}
        ],
        name: [
          {required: true, message: "等级名称不能为空", trigger: "blur"},
        ],
        openCardAmount: [
          {required: true, message: "开卡金额不能为空", trigger: "blur"},
        ],
        growthValue: [
          {required: true, message: "请填写会员升级所需成长值", trigger: "blur"},
        ],
        relegateRuleType: [
          {required: true, message: "请选择会员降级规则", trigger: "blur"},
        ],
        gradeIllustrate: [
          {required: true, message: "等级说明不能为空", trigger: "blur"},
        ],
        userEquity: [
          {required: true, message: "会员权益不能为空", trigger: "blur"},
        ],
        ifRechargeCoupon: [
          {required: true, message: "请选择充值时是否赠送优惠券或兑换券", trigger: "blur"},
        ],
        gasoline: [
          {required: true, message: "请填写汽油成长值", trigger: "blur"},
        ],
        dieselOil: [
          {required: true, message: "请填写柴油成长值", trigger: "blur"},
        ],
        naturalGas: [
          {required: true, message: "请填写天然气成长值", trigger: "blur"},
        ],
        preferential: [
          {required: true, message: "请选择优惠类型", trigger: "blur"},
        ],
        status: [
          {required: true, message: "会员等级状态", trigger: "blur"},
        ],
        speedPoint: [
          {required: true, message: "请输入加分加速倍数", trigger: "blur"},
        ],


        gradeId: [
          {required: true, message: "请选择会员等级", trigger: "blur"},
        ],
        usePaymentWay: [
          {required: true, message: "请选择可使用支付方式", trigger: "blur"},
        ],
        discount: [
          {required: true, message: "请输入折扣", trigger: "blur"},
        ],
        consumeAmount: [
          {required: true, message: "请输入最低消费金额", trigger: "blur"},
        ],
        holidayIsUse: [
          {required: true, message: "请选择节假日是否通用", trigger: "blur"},
        ],
        suitDateType: [
          {
            validator: (rule, value, callback) => {
              console.log('走了', this.form2.suitDateType)
              if (this.form2.suitDateType == '1') {
                if (this.form2.suitDateFront == undefined) {
                  callback(new Error("请选择开始日期"))
                } else if (this.form2.suitDateAfter == undefined) {
                  callback(new Error("请选择结束日期"))
                } else {
                  callback();
                }
              } else {
                callback();
              }
            }
          },],
        suitTimeSlotType: [
          {required: true, message: "请选择适用时间段", trigger: "blur"},
        ],
        noUseTimeType: [
          {required: true, message: "请选择不适用时间段", trigger: "blur"},
        ],
        // suitTimeSlotFront: [
        //   {required: true, message: "请选择适用时间段", trigger: "blur"},
        // ],
        // 验证适用时间段的开始和结束时间
        suitTimeSlotFront: [
          {
            validator: (rule, value, callback) => {
              if (!this.form2.suitTimeSlotFront || !this.form2.suitTimeSlotAfter) {
                callback(new Error("请选择完整的适用时间段"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ],
        noUseDate: [
          {required: true, message: "请选择不适用时间段", trigger: "blur"},
        ],
        noUseTimeFront: [
          {required: true, message: "请选择不适用时间段", trigger: "blur"},
        ],
      }
    };
  },
  created() {
    // this.getList();
    this.getClearConfig();
    this.getRule();
    this.getISEnableLevel();
    if (this.$route.query.id) {
      this.getindex(2)
    }
  },
  methods: {
    getPayTypeStr(usePaymentWay) {
      //分割字符串
      let arr = usePaymentWay.split(",")
      //双循环 得到转义 并把返回的数据 拼接成字符串 返回
      for (let i = 0; i < arr.length; i++) {
        for (let j = 0; j < this.dict.type.payment_type.length; j++) {
          if (arr[i] == this.dict.type.payment_type[j].value) {
            arr[i] = this.dict.type.payment_type[j].label
          }
        }
      }
      return arr.join(",")
    },
    addlsit() {
      if (this.tindex5 == 0) {
        let obj = {
          moon: '',
          value: '选项1',
          first: '',
          grade: ''
        }
        this.amount.push(obj)
      }
      if (this.tindex5 == 1) {
        let obj = {
          card: '选项1',
          first: '',
          grade: ''
        }
        this.balance.push(obj)
      }

    },
    deleteamount(index) {
      if (this.tindex5 == 0) {
        this.amount.splice(index, 1);
      }
      if (this.tindex5 == 1) {
        this.balance.splice(index, 1);
      }

    },
    // 取消按钮
    cancel2() {
      this.open2 = false;
    },
    // 提交按钮
    submitForm2() {
      this.$refs["form2"].validate(id => {
        if (id) {
          this.form2.usePaymentWay = this.form2.usePaymentWay.toString()
          if (this.form2.suitTimeSlotType == 0) {
            this.form2.suitDate = this.weekDay.toString()
          } else {
            this.form2.suitDate = this.monthDay.toString()
          }
          if (this.form2.noUseTimeType == 0) {
            this.form2.noUseDate = this.weekDay1.toString()
          } else {
            this.form2.noUseDate = this.monthDay1.toString()
          }
          if (!this.form2.id) {
            addUserDiscount(this.form2).then(res => {
              this.$message.success("添加成功")
              this.open2 = false
              this.queryParams2.page = 1;
              this.getList2()
            })
          } else {
            editUserDiscount(this.form2).then(res => {
              this.$message.success("修改成功")
              this.open2 = false
              this.queryParams2.page = 1;
              this.getList2()
            })
          }
        }
      });
    },
    Typeindex(index, data) {
      this.tindex = index
      this.chainStoreConfig.isMonthClear = data.value
    },
    Typeindex1(index) {
      this.tindex1 = index
      this.form2.holidayIsUse = index
    },
    Typeindex2(index) {
      this.tindex2 = index
      this.form2.suitDateType = index
    },
    Typeindex3(index) {
      this.tindex3 = index
      this.form2.suitTimeSlotType = index
    },
    Typeindex4(index) {
      this.tindex4 = index
      this.form2.noUseTimeType = index
    },
    Typeindex5(index) {
      this.tindex5 = index
      this.form.relegateRuleType = index
    },
    // 搜索按钮操作
    handleQuery2() {
      this.queryParams2.page = 1;
      this.getList2();
    },
    // 重置按钮操作
    resetQuery2() {
      this.queryParams2 = {
        page: 1,
        pageSize: 10,
      }
      this.beginTime2 = ''
      this.endTime2 = ''
      this.handleQuery2();
    },
    handleAdd2() {
      this.form2 = {
        usePaymentWay: [],
        holidayIsUse: '0',
        suitDateType: '0',
        suitTimeSlotType: '0',
        noUseTimeType: '0',
        availableOrUn: '0'
      }
      this.weekDay = []
      this.monthDay = []
      this.weekDay1 = []
      this.monthDay1 = []
      this.open2 = true
      this.title = "新增折扣"
    },
    // 修改按钮操作
    handleUpdate2(row) {
      getUserDiscount(row.id).then(res => {
        this.open2 = true;
        this.form2 = res.data;
        if (res.data.suitDate) {
          if (res.data.suitTimeSlotType == 0) {
            this.weekDay = res.data.suitDate.split(",")
          } else if (res.data.suitTimeSlotType == 1) {
            this.monthDay = res.data.suitDate.split(",")
          }
        } else {
          this.monthDay = []
          this.weekDay = []
        }

        if (res.data.noUseDate) {
          if (res.data.noUseTimeType == 0) {
            this.weekDay1 = res.data.noUseDate.split(",")
          } else if (res.data.noUseTimeType == 1) {
            this.monthDay1 = res.data.noUseDate.split(",")
          }
        } else {
          this.monthDay1 = []
          this.weekDay1 = []
        }

        this.form2.usePaymentWay = res.data.usePaymentWay.split(",")
        this.tindex1 = res.data.holidayIsUse
        this.tindex2 = res.data.suitDateType
        this.tindex3 = res.data.suitTimeSlotType
        this.tindex4 = res.data.noUseTimeType
        this.title = "修改会员折扣"
      })
    },
    // 删除按钮操作
    handleDelete2(row) {
      const name = row.labelName || this.id;
      this.$modal.confirm('是否删除本条数据，删除后无法恢复！').then(function () {
        return deleteUserDiscount(row.id);
      }).then(() => {
        this.queryParams2.page = 1
        this.getList2();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    getList2() {
      let dateRange = []
      if (this.beginTime2 && this.endTime2) {
        dateRange.push(this.beginTime2.toLocaleDateString())
        dateRange.push(this.endTime2.toLocaleDateString())
      }
      listUserDiscount(this.addDateRange(this.queryParams2, dateRange)).then(res => {
        this.discountList = res.data.records
        this.total2 = res.data.total
      })

      listUserGrade({page: 1, pageSize: 1000}).then(response => {
        this.gradeList = response.data.records;
      })
    },
    // 搜索按钮操作
    handleQuery1() {
      this.queryParams1.page = 1;
      this.getList();
    },
    // 重置按钮操作
    resetQuery1() {
      this.queryParams1 = {
        page: 1,
        pageSize: 10,
      }
      this.beginTime1 = ''
      this.endTime1 = ''
      this.handleQuery2();
    },
    getindex(index) {
      this.tabindex = index
      if (index == 0) {
        this.getISEnableLevel()
      } else if (index == 1) {
        this.getList()
      } else if (index == 2) {
        this.getList2()
      }
    },
    // 兑换券删除
    deletedhdata(row) {
      if (this.tableDatas && this.tableDatas.length > 0) {
        let delIdx = -1;
        for (let item of this.tableDatas) {
          delIdx++;
          if (item.id === row.id) {
            break
          }
        }
        this.pddhidlist.splice(delIdx, 1);
        this.tableDatas.splice(delIdx, 1);


      }
    },
    // 请求兑换券
    getlistExchange() {
      this.tableDatadh = []
      listExchange(this.duihuanquan).then(res => {
        if (res.code == 200) {
          this.dialogTableVisibledh = true
          this.tableDatadh = 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 = {
        activeGift: 2, //充值赠送类型：1、赠送优惠券 2、赠送兑换券
        vouchersId: row.id, //券id
        giftCardName: row.name, //赠送卡券名称
        giftCardType: row.type, //券类型
        validityZero: null,
        validityOne: null,
        validityTwo: null,
        validity: row.validity,
        giftCardDetail: row.cardDetail, //券详情
        giftCardTime: row.validity, //券有效期
        giftCardTotal: 1, //券数量
        instruction: row.useInstructions, //使用说明
      }

      this.tableDatas.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 = {
        activeGift: 1, //充值赠送类型：1、赠送优惠券 2、赠送兑换券
        vouchersId: row.id, //券id
        giftCardName: row.name, //赠送卡券名称
        giftCardType: row.discountType, //券类型
        timeType: row.timeType,
        validityZero: row.validityZero,
        validityOne: row.validityOne,
        validityTwo: row.validityTwo,
        giftCardDetail: row.cardDetail, //券详情
        giftCardTime: "", //券有效期
        giftCardTotal: 1,//券数量
        instruction: row.instruction,//使用说明
      }

      this.tableDatas1.push(data)

      this.$message.success("新增成功")

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


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

      })
    },
    editChainStoreConfig() {
      updateChainStoreConfig(this.chainStoreConfig).then(res => {
        this.$message.success("修改成功")
        this.getISEnableLevel()
      })
    },
    // 是否开启等级功能
    getISEnableLevel() {
      getChainStoreConfig().then(response => {
        if (response.data) {
          this.chainStoreConfig = response.data
          if (response.data.isMonthClear == "clear_month") {
            this.tindex = 0
          } else if (response.data.isMonthClear == "clear_year") {
            this.tindex = 1
          } else if (response.data.isMonthClear == "clear_no") {
            this.tindex = 2
          }
          this.isEnableLevel = response.data.isEnableLevel;
          this.clear = response.data.isMonthClear;
          if (response.data.gasGrowthValue) {
            this.gasGrowthValue = response.data.gasGrowthValue;
          }
          if (response.data.dieselGrowthValue) {
            this.dieselGrowthValue = response.data.dieselGrowthValue;
          }
          if (response.data.naturalGrowthValue) {
            this.naturalGrowthValue = response.data.naturalGrowthValue;
          }
          if (response.data.isEnableLevel == "no") {
            this.level1 = true;
            this.level2 = false;
          } else {
            this.level1 = false;
            this.level2 = true;
          }
        }
      })
      // getSysConfig('is_enable_level').then(response => {
      //   this.isEnableLevel = response.data
      //   if (response.data=="no"){
      //     this.level1 = true;
      //     this.level2 = false;
      //   }else {
      //     this.level1 = false;
      //     this.level2 = true;
      //   }
      // });
    },
    isOpen() {
      if (this.level1) {
        this.editLevel2()
      } else {
        this.editLevel1()
      }
    },
    editLevel1() {
      this.map.isEnableLevel = "yes"
      this.map.isMonthClear = this.clear
      updateStoreRule(this.map).then(res => {
        this.level1 = false;
        this.level2 = true;
        this.$modal.msgSuccess("等级状态更新成功");
        this.getISEnableLevel();
      })
    },
    editLevel2() {
      this.map.isEnableLevel = "no"
      this.map.isMonthClear = this.clear
      updateStoreRule(this.map).then(res => {
        this.level1 = true;
        this.level2 = false;
        this.$modal.msgSuccess("等级状态更新成功");
        this.getISEnableLevel();
      })
    },
    addGasOline() {
      let temp = {
        gasolineRule1: 1,
        gasolineRule2: 1,
        gasolineRule3: 1,
      }
      this.gasolinePreferential.push(temp);
    },
    subGasOline(idx) {
      this.gasolinePreferential.splice(idx, 1);
    },
    addDiesel() {
      let temp = {
        dieselRule1: 1,
        dieselRule2: 1,
        dieselRule3: 1,
      }
      this.dieselPreferential.push(temp);
    },
    subDiesel(idx) {
      this.dieselPreferential.splice(idx, 1);
    },
    addNaturalGas() {
      let temp = {
        naturalGas1: 1,
        naturalGas2: 1,
        naturalGas3: 1,
      }
      this.naturalGasPreferential.push(temp);
    },
    subNaturalGas(idx) {
      this.naturalGasPreferential.splice(idx, 1);
    },
    // 获取规则信息
    getRule() {
      getSysConfig('member_level_rule').then(response => {
        this.memberLevelRule = response.data.split(";")
      });
      getSysConfig('level_clear_rule').then(response => {
        this.levelClearRule = response.data.split(";")
      });
      getSysConfig('growth_value_rule').then(response => {
        this.growthValueRule = response.data.split(";")
      });
    },
    // 查询连锁店配置信息
    getClearConfig() {
      getChainStoreConfig().then(response => {
        if (response.data) this.clear = response.data.levelClearRule;
      })
    },
    // 修改清算规则
    updateClearConfig() {
      this.map.isEnableLevel = this.isEnableLevel;
      this.map.isMonthClear = this.clear;
      updateStoreRule(this.map).then(response => {
        this.$modal.msgSuccess("修改成功");
        this.getISEnableLevel();
      });
    },
    // 查询列表
    getList() {
      this.loading = true;
      listUserGrade(this.queryParams).then(response => {
        this.list = response.data.records;
        this.total = response.data.total;
        this.loading = false;
      })
      listUserGrade({page: 1, pageSize: 1000}).then(response => {
        this.gradeList = response.data.records;
      })
    },
    // 搜索按钮操作
    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },
    // 重置按钮操作
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.$refs.tables.sort(this.defaultSort.prop, this.defaultSort.order)
      this.handleQuery();
    },
    // 状态修改
    handleStatusChange(row) {
      let text = row.status == "A" ? "启用" : "禁用";
      this.$modal.confirm('确认要' + text + '"' + row.name + '"吗？').then(function () {
        return updateUserGradeStatus(row.id, row.status);
      }).then(() => {
        this.$modal.msgSuccess(text + "成功");
      }).catch(function () {
        row.status = row.status === "N" ? "A" : "N";
      });
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.multiple = !selection.length
    },
    // 排序触发事件
    handleSortChange(column, prop, order) {
      this.queryParams.orderByColumn = column.prop;
      this.queryParams.isAsc = column.order;
      this.getList();
    },
    // 新增按钮操作
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "新增会员等级";
    },
    // 表单重置
    reset() {
      this.form = {
        id: '', grade: "", name: '', gasoline: 1, dieselOil: 1, naturalGas: 1, preferential: '自定义优惠',
        gasolineDiscount: '无优惠', dieselDiscount: '无优惠', naturalGasDiscount: '无优惠', promotionGroup: '',
        status: 'qy', relegateRuleType: 0
      };
      this.gasolinePreferential = [
        {
          gasolineRule1: 1,
          gasolineRule2: 1,
          gasolineRule3: 1,
        }
      ]
      this.dieselPreferential = [
        {
          dieselRule1: 1,
          dieselRule2: 1,
          dieselRule3: 1,
        }
      ]
      this.naturalGasPreferential = [
        {
          naturalGas1: 1,
          naturalGas2: 1,
          naturalGas3: 1,
        }
      ]
      this.amount = []
      this.balance = []
      this.resetForm("form");
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 提交按钮
    submitForm() {
      if (this.form.relegateRuleType == 0) {
        let flag = false;
        this.amount.forEach(item => {
          if (!item.moon || !item.first || !item.grade) {
            flag = true
          }
        })
        if (flag || this.amount.length == 0) {
          this.$message.error("请确保会员降级规则全部填写")
          return;
        }
      } else {
        let flag = false;
        this.balance.forEach(item => {
          if (!item.first || !item.grade) {
            flag = true
          }
        })
        if (flag || this.balance.length == 0) {
          this.$message.error("请确保会员降级规则全部填写")
          return;
        }
      }

      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.gasolineRule = JSON.stringify(this.gasolinePreferential)
          this.form.dieselRule = JSON.stringify(this.dieselPreferential)
          this.form.naturalGasRule = JSON.stringify(this.naturalGasPreferential)
          if (this.form.activeGift) this.form.activeGift = this.form.activeGift.toString()
          if (this.form.ifRechargeCoupon == 1) {
            this.form.mtUserGradeChildList = this.tableDatas.concat(this.tableDatas1);
          } else {
            this.form.mtUserGradeChildList = []
          }
          if (this.form.relegateRuleType == 0) {
            this.form.relegateRule = JSON.stringify(this.amount)
          } else {
            this.form.relegateRule = JSON.stringify(this.balance)
          }
          if (this.form.id) {
            updateUserGrade(this.form).then(response => {
              if (response.data == 1) {
                this.$modal.msgSuccess("修改成功");
                this.tableDatas1 = []
                this.tableDatas = []
                this.open = false;
                this.getList();
              } else if (response.data == 2) {
                this.$modal.msgError("修改失败，已存在当前等级的会员等级信息");
              } else if (response.data == 3) {
                this.$modal.msgError("修改失败，会员等级名称已存在");
              } else {
                this.$modal.msgError("修改失败，已存在当前成长值的会员等级");
              }
            });
          } else {
            queryUserGrade({name: this.form.name}).then(response => {
              if (response.data != null) {
                this.$modal.msgError("会员等级名称已存在");
              } else {
                addUserGrade(this.form).then(res => {
                  if (res.data == 1) {
                    this.$modal.msgSuccess("新增成功");
                    this.open = false;
                    this.tableDatas1 = []
                    this.tableDatas = []
                    this.getList();
                  } else if (res.data == 0) {
                    this.$modal.msgError("新增失败，最多支持20个等级");
                  } else {
                    this.$modal.msgError("新增失败，已存在当前等级的会员等级信息");
                  }
                });
              }
            })
          }
        }
      });
    },
    // 修改按钮操作
    handleUpdate(row) {
      let _this = this;
      this.reset();
      const id = row.id || this.ids;
      this.tableDatas1 = []
      this.tableDatas = []
      getUserGrade(id).then(response => {
        _this.form = response.data;
        this.gasolinePreferential = JSON.parse(this.form.gasolineRule)
        this.dieselPreferential = JSON.parse(this.form.dieselRule)
        this.naturalGasPreferential = JSON.parse(this.form.naturalGasRule)
        if (response.data.activeGift) {
          _this.form.activeGift = response.data.activeGift.split(",")
        } else {
          _this.form.activeGift = []
        }
        if (response.data.mtUserGradeChildList.length > 0) {
          response.data.mtUserGradeChildList.forEach(item => {
            if (item.activeGift == '1') {
              this.tableDatas1.push(item)
            }
            if (item.activeGift == '2') {
              this.tableDatas.push(item)
            }
          })
        }
        if (response.data.relegateRule) {
          if (response.data.relegateRuleType == 0) {
            this.amount = JSON.parse(response.data.relegateRule)
          } else if (response.data.relegateRuleType == 1) {
            this.balance = JSON.parse(response.data.relegateRule)
          }
        }
        this.open = true;
        this.title = "编辑会员等级";
      });
    },
    // 删除按钮操作
    handleDelete(row) {
      const name = row.name
      this.$modal.confirm('是否确认删除"' + name + '"的数据项？').then(function () {
        // return deleteUserGrade(row.id);
        return delUserGrade(row.id);
      }).then(() => {
        this.queryParams.page = 1
        this.$modal.msgSuccess("删除成功");
        this.getList();
      }).catch(() => {
      });
    }
  }
};
</script>

<style scoped lang="scss">
.kuang {
  color: #FF9655;
  background-color: #fff0e7;
  border-radius: 20px;
  margin: 5px;
  font-size: 12px;
  padding: 5px 20px;
}

.levelBorder {
  width: 3px;
  height: 20px;
  background: #FF9655;
  border-radius: 3px;
  margin-right: 10px;
}

.app-container {
  background: #f5f7f8;
  width: 100%;
  height: 100vh;
  padding: 0;
}

.box-bt {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
}

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

.tab-box {
  width: 100%;
  height: 40px;
  background: #fff;
  display: flex;
  box-sizing: border-box;
  margin-bottom: 25px;

}

.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;
}

.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;
}

.acvtive {
  color: #FF770F !important;
}

.czz {
  height: 50px;
  line-height: 50px;
  margin-top: 15px;
}

.czzbl {
  margin-left: 10px;
  margin-right: 10px;
}

.h-size {
  width: 90px;
}
</style>
