<template>
    <div>
        <TraceHeader :type="'traceProject'"></TraceHeader>
        <div>
            <div >
                <QueryWidget ref="queryWidget"
                             @search="getDatas()"
                             @valueChanged="getDatas()"></QueryWidget>
                <p class="bg-danger"
                   style="padding: 15px; margin-top:15px;"
                   v-if="projectList == null || projectList.length == 0">您未参与任何项目~</p>
                <div class="row"
                     style="margin-top: 10px;">
                    <div class="col-md-4"
                         v-for="item in projectList"
                         :key="item.id">
                        <div @click="openLine(item)"
                             class="panel panel-default">
                            <div class="panel-body"
                                 style="height:70px;">
                                <div>
                                    <div>{{item.name}}</div>
                                    <div>
                                        <span>{{item.no}}</span>
                                        <span style="color:red"
                                              v-if="item.admin">
                                            参与中
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12">
                        <Pagination :pagination="pagination"
                                    :callback="getDatas"
                                    ></Pagination>
                    </div>
                </div>

                <hr>
                <button @click="isTheArchive"
                        type="button"
                        class="btn btn-link"
                        style="color:green">
                    已归档的项目</button>
            </div>

            <h3>&nbsp;</h3>
        </div>
    </div>
</template>

<script> 
var Common = require("../common/Common.js");
var Uuid = require("pc-client-component").Uuid;

import QueryWidget from "../widget/QueryWidget.vue";
import TraceHeader from "./TraceHeader.vue";
var Pagination = require("vue-bootstrap-pagination").default;
var Navbar = require("pc-client-component").Navbar;

export default {
    data: function () {
        return {
            input: "",
            searchText: "",
            userId: "",
            range: {
                start: 0,
                length: 30
            },
            range2: {
                start: 0,
                length: 30
            },
            totalSize: 1,
            projectList: [],
            projectList2: [],
            pagination: {
                total: 0,
                //per_page: Common.pageSize,    // required
                per_page: 30,    // required
                current_page: 1, // required
                last_page: 10,    // required
            },
            pagination2: {
                total: 0,
                //per_page: Common.pageSize,    // required
                per_page: 30,    // required
                current_page: 1, // required
                last_page: 10,    // required
                from: 1,
                to: 10           // required
            },
            traceState: undefined,
            traceStatus: undefined,
            traceUserStatus: undefined,
            //flag: false
        }
    },
    components: {
        Pagination, QueryWidget, Navbar, TraceHeader
    },
    methods: {
        /**
         * 查询数据
         * @author GuoZhiBo 20180226
         */
        getDatas: function () {
            var _self = this;

            _self.range = {
                start: (_self.pagination.current_page - 1) * _self.pagination.per_page,
                length: _self.pagination.per_page,
            }
			var val = _self.$refs.queryWidget.getSearchText();
			if(val != undefined && val.length > 0){
				_self.range = {
	                start: 0,
	                length: _self.pagination.per_page,
	            }
			}
            var queryParam = {
                range: _self.range,
                condition: _self.$refs.queryWidget.getSearchText()
            }

            $.ajax({
                url: Common.getApiURL('ProjectItemUserResource/queryProjectItemUserDto'),
                type: 'post',
                dataType: 'json',
                contentType: "application/json",
                data: JSON.stringify(queryParam),
                beforeSend: function (request) {
                    Common.addTokenToRequest(request);
                },
                success: function (data) {
                    _self.projectList = data.dataList;
                    _self.pagination.total = data.totalSize;
                    _self.pagination.last_page = Math.ceil(data.totalSize / data.range.length);
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    Common.processException(XMLHttpRequest, textStatus, errorThrown);
                }
            });
        },

        /**
         * 显示归档/未归档的项目
         */
        isTheArchive: function () {
           this.$router.push("/desktop/completeProjectList");
        },
        /**
         * 打开明细
         */
        openLine: function (obj) {
            var uuid = Uuid.createUUID();
            var _self = this;
            this.$router.push(
                {
                    path: '/desktop/notFinishedProjectTraces/' + obj.id,
                    query:
                    {
                        projectName: obj.name
                    }                
                });
        },


        open: function () {
            history.back();
        },

    },

    mounted: function () {
        var uuid = this.$route.params.uuid;
        if (uuid != null && uuid != undefined) {
            var str = localStorage.getItem(uuid);

            if (str != null) {
                var object = JSON.parse(str);
                var userId = JSON.parse(localStorage.json_LoginInfo).userId;

                if (object.traceState != undefined) {
                    this.traceState = object.traceState;
                }
                if (object.traceStatus != undefined) {
                    this.traceStatus = object.traceStatus;
                }
                if (object.traceUserStatus != undefined) {
                    this.traceUserStatus = object.traceUserStatus;
                }
            }
        }
        this.getDatas();
    }
}
</script>

<style scoped>
.mui-card {
    margin: 0px;
    margin-top: 1px;
}
.mui-card-footer:before,
.mui-card-header:after {
    background-color: #ffffff;
}
.mui-card-content {
    padding: 0px 10px;
}
.mui-card-content p {
    margin: 0px;
}
p {
    font-size: 14px !important;
    padding: 2px 0px;
    color: #000000;
}
.time {
    /*color: #8f8f94;*/
    font-weight: bold;
}
.index {
    font-size: 16px;
    font-weight: bold;
}
.div-statis {
    margin-bottom: 5px;
    font-size: 0.8em;
    text-align: center;
}
.divs {
    margin-top: 2%;
    margin-left: 39%;
}
.div {
    word-wrap: break-word;
    white-space: normal;
    font-size: 20px;
}
.div1 {
    padding-left: 10%;
    color: blue;
}
.div2 {
    color: cadetblue;
}
.img {
    height: 33px;
    width: 38px;
}

</style>