<template>
  <el-form ref="formRef" :model="form" :rules="rules" label-width="160px" label-position="left">
    <el-form-item label="功能开启">
      <el-switch v-model="form.isEnabled" :active-value="1" :inactive-value="0" />
    </el-form-item>
    <el-form-item label="可获得奖励的分享" prop="rewardSharePages">
      <el-checkbox-group v-model="form.rewardSharePages">
        <el-checkbox :label="item.label" :value="item.value" v-for="item in typesList" :key="item.value"></el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <div class="header">分享人可获得奖励</div>
    <el-form-item label="选择优惠券" prop="sharerCouponId">
      <SelectCoupon v-model="form.sharerCouponId" v-model:name="form.sharerCouponName" />
    </el-form-item>
    <el-form-item label="单次获得优惠券数量" prop="sharerCouponNum">
      <el-input v-model="form.sharerCouponNum" placeholder="请输入数量"
        @input="e => form.sharerCouponNum = filterNumberInput(e, 1)" style="width: 300px;" />
    </el-form-item>
    <el-form-item label="可获得奖励次数">
      <el-radio-group v-model="form.rewardTimesType">
        <el-radio label="仅1次" :value="1"></el-radio>
        <el-radio label="每次分享成功" :value="2"></el-radio>
      </el-radio-group>
    </el-form-item>
    <div class="header">被分享人可获得奖励</div>
    <el-form-item label="选择优惠券">
      <SelectCoupon v-model="form.sharedUserCouponId" v-model:name="form.sharedUserCouponName" />
    </el-form-item>
    <el-form-item label="单次获得优惠券数量">
      <el-input v-model="form.sharedUserCouponNum" placeholder="请输入数量"
        @input="e => form.sharedUserCouponNum = filterNumberInput(e, 1)" style="width: 300px;" />
    </el-form-item>
    <el-form-item label="被分享人弹窗">
      <el-radio-group v-model="form.isSharedUserPopup">
        <el-radio label="是" :value="1"></el-radio>
        <el-radio label="否" :value="0"></el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">保存</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import _ from 'lodash'
import { ref, onMounted } from 'vue'
import typesList from '../data.js'
import SelectCoupon from '@/components/selectCoupon/index.vue'
import { filterNumberInput } from '@/utils/index.js'
import { shareBasePost, shareBaseGet } from '@/api/coupon/index.js'

const formRef = ref(null)
const form = ref({
  isEnabled: 0,
  rewardSharePages: [],             // 可获得奖励的分享页面，用逗号分隔 typesList
  sharerCouponId: '',               // 分享人可获得的优惠券ID
  sharerCouponName: '',             // 分享人可获得的优惠券名称
  sharerCouponNum: '',              // 分享人可获得的优惠券数量
  rewardTimesType: 1,               // 可获得奖励次数 1=仅1次 2=每次分享成功
  sharedUserCouponId: '',           // 被分享人可获得的优惠券ID
  sharedUserCouponName: '',         // 被分享人可获得的优惠券名称
  sharedUserCouponNum: '',          // 被分享人可获得的优惠券数量
  isSharedUserPopup: 1,             // 被分享人获得奖励时是否弹窗 1=是 0=否
})

const rules = {
  rewardSharePages: [
    { required: true, message: '请选择可获得奖励的分享', trigger: 'change' }
  ],
  sharerCouponId: [
    { required: true, message: '请选择优惠券', trigger: 'change' }
  ],
  sharerCouponNum: [
    { required: true, message: '请输入单次获得优惠券数量', trigger: 'blur' }
  ]
}

function submitForm() {
  console.log(form.value);
  formRef.value.validate((valid) => {
    if (valid) {
      console.log('提交表单', form.value)
      shareBasePostAjax()
    } else {
      console.log('表单验证失败')
      return false
    }
  })
}

// 分享奖励基础:新增/修改
async function shareBasePostAjax() {
  try {
    const data = _.cloneDeep(form.value);
    data.rewardSharePages = data.rewardSharePages.join(',');
    await shareBasePost(data);
    ElNotification({
      title: '成功',
      message: '保存成功',
      type: 'success',
      duration: 2000
    });
  } catch (error) {
    console.log(error);
  }
}

// 分享奖励基础 查询
async function shareBaseGetAjax() {
  try {
    const res = await shareBaseGet();
    if (res) {
      form.value = { ...form.value, ...res };
      form.value.rewardSharePages = res.rewardSharePages ? res.rewardSharePages.split(',') : [];
    }
  } catch (error) {
    console.log(error);
  }
}

onMounted(() => {
  // 初始化数据
  shareBaseGetAjax();
});
</script>

<style scoped lang="scss">
.header {
  color: #333;
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 20px 0;
}
</style>