<template>
	<div class="detail">
        <mt-header class="detail_head" fixed title="我的建议">
            <router-link to="" slot="left">
                <mt-button icon="back" v-on:click="jumpBack()"></mt-button>
            </router-link> 
            <mt-button class="timePicker" slot="right" v-if="power.indexOf('make_recommendations')>-1" v-on:click="openPop(-1)">发表建议</mt-button>
        </mt-header>
        <div class="detail_body">
            <div class="noList" v-if="list.length==0">
                <img src="../../assets/image/noList.png">
            </div> 
            <ul v-else class="recordBox">
                <li v-for="(item,index) in list" class="one_recordBox detailBox">
                    <div>
                        <div class="one_suggest_title">
                            {{item.indate}}
                            <span v-if="item.ideaComment != null" class="areaday">已打分</span>
                            <span v-if="power.indexOf('make_recommendations')>-1 && item.ideaComment == null" class="edit" v-on:click="openPop(index)">修改</span>
                        </div>
                        <div class="one_suggest_body">
                            {{item.content}}
                        </div>
                        <div class="one_suggest_reply" v-if="item.ideaComment != null">
                            <div class="reply_title">来自领导的回复</div>
                            <div class="reply_body">
                                {{item.ideaComment.content}}
                                <div>{{item.ideaComment.responder}} <span class="score">得分：<span>{{item.score==null?'0分':item.score + '分'}}</span></span></div>
                                <div>{{item.ideaComment.indate}}</div>
                            </div>
                        </div>
                    </div>
                </li>
                <div class="order" v-if="haveMore">
                    <span class="line"></span>
                    <span class="txt">没有更多了</span>
                    <span class="line"></span>
                </div>
            </ul>
        </div>

        <mt-popup v-model="popupVisible" position="middle" popup-transition="popup-fade" closeOnClickModal>
            <div class="mint-popup-div">
                <h4>建议</h4>
                <mt-field label="" class="input" placeholder="请输入建议" type="textarea" rows="4" v-model="content"></mt-field>
                <div class="btns">
                    <mt-button class="btn" size="small" v-on:click.native="submit()">确定</mt-button>
                    <mt-button class="btn" size="small" v-on:click.native="closePop()">取消</mt-button>
                </div>
            </div>
        </mt-popup>
    </div>
</template>

<script>
	export default {
		data() {
			return {
                user: JSON.parse(sessionStorage.getItem("user")),
                power: sessionStorage.getItem("power"),
                list: [],
                pageNum: 1,
                pages: 1,
                haveMore: false,

                popupVisible: false,
                content: '',
                chooseI: -1,
                draftId: 0,

                canEdit: true,
			}
		},
		methods: {
            // 消息列表
            getList() {
                this.$indicator.open();
                this.http.post(this.port.my.ideaList, {
                    'uid': this.user.id,
                    'pageNum': 1,
                } , 
                res => {
                    this.$indicator.close();
                    if (res.code == "ok") {
                        this.list = res.data.list;
                        this.pages = res.data.pages==0?1:res.data.pages;
                    } else {
                        this.$toast({
                            message: res.msg,
                            duration: 2000
                        });
                    }
                }, error => {
                    this.$indicator.close();
                    this.$toast({
                        message: error,
                        duration: 2000
                    });
                })
            },

            loadMore() {
                if(this.pageNum == this.pages) {
                    this.haveMore = true;
                } else if(this.pageNum < this.pages) {
                    this.$indicator.open();
                    this.http.post(this.port.my.ideaList, {
                        'uid': this.user.id,
                        'pageNum': ++this.pageNum
                    } , 
                    res => {
                        this.$indicator.close();
                        if (res.code == "ok") {
                            this.pages = res.data.pages==0?1:res.data.pages;
                            if(res.data.list.length != 0) {
                                for(var i in res.data.list) {
                                    this.list.push(res.data.list[i]);
                                }
                            }
                        } else {
                            this.$toast({
                                message: res.msg,
                                duration: 2000
                            });
                        }
                    }, error => {
                        this.$indicator.close();
                        this.$toast({
                            message: error,
                            duration: 2000
                        });
                    })
                }
            },

            jumpBack() {
                this.$router.go(-1);
            },

            openPop(i) {
                this.chooseI = i;
                this.draftId = 0;
                if(i == -1) {
                    this.http.post(this.port.my.draft, {
                        "uid": this.user.id
                    } , 
                    res => {
                        if (res.code == "ok") {
                            if(res.data.content == null) {
                                this.content = '';
                                this.draftId = 0;
                            } else {
                                this.content = res.data.content;
                                this.draftId = res.data.id;
                            }
                            this.popupVisible = true;
                        } else {
                            this.$toast({
                                message: res.msg,
                                duration: 2000
                            });
                        }
                    }, error => {
                        this.$indicator.close();
                        this.popupVisible = false;
                        this.$toast({
                            message: error,
                            duration: 2000
                        });
                    })
                } else {
                    this.content = this.list[i].content;
                    this.popupVisible = true;
                }
            },

            submit() {
                var from = {};
                if(this.chooseI != -1) {
                    from = {
                        "id": this.list[this.chooseI].id,
                        "content": this.content,
                        "uid": this.user.id,
                        "isDraft": 0,
                    }
                } else {
                    if(this.draftId != 0) {
                        from = {
                            "id": this.draftId,
                            "content": this.content,
                            "scoringYearMonth": this.chooseTime,
                            "uid": this.user.id,
                            "isDraft": 0,
                        }
                    } else {
                        from = {
                            "content": this.content,
                            "scoringYearMonth": this.chooseTime,
                            "uid": this.user.id,
                            "isDraft": 0,
                        }
                    }
                }
                this.$indicator.open();
                this.http.post(this.port.my.ideaAoU, from , 
                res => {
                    this.$indicator.close();
                    if (res.code == "ok") {
                        this.$toast({
                            message: "提交成功",
                            duration: 2000
                        });
                        this.getList();
                        this.popupVisible = false;
                    } else {
                        this.$toast({
                            message: res.msg,
                            duration: 2000
                        });
                    }
                }, error => {
                    this.$indicator.close();
                    this.popupVisible = false;
                    this.$toast({
                        message: error,
                        duration: 2000
                    });
                })
            },

            closePop() {
                if(this.content != "" && this.content != null && this.chooseI == -1) {
                    var from = {};
                    if(this.chooseI == -1) {
                        from = {
                            "content": this.content,
                            "scoringYearMonth": this.chooseTime,
                            "uid": this.user.id,
                            "isDraft": 1,
                        }
                    }
                    this.$indicator.open();
                    this.http.post(this.port.my.ideaAoU, from , 
                    res => {
                        this.$indicator.close();
                        if (res.code == "ok") {
                            this.$toast({
                                message: "当前未提交内容已存为草稿",
                                duration: 2000
                            });
                            this.popupVisible = false;
                        } else {
                            this.$toast({
                                message: res.msg,
                                duration: 2000
                            });
                        }
                    }, error => {
                        this.$indicator.close();
                        this.popupVisible = false;
                        this.$toast({
                            message: error,
                            duration: 2000
                        });
                    })
                } else {
                    this.popupVisible = false;
                }
            }
        },
        created() {
            this.getList();
        },
		mounted() {
            
		}
	}

</script>

<style scoped>
    body {
        background: #EFEFEF!important;
    }

    .context_router {
        background: #EFEFEF;
    }
    
    .detail {
        background: #EFEFEF;
    }

    .detail_head {
        background: #fff;
        color: #333;
        height: 0.4rem;
    }

    .detail_body {
        margin-top: 0.4rem;
        padding-bottom: 0.15rem;
        background: #efefef;
    }

    .detailBox {
        background: #fff;
        margin-bottom: 0.1rem;
    }

    .one_recordBox {
        padding: 0.12rem 0.2rem;
    }

    .record_head {
        padding: 0 0 0.1rem 0;
        line-height: 0.25rem;
        border-bottom: 1px solid #ccc;
    }

    .record_head > div {
        width: 100%;
        display: inline-block;
        vertical-align: middle;
        line-height: 0.4rem;
    }

    .record_head > div img {
        width:0.12rem;
        float:right;
        margin: 0.135rem 0 0 0;
    }

    .record_head > div span {
        color: #5FA1F0;
        margin-left: 0.2rem;
        float: right;
        margin-right: 0.05rem;
    }

    .record_body {
        color: #5FA1F0;
        font-size: 0.14rem;
        margin: 0.12rem 0 0 0;
    }

    .record_body .toDetail {
        float: right;
        margin-right: 0.05rem;
    }

    .record_body .toDetail img {
        width: 0.12rem;
    }

    .one_suggest_title {
        line-height: 0.3rem;
    }

    .one_suggest_title span {
        float: right;
        font-size: 0.13rem;
    }

    .one_suggest_title span.areaday {
        color: #ccc;
    }

    .one_suggest_title span.edit {
        color:#5FA1F0;
    }

    .one_suggest_body {
        font-size: 0.13rem;
        line-height: 0.2rem;
        color: #333;
    }

    .one_suggest_reply {
        margin-top: 0.12rem;
    }

    .reply_title {
        font-size: 0.12rem;
        color: #999;
        margin-bottom: 0.08rem;
    }

    .reply_body {
        padding: 0.1rem;
        background: #EEE;
        color: #333;
    }

    .reply_body > div {
        color: #333;
        line-height: 0.2rem;
        font-size: 0.13rem;
        color: #777;
    }

    .reply_body > div:nth-child(1) {
        margin-top: 0.1rem;
    }

    .reply_body .score {
        float: right;
    }

    .reply_body .score span {
        color: #5FA1F0;
    }

    .mint-popup {
        width: 70%;
        box-sizing: content-box;
    }

    .mint-popup-div {
        padding: 0.12rem;
        background: #fff;
    }

    .mint-popup-div h4 {
        margin: 0;
        padding: 0;
    }

    .mint-popup-div .mint-cell {
        margin: 0.2rem 0;
    }

    .mint-popup-div > div.btns {
        height: 0.3rem;
    }

    .mint-popup-div .btn {
        float: right;
        margin-right: 0.1rem;
        background: #fff;
        box-shadow: none;
        width: 50%;
        margin: 0;
    }

    .mint-popup-div .btn:nth-child(1) {
        color: #f00;
    }

    .allocation {
        width: 100%;
        height: 100%;
    }

    .noList {
        text-align: center;
        padding: 1.5rem 0;
    }

    .noList img {
        width: 1.2rem;
        height: 1.2rem;
    }

    .order {
        height: 0.6rem;
        line-height: 0.6rem;
        text-align: center;
    }

    .order .line {
        display: inline-block;
        width: 1.2rem;
        border-top: 1px solid #ccc ;
        vertical-align: middle;
    }

    .order .txt {
        color: #ccc;
        font-size: 0.13rem;
        vertical-align: middle;
    }
</style>
<style>
    .mint-popup-div input {
        border: 1px solid #ddd;
        border-radius: 5px;
        padding: 0.08rem;
    }
</style>