<template>
  <!-- 基本设置 -->
  <el-form :model="Elform" label-width="150px">
    <el-form-item label="是否消费赠送积分">
      <el-switch v-model="Elform.enableRewards" :active-value="1" :inactive-value="0" />
    </el-form-item>
    <el-form-item label="适用群体">
      <el-radio-group v-model="Elform.rewardsGroup">
        <el-radio label="全部" value="all" />
        <el-radio label="仅会员" value="vip" />
      </el-radio-group>
    </el-form-item>
    <el-form-item label="消费赠送积分">
      <el-col :span="7">
        <el-input v-model="Elform.consumeAmount" type="number" placeholder="">
          <template #prepend>每消费</template>
          <template #append>元赠送1积分</template>
        </el-input>
      </el-col>
    </el-form-item>
    <el-form-item label="开启下单积分抵扣">
      <el-switch v-model="Elform.enableDeduction" :active-value="1" :inactive-value="0" />
    </el-form-item>
    <el-form-item label="适用群体">
      <el-radio-group v-model="Elform.deductionGroup">
        <el-radio label="全部" value="all" />
        <el-radio label="仅会员" value="vip" />
      </el-radio-group>
    </el-form-item>
    <el-form-item label="下单实付抵扣门槛">
      <el-col :span="3">
        <el-input v-model="Elform.minPaymentAmount" type="number" placeholder="">
          <template #append>元</template>
        </el-input>
      </el-col>
    </el-form-item>
    <el-form-item label="下单最高抵扣比例">
      <el-input-number
        v-model="Elform.maxDeductionRatio"
        type="number"
        placeholder=""
        :min="0"
        :max="100"
      ></el-input-number>
      <span class="u-m-l-10 color-999">%</span>
    </el-form-item>
    <el-form-item label="下单抵扣积分比例">
      <el-col :span="7">
        <span class="color-999">1元等于</span>
        <el-input-number
          class="u-m-l-10 u-m-r-10"
          v-model="Elform.equivalentPoints"
          type="number"
          placeholder=""
          min="1"
        ></el-input-number>
        <span class="color-999">积分</span>
      </el-col>
    </el-form-item>
    <el-form-item label="开启积分商城">
      <el-switch v-model="Elform.enablePointsMall" :active-value="1" :inactive-value="0" />
    </el-form-item>
    <el-form-item label="显示样式">
      <div class="style_wrap">
        <div
          class="item style1"
          :class="{ active: Elform.browseMode == 'list' }"
          @click="Elform.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: Elform.browseMode == 'grid' }"
          @click="Elform.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" @click="onSubmit">确定</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { reactive } from "vue";
import API from "../index";
// do not use same name with ref
const Elform = reactive({
  enableRewards: 0,
  rewardsGroup: "all",
  consumeAmount: 0,
  enableDeduction: 0,
  deductionGroup: "all",
  minPaymentAmount: 0,
  maxDeductionRatio: 0,
  equivalentPoints: 0,
  enablePointsMall: 0,
  browseMode: "list",
});
onMounted(() => {
  getList();
});
async function getList() {
  const res = await API.getBasicSetting({});
  Object.assign(Elform, res);
}
async function onSubmit() {
  const res = await API.BasicSettingadd(Elform);
  if (res.code == 200) {
    ElMessage({
      message: "成功",
      type: "success",
    });
  }
}
</script>

<style scoped lang="scss">
.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>