<template>
  <div>
    <Navbar
      :title="'任务详细信息' + (trace == null ? '' : '-' + trace.projectName)"
      :is-go-back="true"
    />
    <div v-if="isflag">
      <div>
        <div class="row">
          <div align="center">
            <img
              class="mui-img"
              :src="finishedImageName"
              @click="getTimeLineNumber()"
            />
          </div>
        </div>
      </div>

      <div>
        <div class="page-header">
          <h3>
            <!-- eslint-disable-next-line -->
            <span v-html="trace.summary" />&nbsp;
            <span
              class="label"
              :class="{
                'label-danger': trace.overdue == true,
                'label-primary': trace.overdue != true,
              }"
            >
              责任人:{{ trace.receiveUserName }}, 时间节点:{{
                formatDate(trace.planFinishedDate)
              }}
            </span>
            <span class="pull-right">
              &nbsp;
              <button
                type="button"
                class="btn btn-link"
                style="padding: 0px"
                @click="copyShaneUrl"
              >
                复制链接
              </button>
            </span>
            <span class="pull-right">
              &nbsp;
              <button
                type="button"
                class="btn btn-link"
                style="padding: 0px"
                @click="deleteTrace"
              >
                删除
              </button>
            </span>
            <span class="pull-right">
              <button
                type="button"
                class="btn btn-link"
                style="padding: 0px"
                @click="edit"
              >
                编辑
              </button>
            </span>
          </h3>
        </div>
      </div>

      <!-- eslint-disable-next-line -->
      <div id="v-html" v-html="trace.detail" />
      <AudioField
        :class-name="className"
        :src-array="srcArray"
        :is-readonly="'true'"
        @delete-audio-src="undefined"
      />

      <TraceTimeLine
        ref="traceTimeLine"
        :trace-id="traceId"
        :trace="trace"
        @refresh-trace-log="refreshTraceLog"
      />

      <div class="page-header">
        <h4>附件</h4>
      </div>

      <TraceAttachment :trace-id="traceId">1</TraceAttachment>

      <div>
        <div class="page-header">
          <h4>评论信息</h4>
        </div>
        <TraceComment :trace-id="traceId" />
      </div>

      <div>
        <button
          type="button"
          style="width: 100%; margin-top: 5px"
          class="btn btn-default"
          aria-label="Left Align"
          @click="openTraceComment"
        >
          <span class="glyphicon glyphicon-pencil" aria-hidden="true" />评论
        </button>
      </div>

      <div style="margin-top: 20px">
        <TraceLog ref="traceLog" :trace-id="traceId" :trace="trace" />
      </div>
    </div>
    <Loading v-if="loading" />
  </div>
</template>
<script>
var Vue = require('vue').default;
var Uuid = require('pc-component-v3').default.Uuid;
var Common = require('../common/Common.js');
var Notify = require('pc-component-v3').default.Notify;
var UpladFile = require('../widget/UpladFile.js');
import TraceCommon from './TraceCommon.js';
import TraceResource from './TraceResource.js';

var TraceLog = require('./TraceLog.vue').default;
var TraceComment = require('./TraceComment.vue').default;
var TraceTimeLine = require('./TraceTimeLine.vue').default;
var TraceAttachment = require('./TraceAttachment.vue').default;
var Navbar = require('pc-component-v3').default.Navbar;
var Loading = require('pc-component-v3').default.Loading;
var AudioField = require('../widget/AudioField.vue').default;

export default {
  components: {
    TraceLog,
    TraceComment,
    TraceTimeLine,
    Loading,
    TraceAttachment,
    Navbar,
    UpladFile,
    AudioField,
  },
  data: function () {
    this.formatDate = TraceCommon.formatDate;

    return {
      traceId: undefined,
      trace: {},
      finished: undefined,
      count: 0,
      attachmentList: [],
      className: 'com.leanwo.prodog.Trace',
      srcArray: [],
      isflag: true,
      loading: false,
    };
  },

  computed: {
    finishedImageName: function () {
      if (this.finished != true) {
        return '../../static/image/finished.png';
      } else {
        return '../../static/image/finished2.png';
      }
    },
  },

  mounted: function () {
    this.traceId = this.$route.params.traceId;
    this.judgePermission();
  },
  methods: {
    /**
     * 复制链接
     * @author GuoZhiBo 20191024
     */
    copyShaneUrl: function () {
      var input = document.createElement('input'); // 直接构建input
      var url = window.location.href;
      input.value = url; // 设置内容
      document.body.appendChild(input); // 添加临时实例
      input.select(); // 选择实例内容
      document.execCommand('Copy'); // 执行复制
      document.body.removeChild(input); // 删除临时实例
      Notify.success('提示', '复制链接成功');
    },
    back: function () {
      history.back();
    },

    getCount: function () {
      return this.$refs.traceTimeLine.count;
    },

    /**
     * 初始化数据
     * @author GuoZhiBo 20171201
     */
    initData: function () {
      this.loadTraceById();
    },

    /**
     * 根据追踪单Id查询追踪单的数据
     */
    loadTraceById: function () {
      var _self = this;
      $.ajax({
        url: Common.getApiURL('TraceResource/uniqueByTraceId'),
        type: 'get',
        dataType: 'json',
        data: {
          traceId: _self.traceId,
        },
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          if (data != null) {
            _self.traceId = data.id;
            _self.finished = data.finished;
            _self.trace = data;
            if (data.audioSrcs != null) {
              _self.srcArray = JSON.parse(data.audioSrcs);
            }
          }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },
    getUrl: function (item) {
      var _self = this;
      var url =
        Common.getApiURL('file/fileDownload') +
        '?className=' +
        _self.className +
        '&fileName=' +
        item;
      return url;
    },
    /**
     * 修改追踪单的状态
     * @author GuoZhiBo 20171201
     */
    updateTracefinished: function () {
      var _self = this;
      if (_self.count == 0) {
        _self.loading=true;
        TraceResource.updateTraceFinished(_self.trace.id).then(
          successData => {
            _self.loadTraceById();
            _self.loading=false;
            _self.$refs.traceLog.getTraceLog();
          },
          errorData => {
            _self.loading=false;
            Common.processException(errorData);
          },
        );
      } else {
        Notify.error('提示', '还有时间节点没有完成！');
      }
    },

    getTimeLineNumber: function () {
      var _self = this;
      $.ajax({
        url: Common.getApiURL(
          'TraceTimeLineResource/queryTraceTimeLineNumberFalse',
        ),
        type: 'get',
        dataType: 'json',
        async: false,
        data: {
          traceId: _self.trace.id,
        },
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          _self.count = data;
          _self.updateTracefinished();
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    /**
     * 打开评论界面进行评论
     * @author GuoZhiBo 20171201
     */
    openTraceComment: function () {
      var _self = this;
      this.$router.push('/trace/traceCommentCreate/' + _self.trace.id);
    },

    /**
     * 获取图片地址
     * @param  {String} item 图片名称
     * @return {String}      图片URL地址
     */
    getImageSrc: function (item) {
      var _self = this;
      if (item != undefined && item != null) {
        return Common.getResourceUrl(
          'image',
          'com.leanwo.prodog.trace.model.TraceComment',
          item,
        );
      } else {
        return '';
      }
    },

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

    /**
     * 删除
     */
    deleteTrace: function () {
      var _self = this;

      Notify.show({
        title: '删除确认',
        message:
          '您确定要删除任务' +
          _self.trace.summary +
          '吗？如果"是"的话，请点击"确定"按钮，否则点击"取消"按钮',
        buttons: [
          {
            label: '确定',
            cssClass: 'btn-primary',
            action: function (dialogItself) {
              dialogItself.close();
              $.ajax({
                url: Common.getApiURL('TraceResource/deleteTraceById'),
                type: 'get',
                dataType: 'json',
                data: {
                  traceId: _self.traceId,
                },
                beforeSend: function (request) {
                  Common.addTokenToRequest(request);
                },
                success: function (data) {
                  Notify.success('提示', '删除成功！');
                  _self.back();
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                  Common.processException(
                    XMLHttpRequest,
                    textStatus,
                    errorThrown,
                  );
                  Notify.error('提示', '删除失败！');
                },
              });
            },
          },
          {
            label: '取消',
            action: function (dialogItself) {
              dialogItself.close();
            },
          },
        ],
      });
    },
    refreshTraceLog: function () {
      this.$refs.traceLog.getTraceLog();
    },
    /**
     * 根据追踪单Id查询追踪单的数据
     */
    judgePermission: function () {
      var _self = this;
      $.ajax({
        url: Common.getApiURL('TraceResource/judgePermission'),
        type: 'get',
        dataType: 'json',
        data: {
          traceId: _self.traceId,
        },
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          _self.isflag = data;
          if (_self.isflag) {
            _self.initData();
          } else {
            Notify.error('提示', '你没有访问权限！');
          }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },
  },
};
</script>
<style scoped>
.mui-img {
  width: 80px;
}

.mui-color {
  background-color: #007aff;
  color: white;
}
</style>