<template>
    <div class="red-envelope-box" @click="GrabRedEnvelope">
        <img src="../assets/svg/red_envelope.svg" class="red-envelope"/>
        <div class="red-envelope-text">{{ props.message?.message }}<br/>领取红包</div>
        <div class="bottom-line">红包</div>

    </div>
    <el-dialog v-model="dialogTableVisible" title="看看大家的手气">
        <el-table :data="gridData">
        <el-table-column property="userName" label="用户名" width="150" />
        <el-table-column property="getMoney" label="抢到红包金额" width="200" />
        <el-table-column property="localTime" label="时间" />
        </el-table>
  </el-dialog>
</template>
  
<script lang="ts" setup>
  import { post } from '@/utils/request'
  import { ElMessage } from 'element-plus';
  import { ref, reactive } from 'vue';
  const grabApi = process.env.VUE_APP_GRAB_API
  const props = defineProps({
     "message": Object
  })
  const dialogTableVisible  = ref(false)
  const gridData = ref([])

  const redEnvelopeGrab = reactive(
    {
        "redEnvelopeId": props.message?.redEnvelopeId,
        "topicId": props.message?.topicId,
        "userName": props.message?.mainUserName,
    }
  )

  const GrabRedEnvelope = () => {
    post(grabApi, redEnvelopeGrab).then(
        (res) => {
            console.log(res.data)
            if (res.data.code != 200){
                ElMessage(
                    {message: '请稍后重试', type: 'error'}
                )
            }else{
                dialogTableVisible.value = true
                gridData.value = res.data.redEnvelopeInfo
                ElMessage(
                    {message: res.data.msg, type: 'error'}
                )
            }
        }
    )
  }
</script>

<style scoped>
.bottom-line {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding-left: 5px;
    background-color: azure;
    width: 100%;
    font-family: 幼圆;
}
.red-envelope-text {
    padding: 5px;
    width: 74%;
    text-align: left;
    color: azure;
    border-radius: 10px;
}
.red-envelope-box {
    flex-wrap: wrap;
    display: inline-flex;
    width: 100%;
    height: auto;
    border-radius: 10px;
    background-color: rgb(255, 153, 0);
}

.red-envelope-box:hover {
    cursor: pointer;
}
.red-envelope {
    padding: 5px;
    width: 26%;
    height: 70%;
    background-color: rbg(85 0 0 /46%);
}
</style>