<template>
  <el-main class="recharge-config">
    <div class="box sa-flex sa-col-bottom">
      <div class="title">充值配置</div>
      <div class="line"></div>
    </div>
    <el-form ref="formRef" :model="form.model" :rules="form.rules" label-width="144px">
      <template v-if="form.model.recharge">
        <el-form-item label="开启充值">
          <div>
            <div class="sa-flex sa-m-r-32">
              <el-switch
                v-model="form.model.recharge.status"
                class="sa-m-r-8"
                :active-value="1"
                :inactive-value="0"
              />
              <div v-if="form.model.recharge.status == 1" class="openswitch"> 开启 </div>
              <div v-if="form.model.recharge.status == 0">关闭</div>
            </div>
            <div class="warning-title sa-m-t-4">
              <div> 请确保支付方式的支付参数配置好，并且在对应的应用平台开启 </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="充值方式">
          <el-checkbox-group v-model="form.model.recharge.methods">
            <el-checkbox label="wechat">微信支付</el-checkbox>
            <el-checkbox label="alipay">支付宝</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="自定义充值">
          <el-radio-group v-model="form.model.recharge.custom_status">
            <el-radio :label="1">显示</el-radio>
            <el-radio :label="0">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="赠送类型">
          <el-radio-group v-model="form.model.recharge.gift_type">
            <el-radio label="money">余额</el-radio>
            <el-radio label="score">积分</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="快捷充值金额">
          <div class="sa-template-content sa-template-form">
            <div class="header sa-flex">
              <div class="item">充值金额</div>
              <div class="item">
                {{ form.model.recharge.gift_type == 'money' ? '赠送金额' : '赠送积分' }}
              </div>
              <div class="oper">操作</div>
            </div>
            <sa-draggable
              v-model="form.model.recharge.quick_amounts"
              :animation="300"
              handle=".sortable-drag"
              item-key="element"
            >
              <template #item="{ element, index }">
                <div class="list sa-flex">
                  <el-form-item
                    class="item"
                    :prop="`recharge.quick_amounts.${index}.money`"
                    :rules="form.rules.recharge.quick_amounts.money"
                  >
                    <el-input
                      v-model="element.money"
                      type="number"
                      :min="0"
                      placeholder="请输入金额"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    class="item"
                    :prop="`recharge.quick_amounts.${index}.gift`"
                    :rules="form.rules.recharge.quick_amounts.gift"
                  >
                    <el-input
                      v-model="element.gift"
                      type="number"
                      :min="0"
                      placeholder="请输入金额"
                    ></el-input>
                  </el-form-item>
                  <div class="oper">
                    <div class="remove" @click="deleteTemplate(index)"> 移除 </div>
                    <sa-svg class="sa-m-l-8 sortable-drag" name="sa-round"></sa-svg>
                  </div>
                </div>
              </template>
            </sa-draggable>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button class="sa-m-l-12" icon="Plus" @click="addTemplate">追加</el-button>
        </el-form-item>
      </template>

      <div class="box sa-flex sa-col-bottom">
        <div class="title">提现配置</div>
        <div class="line"></div>
      </div>
      <template v-if="form.model.withdraw">
        <el-form-item label="提现方式">
          <el-checkbox-group v-model="form.model.withdraw.methods">
            <el-checkbox label="wechat">到微信零钱</el-checkbox>
            <el-checkbox label="alipay">到支付宝账户</el-checkbox>
            <el-checkbox label="bank">银行卡转账/线下打款</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="自动到账">
          <div>
            <div class="sa-flex sa-m-r-32">
              <el-switch
                v-model="form.model.withdraw.auto_arrival"
                class="sa-m-r-8"
                :active-value="1"
                :inactive-value="0"
              />
              <div v-if="form.model.withdraw.auto_arrival == 1" class="openswitch"> 开启 </div>
              <div v-if="form.model.withdraw.auto_arrival == 0">关闭</div>
            </div>
            <div class="warning-title sa-m-t-4">
              <div>
                开启后用户提现到
                <strong>微信零钱/支付宝</strong>
                将自动审核通过并且自动打款，手动打款不受开关影响
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="手续费" prop="withdraw.charge_rate">
          <el-input
            v-model="form.model.withdraw.charge_rate"
            type="number"
            :min="0"
            placeholder="请输入手续费"
          >
            <template #append>%</template>
          </el-input>
        </el-form-item>
        <el-form-item label="单次最小提现金额" prop="withdraw.min_amount">
          <el-input
            v-model="form.model.withdraw.min_amount"
            placeholder="请输入单次最小提现金额"
            type="number"
          >
            <template #append>元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="单次最大提现金额" prop="withdraw.max_amount">
          <el-input
            v-model="form.model.withdraw.max_amount"
            placeholder="请输入单次最大提现金额"
            type="number"
          >
            <template #append>元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="最多提现次数" prop="withdraw.max_num">
          <el-input
            v-model="form.model.withdraw.max_num"
            placeholder="请输入最多提现次数"
            type="number"
          >
            <template #prepend>
              <el-select
                v-model="form.model.withdraw.num_unit"
                placeholder="选择次数"
                style="width: 80px"
              >
                <el-option label="每日" value="day" />
                <el-option label="每月" value="month" />
              </el-select>
            </template>
            <template #append>次</template>
          </el-input>
        </el-form-item>
      </template>
    </el-form>
  </el-main>
  <el-footer class="sa-footer--submit">
    <el-button @click="getConfig">重置</el-button>
    <el-button type="primary" @click="onSave">保存</el-button>
  </el-footer>
</template>
<script setup>
  import { reactive, ref, onMounted, unref } from 'vue';
  import { api } from '../config.service';
  import SaDraggable from 'vuedraggable';
  import { useModal } from '@/sheep/hooks';
  const formRef = ref();
  const form = reactive({
    model: {
      recharge: {
        status: 0,
        methods: [], // 充值方式
        custom_status: 1, // 自定义金额开关
        gift_type: '',
        quick_amounts: [{ money: '', gift: '' }], // 自定义金额
      },
      withdraw: {
        methods: [], // 提现方式
        auto_arrival: 1, // 微信支付宝自动到账
        charge_rate: 0.3, // 手续费
        min_amount: 1, // 最小提现金额
        max_amount: 1000, // 最大提现金额
        max_num: null, // 每日最多提现次数
        num_unit: 'day',
      },
    },
    rules: {
      recharge: {
        quick_amounts: {
          money: [{ required: true, message: '请输入金额', trigger: 'blur' }],
          gift: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        },
      },
    },
  });
  const templateRules = {
    title: [{ required: true, message: '添加', trigger: 'blur' }],
  };
  function addTemplate() {
    form.model.recharge.quick_amounts.push({
      money: '',
      gift: '',
    });
  }
  function deleteTemplate(index) {
    form.model.recharge.quick_amounts.splice(index, 1);
  }
  async function getConfig() {
    const { data } = await api.recharge();
    form.model = data;
  }
  function onSave() {
    unref(formRef) &&
      unref(formRef).validate(async (valid) => {
        if (valid) {
          await api.recharge(form.model);
          getConfig();
        }
      });
  }
  onMounted(() => {
    getConfig();
  });
</script>
<style lang="scss" scoped>
  //警告图标
  .box {
    font-weight: 500;
    font-size: 14px;
    line-height: 14px;
    color: var(--sa-title);
    position: relative;
    margin: 8px 0 24px 0;
    height: 32px;
  }
  .line {
    position: absolute;
    left: -1px;
    bottom: 0;
    width: 60px;
    height: 6px;
    background: rgba(128, 106, 246, 0.3);
  }
  .warning-title {
    font-size: 12px;
    line-height: 16px;
    color: var(--sa-subfont);
  }
  .openswitch {
    color: var(--el-color-primary);
  }
  .item {
    width: 152px;
  }
</style>
