<template>
	<div class="detail">
        <mt-header class="detail_head uName" fixed title="">
            <router-link to="" slot="left">
                <mt-button icon="back" v-on:click="jumpBack()">{{name}}</mt-button>
            </router-link> 
            <mt-button class="timePicker" slot="right" id="dateTime" v-on:click="timePicker()"><span class="dateTime">{{chooseTime}}</span> <img src="../../assets/image/pull_down.png"></mt-button>
        </mt-header>
        <div class="detail_body">
            <div class="detailBox one_recordBox">
                <div class="record_head">
                    <div v-on:click="canEdit&&power.indexOf('scoring')>-1?openPop(1):''">个人分：
                        <img v-if="canEdit && power.indexOf('scoring')>-1" class="rotate" src="../../assets/image/pull_down_blue.png">
                        <span>{{detail.personalScore==null?'0分':detail.personalScore + '分'}}</span>
                    </div>
                    <div>建议分：<span>{{detail.ideaScoreSum==null?'0分':parseFloat(detail.ideaScoreSum) + '分'}}</span></div>
                </div>
                <div class="record_body">
                    <div v-on:click="toNext()">TA的建议 <span class="toDetail"><img class="rotate" src="../../assets/image/pull_down_blue.png"></span></div>
                </div>
            </div>
            <div class="detailBox one_recordBox">
                <div class="totalScore">总得分：<span>{{(detail.personalScore==null?0:detail.personalScore) + (detail.ideaScoreSum==null?0:detail.ideaScoreSum) + '分'}}</span></div>
                <div class="totalReason">
                    <div v-on:click="canEdit&&power.indexOf('scoring')>-1?openPop(2):''">得分原因 <img v-if="canEdit" src="../../assets/image/edit.png"></div>
                    <div>
                        {{detail.reason}}
                    </div>
                </div>
            </div>
        </div>

        <mt-popup v-model="score" position="middle" popup-transition="popup-fade">
            <div class="mint-popup-div">
                <h4>个人分</h4>
                <mt-field label="" class="input" placeholder="请输入个人分" type="number" disableClear v-model="personalScore"></mt-field>
                <div class="btns">
                    <mt-button class="btn" size="small" v-on:click.native="submit(1)">确定</mt-button>
                    <mt-button class="btn" size="small" v-on:click.native="closePop(1)">取消</mt-button>
                </div>
            </div>
        </mt-popup>

        <mt-popup v-model="reasonPop" position="middle" popup-transition="popup-fade">
            <div class="mint-popup-div">
                <h4>得分原因</h4>
                <mt-field label="" class="input" placeholder="请输入得分原因" type="textarea" rows="4" v-model="reason"></mt-field>
                <div class="btns">
                    <mt-button class="btn" size="small" v-on:click.native="submit(2)">确定</mt-button>
                    <mt-button class="btn" size="small" v-on:click.native="closePop(2)">取消</mt-button>
                </div>
            </div>
        </mt-popup>

        <mt-popup v-model="popupVisible" position="right" class="allocation" id="allocation">
            <mt-header class="detail_head uName" fixed title="TA的建议">
                <router-link to="" slot="left">
                    <mt-button icon="back" v-on:click="toPrev()">{{name}}</mt-button>
                </router-link>
            </mt-header>
            <div class="detail_body">
                <div class="detailBox one_recordBox" v-for="(item,index) in ideaList">
                    <div>
                        <div class="one_suggest_title">
                            {{item.indate}}
                            <span v-if="item.isEvaluated == 1" class="areaday">已打分</span>
                            <span v-if="power.indexOf('scoring')>-1 && item.isEvaluated == 0" class="edit" v-on:click="openSugPop(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 v-if="power.indexOf('scoring')>-1" class="showMoreBtn" v-on:click.stop="showBtnList(item.id)">
                                        <img src="../../assets/image/loadMore.png">
                                        <div :id="'btn' + item.id" class="btn_list hide">
                                            <div v-on:click="openSugPop(index)"><img src="../../assets/image/register.png"><span>编辑</span></div>
                                            <div v-on:click="deleteScore(index)"><img src="../../assets/image/delete.png"><span>删除</span></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </mt-popup>

        <mt-popup v-model="sugScorePop" position="middle" popup-transition="popup-fade">
            <div class="mint-popup-div">
                <h4>打分</h4>
                <mt-field label="" class="input" placeholder="请输入建议分" type="number" disableClear v-model="sugScore"></mt-field>
                <mt-field label="" class="input" placeholder="请输入得分原因" type="textarea" rows="4" v-model="sugContent"></mt-field>
                <div class="btns">
                    <mt-button class="btn" size="small" v-on:click.native="submit(3)">确定</mt-button>
                    <mt-button class="btn" size="small" v-on:click.native="closePop(3)">取消</mt-button>
                </div>
            </div>
        </mt-popup>
    </div>
</template>

<script>
    import { MessageBox } from 'mint-ui';
	export default {
		data() {
			return {
                id: this.$route.params.id,
                name: this.$route.params.name,
                user: JSON.parse(sessionStorage.getItem("user")),
                power: sessionStorage.getItem("power"),
                detail: '',
                date: [],
                chooseTime: '',

                score: false,
                personalScore: 0,
                reasonPop: false,
                reason: '',
                popupVisible: false,
                sugScore: 0,
                sugContent: '',
                sugScorePop: false,
                chooseSugNum: 0,

                ideaList: [],
                
                canEdit: true,
			}
		},
		methods: {
            // 消息列表
            getDetail() {
                this.$indicator.open();
                this.http.post(this.port.my.scoreDetail, {
                    'uid': this.id,
                    'time': this.chooseTime
                } , 
                res => {
                    this.$indicator.close();
                    if (res.code == "ok") {
                        this.detail = res.data;
                        if(res.data.scoreId == null) {
                            var from = {
                                "uid": this.id,
                                "scoringYearMonth": this.chooseTime,
                                "raterId": this.user.id
                            }
                            this.http.post(this.port.my.addOrUpdate, from , 
                            res => {
                                if (res.code == "ok") {
                                    this.getDetail();
                                } else {
                                    this.$toast({
                                        message: res.msg,
                                        duration: 2000
                                    });
                                }
                            }, error => {
                                this.popupVisible = false;
                                this.$toast({
                                    message: error,
                                    duration: 2000
                                });
                            })
                        }
                        this.personalScore = (res.data.personalScore==null?0:res.data.personalScore);
                        this.reason = (res.data.reason==null?'':res.data.reason);
                    } else {
                        this.$toast({
                            message: res.msg,
                            duration: 2000
                        });
                    }
                }, error => {
                    this.$indicator.close();
                    this.$toast({
                        message: error,
                        duration: 2000
                    });
                })
            },

            // 时间筛选
            timePicker() {
                var _this = this;
                var dataShippingSpace = this.date;
                var pickerDiv = document.getElementById("dateTime");
                var pickerView = new PickerView({
                    bindElem: pickerDiv, 
                    data: dataShippingSpace, 
                    title: "对应人员", 
                    leftText: "取消", 
                    rightText: "确定", 
                    rightFn: function(selectArr) {
                        _this.chooseTime = selectArr[0].name;
                        _this.getDetail();
                        if(_this.chooseTime == _this.date[0].name) {
                            _this.canEdit = true
                        } else {
                            _this.canEdit = false
                        }
                    }
                });
            },

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

            toNext() {
                $(".one_suggest_reply .showMoreBtn .btn_list").addClass("hide").slideUp();
                this.popupVisible = true;
                this.$indicator.open();
                this.http.post(this.port.my.ideaScore, {
                    'uid': this.id,
                    'time': this.chooseTime,
                    'scoreId': this.detail.scoreId
                } , 
                res => {
                    this.$indicator.close();
                    if (res.code == "ok") {
                        this.ideaList = res.data;
                    } else {
                        this.$toast({
                            message: res.msg,
                            duration: 2000
                        });
                    }
                }, error => {
                    this.$indicator.close();
                    this.$toast({
                        message: error,
                        duration: 2000
                    });
                })
            },

            toPrev() {
                // var from = {};
                // if(this.detail.scoreId != null) {
                //     from = {
                //         "scoreId": this.detail.scoreId,
                //         "total": parseInt(this.personalScore) + (this.detail.ideaScoreSum == null?0:parseFloat(this.detail.ideaScoreSum)),
                //     }
                // } else {
                //     from = {
                //         "uid": this.id,
                //         "total": parseInt(this.personalScore) + (this.detail.ideaScoreSum == null?0:parseFloat(this.detail.ideaScoreSum)),
                //     }
                // }
                // this.http.post(this.port.my.addOrUpdate, from , 
                // res => {
                //     if (res.code == "ok") {
                //         this.popupVisible = false;
                //         this.getDetail();
                //     } else {
                //         this.$toast({
                //             message: res.msg,
                //             duration: 2000
                //         });
                //     }
                // }, error => {
                //     this.popupVisible = false;
                //     this.$toast({
                //         message: error,
                //         duration: 2000
                //     });
                // })

                this.popupVisible = false;
                this.getDetail();
            },

            getDate() {
                const dateData = [];
                const date1 = new Date();
                for (let i = 0; i < 36; i++) {
                    let cur = '';
                    let tempYear = date1.getFullYear();
                    let tempMonth = date1.getMonth() - i + 1;
                    if (tempMonth <= 0) {
                        tempYear = date1.getFullYear() - Math.floor(tempMonth / -12) - 1; 
                        tempMonth += (Math.floor(tempMonth / -12) + 1) * 12;
                    }
                    if (tempMonth < 10) {
                        cur = tempYear+ '-0' + tempMonth;
                    } else {
                        cur = tempYear+ '-' + tempMonth;
                    }
                    dateData.push({
                        name: cur
                    });
                    if(i == 0) {
                        this.chooseTime = cur;
                    }
                }
                this.date = dateData;
                this.getDetail();
            },

            openPop(type) {
                if(type == 1) {
                    this.personalScore = this.detail.personalScore==null?0:this.detail.personalScore;
                    this.score = true;
                } else if(type == 2) {
                    this.reason = this.detail.reason==null?'':this.detail.reason;
                    this.reasonPop = true;
                }
            },

            submit(type) {
                if(type == 1) {
                    var reg = /^([1]?\d{1,2})$/;
                    if(!reg.test(this.personalScore)) {
                        this.$toast({
                            message: '请输入0-100内的整数',
                            duration: 2000
                        });
                        return false;
                    } else {
                        var from = {};
                        if(this.detail.scoreId != null) {
                            from = {
                                "scoreId": this.detail.scoreId,
                                "personalScore": this.personalScore,
                                "ideaScore": this.detail.ideaScoreSum == null?0:this.detail.ideaScoreSum,
                                "total": parseInt(this.personalScore) + (this.detail.ideaScoreSum == null?0:parseFloat(this.detail.ideaScoreSum)),
                            }
                        } else {
                            from = {
                                "uid": this.id,
                                "personalScore": this.personalScore,
                                "ideaScore": this.detail.ideaScoreSum == null?0:this.detail.ideaScoreSum,
                                "scoringYearMonth": this.chooseTime,
                                "raterId": this.user.id,
                                "total": parseInt(this.personalScore) + (this.detail.ideaScoreSum == null?0:parseFloat(this.detail.ideaScoreSum)),
                            }
                        }
                        this.$indicator.open();
                        this.http.post(this.port.my.addOrUpdate, from , 
                        res => {
                            this.$indicator.close();
                            if (res.code == "ok") {
                                this.$toast({
                                    message: "打分成功",
                                    duration: 2000
                                });
                                this.getDetail();
                                this.score = false;
                            } else {
                                this.$toast({
                                    message: res.msg,
                                    duration: 2000
                                });
                            }
                        }, error => {
                            this.$indicator.close();
                            this.score = false;
                            this.$toast({
                                message: error,
                                duration: 2000
                            });
                        })
                    }
                } else if(type == 2) {
                    var from = {};
                    if(this.detail.scoreId != null) {
                        from = {
                            "scoreId": this.detail.scoreId,
                            "reason": this.reason,
                        }
                    } else {
                        from = {
                            "uid": this.id,
                            "reason": this.reason,
                            "scoringYearMonth": this.chooseTime,
                            "raterId": this.user.id
                        }
                    }
                    this.$indicator.open();
                    this.http.post(this.port.my.addOrUpdate, from , 
                    res => {
                        this.$indicator.close();
                        if (res.code == "ok") {
                            this.$toast({
                                message: "提交成功",
                                duration: 2000
                            });
                            this.getDetail();
                            this.reasonPop = false;
                        } else {
                            this.$toast({
                                message: res.msg,
                                duration: 2000
                            });
                        }
                    }, error => {
                        this.$indicator.close();
                        this.reasonPop = false;
                        this.$toast({
                            message: error,
                            duration: 2000
                        });
                    })
                } else {
                    var reg = /^\-?([0-9]|10)(\.\d)?$/;
                    if(!reg.test(this.sugScore)) {
                        this.$toast({
                            message: '分数区间为-10 ~ 10',
                            duration: 2000
                        });
                        return false;
                    } else {
                        var from = {};
                        if(this.ideaComment != null) {
                            from = {
                                "ideaId": this.ideaList[this.chooseSugNum].id,
                                "score": this.sugScore,
                                "content": this.sugContent,
                                "responderId": this.user.id,
                                "scoreId": this.ideaList[this.chooseSugNum].scoreId,
                                "id": this.ideaList[this.chooseSugNum].ideaComment.id,
                            }
                        } else {
                            from = {
                                "ideaId": this.ideaList[this.chooseSugNum].id,
                                "score": this.sugScore,
                                "content": this.sugContent,
                                "responderId": this.user.id,
                                "scoreId": this.ideaList[this.chooseSugNum].scoreId,
                            }
                        }
                        this.$indicator.open();
                        this.http.post(this.port.my.leaderScore, from , 
                        res => {
                            this.$indicator.close();
                            if (res.code == "ok") {
                                this.$toast({
                                    message: "打分成功",
                                    duration: 2000
                                });
                                this.sugScorePop = false;
                                this.toNext();
                            } else {
                                this.$toast({
                                    message: res.msg,
                                    duration: 2000
                                });
                            }
                        }, error => {
                            this.$indicator.close();
                            this.sugScorePop = false;
                            this.$toast({
                                message: error,
                                duration: 2000
                            });
                        })
                    }
                }
            },

            closePop(type) {
                if(type == 1) {
                    this.score = false;
                } else if(type == 2){
                    this.reasonPop = false;
                } else {
                    this.sugScorePop = false;
                }
            },

            openSugPop(i) {
                this.sugScore = this.ideaList[i].score == null? 0 : this.ideaList[i].score;
                this.sugContent = this.ideaComment == null? '' : this.ideaComment.content;
                this.sugScorePop = true;
                this.chooseSugNum = i;
            },

            showBtnList(id) {
                if($("#btn" + id).attr("class").indexOf("hide") == -1) {
                    $("#btn" + id).slideUp().addClass("hide");
                } else {
                    $(".one_suggest_reply .showMoreBtn .btn_list").addClass("hide").slideUp();
                    $("#btn" + id).slideDown().removeClass("hide");
                }
            },

            deleteScore(index) {
                MessageBox.confirm('', { 
                    message: '是否删除该分数、评论？', 
                        title: '', 
                        confirmButtonText: '确定', 
                        cancelButtonText: '取消' 
                 }).then(action => { 
                    if (action == 'confirm') {     //确认的回调
                        this.http.post(this.port.my.delScore, {
                            'id': this.ideaList[index].ideaComment.id,
                        } , 
                        res => {
                            if (res.code == "ok") {
                                this.$toast({
                                    message: "删除成功",
                                    duration: 2000
                                });
                                this.toNext();
                            } else {
                                this.$toast({
                                    message: res.msg,
                                    duration: 2000
                                });
                            }
                        }, error => {
                            this.$toast({
                                message: error,
                                duration: 2000
                            });
                        })
                    }
                 }).catch(err => { 
                 });
            },

            globalClick(callback) {
                document.getElementById('allocation').onclick = function () {
                    $(".one_suggest_reply .showMoreBtn .btn_list").addClass("hide").slideUp();
                }
            }
        },
        created() {
            this.getDate();
        },
		mounted() {
            this.globalClick();
		}
	}

</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;
    }

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

    .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 {
        margin-top: 0.2rem;
    }

    .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;
    }

    .suggestList {
        display: none;
    }

    .rotate {
        transform-origin: center center;
        transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transition: transform 0.2s;
        -moz-transition: -moz-transform 0.2s;
        -moz-transition: -moz-transform 0.2s;
        -o-transition: -o-transform 0.2s;
        -ms-transition: -ms-transform 0.2s;
    }

    .rotate1 {
        transform-origin: center center;
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transition: transform 0.2s;
        -moz-transition: -moz-transform 0.2s;
        -moz-transition: -moz-transform 0.2s;
        -o-transition: -o-transform 0.2s;
        -ms-transition: -ms-transform 0.2s;
    }

    .totalScore {
        line-height: 0.3rem;
    }

    .totalScore span {
        color: #5FA1F0;
        margin-left: 0.2rem;
        float: right;
        margin-right: 0.08rem;
    }

    .totalReason div:nth-child(1) {
        line-height: 0.3rem;
    }

    .totalReason div:nth-child(2) {
        line-height: 0.2rem;
        color: #777;
    }

    .totalReason img {
        float: right;
        width: 0.15rem;
        margin: 0.08rem 0.08rem 0 0;
    }

    .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%;
        background: #EFEFEF;
    }

    .allocation .detail_body {
        overflow: auto;
        height: 88%;
    }

    .showMoreBtn {
        display: inline-block;
        float: right;
        position: relative;
    }

    .showMoreBtn img {
        width: 0.23rem;
    }

    .btn_list {
        position: absolute;
        right: -0.04rem;
        top: 0.30rem;
        border:#aaa;
        background: #fcfcfc;
        box-shadow: 5px 5px 10px #ccc;
        z-index: 105;
    }

    .btn_list:before {
        display: inline-block;
        width: 0;
        height: 0;
        border: solid transparent;
        border-width: 10px;
        border-bottom-color: #fcfcfc;
        content: "";
        position: absolute;
        top: -20px;
        right: 0.06rem;
    }

    .btn_list > div {
        width: 0.6rem;
        font-size: 0.13rem;
        padding: 0.1rem 0.15rem;
        border-bottom: 1px solid #efefef;
        text-align: center;
    }

    .btn_list > div img {
        width: 0.14rem;
        height: 0.14rem;
        vertical-align: middle;
        margin-right: 0.05rem;
    }

    .btn_list > div span {
        height: 0.15rem;
        line-height: 0.15rem;
        vertical-align: middle;
    }

    .hide {
        display: none;
    }
</style>
<style>
     .uName .is-left .mint-button-text {
        color: #333;
        font-size: 0.15rem;
    }

    #dateTime.timePicker .mint-button-text {
        color: #333;
        font-size: 0.15rem;
        font-weight: 600;
    }

    #dateTime.timePicker .mint-button-text span.dateTime {
        vertical-align: middle;
    }

    #dateTime.timePicker .mint-button-text img {
        width: 0.22rem;
        vertical-align: middle;
    }

    .mint-popup-div input {
        border: 1px solid #ddd;
        border-radius: 5px;
        padding: 0.08rem;
    }

    .input textarea {
        border: 1px solid #ddd;
        border-radius: 5px;
        padding: 0.08rem;
    }
</style>