<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
            :rules="rules"
            v-model="data"
            label-position="top"
            ref="ruleFormRef"
            require-asterisk-position="right"
        >
          <el-form-item label="发放积分" prop="integral">
            <el-input v-model="data.integral" placeholder="请输入发放积分"></el-input>
          </el-form-item>
          <el-form-item label="发放备注" prop="remark">
            <el-input v-model="data.remark" placeholder="请输入发放备注"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="footer">
      <el-button type="primary" @click="grant()">发放</el-button>
      <el-button @click="close">取消</el-button>
    </div>
  </div>
</template>
<script setup lang="ts">
import {ref,defineEmits,defineProps} from 'vue'
import {post} from "@/utils/request.ts";
import {ElFormItem} from "element-plus";

const emit = defineEmits(['close'])
const props = defineProps({
  info: {
    type: Object,
    default: () => ({})
  }
})
const rules ={
    integral: [
      {required: true, message: '请输入发放积分', trigger: 'blur'},
    ],
  remark:[
    {required: true, message: '请输入备注', trigger: 'blur'},
  ]
}
const close = () => {
  emit('close')
}
const data=ref<any>({})
const grant = async () => {
  data.value.vipId = props.info.id
  post('vip/integral/add', data.value).then((res: any) => {
    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: flex-end;
    padding-top: 20px;
  }
}
</style>