<template>
  <div>
    <Navbar
      :title="&quot;团队-&quot; + userName + &quot; 待完成任务&quot; + &quot;(&quot; + pagination.total + &quot;)&quot;"
      :is-go-back="true"
    />

    <div>
      <button
        type="button"
        class="btn btn-link"
        @click="finished"
      >
        查看已完成的任务
      </button>
    </div>

    <p
      v-if="traces == null || traces.length == 0"
      class="bg-danger"
      style="padding: 15px;"
    >
      未安排任何任务
    </p>

    <div
      v-else
      class="panel panel-default"
      style="margin-bottom: 10px;"
    >
      <div class="panel-body">
        <input v-model="content" type="text" class="form-control" placeholder="任务名称、任务内容" @blur="initData" @keyup.enter="initData" />
        <div
          v-for="trace in traces"
          :key="trace.id"
          style="margin-top: 5px; cursor: pointer;"
        >
          <span>
            <span>
              <Checkbox
                :id="'trace-finish-' + trace.id"
                v-model="trace.finished"
                class-name="terms"
                class="trace-checkbox"
                style=""
                @input="updateTracefinished(trace)"
              />
            </span>
            <span @click="openLine(trace)">
              <span
                v-dompurify-html="trace.summary"
                class="trace-summary"
                :class="{'font-color': trace.timeLineCompletion==true}"
              />
              <span
                class="glyphicon glyphicon-option-vertical trace-icon"
                aria-hidden="true"
              />
              <span
                class="label trace-user"
                :class="{'label-danger' : trace.overdue == true, 'label-primary' : trace.overdue != true}"
              >
                <span v-dompurify-html="trace.receiveUserName" />
                <span>{{ formatDate(trace.planFinishedDate) }}</span>
              </span>
              <span class="badge">
                <span>{{ trace.projectName }}</span>
              </span>
            </span>
          </span>
        </div>
      </div>
    </div>

    <Pagination
      v-if="traces.length"
      :pagination="pagination"
                    
      :callback="initData"
    />
  </div>
</template>

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

var Checkbox = require('pc-component-v3').default.Checkbox;
var Navbar = require('pc-component-v3').default.Navbar;
var Pagination = require('pc-component-v3').default.VueBootstrapPagination;;

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

  mounted: function () {
    this.initData();

  },
  methods: {

    /**
         * 打开明细
         * @author ZhangTeng 2019131
         */
    openLine: function (obj) {
      this.$router.push({ 
        path: '/trace/trace/' + obj.id, 
      });
    },
        
    /**
         * 初始化人员
         */
    initData: function () {
      var _self = this;
      _self.traces.splice(0, _self.traces.length);
      _self.userId = _self.$route.params.userId;
      _self.userName = _self.$route.query.userName;
      $.ajax({
        url: Common.getApiURL('TraceResource/userNotFinishedTrace'),
        type: 'get',
        dataType: 'json',
        contentType: 'application/json',
        data: {
          'receiveUserId': _self.userId,
          'currentPage': _self.pagination.current_page,
          'pageSize': _self.pagination.per_page,
          'content': _self.content,
        },
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          _self.pagination.total = data.totalSize;
          _self.pagination.last_page = Math.ceil(_self.pagination.total / _self.pagination.per_page);
          _self.traces = data.traceDtos;
        },
      });
    },
    /**
		* 修改追踪单的状态
		* @author YangZhiJie 20171201
		*/
    updateTracefinished: function (trace) {
      var _self = this;
      TraceResource.updateTraceFinished(trace.id).then(successData => {
        _self.initData();
      }, errorData => {
        Common.processException(errorData);
      });
    },

    finished: function () {
      var _self = this;
      this.$router.push({
        path: '/trace/useFinishedTrace/' + _self.userId,
        query: {
          userName: _self.userName,
        },
      });
    },
  },
};
</script>

<style scoped>
.boxes .box {
    display: block;
    width: 90px;
    height: 235px;
    border-radius: 4px;
    text-align: center;
    color: #000;
}
.boxes .box__statistics {
    display: block;
    width: 90px;
    height: 90px;
    padding: 10px;
    margin: 15px auto 0;
    border-radius: 50%;
    color: #fff;
    font-size: 46px;
}
.boxes .box__statistics--upcoming2 {
    background-color: #f6aa39;
}
a {
    text-decoration: none;
    margin: 10px;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
.boxes .box__title {
    margin-top: 25px;
    font-size: 24px;
}
.boxes .box__title__weeks {
    font-size: 18px;
}
.box:hover {
    background-color: ghostwhite;
    width: 90px;
    height: 235px;
}
.row {
    height: 200px;
    margin-bottom: 10px;
}
.dashboard-header {
    cursor: pointer;
    font-family: "\5FAE\8F6F\96C5\9ED1";
    font-weight: bold;
    font-size: 1.1em;
}
.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>