<template>
  <div>
    <el-form :model="form" ref="reportForm" label-width="140px">
      <el-row>
        <el-col :span="12">
          <template>
            <div>
              <el-form-item v-if="form.reportType == 3" label="标的产品：" prop="signPatentNo">
                <div class="box1" v-html="$commonJS.getColumnData(form, { type: 'String', value: 'signPatentNo' })"></div>
              </el-form-item>
              <el-form-item v-else label="标的专利：" prop="signPatentNo">
                <div class="box1">
                  <el-link type="primary" @click="$commonJS.checkPatentDetails(form.signPatentNo,projectId)">
                    <span v-html="$commonJS.getColumnData(form, { type: 'String', value: 'signPatentNo' })"></span>
                  </el-link>
                </div>
                
                
              </el-form-item>
            </div>
          </template>
        </el-col>
        <el-col :span="12">
          <el-form-item label="报告名称：" prop="name">
            <div class="box1" v-html="$commonJS.getColumnData(form, { type: 'String', value: 'name' })"></div>
          </el-form-item>
        </el-col>
      </el-row>
      <template v-if="form.reportType==7 && !taskId">
        <div>
          <el-form-item label="案件梳理意见：" prop="cardingOpinion" >
              <div  v-if="!editSuggestion" style="display:flex;align-items:center">
                <div v-html="form.cardingOpinion" class="div_MAX_Height" style="color:#000000 !important;"></div>
                <span @click="editSuggestions(form)"><el-link type="primary"><i class="iconfont icon-bianji" style="font-size:28px"></i></el-link></span>
              </div>
              <div v-else style="width:100%;display:flex;align-items:center">
                <myRich-Text style="width:100%" v-model="form.cardingOpinion" placeholder="请输入案件梳理意见"></myRich-Text>
                <el-button type="primary" class="margin-left_10" icon="el-icon-check" circle style="font-size:15px" @click="submit"></el-button>
                <el-button type="primary" class="margin-left_10" icon="iconfont icon-fanhui" circle style="font-size:15px" @click="cancelSuggestion(form)"></el-button>
              </div>
          </el-form-item>
        </div>
      </template>
      <template v-if="form.reportType == 7">
        <div>
          <el-row>
            <el-col :span="12">
              <el-form-item label="案件编号：">
                <div class="box1" v-html="$commonJS.getColumnData(form, { type: 'String', value: 'caseNumber' })"></div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="无效宣告请求人：">
                <div class="box1" v-html="$commonJS.getColumnData(form, { type: 'String', value: 'invalidApplication' })"></div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="发文序号：">
                <div class="box1" v-html="$commonJS.getColumnData(form, { type: 'String', value: 'issueNumber' })"></div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="发明创造名称：">
                <div class="box1" v-html="$commonJS.getColumnData(form, { type: 'String', value: 'inventionName' })"></div>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </template>
      <el-form-item label="是否完成：">
        <div class="box1" v-html="$commonJS.getColumnData(form, { type: 'String', value: 'status' })==3?'是':'否'"></div>
      </el-form-item>
      <template v-if="form.status == 3">
        <div>
          <el-form-item label="核心结论：">
            <div class="box1" v-html="$commonJS.getColumnData(form, { type: 'Array', value: 'cronNames' })"></div>
          </el-form-item>
          <el-form-item label="结论论述：">
            <div class="box1" v-html="$commonJS.getColumnData(form, { type: 'String', value: 'cronDescription' })"></div>
          </el-form-item>
        </div>
      </template>
      <el-row>
        <el-col :span="12">
          <el-form-item label="承担部门：" prop="departmentId">
            <div class="box1" v-html="$commonJS.getColumnData(form, { type: 'String', value: 'departmentName' })"></div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="负责人：" prop="headId">
            <div class="box1" v-html="$commonJS.getColumnData(form, { type: 'String', value: 'headName' })"></div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <template>
            <div>
              <el-form-item label="委托方：" prop="entrustId" v-if="userinfo.tenantType == 1">
                <div class="box1" v-html="$commonJS.getColumnData(form, { type: 'String', value: 'entrustName' })"></div>
              </el-form-item>
              <el-form-item label="委托部门：" prop="departmentId" v-else>
                <div class="box1" v-html="$commonJS.getColumnData(form, { type: 'String', value: 'departmentName' })"></div>
              </el-form-item>
            </div>
          </template>
        </el-col>
        <el-col :span="12">
          <el-form-item label="卷号：" prop="volumeNumber">
            <div class="box1" v-html="$commonJS.getColumnData(form, { type: 'String', value: 'volumeNumber' })"></div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="产品/技术：">
            <div class="box1" v-html="$commonJS.getColumnData(form, { type: 'String', value: 'productOrTech' })"></div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="关联报告：">
            <div class="box1" v-html="$commonJS.getColumnData(form, { type: 'String', value: 'associateReportName' })"></div>
          </el-form-item>
        </el-col>
      </el-row>
      <template>
        <div>
          <el-row>
            <el-col :span="24">
              <el-form-item label="事件：">
                <div class="box1" v-html="$commonJS.getColumnData(form, { type: 'Array', value: 'eventNames' })"></div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="调查类型：" prop="matterIds">
                <div class="box1" v-html="$commonJS.getColumnData(form, { type: 'Array', value: 'matterNames' })"></div>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </template>
      <el-form-item label="附件：">
        <!-- <myUpload :file-list="form.systemFileList" @on-change="onchangeFile" @on-remove="onRemove" style="height: 180px;"
          :autoUpload="true"></myUpload> -->
          <div class="box1">
            <div v-for="item in form.systemFileList" style="display:flex;align-items:center" :key="item.guid">
              <div style="margin-right:20px">{{ item.originalName }}</div>
                <my-menu :data="item" :deleted="false"></my-menu>
            </div>
          </div>
      </el-form-item>
      <el-form-item label="备注：" prop="description">
        <div class="box1" v-html="$commonJS.getColumnData(form, { type: 'String', value: 'description' })"></div>
      </el-form-item>
    </el-form>

    <flow-Path :projectId="projectId" :taskId="taskId" v-if="reportType == 7"></flow-Path>
  </div>
</template>
  
<script>
import { mapGetters } from 'vuex';
import flowPath from '@/views/report/InvalidResponse/components/flowPath/flowPath.vue';
export default {
  components: {
    flowPath
  },
  props: {
    projectId:{
      default:0
    },
    reportType:{
      default:0
    },
    taskId:{
      default:''
    }
  },
  data() {
    return {
      form: {},
      editSuggestion:false,
      cardingOpinion:''
    };
  },
  watch: {},
  computed: {
    ...mapGetters(['userinfo'])
  },
  created() { },
  mounted() {
    this.getReportMessage()
  },
  methods: {
    //编辑案件梳理意见
    editSuggestions(row){
        this.$set(this,'editSuggestion',!this.editSuggestion)
        this.$set(this,'cardingOpinion',row.cardingOpinion)
      },
      //取消案件梳理意见
      cancelSuggestion(row){
        this.$set(this,'editSuggestion',!this.editSuggestion)
        this.$set(row,'cardingOpinion',this.cardingOpinion)
      },
      //提交填写的信息
    submit() {
      this.$refs.reportForm.validate((valid) => {
        if (valid) {
          this.form.type = 2//项目类型（1专利数据库 2报告 3专利挖掘项目）
          // 判断文件是否都上传完毕
          var guids = this.$commonJS.checkUploadFile(this.form.systemFile)
            if(!guids){
                return false
            }
            this.form.fileGuids = guids
          // this.$commonJS.allUploadFile(this.form)
          // 事件及调查类型处理
          if (this.form.scenarioIds && this.form.scenarioIds.length > 0) {
            var scenarioIds = JSON.parse(JSON.stringify(this.form.scenarioIds))
          }
          if (this.form.eventId) {
            this.form.events = []
            this.form.scenarioIds = []
            this.form.matterIds.forEach(item => {
              this.form.events.push(
                {
                  matterId: item,
                  scenarioId: scenarioIds[0],
                  eventId: this.form.eventId
                }
              )
            })
          }
          let formData = this.form
          this.$api.updateReportProject(formData).then(response => {
            if (response.code == 200) {
              this.$message.success('报告更新成功')
              this.$set(this,'editSuggestion',false)
            }
          })
         
        }
      })
    },
    getReportMessage() {
      let params = {
        searchQuery: `id=${this.projectId}`,//检索条件
        orderDTOList: [],
      }
      this.$api.queryReportProject(params).then(res => {
        if (res.code == 200) {
          if (res.data.data.length > 0) {
            this.form = res.data.data[0]
          } else {
            this.form = {}
          }
        }
      }).catch(error => {
        this.form = {}
      })
    },
    // 上传的文件监听
    onchangeFile(file, fileList) {
      if (file.guid) {
        let index = this.form.systemFileList.findIndex(item => {
          return item.uid == file.uid
        })
        if (index != -1) {
          this.form.systemFileList.splice(index, 1, file)
        }
      } else {
        this.form.systemFileList.push(file.raw)
      }
    },
    // 删除上传的文件
    onRemove(file, fileList) {
      let index = this.form.systemFileList.findIndex(item => {
        return item.uid == file.uid
      })
      if (index != -1) {
        this.form.systemFileList.splice(index, 1)
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.box1{
    // border: 2px solid var(--color1);
    // border-radius: 5px;
    padding: 0px 10px;
    color: var(--color1);
    font-size: medium;
}
</style>