<template>
    <div>
        <nav-bar path="index"/>
        <gift-card
                v-if="myPresent.status===2"
                :present-name="recievedPresent.presentName"
                :present-desc="recievedPresent.presentDesc"
                :owner="1"
                :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="0"
                :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>
        <div style="height: 100px; width: 100%"></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%; background-color: #fff6e3"
        >
            <van-button
                    type="primary" size="large"
                    style="background-color: #fd6740; border-color: #fd6740; width: 85%;"
                    @click="toWriteComment"
            >确认交换成功</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, Toast} from 'vant'
    import NavBar from "../components/navBar";
    import {BasicFunction} from "../connector/basic-service";
    export default {
        name: "giftDetail",
        components: {
            NavBar,
            GiftCard,
            [Button.name]: Button,
        },
        data() {
            return {
                myPresent: {
                    placeId: 1,
                    wechat: 'wx_id',
                    comment: ''
                },
                recievedPresent: {
                    comment: ''
                }
            }
        },
        methods:{
            editPresent: function() {
                let p = this.myPresent;
                this.$router.push({path: 'presentRegister', query: {present: p}});
            },
            deletePresent: function() {
                Dialog.confirm({
                    message: '确认删除礼物吗？'
                }).then(() => {
                    // on confirm
                    // delete_present(this.presentId())
                    // TODO: 考虑 updateBatch, 就是需要 将isDel设为1， 配合首页查找进行过滤
                    let that = this;
                    BasicFunction.get_data("smartGoods/list?goodid=" + this.myPresent.id, function (response) {
                        console.log("------ Data Rcvd in detail --------");
                        console.log(response);
                        if (response.ret === "10000") {
                            let list = response.model.list;
                            if (list !== undefined || list.length > 0) console.warn(list);
                            list[0].isDel = 1;
                            console.log(list);
                            BasicFunction.get_data("smartGoods/updateBatch", function (response) {
                                console.log(response);
                                if (response.ret === '10000') {
                                    Toast.success('删除成功');
                                    that.$router.push('index');
                                } else {
                                    Toast.fail('删除失败，请检查网络');
                                }
                            }, list)
                        } else {
                            console.warn("获取资源失败");
                        }
                    }, {});
                }).catch(() => {
                    // on cancel
                });
            },
            toWriteComment: function () {
                this.$router.push('assess');
            }
        },
        created: function () {
            if (!localStorage.getItem('frontend-userid')) {
                this.$router.push('login');
                return;
            }
            this.myPresent.id = this.$route.query.presentId;
            this.myPresent.presentName = this.$route.query.name;
            this.myPresent.presentDesc = this.$route.query.desc;
            this.myPresent.status = parseInt(this.$route.query.status);
            let gender_tags = this.$route.query.gender_tags;
            console.log(gender_tags);
            this.myPresent.gender = parseInt(gender_tags.charAt(gender_tags.length - 1));
            this.myPresent.tags = gender_tags.substring(0, gender_tags.length - 1);
            console.log(this.myPresent.tags);
        }
    }

</script>

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