<template>
  <div>
    <TraceHeader :type="'traceList'" />
    <div>
      <div>
        <ul class="nav nav-tabs">
          <li :class="{'active' : param.traceUserStatus == 'I_LAUNCH'}" @click="param.traceUserStatus='I_LAUNCH'"><a>我负责的</a></li>
          <li :class="{'active' : param.traceUserStatus == 'I_ATTEND_PROJECT_ALL'}" @click="param.traceUserStatus='I_ATTEND_PROJECT_ALL'"><a>我参与项目的</a></li>
          <li :class="{'active' : param.traceUserStatus == 'I_RESPONSE'}" @click="param.traceUserStatus='I_RESPONSE'"><a>我发起的</a></li>
        </ul>
      </div>
      <br />
      <div class="form-group">
        <label for="exampleInputEmail2">选择任务状态</label>
        <select v-model="param.traceStatus" class="form-control">
          <option value="RUNNING">追踪中</option>
          <option value="FINISHED">完成的</option>
        </select>
      </div>
      <div class="form-group">
        <label for="exampleInputEmail2">查询条件</label>
        <QueryWidget ref="queryWidget" @search="getDatas()" @value-changed="getDatas()" />
      </div>
    </div>

    <div class="panel panel-default">
      <div class="panel-body">
        <vuedraggable v-model="traceDtos" item-key="id" class="wrapper" @change="end">
          <template #item="{element}">
            <div style="margin-top: 5px; cursor: pointer;">
              <span>
                <span>
                  <Checkbox
                    :id="'trace-finish-' + element.id" v-model="element.finished" class-name="terms" class="trace-checkbox"
                    @input="updateTracefinished(element)"
                  />
                </span>
                <span @click="openLine(element)">
                  <!-- eslint-disable-next-line -->
                <span class="trace-summary" :class="{'font-color': element.timeLineCompletion==true}" v-html="element.summary" />
                  <span class="glyphicon glyphicon-option-vertical trace-icon" aria-hidden="true" />
                  <span class="label trace-user" :class="{'label-danger' : element.overdue == true, 'label-primary' : element.overdue != true}">
                    <!-- eslint-disable-next-line -->
                  <span v-html="element.receiveUserName" />&nbsp;
                    <span>{{ formatDate(element.planFinishedDate) }}</span>
                  </span>
                </span>
                <a class="fa-pull-right" style="color: blue;" @click="edit(element)">编辑</a>
              </span>
            </div>
          </template>
        </vuedraggable>
      </div>
    </div>

    <div>
      <div class="pull-left">
        <span>第{{ (pagination.current_page-1)*pagination.per_page+1 }}-{{ pagination.current_page*pagination.per_page }}条,共计{{ pagination.total }}条,每页显示</span>
        <PageSizeSelect @page-size-changed="gridSizeSelect" />
        <span>条</span>
      </div>

      <div class="pull-right">
        <Pagination :pagination="pagination" :callback="getDatas" @click="updateRouter" />
      </div>
    </div>

    <!-- 		<div>
			<Pagination :pagination="pagination" :callback="getDatas" ></Pagination>
		</div> -->
    <h3>&nbsp;</h3>
  </div>
</template>

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

export default {
  components: {
    QueryWidget,
    Pagination,
    Navbar,
    TraceHeader,
    TraceResource,
    Checkbox,
    vuedraggable,
    PageSizeSelect,
  },
  data: function() {
    return {
      'param': {
        'condition': '',
        'traceStatus': 'RUNNING',
        'traceUserStatus': 'I_ATTEND_PROJECT_ALL',
        'range': {
          start: 0,
          length: 20,
        },
      },
      'totalSize': 1,
      'traceDtos': [],
      pagination: {
        total: 0,
        per_page: 20, // required
        current_page: 1, // required
        last_page: 10, // required
      },
      formatDate: TraceCommon.formatDate,
    };
  },

  watch: {
    'param.traceStatus': function(val) {
      console.log(this.$route);
      this.getDatas();
    },
    'param.traceUserStatus': function(val,oldVal) {
      this.$router.push({
        path: '/trace/traceList/'+ val,
        query: {
          currentPage: this.pagination.current_page,
          pageSize: this.pagination.per_page,
        },
      });
      // this.$router.push('/trace/traceList/' + val);
      this.$route.params.traceState = val;
      console.log(this.$route);
      console.log(oldVal);
      this.param.traceUserStatus = this.$route.params.traceState;
      // this.updateRouter();
      // this.pagination.total = 0;
      // this.pagination.per_page = Common.pageSize;
      // this.pagination.current_page = 1;
      // this.pagination.last_page = 10;
      // this.pagination.from = 1;
      // this.pagination.to = 10;
      this.getDatas();
    },

    beforeRouteUpdate(to, from, next) {
      const newId = to.query.tempId;
      const oldId = from.query.tempId;
      console.log(newId,oldId);    //345,123
      next();
    },
  },

  mounted: function() {
    TraceResource.getImg();
    console.log(this.$route);
    this.param.traceUserStatus = this.$route.params.traceState;
    this.pagination.current_page = this.$route.query.currentPage;
    this.pagination.per_page = this.$route.query.pageSize;
    this.getDatas();
  },
  methods: {
    gridSizeSelect: function(newPageSize) {
      this.pagination.per_page = newPageSize;
      this.pagination.current_page = 1;
      // 刷新界面
      this.updateRouter();
    },
    end(evt) {
      var _self = this;
      _self.param.condition = _self.$refs.queryWidget.getSearchText();
      _self.param.id = evt.moved.element.id;
      _self.param.oldIndex = evt.moved.oldIndex;
      _self.param.newIndex = evt.moved.newIndex;
      _self.param.range = {
        start: (_self.pagination.current_page - 1) * _self.pagination.per_page,
        length: _self.pagination.per_page,
      };
      $.ajax({
        url: Common.getApiURL('TraceResource/sortTraceByTraceQueryParamDto'),
        type: 'post',
        dataType: 'json',
        contentType: 'application/json',
        data: JSON.stringify(_self.param),
        beforeSend: function(request) {
          Common.addTokenToRequest(request);
        },
        success: function(data) {
          _self.getDatas();
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    updateRouter: function () {
      // var uuid = Uuid.createUUID();
      console.log(this.param.traceUserStatus);
      this.$router.push({
        path: '/trace/traceList/'+ this.param.traceUserStatus,
        query: {
          currentPage: this.pagination.current_page,
          pageSize: this.pagination.per_page,
        },
      });
      console.log(this.$route);
      // console.log(this.$router.query.currentPage);
      // console.log(this.$router.query.pageSize);
      this.getDatas();
    },
    /**
			 * 查询数据
			 * @author GuoZhiBo 20180226
			 */
    getDatas: function() {
      var _self = this;
      _self.param.condition = _self.$refs.queryWidget.getSearchText();
      _self.param.range = {
        start: (_self.pagination.current_page - 1) * _self.pagination.per_page,
        length: _self.pagination.per_page,
      };
      $.ajax({
        url: Common.getApiURL('TraceResource/listByTraceQueryParamDto'),
        type: 'post',
        dataType: 'json',
        contentType: 'application/json',
        data: JSON.stringify(_self.param),
        beforeSend: function(request) {
          Common.addTokenToRequest(request);
        },
        success: function(data) {
          console.log(data);
          if (data != null && data.dataList != null) {
            _self.traceDtos = 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);
        },
      });
    },




    /**
			 * 打开明细
			 * @author GuoZhiBo 20171201
			 */
    openLine: function(obj) {
      this.$router.push({
        path: '/trace/trace/' + obj.id,
      });
    },


    /**
			 * 编辑
			 */
    edit: function(item) {
      var _self = this;
      this.$router.push('/trace/traceUpdate/' + item.id);
    },

    /**
			 * 修改追踪单的状态
			 * @author YangZhiJie 20171201
			 */
    updateTracefinished: function(trace) {
      var _self = this;
      TraceResource.updateTraceFinished(trace.id).then(successData => {
        _self.getDatas();

      }, errorData => {
        Common.processException(errorData);
      });
    },


  },
};
</script>

<style scoped>
	.active-div {
		background-color: #007aff;
		color: white !important;
	}

	.div-btn {
		float: left;
		height: 40px;
		text-align: center;
		line-height: 40px;
		color: #007aff;
	}

	.mid-div {
		border-left: 1px solid #007aff;
		border-right: 1px solid #007aff;
	}

	.font-color {
		color: red;
	}

	.divrow {
		border: 1px solid #007aff;
		height: 40px;
	}

	.select select {
		width: 100%;
		height: 30px;
	}

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