<template>
  <div>
        
      <div class="message">
            <div class="title" style="display:flex;justify-content:space-between;align-items:center">
                <span>
                    报告信息
                    <span>
                        <i v-if="!show.showReportMessage" class="el-icon-caret-right" @click="show.showReportMessage = !show.showReportMessage"></i>
                        <i v-else class="el-icon-caret-bottom" @click="show.showReportMessage = !show.showReportMessage"></i>
                    </span>  
                </span>
                <div v-show="show.showReportMessage">
                    <!-- <el-button type="primary" size="small" @click="getMessage">根据内部卷号获取信息</el-button> -->
                    <el-button type="primary" size="small" v-if="!editReport.edit" @click="editReportMessage">编辑</el-button>
                    <el-button type="primary" size="small" v-if="editReport.edit" @click="saveReportMessage">保存</el-button>
                    <el-button type="primary" size="small" v-if="editReport.edit" @click="cancelEditMessage">取消</el-button>
                </div>
            </div>
            <div v-show="show.showReportMessage">
                <el-card shadow="always">
                    <reportBasicMessage :edit="editReport.edit" :reportMessage="reportMessage"></reportBasicMessage>
                </el-card>
            </div>
      </div>
      <div class="message">
            <div class="title">
                案件结论
                <span>
                    <i v-if="!show.showCaseMessage" class="el-icon-caret-right" @click="show.showCaseMessage = !show.showCaseMessage"></i>
                    <i v-else class="el-icon-caret-bottom" @click="show.showCaseMessage = !show.showCaseMessage"></i>
                </span>
            </div>
            <div v-show="show.showCaseMessage">
                <el-card shadow="always">
                    <el-form style="width:100%" :model="reportMessage" label-width="140px">
                        <!-- <el-form-item label="案件名称：">
                            <div  v-if="!editField.caseName" class="flex_center">
                                <div v-html="reportMessage.caseName" class="div_MAX_Height" style="color:#000000 !important;"></div>
                                <span @click="edit(reportMessage,'caseName')">
                                    <el-link type="primary">
                                        <i class="iconfont icon-bianji" style="font-size:28px"></i>
                                    </el-link>
                                </span>
                            </div>
                        </el-form-item> -->
                        <el-form-item label="初步结论：">
                            <div  v-if="!editField.preliminaryConclusions" class="flex_center">
                                <div v-html="reportMessage.preliminaryConclusions" class="div_MAX_Height" style="color:#000000 !important;"></div>
                                <span @click="edit(reportMessage,'preliminaryConclusions')">
                                    <el-link type="primary">
                                        <i class="iconfont icon-bianji" style="font-size:28px"></i>
                                    </el-link>
                                </span>
                            </div>
                            <div v-else class="width_100 flex_center">
                                <el-select style="width:100%" v-model="reportMessage.preliminaryConclusions" placeholder="请选择">
                                  <el-option v-for="item in conclusionList" :key="item" :label="item" :value="item"></el-option>
                                </el-select>
                                <el-button type="primary" class="margin-left_10" icon="el-icon-check" circle style="font-size:15px" @click="submit(reportMessage,'preliminaryConclusions')"></el-button>
                                <el-button type="primary" class="margin-left_10" icon="iconfont icon-fanhui" circle style="font-size:15px" @click="cancel(reportMessage,'preliminaryConclusions')"></el-button>
                            </div>
                        </el-form-item>
                        <el-form-item label="是否具有专利性：">
                            <div  v-if="!editField.ifPatentability" class="flex_center">
                                <div v-html="reportMessage.ifPatentability" class="div_MAX_Height" style="color:#000000 !important;"></div>
                                <span @click="edit(reportMessage,'ifPatentability')">
                                    <el-link type="primary">
                                        <i class="iconfont icon-bianji" style="font-size:28px"></i>
                                    </el-link>
                                </span>
                            </div>
                            <div v-else class="width_100 flex_center">
                                <el-select style="width:100%" v-model="reportMessage.ifPatentability" placeholder="请选择">
                                  <el-option v-for="item in patentabilityList" :key="item" :label="item" :value="item"></el-option> 
                                </el-select>
                                <el-button type="primary" class="margin-left_10" icon="el-icon-check" circle style="font-size:15px" @click="submit(reportMessage,'ifPatentability')"></el-button>
                                <el-button type="primary" class="margin-left_10" icon="iconfont icon-fanhui" circle style="font-size:15px" @click="cancel(reportMessage,'ifPatentability')"></el-button>
                            </div>
                        </el-form-item>
                        <el-form-item label="申请建议：">
                            <div  v-if="!editField.applicationAdvice" class="flex_center">
                                <div v-html="reportMessage.applicationAdvice" class="div_MAX_Height" style="color:#000000 !important;"></div>
                                <span @click="edit(reportMessage,'applicationAdvice')">
                                    <el-link type="primary">
                                        <i class="iconfont icon-bianji" style="font-size:28px"></i>
                                    </el-link>
                                </span>
                            </div>
                            <div v-else class="width_100 flex_center">
                                <el-select style="width:100%" v-model="reportMessage.applicationAdvice" placeholder="请选择">
                                  <el-option v-for="item in applicationSuggestionList" :key="item" :label="item" :value="item"></el-option>
                                </el-select>
                                <el-button type="primary" class="margin-left_10" icon="el-icon-check" circle style="font-size:15px" @click="submit(reportMessage,'applicationAdvice')"></el-button>
                                <el-button type="primary" class="margin-left_10" icon="iconfont icon-fanhui" circle style="font-size:15px" @click="cancel(reportMessage,'applicationAdvice')"></el-button>
                            </div>
                        </el-form-item>
                        <el-form-item label="申请描述：">
                            <div  v-if="!editField.applicationRemark" class="flex_center">
                                <div v-html="reportMessage.applicationRemark" class="div_MAX_Height" style="color:#000000 !important;"></div>
                                <span @click="edit(reportMessage,'applicationRemark')">
                                    <el-link type="primary">
                                        <i class="iconfont icon-bianji" style="font-size:28px"></i>
                                    </el-link>
                                </span>
                            </div>
                            <div v-else class="wdith_100 flex_center">
                                <myRich-Text style="width:100%" v-model="reportMessage.applicationRemark" placeholder="请输入"></myRich-Text>
                                <el-button type="primary" class="margin-left_10" icon="el-icon-check" circle style="font-size:15px" @click="submit(reportMessage,'applicationRemark')"></el-button>
                                <el-button type="primary" class="margin-left_10" icon="iconfont icon-fanhui" circle style="font-size:15px" @click="cancel(reportMessage,'applicationRemark')"></el-button>
                            </div>
                        </el-form-item>
                        <el-form-item label="需要补充资料：">
                            <div  v-if="!editField.replenishMeans" class="flex_center">
                                <div v-html="reportMessage.replenishMeans" class="div_MAX_Height" style="color:#000000 !important;"></div>
                                <span @click="edit(reportMessage,'replenishMeans')">
                                    <el-link type="primary">
                                        <i class="iconfont icon-bianji" style="font-size:28px"></i>
                                    </el-link>
                                </span>
                            </div>
                            <div v-else class="wdith_100 flex_center">
                                <myRich-Text style="width:100%" v-model="reportMessage.replenishMeans" placeholder="请输入"></myRich-Text>
                                <el-button type="primary" class="margin-left_10" icon="el-icon-check" circle style="font-size:15px" @click="submit(reportMessage,'replenishMeans')"></el-button>
                                <el-button type="primary" class="margin-left_10" icon="iconfont icon-fanhui" circle style="font-size:15px" @click="cancel(reportMessage,'replenishMeans')"></el-button>
                            </div>
                        </el-form-item>
                        <el-form-item label="撰写要点建议：">
                            <div  v-if="!editField.writeAdvice" class="flex_center">
                                <div v-html="reportMessage.writeAdvice" class="div_MAX_Height" style="color:#000000 !important;"></div>
                                <span @click="edit(reportMessage,'writeAdvice')">
                                    <el-link type="primary">
                                        <i class="iconfont icon-bianji" style="font-size:28px"></i>
                                    </el-link>
                                </span>
                            </div>
                            <div v-else class="wdith_100 flex_center">
                                <myRich-Text style="width:100%" v-model="reportMessage.writeAdvice" placeholder="请输入"></myRich-Text>
                                <el-button type="primary" class="margin-left_10" icon="el-icon-check" circle style="font-size:15px" @click="submit(reportMessage,'writeAdvice')"></el-button>
                                <el-button type="primary" class="margin-left_10" icon="iconfont icon-fanhui" circle style="font-size:15px" @click="cancel(reportMessage,'writeAdvice')"></el-button>
                            </div>
                        </el-form-item>
                    </el-form>
                </el-card>
            </div>
        </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import reportBasicMessage from './components/basicMessage/index.vue'
export default {
  components: {
    reportBasicMessage
  },
  mixins:[],
  props: {
    projectId:{
      default:0
    },
  },
  data() {
    return {
        editMessage:{
            edit:false,
            originMessage:null
        },
        editField:{},
        loading:{},
        show:{
            showCaseMessage:true,
            showReportMessage:true,
        },
        conclusionList:['未检索到影响其专利性的对比文件','检索到影响其创造性的对比文件','检索到影响其新颖性的对比文件'],
        applicationSuggestionList:['建议申请发明专利','建议申请实用新型专利','建议申请外观设计专利','建议补充资料，然后再进行评估','建议结案处理'],
        patentabilityList:['是','否','公开不充分'],
        reportMessage:{},
        editReport:{
            edit:false,
            originMessage:null
        },
    };
  },
  watch: {},
  computed: {
    userinfo(){
        return this.$s.getObj('userinfo')
    },
  },
  created() {},
  mounted() {
    this.getReportMessage()
  },
  methods: {
    //从唯德系统获取数据
    getMessage(){
        var number = ''
        this.$prompt('请输入卷号', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: '',
          inputErrorMessage: '格式不正确',
          inputValue:number,
          inputPlaceholder:'请输入卷号'
        }).then(({ value }) => {
           
        })
    },
    //获取报告信息
    getReportMessage(){
      var params = {
        projectId:this.projectId
      }
      this.$api.queryNoveltyProject(params).then(response=>{
        if(response.code == 200){
            this.reportMessage = response.data.data[0] || {}
        }
      })
    },
    //编辑报告基本信息
    editReportMessage(){
        this.editReport = {
            edit:!this.editReport.edit,
            originMessage:JSON.parse(JSON.stringify(this.reportMessage))
        }
    },
    //保存修改
    saveReportMessage(type,field){
        this.$api.updateNoveltyProject(this.reportMessage).then(response=>{
            if(response.code == 200){
                this.$message.success('编辑成功')
                if(type == 1){
                    this.$set(this.editField,field,false)
                }else{
                   this.editReport.edit = false 
                   this.getReportMessage()
                }
                
            }
        }).catch(error=>{
            this.$message.error('编辑失败')
        })
        
    },
    //取消编辑
    cancelEditMessage(){
        this.reportMessage = this.editReport.originMessage
        this.editReport.edit = false
    },
      //编辑信息
      edit(data,field){
          this.$set(this.editField,field,true)
          this.$set(this.editMessage,field,data[field])
      },
      //取消编辑
      cancel(data,field){
          this.$set(this.editField,field,false)
          this.$set(data,field,this.editMessage[field])
      },

    //提交填写的信息
    submit(row,field) {
        this.saveReportMessage(1,field)
    },
  },
};
</script>
<style lang="scss" scoped>
.message{
    margin: 20px 0;
    .title{
        margin-bottom: 10px;
    }
}

.width_100{
  width: 100%;
}
.flex_center{
  display: flex;
  align-items: center;
}
</style>