<template>
  <div class="abnormal-setting-page-box" v-loading="load">
    <div class="abnormal-setting-page">
      <el-alert
        :title="'配置/修改“异常规则”后（仅调整“是否自动冻结”配置，不算作“修改异常规则”），次日【异常会员】列表将全量更新，系统会根据最新的异常规则来判断“异常会员”并展示在列表中；\r\n若未修改配置，列表不会更新。也即如被判定为异常会员，该会员会一直存在于异常会员列表中，即使后续该会员情况发生改变不符合异常规则。'"
        type="info"
        show-icon
        :closable="false"
      />
      <el-form
        :model="formData"
        class="submit-form"
        label-width="170px"
        label-position="right"
        ref="submitForm"
      >
        <el-form-item
          label="会员被系统判断“异常”后，是否自动冻结其会员卡："
          label-width="334px"
        >
          <el-radio-group v-model="submitData.frozen">
            <el-radio :label="2">是</el-radio>
            <el-radio :label="1">否</el-radio>
          </el-radio-group>
          <span class="tips points" style="margin-left: 20px"
            >被冻结了会员卡的客户无法在小程序端进行积分兑换、卡券使用、线上签到等操作......详情请查看
          </span>
          <a
            class="tips light"
            href="https://www.yuque.com/exnmlu/hpbb1c/oux5od"
            target="_blank"
            >冻结会员说明</a
          >
        </el-form-item>
        <div class="dashed-line"></div>
        <dm-sub-title text="所有门店" />
        <div class="tips">
          订单范围：最近一年，判断客户在所有门店的线下订单情况。例如客户连续两月的有效订单笔数/订单金额达到X笔/元
        </div>
        <el-form-item class="cell-item" label="按“单日/周/月/年”配置：">
          <div>
            <el-form-item
              v-for="(item, index) in formData.configs[0].list"
              :key="index"
            >
              <el-checkbox
                :label="item.name"
                v-model="item.checked"
              ></el-checkbox>
              <div style="margin-left: 27px" v-if="item.checked">
                <el-form-item style="padding: 10px 0" prop="">
                  <el-checkbox v-model="item.count.checked" @change="change">
                    <el-row type="flex" align="middle">
                      <span>有效订单大于等于</span>
                      <el-form-item
                        class="input-form-item"
                        :rules="{
                          required: item.checked && item.count.checked,
                          message: '有效订单数不能为空',
                        }"
                        :prop="'configs[0].list[' + index + '].count.value'"
                      >
                        <abnormal-number-input
                          v-bind.sync="item.count"
                          class="count-input"
                        />
                      </el-form-item>
                      <span>笔</span>
                    </el-row>
                  </el-checkbox>
                </el-form-item>

                <el-form-item style="padding: 10px 0">
                  <el-checkbox v-model="item.amount.checked" @change="change">
                    <el-row type="flex" align="middle">
                      <span>订单金额大于等于</span>
                      <el-form-item
                        class="input-form-item"
                        :rules="{
                          required: item.checked && item.amount.checked,
                          message: '订单金额不能为空',
                        }"
                        :prop="'configs[0].list[' + index + '].amount.value'"
                      >
                        <abnormal-number-input
                          v-bind.sync="item.amount"
                          class="amount-input"
                        />
                      </el-form-item>
                      <span>元</span>
                    </el-row>
                  </el-checkbox>
                  <div class="el-form-item__error" v-if="haveClickSave && item.checked && !item.count.checked && !item.amount.checked">请完善此表单</div>
                </el-form-item>
              </div>
            </el-form-item>
          </div>
        </el-form-item>

        <el-form-item class="cell-item" label="按“周连续”消费配置：">
          <div>
            <el-row type="flex" align="middle" style="padding: 0px 0px 10px">
              <span>连续</span>
              <el-form-item
                class="input-form-item"
                :rules="{
                  required: formData.configs[1].count.checked || formData.configs[1].amount.checked,
                  message: '连续周不能为空',
                }"
                :prop="'configs[1].setting.value'"
              >
                <abnormal-number-input
                  v-bind.sync="formData.configs[1].setting"
                  class="count-input"
                />
              </el-form-item>
              <span>周</span>
            </el-row>

            <el-form-item style="padding: 10px 0">
              <el-checkbox v-model="formData.configs[1].count.checked" @change="change">
                <el-row type="flex" align="middle">
                  <span>每周有效订单大于等于</span>
                  <el-form-item
                    class="input-form-item"
                    :rules="{
                      required: formData.configs[1].count.checked,
                      message: '每周有效订单数不能为空',
                    }"
                    :prop="'configs[1].count.value'"
                  >
                    <abnormal-number-input
                      v-bind.sync="formData.configs[1].count"
                      class="count-input"
                    />
                  </el-form-item>
                  <span>笔</span>
                </el-row>
              </el-checkbox>
            </el-form-item>

            <el-form-item style="padding: 10px 0 0">
              <el-checkbox v-model="formData.configs[1].amount.checked" @change="change">
                <el-row type="flex" align="middle">
                  <span>每周订单金额大于等于</span>
                  <el-form-item
                    class="input-form-item"
                    :rules="{
                      required: formData.configs[1].amount.checked,
                      message: '每周订单金额不能为空',
                    }"
                    :prop="'configs[1].amount.value'"
                  >
                    <abnormal-number-input
                      v-bind.sync="formData.configs[1].amount"
                      class="amount-input"
                    />
                  </el-form-item>
                  <span>元</span>
                </el-row>
              </el-checkbox>
              <div class="el-form-item__error" v-if="haveClickSave && formData.configs[1].setting.value && !formData.configs[1].count.checked && !formData.configs[1].amount.checked">请完善此表单</div>
            </el-form-item>
          </div>
        </el-form-item>

        <el-form-item class="cell-item" label="按“月连续”消费配置：">
          <div>
            <el-row type="flex" align="middle" style="padding: 0px 0px 10px">
              <span>连续</span>
              <el-form-item
                class="input-form-item"
                :rules="{
                  required:
                    formData.configs[2].count.checked ||
                    formData.configs[2].amount.checked,
                  message: '连续月数不能为空',
                }"
                :prop="'configs[2].setting.value'"
              >
                <abnormal-number-input
                  v-bind.sync="formData.configs[2].setting"
                  class="count-input"
                />
              </el-form-item>
              <span>个月</span>
            </el-row>

            <el-form-item style="padding: 10px 0">
              <el-checkbox v-model="formData.configs[2].count.checked" @change="change">
                <el-row type="flex" align="middle">
                  <span>每月有效订单大于等于</span>
                  <el-form-item
                    class="input-form-item"
                    :rules="{
                      required: formData.configs[2].count.checked,
                      message: '每月有效订单数不能为空',
                    }"
                    :prop="'configs[2].count.value'"
                  >
                    <abnormal-number-input
                      v-bind.sync="formData.configs[2].count"
                      class="count-input"
                    />
                  </el-form-item>
                  <span>笔</span>
                </el-row>
              </el-checkbox>
            </el-form-item>

            <el-form-item style="padding: 10px 0 0">
              <el-checkbox v-model="formData.configs[2].amount.checked" @change="change">
                <el-row type="flex" align="middle">
                  <span>每月订单金额大于等于</span>
                  <el-form-item
                    class="input-form-item"
                    :rules="{
                      required: formData.configs[2].amount.checked,
                      message: '每月订单金额不能为空',
                    }"
                    :prop="'configs[2].amount.value'"
                  >
                    <abnormal-number-input
                      v-bind.sync="formData.configs[2].amount"
                      class="amount-input"
                    />
                  </el-form-item>
                  <span>元</span>
                </el-row>
              </el-checkbox>              
              <div class="el-form-item__error" v-if="haveClickSave && formData.configs[2].setting.value && !formData.configs[2].count.checked && !formData.configs[2].amount.checked">请完善此表单</div>
            </el-form-item>
          </div>
        </el-form-item>

        <el-form-item class="cell-item" label="按“商品购买情况”配置：">
          <div>
            <el-checkbox v-model="formData.configs[3].checked" @change="change">
              <el-row type="flex" align="middle">
                <span>单笔订单中同一SPU不同SKU购买大于等于</span>
                <el-form-item
                  class="input-form-item"
                  :rules="{
                    required: formData.configs[3].checked,
                    message: 'SKU购买数不能为空',
                  }"
                  :prop="'configs[3].goodsCount.value'"
                >
                  <abnormal-number-input
                    v-bind.sync="formData.configs[3].goodsCount"
                    class="count-input"
                  />
                </el-form-item>
                <span>件，满足情况的订单大于等于</span>
                <el-form-item
                  class="input-form-item"
                  :rules="{
                    required: formData.configs[3].checked,
                    message: '订单数不能为空',
                  }"
                  :prop="'configs[3].orderCount.value'"
                >
                  <abnormal-number-input
                    v-bind.sync="formData.configs[3].orderCount"
                    class="count-input"
                  />
                </el-form-item>

                <span>笔</span>
              </el-row>
            </el-checkbox>
          </div>
        </el-form-item>

        <dm-sub-title text="单店" />
        <div class="tips">
          订单范围：最近一年
          ，判断客户在单独某一门家店下的订单情况。例如客户在A门店这单独一家店的月有效订单/订单金额达到X笔/元。
        </div>

        <el-form-item class="cell-item" label="按“有效订单”配置：">
          <div>
            <el-form-item class="form-item-cell" v-for="(item,index) in formData.configs[4].list" :key="item">
              <el-checkbox v-model="item.checked" @change="change">
                <el-row type="flex" align="middle">
                  <span>{{ item.name }}有效订单大于等于 </span>
                  <el-form-item
                    class="input-form-item"
                    :rules="{
                      required: item.checked,
                      message: `${ item.name }有效订单数不能为空`,
                    }"
                    :prop="`configs[4].list[${ index }].value`"
                  >
                    <abnormal-number-input
                      v-bind.sync="item"
                      class="count-input"
                    />
                  </el-form-item>
                  <span> 笔</span>
                </el-row>
              </el-checkbox>
            </el-form-item>
          </div>
        </el-form-item>

        <el-form-item class="cell-item" label="按“订单金额”配置：">
          <div>
            <el-form-item class="form-item-cell" v-for="(item,index) in formData.configs[5].list" :key="item">
              <el-checkbox v-model="item.checked" @change="change">
                <el-row type="flex" align="middle">
                  <span>{{ item.name }}订单金额大于等于 </span>
                  <el-form-item
                    class="input-form-item"
                    :rules="{

                      required: item.checked,
                      message: `${ item.name }订单金额不能为空`,
                    }"
                    :prop="`configs[5].list[${ index }].value`"
                  >
                    <abnormal-number-input
                      v-bind.sync="item"
                      class="count-input"
                    />
                  </el-form-item>
                  <span> 元</span>
                </el-row>
              </el-checkbox>
            </el-form-item>

          </div>
        </el-form-item>
      </el-form>
    </div>
    <el-row type="flex" class="page-bottom" justify="center" align="middle">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="save"
        :loading="isSave"
        >保存</el-button
      >
    </el-row>
  </div>
</template>

<script src="./abnormal-setting.js"></script>
<style lang="less" scoped src="./abnormal-setting.less"></style>

