<template>
  <div>
    <div class="pizhu" style="display:none;">
          <div style="display:flex;justify-content: space-between;font-size:14px;border-bottom: 1px white solid;padding-bottom: 5px;">
            <p style="font-weight:800;margin:0">{{ userinfo.name }}</p>
            <p style="margin:0">{{ getDate() }}</p>
          </div>
          <div>
            <p style="display: flex;align-items: center;"><span style="width: 60px;">内容：</span><span style="width: 100%;"><el-input type="textarea" v-model="mark.text" readonly rows="2"></el-input></span></p>
          </div>
          <div>
            <p><span>颜色：</span>
              <span>
                <el-input type="color" size="small" class="changeColor"  v-model="mark.color" style="user-select:none;width:100px" @input="changeColor()"> </el-input>
              </span></p>
            <p><span>类型：</span>
              <span>
                <el-radio-group v-model="mark.scratchType" @change="changeRadio">
                  <el-radio :label="2">波浪线</el-radio>
                  <el-radio :label="0">下划线</el-radio>
                  <el-radio :label="1">高亮</el-radio>
                </el-radio-group>
              </span></p>
          </div>
          <div>
            <p>
              <span>使用权限：</span>
              <span>
                <el-radio-group v-model="mark.permissionType" @change="changePower()">
                  <el-radio :label="1">所有人可见</el-radio>
                  <el-radio :label="0">本人可见</el-radio>
                </el-radio-group>
              </span>
            </p>
            <p style="display:flex" v-if="mark.rangeId">
              <span>可见范围：</span>
              <span>
                <el-switch
                  v-model="mark.rangeType"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="本专题库可见">
                </el-switch>
                <!-- <el-checkbox-group v-model="mark.rangeType" @change="changeRange">
                  <el-checkbox label="1">本专题库</el-checkbox>
                  <el-checkbox label="2">本报告</el-checkbox>
                  <el-checkbox label="3">本专利</el-checkbox>
                </el-checkbox-group> -->
              </span>
            </p>
          </div>
          <div style="user-select: none;">
            <!-- <el-input type="textarea"></el-input> -->
            <p style="margin-bottom:5px">标注：</p>
            <el-input v-model="mark.remark" type="textarea" class="my-input-preview"></el-input>
            <!-- <div ref="preview" style="width:100%;outline: #dcdfe6;border:1px solid #DCDFE6;border-radius:5px;min-height:50px;background:white;" id="preview" class="my-input-preview" contenteditable="true" 
               v-html="mark.remark"  @input="saveValue($event.target.innerHTML)"  @click="saveValue($event.target.innerHTML)"
               @blur="getValue(mark,'remark')">
            </div> -->
          </div>
          <div style="display:flex;justify-content: flex-end;">
            <span style="cursor: pointer;" @click="cancelPizhu" >取消</span>
            <span style="margin-left:15px;cursor: pointer;" v-if="mark.id" @click="deletePizhu">删除</span>
            <span style="margin-left:15px;cursor: pointer;" @click="submitPizhu">确定</span>
          </div>
    </div>
  </div>
</template>

<script>
// 阿里巴巴icon
// import "@/assets/iconfont/iconfont.css"
import { explain } from "./mixins";
export default {
  mixins: [explain],
  props: ['gaoLiangCaiDan','piZhuDelete'],
  components: {
  },
  
  data() {
    return {
      color:'#dff209',
      scratchType:2,
      permissionType:2,
      rangeType:[],
      remark:'',
      currentIndex:{},
      dialogVisible:false,
      featureVisible:false,
      featureForm:{},
      tableData1:[],
      witchRight: "权要1",
    }
  },
  computed:{
    mark() {
      let a = this.$store.state.patent.index
      if (a.rangeType == 'true' || a.rangeType==true) {
        a.rangeType=true
      } else {
        a.rangeType=false
      }
      return a || { rangeType:[] }
    },
    userinfo() {
      return this.$store.state.user.userinfo
    },
    contrastList() {
      return this.$store.state.report.contrastList
    }
  },
  watch: {
    gaoLiangCaiDan(val) {
      this.submitPizhu()
    },
    piZhuDelete(val) {
      this.deletePizhu()
    },
  },
  created() {

  },
  mounted() {

  },
  methods: {
    // 显示时间
    getDate() {
      let date = new Date()
      var Y = date.getFullYear().toString()
      var m = (date.getMonth() + 1) > 9 ? (date.getMonth() + 1).toString() : "0" + (date.getMonth() + 1)
      var d = date.getDate() > 9 ? date.getDate().toString() : "0" + date.getDate()
      var H = date.getHours() > 9 ? date.getHours().toString() : "0" + date.getHours()
      var M = date.getMinutes() > 9 ? date.getMinutes().toString() : "0" + date.getMinutes()
      var S = date.getSeconds() > 9 ? date.getSeconds().toString() : "0" + date.getSeconds()
      return Y + '-' + m + '-' + d + ' ' + H + ':' + M + ':' + S
    },
    // 确定增加批注
    submitPizhu() {
      if (this.mark.id) {
        this.$api.scratchWordsUpdate(this.mark).then(response => {
          if (response.code == 200) {
            this.getContrastList('update')
            this.cancelPizhu()
          }
        }).catch(error => {

        })
      } else {
        this.mark.rangeId= (this.mark.rangeId && !isNaN(this.mark.rangeId))?this.mark.rangeId:null,
        this.mark.createFrom=(this.mark.rangeId && !isNaN(this.mark.rangeId))?1:0
        this.$api.scratchWordsAdd(this.mark).then(response => {
          if (response.code == 200) {
            this.getContrastList('add')
            this.cancelPizhu()
          }
        }).catch(error => {

        })
      }

    },
    // 关闭批注
    cancelPizhu() {
      if (this.mark.id|| this.mark.Id) {
        let index={
          color:this.mark.color,
          scratchType:this.mark.scratchType,
          permissionType:this.mark.permissionType,
          rangeType:this.mark.rangeType,
          content:'',
          remark:'',//标注文本
        }
      this.$store.commit('SET_PATENT_INDEX', index)
      }
       
      // }
      let dl = document.getElementsByClassName("pizhu");
      dl[0].setAttribute("style", "display:none;");
    },
    // 删除批注
    deletePizhu() {
      let ids = [
        this.mark.id
      ]
      this.$api.scratchWordsDelete(ids).then(response => {
        if (response.code == 200) {
          this.getContrastList('delete')
          this.cancelPizhu()
        }
      }).catch(error => {

      })
    },
    // 查询批注
    getContrastList(type) {
      if (type != 'add') {
        var index = this.contrastList.findIndex(item => {
          return item.id == this.mark.id
        })
      }
      switch (type) {
        case 'add':
          let params = {
            patentNo:this.mark.patentNo,
            id: (this.mark.rangeId && !isNaN(this.mark.rangeId))?this.mark.rangeId:null,
            createFrom:(this.mark.rangeId && !isNaN(this.mark.rangeId))?1:0
          }
          this.$api.scratchWordsQuery(params).then(res => {
            if (res.code == 200) {
              if (this.contrastList.length > 0) {
                var a = this.contrastList.filter(item => {
                  return  item.patentNo != params.patentNo
                }).concat(res.data)
              } else {
                var a = res.data
              }
              this.$store.commit('SET_PATENT_PIZHU_CONTRAST', a)
            }
          })
          break;
        case 'update':
          this.contrastList.splice(index,1,this.mark)
          break;
        case "delete":
          this.contrastList.splice(index,1)
          break;
      }
    },
    // 颜色
    changeColor(val) {
      // var a = JSON.parse(this.index)
      // // a.color = this.color
      // a.color = this.mark.color
      // this.$store.commit('SET_PATENT_INDEX',a)
    },
    // 类型：下划线，高亮
    changeRadio(val) {
      // var a = JSON.parse(this.index)
      // a.radio = this.radio
      // console.log(a);
      // this.$store.commit('SET_PATENT_INDEX',a)
    },
    // 使用权限
    changePower(val) {
      // var a = JSON.parse(this.index)
      // a.power = this.power
      // this.$store.commit('SET_PATENT_INDEX',a)
    },
    // 使用范围
    changeRange(val) {
      // var a = JSON.parse(this.index)
      // a.range = this.range
      // console.log(a);
      // this.$store.commit('SET_PATENT_INDEX',a)
    },
  }
}
</script>
<style lang="less">
.opinion .el-form-item{
  margin-bottom: 10px;
  .el-form-item__content,.el-form-item__label{
    line-height: normal;
    min-height: 30px;
  }
}

</style>
