<template>
    <div>
        <Navbar :title='userName + " 已完成的任务" + "(" + pagination.total + ")"'
                :isGoBack="true"></Navbar>
        <div v-for="trace in traces"
             :key="trace.id"
             style="margin-top: 5px; cursor: pointer;">
            <div class="panel panel-default"
                 style="margin-bottom: 0px;">
                <div class="panel-body">
                    <span>
                        <Checkbox :id="'trace-finish-' + trace.id"
                                  class-name="terms"
                                  v-model="trace.finished"
                                  class="trace-checkbox"
                                  @input="updateTracefinished(trace)">
                        </Checkbox>
                    </span>
                    <span @click="openLine(trace)">
                        <span v-html="trace.summary"
                              class="trace-summary"
                              :class="{'font-color': trace.timeLineCompletion==true}">
                        </span>
                        <span class="glyphicon glyphicon-option-vertical trace-icon"
                              aria-hidden="true"></span>
                        <span class="label label-primary trace-user">
                            <span v-html="trace.receiveUserName"></span>
                            <span>{{formatDate(trace.planFinishedDate)}}</span>
                        </span>
                        <span class="badge">
                            <span>{{trace.projectName}}</span>
                        </span>
                        <span class="badge">
                            <span>完成时间:{{formatDate(trace.finishedDate)}}</span>
                        </span>
                    </span>
                </div>
            </div>
        </div>
        <Pagination :pagination="pagination"
                    :callback="initData"
                    
                    v-if="traces.length">
        </Pagination>
        <p class="bg-danger"
           style="padding: 15px;"
           v-if="flag">未完成任何任务~</p>
    </div>
</template>

<script>
var Common = require("../common/Common.js");
var Uuid = require("pc-component-v3").default.Uuid;
import TraceCommon from "./TraceCommon.js";
var Checkbox = require("pc-component-v3").default.Checkbox;
import TraceResource from "./TraceResource.js";
var Navbar = require("pc-component-v3").default.Navbar;
var Pagination = require('pc-component-v3').default.VueBootstrapPagination;;

export default {
    data: function () {
        return {
            traceNumber: {},
            uuid: Uuid.createUUID(),
            userId: '',
            userName: '',
            traces: [],
            flag: false,
            formatDate: TraceCommon.formatDate,
            pagination: {
                total: 0,
                per_page: 10,    // 每页10条信息
                current_page: 1, // 当前页码
                last_page: 10,    // 最后页码
                from: 1,
                to: 10           // required
            },
        }
    },
    components: {
        Common, Uuid, Navbar, Checkbox, TraceResource, TraceCommon, Pagination
    },
    methods: {

        /**
         * 初始化人员
         */
        initData: function () {
            var _self = this;
            _self.traces.splice(0, _self.traces.length);
            var uuid = _self.$route.params.uuid;
            var strData = localStorage.getItem(uuid);
            var user = JSON.parse(strData);
            _self.userId = user.userId;
            _self.userName = user.userName;
            $.ajax({
                url: Common.getApiURL('TraceResource/useFinishedTrace'),
                type: 'get',
                dataType: 'json',
                contentType: "application/json",
                data: {
                    "receiveUserId": user.userId,
                    "currentPage": _self.pagination.current_page,
                    "pageSize": _self.pagination.per_page,
                },
                beforeSend: function (request) {
                    Common.addTokenToRequest(request);
                },
                success: function (data) {
                    if (data == '') {
                        _self.flag = true
                    }
                    // for(var index = 0; index < data.length; index ++){
                    // 	_self.$set(_self.traces, index, data[index]);
                    // }
                    _self.pagination.total = data.totalSize;
                    _self.pagination.last_page = Math.ceil(_self.pagination.total / _self.pagination.per_page);
                    _self.traces = data.traceDtos
                },
            });
        },

        /**
         * 打开明细
         * @author ZhangTeng 2019131
         */
        openLine: function (obj) {
            this.$router.push({
                path: '/trace/trace/' + obj.id
            });
        },
        /**
    * 修改追踪单的状态
    * @author YangZhiJie 20171201
    */
        updateTracefinished: function (trace) {
            var _self = this;
            TraceResource.updateTraceFinished(trace.id).then(successData => {
                _self.initData();
            }, errorData => {
                Common.processException(errorData);
            });
        },

    },
    mounted: function () {
        this.initData();
    }
}
</script>

<style scoped>
.trace-summary {
    font-size: large;
    margin-left: 5px;
    margin-right: 5px;
}

.trace-icon {
    opacity: 0.5;
}

.trace-user {
    font-size: 100%;
}
.trace-checkbox {
    display: inline;
    font-size: large;
}
</style>