<template>
  <!-- 基本设置 -->
  <el-form ref="formRef" :model="form" :rules="rules" label-width="150px">
    <el-form-item label="开启积分">
      <div class="center">
        <el-switch v-model="form.enableRewards" :active-value="1" :inactive-value="0" />
        <span class="tips">开启后，所有用户可通过消费获得积分及可用积分抵扣支付</span>
      </div>
    </el-form-item>
    <!-- <el-form-item label="适用群体">
      <el-radio-group v-model="form.rewardsGroup">
        <el-radio label="全部" value="all" />
        <el-radio label="仅会员" value="vip" />
      </el-radio-group>
    </el-form-item> -->
    <el-form-item label="消费送积分" prop="consumeAmount">
      <el-col :span="7">
        <el-input v-model="form.consumeAmount" :maxlength="8" @input="e => form.consumeAmount = filterNumberInput(e)"
          :input-style="{ textAlign: 'center' }">
          <template #prepend>每消费</template>
          <template #append>元赠送1积分</template>
        </el-input>
      </el-col>
    </el-form-item>
    <!-- <el-form-item label="开启下单积分抵扣">
      <el-switch v-model="form.enableDeduction" :active-value="1" :inactive-value="0" />
    </el-form-item>
    <el-form-item label="适用群体">
      <el-radio-group v-model="form.deductionGroup">
        <el-radio label="全部" value="all" />
        <el-radio label="仅会员" value="vip" />
      </el-radio-group>
    </el-form-item> -->
    <el-form-item label="下单实付抵扣门槛" prop="minPaymentAmount">
      <el-input v-model="form.minPaymentAmount" :maxlength="8"
        @input="e => form.minPaymentAmount = filterNumberInput(e)" style="width: 150px;">
        <template #append>元</template>
      </el-input>
    </el-form-item>
    <el-form-item label="下单最高抵扣比例" prop="maxDeductionRatio">
      <el-input-number v-model="form.maxDeductionRatio" :min="1" :max="100"
        @blur="maxDeductionRatioBlur"></el-input-number>
      <span class="u-m-l-10 color-999">%</span>
    </el-form-item>
    <el-form-item label="下单抵扣积分比例" prop="equivalentPoints">
      <el-col :span="7">
        <span class="color-999">1元等于</span>
        <el-input-number class="u-m-l-10 u-m-r-10" v-model="form.equivalentPoints" :min="1"
          @blur="equivalentPointsBlur"></el-input-number>
        <span class="color-999">积分</span>
      </el-col>
    </el-form-item>
    <div class="form_header">开启积分商城</div>
    <el-form-item label="开启积分商城">
      <el-switch v-model="form.enablePointsMall" :active-value="1" :inactive-value="0" />
    </el-form-item>
    <!-- <el-form-item label="显示样式">
      <div class="style_wrap">
        <div class="item style1" :class="{ active: form.browseMode == 'list' }" @click="form.browseMode = 'list'">
          <div class="row">
            <div class="cover"></div>
            <div class="info">
              <div class="line"></div>
              <div class="line"></div>
              <div class="line"></div>
            </div>
          </div>
          <div class="row">
            <div class="cover"></div>
            <div class="info">
              <div class="line"></div>
              <div class="line"></div>
              <div class="line"></div>
            </div>
          </div>
        </div>
        <div class="item style2" :class="{ active: form.browseMode == 'grid' }" @click="form.browseMode = 'grid'">
          <div class="row">
            <div class="cover"></div>
            <div class="line"></div>
          </div>
          <div class="row">
            <div class="cover"></div>
            <div class="line"></div>
          </div>
          <div class="row">
            <div class="cover"></div>
            <div class="line"></div>
          </div>
          <div class="row">
            <div class="cover"></div>
            <div class="line"></div>
          </div>
        </div>
      </div>
    </el-form-item> -->
    <el-form-item>
      <el-button type="primary" :loading="loading" @click="onSubmit">保存</el-button>
      <el-button :loading="loading" @click="router.back()">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref } from "vue";
import { pointsConfigGet, pointsConfigPost } from '@/api/points'
import { filterNumberInput } from '@/utils'
import { useRouter } from 'vue-router'

const router = useRouter()

const formObj = ref({
  enableRewards: 0,       // 开启消费赠送积分 1-开启 0-关闭 开启后，所有用户可通过消费获得积分及可用积分抵扣支付
  consumeAmount: '',      // 每消费xx元赠送1积分
  minPaymentAmount: '',   // 下单实付抵扣门槛
  maxDeductionRatio: 100,  // 下单最高抵扣比例
  equivalentPoints: 1,   // 下单抵扣积分比例 1元=?积分
  enablePointsMall: 0,   // 开启积分商城
})

const form = ref({});

const rules = ref({
  consumeAmount: [
    {
      required: true,
      validator: (rule, value, callback) => {
        if (form.value.consumeAmount === '') {
          callback(new Error('请输入'))
        } else {
          callback()
        }
      },
      triiger: 'blur'
    }
  ],
  minPaymentAmount: [
    {
      required: true,
      validator: (rule, value, callback) => {
        if (form.value.minPaymentAmount === '') {
          callback(new Error('请输入'))
        } else {
          callback()
        }
      },
      triiger: 'blur'
    }
  ],
  maxDeductionRatio: [
    {
      required: true,
      validator: (rule, value, callback) => {
        if (form.value.maxDeductionRatio == '') {
          callback(new Error('请输入'))
        } else {
          callback()
        }
      },
      triiger: 'blur'
    }
  ],
  equivalentPoints: [
    {
      required: true,
      validator: (rule, value, callback) => {
        if (form.value.equivalentPoints == '') {
          callback(new Error('请输入'))
        } else {
          callback()
        }
      },
      triiger: 'blur'
    }
  ]
})

function maxDeductionRatioBlur() {
  if (!form.value.maxDeductionRatio) {
    form.value.maxDeductionRatio = 1
  }
}

function equivalentPointsBlur() {
  if (!form.value.equivalentPoints) {
    form.value.equivalentPoints = 1
  }
}

// 积分:配置:详情
async function pointsConfigGetAjax() {
  const res = await pointsConfigGet();
  if (res.data !== null) {
    form.value = res
    // formRef.value.clearValidate('consumeAmount');
    // formRef.value.clearValidate('minPaymentAmount');
  } else {
    form.value = { ...formObj.value }
  }
}

const formRef = ref(null)
const loading = ref(false)
function onSubmit() {
  formRef.value.validate(async vaild => {
    try {
      if (vaild) {
        loading.value = true
        await pointsConfigPost(form.value);
        ElMessage({
          message: "保存成功",
          type: "success",
        });
      }
    } catch (error) {
      console.log(error);
    }
    setTimeout(() => {
      loading.value = false
    }, 500);
  })
}

onMounted(() => {
  pointsConfigGetAjax();
});
</script>

<style scoped lang="scss">
.center {
  display: flex;
  align-items: center;
  gap: 10px;

  .tips {
    color: #666;
    font-size: 14px;
  }
}

.form_header {
  padding: 14px;
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #333;
  background-color: #F8F8F8;
  margin-bottom: 14px;
}

.style_wrap {
  display: flex;
  width: 350px;
  gap: 50px;

  .item {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    $color: #3f9eff;

    &:hover {
      cursor: pointer;
    }

    &.active {
      border-color: $color;
    }

    .cover {
      background-color: $color;
    }

    .line {
      background-color: #d9d9d9;
    }

    &.style1 {
      display: flex;
      flex-direction: column;
      gap: 20px;

      .row {
        flex: 1;
        display: flex;

        .cover {
          width: 40px;
          height: 40px;
        }

        .info {
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 6px;
          padding-left: 10px;

          .line {
            flex: 1;

            &:nth-child(1) {
              width: 80%;
              flex: 2;
            }

            &:nth-child(3) {
              width: 50%;
            }
          }
        }
      }
    }

    &.style2 {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, 1fr);
      grid-column-gap: 10px;
      grid-row-gap: 10px;

      .row:nth-child(1) {
        grid-area: 1 / 1 / 2 / 2;
      }

      .row:nth-child(2) {
        grid-area: 1 / 2 / 2 / 3;
      }

      .row:nth-child(3) {
        grid-area: 2 / 1 / 3 / 2;
      }

      .row:nth-child(4) {
        grid-area: 2 / 2 / 3 / 3;
      }

      .row {
        display: flex;
        flex-direction: column;

        .cover {
          flex: 1;
        }

        .line {
          height: 4px;
          margin-top: 4px;
        }
      }
    }
  }
}
</style>