<template>
    <div>
        <gift-card
                v-if="myPresent.status===2"
                :present-name="recievedPresent.presentName"
                :present-desc="recievedPresent.presentDesc"
                :owner="recievedPresent.owner"
                :placeId="recievedPresent.placeId"
                :gender="recievedPresent.gender"
                :status="recievedPresent.status"
                :wechat="recievedPresent.wechat"
        />
        <div class="letter" v-if="recievedPresent.comment.length !== 0">
            <p style="font-size: 110%"><strong>我送出的感谢信</strong></p>
            <p>{{recievedPresent.comment}}</p>
        </div>
        <gift-card
                :present-name="myPresent.presentName"
                :present-desc="myPresent.presentDesc"
                :owner="myPresent.owner"
                :placeId="myPresent.placeId"
                :gender="myPresent.gender"
                :status="myPresent.status"
                :wechat="myPresent.wechat"
        />
        <div class="letter" v-if="myPresent.comment.length !== 0">
            <p style="font-size: 110%"><strong>我收到的感谢信</strong></p>
            <p>{{myPresent.comment}}</p>
        </div>
        <img src="../assets/gift_card_background.png"
             style="position: fixed; bottom: 100px; max-width: 100%; z-index: -1"
        />
        <div
                v-if="myPresent.status===2"
                style="position: fixed; bottom: 0; width: 100%"
        >
            <van-button
                    type="primary" size="large"
                    style="background-color: #fd6740; border-color: #fd6740; width: 85%;"
            >确认交换成功</van-button>
            <p>交换成功可以开始接收对方发来的感谢信哦</p>
        </div>
        <div
                v-if="myPresent.status!==2"
                style="position: fixed; bottom: 0; width: 100%"
        >
            <van-button
                type="default" size="large"
                style="width: 85%;"
                @click="editPresent"
            >修改礼物</van-button>
            <van-button
                    type="warning" size="large"
                    style="width: 85%; margin: 10px 0 10px"
                    @click="deletePresent"
            >删除礼物</van-button>
        </div>
    </div>
</template>

<script>
    import GiftCard from "../components/giftCard";
    import { Button, Dialog } from 'vant'
    export default {
        name: "giftDetail",
        components: {
            GiftCard,
            [Button.name]: Button
        },
        data() {
            return {
                presentId: '',
            }
        },
        computed: {
            myPresent: function () {
                // return get_present(presentId)
                return {
                    presentName: '一本神秘的书',
                    presentDesc: "description",
                    owner: 0,
                    placeId: 1,
                    gender: 0,
                    status: 1,
                    wechat: 'wechat_id',
                    comment: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.'
                }
            },
            recievedPresent: function () {
                // return get_present(get_sender(presentId))
                return {
                    presentName: '一本不神秘的书',
                    presentDesc: "description",
                    owner: 1,
                    placeId: 3,
                    gender: 1,
                    status: 2,
                    wechat: 'wechat_id',
                    comment: ''
                }
            }
        },
        methods:{
            editPresent: function() {
                let p = this.myPresent;
                p.id = this.presentId;
                this.$router.push({path: 'presentRegister', query: {present: p}});
            },
            deletePresent: function() {
                Dialog.confirm({
                    message: '确认删除礼物吗？'
                }).then(() => {
                    // on confirm
                    // delete_present(this.presentId())
                    this.$router.push('index')
                }).catch(() => {
                    // on cancel
                });
            }
        },
        created: function () {
            this.presentId = this.$route.query.presentId;
        }
    }

</script>

<style scoped>
    .letter {
        background-color: white;
        margin: 20px 20px;
        border: solid 1px #e4e4e4;
        padding: 0 15px;
        text-align: left;
    }
</style>