<template>
<div class="app-container">
    <!-- 头部 -->
    <div class="seachData" ref="seachDatas">
        <div class="seachData-left">
          <i class="el-icon-arrow-left left-span" @click="blackTaskList"></i>
          <span>{{title ? title + '文档跟踪报告' : '文档跟踪报告'}}</span>
        </div>
    </div>
    <div class="content">
        <div class="content-left scroll">
            <div v-if="loading" class="content-right-content loading loading-left">
                <div class="loading-div">
                    <i class="el-icon-loading loading-center"></i>
                    <div>加载中...</div>
                </div>
            </div>
            <div class="content-left-center scroll">
                <div v-if="deleteCenter.length && !loading">
                    <div class="delete-center" v-for="(item, index) in deleteCenter" :key="index">
                        <div class="title">
                            <span class="title-span">{{item.docTitle}}</span>
                            <span>更新日期:</span>
                            <span class="time">{{dateFilter(item.updateTime)}}</span>
                            <span>共1处更新</span>
                        </div>
                        <div class="center">
                          <div class="center-delete">
                            <div class="center-delete-tab green">新版</div>
                            <div class="center-delete-text" v-html="item.paragraphAfter"></div>
                          </div>
                          <div class="center-delete">
                            <div class="center-delete-tab gray">旧版</div>
                            <div class="center-delete-text" v-html="item.paragraphBefore"></div>
                          </div>
                        </div>
                    </div>
                </div>
                <div class="none" v-else-if="!deleteCenter.length && !loading">
                    暂无数据
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
// 接口调用方法
import {
  doctaskFinddifference
} from "@/api/system/product";
export default {
  data() {
    return {
        title: '', // 跟踪文档标题抬头
        deleteId: '', // 详情id
        tableHeights: 0, // table高度
        loading: false,
        deleteCenter: []
    }
  },
  watch: {
  },
  created() {
    this.init()
    this.$nextTick(() => {
        this.tableHeight();
    })
  },
  computed: {
    // 计算过的height
    tableHeightCount() {
      return this.tableHeights
    }
  },
  methods: {
    //   初始化
    init() {
        let name = this.$route.query.name
        let id = this.$route.query.id
        let taskListIndexTitle = localStorage.getItem("taskListIndexTitle")
        let taskListIndexId = localStorage.getItem("taskListIndexId")
        if (name || id) {
          this.title = name
          this.deleteId = id
          localStorage.setItem("taskListIndexTitle", name)
          localStorage.setItem("taskListIndexId", id)
        } else if (taskListIndexTitle || taskListIndexId) {
          this.title = taskListIndexTitle
          this.deleteId = taskListIndexId
        }
        this.searchCustomer()
    },
    // 返回跟踪文档
    blackTaskList() {
      this.$router.push({
        path: '/documentManagement/taskList'
      })
    },
    dateFilter(time) {    
      if (!time) { 
        // 当时间是null或者无效格式时我们返回空        
        return '-'    
      } else {        
        const date = new Date(time) // 时间戳为10位需*1000,时间戳为13位的话不需乘1000        
        const dateNumFun = (num) => num < 10 ? `0${num}` : num // 使用箭头函数和三目运算以及es6字符串的简单操作。因为只有一个操作不需要{} ,目的就是数字小于10,例如9那么就加上一个0,变成09,否则就返回本身。        // 这是es6的解构赋值。        
        const [Y, M, D, h, m, s] = [            
            date.getFullYear(),            
            dateNumFun(date.getMonth() + 1),            
            dateNumFun(date.getDate()),            
            dateNumFun(date.getHours()),            
            dateNumFun(date.getMinutes()),            
            dateNumFun(date.getSeconds())        
        ]        
        return `${Y}-${M}-${D} ${h}:${m}:${s}` // 一定要注意是反引号,否则无效。    
      }
    },
    searchCustomer() {
        this.loading = true;
        doctaskFinddifference(this.deleteId)
          .then(response => {
            if (response.code === 200) {
              let content = response.content.value
              for (let a = 0; a < content.length; a++) {
                let difWordAfter = content[a].difWordAfter
                let url = content[a].docUrl
                if (content[a].paragraphAfter.indexOf(difWordAfter) >= 0) {
                  let values = content[a].paragraphAfter.split(difWordAfter);
                  content[a].paragraphAfter = values.join(
                    `<a style="color: rgba(250, 0, 0, 1);" href="${url}" target="_blank">${difWordAfter}</a>`
                  )
                }
              }
              this.$set(this, 'deleteCenter', content)
            }
            this.loading = false
            this.$nextTick(() => {
              this.customerListHeights = this.$refs.customerListHeight.offsetHeight
            })
        })
        .catch(error => {
          this.loading = false;
        });
    },
    // 计算高度
    tableHeight() {
      let height = document.documentElement.clientHeight - 128
      this.tableHeights = height < 580 ? 580 : height
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/views/main.scss';
.app-container {
    .content {
        top: 64px;
        background: #fafafa;
    }
}
.seachData {
    .seachData-left {
        padding-left: 46px;
    }
}
.left-span {
    margin-right: 18px;
    color: #0052D9;
    font-size: 26px;
    text-align: center;
    width: 18px;
    cursor: pointer;
}
.delete-center {
    width: 100%;
    margin-bottom: 16px;
    padding: 32px 36px;
    background: #fff;
    &:first-child {
        margin-top: 16px;
    }
    .title {
        font-size: 18px;
        color: rgba(0, 0, 0, 0.9000);
        .time {
            margin-right: 24px;
        }
        .title-span {
          margin-right: 16px;
        }
    }
    .center {
        width: 100%;
        display: flex;
        .center-delete {
            width: 50%;
            margin-top: 24px;
        }
        .center-delete-tab {
            width: 44px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            border-radius: 4px;
            &.green {
                background: #c8ffe8;
                color: #4ec192;
            }
            &.gray {
                background: rgba(0, 0, 0, 0.2000);
                color: #8a8888;
            }
        }
        .center-delete-text {
            margin-top: 24px;
            text-align: left;
            font-size: 14px;
            line-height: 20px;
            color: rgba(0, 0, 0, 0.6);
            word-break: break-all;
        }
    }
}
.content-left-center {
    .none {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        color: #8a8888;
        font-size: 16px;
    }
}
</style>