<template>
  <div class="postil-panel" v-show="isShow">
    <div class="postil-title">
      批注列表
      <i class="fa fa-angle-left hidden-icon" @click="isShow = false"></i>
    </div>
    <div class="postil-list">
      <div v-for="item in postils" :key="item.ID" class="postil-item" @click="onSelection(item,$event)">
        <el-row class="item-title item-row">
          <el-col :span="12">
            {{item.addUser}}
          </el-col>
          <el-col :span="12" class="right">
            {{item.addTime}}
          </el-col>
        </el-row>
        <el-input v-model="item.content" type="textarea" :rows="2" @change="contentChange(item)"></el-input>
        <div class="right item-row">
          <el-button size="mini" @click.stop="remove(item)">删 除</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    show: {
      type: Boolean,
      required: true
    },
    content: {
      type: String,
      required: true
    },
    contentID: [String, Number]
  },
  computed: {
    isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    },
    articleContent: {
      get() {
        return this.content
      },
      set(val) {
        this.$emit('update:content', val)
      }
    }
  },
  data() {
    return {
      oldPostilIDs: [],
      postils: [],
      actions: [],
      oldNode: {},
      firstOpen: true,
      firstContentChange: true
    }
  },
  watch: {
    async isShow(val) {
      if (val) {
        this.$nextTick(async () => {
          if (this.contentID && this.firstOpen && !this.firstContentChange) {
            this.firstOpen = false
            await this.getPostils()
          }
          this.loadData()
        })
      }
    },
    async articleContent() {
      if (!this.firstContentChange) {
        if (this.contentID) {
          await this.getPostils()
        }
        this.loadData()
      }
      this.firstContentChange = false
    }
  },
  methods: {
    async getPostils() {
      let res = await axios.get('/ui/articlepostil', {params: {contentID: this.contentID}})
      this.postils = res.data.data
      res.data.data.forEach(o => {
        this.oldPostilIDs.push(o.postilID)
      })
    },
    loadData() {
      this.oldNode = this.$parent.$el.childNodes[6].childNodes['0'].childNodes['0'].children[1].childNodes['0'].contentDocument.childNodes[1].childNodes[1].childNodes['0']
      let childs = Array.prototype.slice.call(this.oldNode.children)
      let postilIDs = []
      childs.forEach(child => {
        if (child.className.indexOf('art-postil') > -1) {
          let flag = false
          postilIDs.forEach(o => {
            if (o === child.className) {
              flag = true
            }
          })
          if (!flag) {
            let index = child.className.indexOf(' selected')
            let childClass = index > -1 ? child.className.substring(0, index) : child.className
            postilIDs.push(childClass)
          }
        }
      })
      if (postilIDs.length < this.postils.length) {
        this.postils = this.postils.filter(val => postilIDs.includes(val.postilID))
        this.isShow = true
      } else if (postilIDs.length > this.postils.length) {
        postilIDs = []
        this.postils.forEach(postil => {
          postilIDs.push(postil.postilID)
        })
        childs.forEach(child => {
          let index = child.className.indexOf(' selected')
          let childClass = index > -1 ? child.className.substring(0, index) : child.className
          if (!postilIDs.includes(childClass) && childClass.indexOf('art-postil') === 0) {
            this.postils.push({
              content: '',
              postilID: child.className,
              addUser: localStorage.userName,
              addTime: util.formatDate(new Date(), 'yyyy-MM-dd HH:mm:ss')
            })
          }
        })
        this.isShow = true
      }
    },
    async save(contentID) {
      this.postils.forEach(o => {
        if (o.ID) {
          this.oldPostilIDs = this.oldPostilIDs.filter(val => val !== o.postilID)
        }
      })
      let res = await axios.put('/ui/articlepostil', {
        contentID: this.contentID || contentID,
        data: JSON.stringify(this.postils),
        delPostilIDs: JSON.stringify(this.oldPostilIDs)
      })
      if (res.data.status !== 1) {
        this.$alert('批注操作失败！', '提示', {type: 'warning'})
        return false
      }
      return true
    },
    onSelection(postil, val) {
      for (let i = 0; i < this.oldNode.children.length; i++) {
        let className = this.oldNode.children['' + i].className
        let index = className.indexOf(' selected')
        if (className === postil.postilID) {
          this.oldNode.children['' + i].className = index > -1 ? className.substring(0, index) : (className + ' selected')
        } else if (index > -1) {
          this.oldNode.children['' + i].className = className.substring(0, index)
        }
      }
      if (val.currentTarget.className === 'postil-item selected') {
        val.currentTarget.className = 'postil-item'
        return
      }
      let items = val.currentTarget.parentElement.childNodes
      items.forEach(o => {
        o.className = 'postil-item'
      })
      val.currentTarget.className = 'postil-item selected'
    },
    remove(postil) {
      for (let i = 0; i < this.oldNode.children.length; i++) {
        let className = this.oldNode.children['' + i].className
        let index = className.indexOf(' selected')
        className = index > -1 ? className.substring(0, index) : className
        if (className === postil.postilID) {
          this.oldNode.children['' + i].className = className
          this.removePostil(postil)
        }
      }
    },
    removePostil(postil) {
      let content1 = this.oldNode.innerHTML.substring(0, this.oldNode.innerHTML.indexOf('<span class="' + postil.postilID + '">'))
      let content2 = this.oldNode.innerHTML.substring(this.oldNode.innerHTML.indexOf('<span class="' + postil.postilID + '">'))
      content2 = content2.substring(content2.indexOf('>') + 1).replace('</span>', '')
      this.oldNode.innerHTML = content1 + content2
      this.articleContent = content1 + content2
      this.$nextTick(() => {
        if (this.oldNode.innerHTML.indexOf(postil.postilID) > -1) {
          this.remove(postil)
        }
      })
    },
    contentChange(postil) {
      postil.modifyTime = util.formatDate(new Date(), 'yyyy-MM-dd HH:mm:ss')
    }
  }
}
</script>
<style scoped>
.item-row{
  height: 30px;
  line-height: 30px;
}

.postil-panel{
  position: absolute;
  top: 0px;
  z-index: 999;
  background-color: #FFF;
  width: 300px;
  right: -316px;
  border: 1px solid #eee;
  border-radius:4px;
  height: 100%;
}

.postil-title{
  background-color: #F6F7F9;
  text-align: center;
  font-weight: bold;
  font-size: 15px;
}

.postil-title .hidden-icon{
  float: right;
  padding: 10px;
  cursor: pointer;
}

.postil-list{
  padding: 5px;
  height: calc(100% - 40px);
  overflow: auto;
}

.postil-item{
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 5px;
  margin: 5px 0;
}

.postil-item .item-title{
  padding: 0 5px;
  font-size: 12px;
  font-weight: bold;
}

.postil-list .selected{
  border-color:red;
}
</style>
