<template>
  <div class="container_grant">
    <div class="content_grant">
      <div class="head">
        <div class="name">
          {{props.info.realName}}
        </div>
        <div class="sex">
          {{props.info.sex}}
        </div>
        <div class="phone">
          {{props.info.phone}}
        </div>
        <div class="point">
          积分<span class="num">{{ props.info.integralBalance }}</span>
        </div>
      </div>
      <div>
        <el-form label-position="top" :rules="rules" ref="formDataRef" :model="data">
          <el-form-item label="兑换积分" prop="integral" >
            <el-input placeholder="请输入兑换积分" v-model="data.integral"></el-input>
          </el-form-item>
          <el-form-item label="兑换备注" prop="remark">
            <el-input placeholder="请输入兑换备注" v-model="data.remark"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="footer">
      <div>
        <el-checkbox v-model="printReceipt">同时打印凭证</el-checkbox>
      </div>
     <div>
       <el-button type="primary" @click="reduceIntegral">发放</el-button>
       <el-button @click="close">取消</el-button>
     </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {ref,defineEmits, defineProps} from 'vue'
import {ElFormItem} from "element-plus";
import {post} from "@/utils/request.ts";

const emit = defineEmits(['close'])
const props = defineProps({
  info: {
    type: Object,
    default: () => ({})
  }
})
const printReceipt = ref(false)
const close = () => {
  data.value = {}
  emit('close')
}
const rules ={
  integral: [
    {required: true, message: '请输入发放积分', trigger: 'blur'},
    {min: 1, message: '积分不能小于1', trigger: 'blur'}
  ],
  remark:[
      {required: true, message: '请输入兑换备注', trigger: 'blur'},
  ]
}
const data = ref<any>({
  integral: 0,
});
const formDataRef = ref();
const reduceIntegral =  () => {
  formDataRef.value?.validate((valid: boolean) => {
    if (!valid) {
      console.log("表单验证失败",data.value);
      return;
    }
    // 如果验证通过，发送请求
    data.value.integral =data.value.integral * -1
    data.value.vipId = props.info.id
    post("vip/integral/add",data.value).then((res: any) => {
      formDataRef.value?.resetFields();
      close()
    })
  });

}

</script>
<style scoped lang="scss">
.container_grant {
  background-color: #fff;
  .title_grant {
    padding-bottom: 20px;
    font-size: 18px;
  }

  .content_grant {
    .head {
      height: 50px;
      display: flex;
      align-items: center;
      background-color: rgba(220, 222, 223, 0.5);
      border-radius: 10px;
      padding-left: 20px;
      margin-bottom: 20px;
      border: 1px solid rgba(0, 0, 0, 0.05);
      .sex{
        margin:0 10px;
      }
      .phone{
        height: 21px;
        line-height: 25px;
      }
      .point{
        margin:0 30px 0 50px;
        .num{
          color: rgba(237, 120, 23, 0.67);
        }
      }
    }
  }
  .footer {
    display: flex;
    justify-content: space-between;
    padding-top: 20px;
  }
}
</style>