<template>
    <div>
      <el-dialog :title="title" v-draggable :visible.sync="visible" width="1000px" custom-class="checkFile" :before-close="close" :modal="false" :close-on-click-modal="false" :modal-append-to-body="false">
          <el-form :model="form" ref="form" label-width="120px" label-position="left">
            <el-form-item label="选中文本" class="item">
                <el-input v-model="form.markSelectText" :readonly="true" placeholder="请输入" type="textarea" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="位置/附图号" class="item">
                <el-input v-model="form.markSelectField" placeholder="请输入备注" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="标的类型" class="item">
                <el-radio-group v-model="form.targetType" @input="changeTargetType">
                    <el-radio :label="1">代表图</el-radio>
                    <el-radio :label="2">技术特征</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="代表图" class="item" v-if="form.targetType == 1">
                <el-upload ref="upload" action="#" :auto-upload="false" :on-change="change" list-type="picture" :show-file-list="false">
                        <span style="display:flex;flex-direction:row;flex-wrap:wrap;">
                            <template v-if="form.pictureUrl && form.pictureUrl.length>0">
                                <span class="avatar"  v-for="(picture,index) in form.pictureUrl" :key="picture"
                                    style="margin-left:10px">
                                    <span class="deleteImg">
                                    <span>
                                        <i class="el-icon-zoom-in" @click.stop="handlePictureCardPreview(index)"></i>
                                        <i class="el-icon-delete" @click.stop="handleRemove(index)"></i>
                                    </span>
                                    </span>
                                    <el-image fit="contain" ref="image" class="img"  :src="$commonJS.checkViewer(picture)" :preview-src-list="form.pictureUrl.map(item=>$commonJS.checkViewer(item))"></el-image>
                                </span>
                            </template>
                            
                            <i class="el-icon-plus avatar-uploader-icon" v-if="!form.fileGuid"></i>
                        </span>
                    </el-upload>
            </el-form-item>
            <el-form-item label="技术特征内容" class="item">
                <el-input v-model="form.technicalFeature" placeholder="请输入技术特征内容" show-word-limit></el-input>
            </el-form-item>
            
            <el-form-item label="对比说明" class="item">
                <el-input v-model="form.markNoteText" placeholder="请输入对比说明" show-word-limit></el-input>
            </el-form-item>
          </el-form>

          <div slot="footer" class="dialog-footer">
              <el-button @click="close">取 消</el-button>
              <el-button type="primary" v-if="form.id" @click="delContrast(form)">删 除</el-button>
              <el-button type="primary" :loading="btnLoading" @click="submit">确 定</el-button>
          </div>
      </el-dialog>
    </div>
</template>
  
<script>
  import { mapGetters } from "vuex";
  export default {
    components: {
    },
    props: {},
    data() {
      return {
          form:{},
          title:'查新对比',
          visible:false,
          btnLoading:false,
          technicalCase:{}
      };
    },
    watch: {},
    computed: {
      ...mapGetters(["contextMenu",'highlight']),
      // 批注相关信息
      NoveltySearchContrastList() {
        return this.$store.state.highlight.NoveltySearchContrastList
      },
    },
    created() {},
    mounted() {
    },
    methods: {
      open(){
          this.getData()
          this.getTechnicalCase()
          this.visible = true
      },
      close(){
          this.visible = false
      },
      //获取技术方案信息
      getTechnicalCase(){
        if(!this.form.projectId){
            return
        }
        var params = {
            projectId:this.form.projectId
        }
        this.$api.queryTechnicalCase(params).then(response=>{
            if(response.code == 200){
                this.technicalCase = response.data || {}
                if(!this.technicalCase.systemFileList){
                    this.$set(this.technicalCase,'systemFileList',[])
                }
            }
        }).catch(error=>{
            this.technicalCase={
                systemFileList:[],
            }
        })
      },
      //保存
      saveTechnicalCase(){
            if(!this.form.projectId){
                return
            }
            this.technicalCase.projectId = this.form.projectId
            this.technicalCase.fileGuids = this.form.pictureUrl
            this.$api.addOrUpdateTechnicalCase(this.technicalCase).then(response=>{
                if(response.code == 200){
                    this.getTechnicalCase()
                }
            }).catch(error=>{
            })
        
        },
      changeTargetType(val){
        if(this.form.targetType == 1){
            if(this.form.pictureUrl && this.form.pictureUrl.length>0){
                return
            }
            var data = this.technicalCase.systemFileList.map(item=>{
                return item.guid
            })
            this.$set(this.form,'pictureUrl',data)
        }
      },
      getData(){
          var mark = this.contextMenu.mark
          this.form = {
            Id: mark.Id,
            id: mark.id,//已添加数据的id
            patentNo: mark.patentNo,//专利号
            markColor: mark.markColor,//标注颜色
            markNoteText: mark.markNoteText,//标注备注
            markType: mark.markType,//标注方式（波浪线）
            markSelectField: mark.id ? mark.markSelectField : mark.column,//标注栏位
            markSelectText: mark.id ? mark.markSelectText : mark.text,//标注文本
            markSite: mark.id ? mark.markSite : mark.position,//选中文本的起始位置
            projectId: mark.projectId,//项目id
            patentTitle:mark.patentTitle,//当前专利标题
            retrieveRecordId:mark.retrieveRecordId,
            targetType:mark.targetType || 2,
            technicalFeature:mark.technicalFeature || '',
            pictureUrl:mark.pictureUrl || [],
        }
      },
      submit(){
        //   if(!this.$permission.FunPermissions('xiaoshi/annotationLibrary')){
        //       this.$showPermissionDialog()
        //       return false
        //   }
          var message = {
            type:1,
            success:'添加成功',
            error:'添加失败'
          }
          if(this.form.id){
            message = {
                type:2,
                success:'编辑成功',
                error:'编辑失败'
            }
          }
          this.btnLoading = true
          this.$api.editNoveltyCompareRecord(this.form).then(response=>{
            if(response.code == 200){
                this.$message.success(message.success)
                this.saveTechnicalCase()
                this.btnLoading = false
                var NoveltySearchContrastList = this.NoveltySearchContrastList
                this.form.id = response.data
                if(message.type == 1){
                    NoveltySearchContrastList.push(this.form)
                    this.$store.commit('SET_PATENT_NoveltySearchContrastList', NoveltySearchContrastList)
                    this.$router.replace(
                      {
                        path: '/patentDetails/' + this.patentNo,
                        query:{
                          ...this.$route.query,
                          reloadURL:true
                        }
                      }
                    )
                }else{
                    let index = this.NoveltySearchContrastList.findIndex(item => {
                        return item.id == this.form.id
                    })
                    if (index != -1) {
                        this.NoveltySearchContrastList.splice(index, 1, this.form)
                    }
                }
                this.close()
            }
          }).catch(error=>{
            this.btnLoading = false
          })
      },

      //文件上传
      change(file,fileList){
          let formData = new FormData()
          formData.append('sourceId',this.$constants.sourceId)
          formData.append('files',file.raw)
          this.$api.uploadFile(formData).then(response=>{
              if(response.code == 200){
                var guid = response.data[0]
                this.form.pictureUrl.push(guid)
                //   this.$set(this.form,'fileGuid',response.data[0])
              }
          })
      },
      handleRemove(index) {
        this.form.pictureUrl.splice(index,1)
      },
      handlePictureCardPreview(index) {
        var dom = this.$refs.image
        if(dom){
          if(dom[0]){
            dom[0].showViewer = true
          }else{
            dom.showViewer = true
          }
        }
          
      },
      delContrast(){
        //   if(!this.$permission.FunPermissions('xiaoshi/annotationLibrary')){
        //       this.$showPermissionDialog()
        //       return false
        //   }
          
          var ids = [this.form.id]
          this.$confirm('确认删除该数据吗？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
          }).then(() => {
              this.$api.removeNoveltyCompareRecord(ids).then(response => {
                if(response.code == 200){
                    let index = this.NoveltySearchContrastList.findIndex(item => {
                        return item.id == this.form.id
                    })
                    if (index != -1) {
                        this.NoveltySearchContrastList.splice(index, 1)
                    }
                    this.$message.success('删除成功')
                    this.close()
                }
              }).catch(error => {
              })
          })
      }
    },
  };
</script>
<style lang="scss" scoped>
  .avatar-uploader-icon {
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    font-size: 28px;
    color: #8c939d;
    width: 148px;
    height: 148px;
    line-height: 148px;
    text-align: center;
  }
  
  .avatar {
    position: relative;
    width: 148px;
    height: 148px;
    display: block;
  }
  
  .avatar:hover .deleteImg {
    display: block;
  }
  
  .deleteImg {
    display: none;
    font-size: 30px;
    width: 148px;
    height: 148px;
    background-color: black;
    opacity: 0.6;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    z-index: 999;
  }
  
  .avatar .img {
    width: 148px;
    height: 148px;
  }
  
  .deleteImg span i {
    margin-left: 10px;
    color: #fff;
  }
  
  .deleteImg span {
    display: flex;
    align-items: center;
    /*垂直居中*/
    justify-content: center;
    /*水平居中*/
    width: 100%;
    height: 100%;
  }
</style>