<template>
  <div class="patent-articles-patent-annotation">
    <div class="patent-annotation-container">
      <div class="patent-annotation-content" :style="{height: `calc(100% - ${$permission('/workspace/details/notes/add') ? '161px' : '0'})`}">
        <div class="patent-user-annotation" v-for="(item, index) in records" :style="{marginBottom: index === records.length - 1 ? '10px' : '0'}">
          <div class="patent-user-annotation-header">
            <span v-html="getViewDom(item.createName)"></span>
            <span v-html="getViewDom($d(item.createTime, 'YYYY-MM-DD'))"></span>
          </div>
          <div class="patent-user-annotation-content" v-html="getViewDom(item.content)"></div>
          <div class="patent-user-annotation-option" v-if="$permission('/workspace/details/notes/modify')">
            <el-link type="primary" @click.native="handleEdit(item)">编辑</el-link>
            <el-link type="danger" @click.native="handleDelete(item)">删除</el-link>
          </div>
        </div>
      </div>
      <div class="bottom-button-input-view" v-if="$permission('/workspace/details/notes/add')">
        <el-input :rows="4" type="textarea" v-model="form.content"></el-input>
        <el-button type="" size="small" @click="handleAdd">重 置</el-button>
        <el-button type="primary" size="small" :loading="btnLoading" @click="submit">提 交</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { commonMixins } from "./mixins"

export default {
  mixins: [commonMixins],
  data() {
    return {
      queryParams: {
        patentId: 0,
        projectId: this.projectId,
        current: 1,
        size: 9999,
      },
      form: {},
      loading: false,
      records: [],
      total: 0,
      btnLoading: false
    }
  },
  watch: {
    patentId() {
      this.queryParams.patentId = this.patentId
      this.getList()
      this.handleAdd()
    }
  },
  activated() {
    this.queryParams.patentId = this.patentId
    this.getList()
    this.handleAdd()
  },
  mounted() {
  },
  methods: {
    getList() {
      this.loading = true
      this.$api.getPatentAnnotationList(this.queryParams).then(response => {
        this.records = response.data.records
        this.total = response.data.total
        this.loading = false
      })
    },
    handleAdd() {
      this.form = {
        id: null,
        content: '',
        patentId: this.patentId,
        projectId: this.projectId
      }
    },
    handleEdit(row) {
      this.form = { ...row }
    },
    handleDelete(row) {
      this.$confirm('确认删除本条数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        this.$api.deletePatentAnnotation({ id: row.id }).then(response => {
          this.$message.success('删除成功')
          this.loading = false
          this.handleAdd()
          this.getList()
        }).catch(error => {
          this.loading = false
        })
      })
    },
    submit() {
      if (!this.form.content) {
        this.$message.error('请填写内容')
        return false
      }
      this.btnLoading = true
      if (this.form.id) {
        this.$api.editPatentAnnotation(this.form).then(response => {
          this.btnLoading = false
          this.getList()
          this.$message.success('操作成功')
        }).catch(error => {
          this.btnLoading = false
        })
      } else {
        this.$api.addPatentAnnotation(this.form).then(response => {
          this.btnLoading = false
          this.form.id = response.data
          this.getList()
          this.$message.success('操作成功')
        }).catch(error => {
          this.btnLoading = false
        })
      }
    }
  }
}
</script>

<style lang="scss">
.patent-articles-patent-annotation {
  height: 100%;
  .patent-annotation-container {
    width: 100%;height: 100%;position: relative;
    .patent-annotation-content {
      overflow-y: auto;
      .patent-user-annotation {
        width: 100%;
        min-height: 80px;
        background: #f3f3f3;
        margin-top: 10px;
        border-radius: 5px;
        padding-top: 10px;
        font-size: 13px;
        .patent-user-annotation-header {
          color: #6b6868;
          display: flex;
          justify-content: space-between;
          padding: 0 10px;
        }
        .patent-user-annotation-content {
          padding: 0 10px;
          margin-top: 10px;
          padding-bottom: 10px;
        }
        .patent-user-annotation-option {
          padding: 0 10px;
          padding-bottom: 10px;
          text-align: right;
          .el-link {
            margin-left: 10px;
          }
        }
      }
    }
    .bottom-button-input-view {
      text-align: right;
      height: 150px;
      width: 100%;
      position: absolute;
      bottom: 0;
      padding-top: 10px;
      border-top: 1px solid #cbcbcb;
      .el-button {
        width: 30%;
        margin-top: 10px;
      }
    }
  }
}
</style>