<template>
    <!-- 产品信息 -->
    <div>
      <div style="display: flex;justify-content: end;" v-if="!choose">
        <el-button v-if="edit" type="primary" @click="isSave">保存</el-button>
        <el-button v-if="!edit" type="primary" @click="handleEdit">编辑</el-button>
      </div>
      <div style="width: 600px;margin: auto;">
        <el-form v-if="edit" :model="form" status-icon :rules="rules" ref="form" label-width="120px" class="demo-form">
  
          <el-form-item label="IPC类号：" prop="ipc">
            <el-input v-model="form.ipc" placeholder="请输入IPC类号"></el-input>
          </el-form-item>
          <el-form-item label="解决的问题：" prop="solvedProblem">
            <myRich-Text style="width:100%" v-model="form.solvedProblem" placeholder="请输入解决的问题"></myRich-Text>
          </el-form-item>
  
          <el-form-item label="方案技术领域：" prop="technicalField">
            <el-input v-model="form.technicalField" placeholder="请输入方案技术领域"></el-input>
          </el-form-item>
          <el-form-item label="技术方案概述：" prop="remark">
            <myRich-Text style="width:100%" v-model="form.remark" placeholder="请输入技术方案概述"></myRich-Text>
          </el-form-item>
          <el-form-item label="代表图：">
            <el-upload ref="upload" action="#" :auto-upload="false" multiple :on-change="handleChange" list-type="picture" :show-file-list="false">
              <span style="display:flex;flex-direction:row;flex-wrap:wrap;">
                <span class="avatar" v-for="(item) in form.systemFileList" :key="item.guid || item.uid"
                  style="margin-left:10px">
                  <span class="deleteImg">
                    <span>
                      <i class="el-icon-zoom-in" @click.stop="handlePictureCardPreview(item)"></i>
                      <i class="el-icon-delete" @click.stop="handleRemove(item)"></i>
                    </span>
                  </span>
                  <el-image fit="contain" ref="image" class="img" :src="item.guid ? $commonJS.checkViewer(item.guid) : item.url"
                    :preview-src-list="form.systemFileList ? form.systemFileList.map(item => { return item.guid ? $commonJS.checkViewer(item.guid) : item.url }) : []"></el-image>
                </span>
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </span>
            </el-upload>
          </el-form-item>
          <el-form-item label="发明点：">
            <myRich-Text style="width:100%" placeholder="请输入发明点" v-model="form.inventionPoint"></myRich-Text>
          </el-form-item>
        </el-form>
  
        <el-form v-else :model="form" status-icon :rules="rules" ref="form" label-width="120px" class="demo-form">
          <el-form-item label="IPC类号：">
            <span>{{ form.ipc  || '--' }}</span>
          </el-form-item>
          <el-form-item label="解决的问题：">
            <span v-html="form.solvedProblem || '--'"></span>
          </el-form-item>
          <el-form-item label="方案技术领域：">
            <span v-html="form.technicalField  || '--'"></span>
          </el-form-item>
          <el-form-item label="技术方案概述：">
            <span v-html="form.remark  || '--'"></span>
          </el-form-item>
          <el-form-item label="代表图：">
            <span style="display:flex;flex-direction:row;flex-wrap:wrap;" v-if="form.systemFileList && form.systemFileList.length>0">
                <span class="avatar" v-for="(item) in form.systemFileList" :key="item.guid || item.uid"
                  style="margin-left:10px">
                  <el-image fit="contain" ref="image" class="img" :src="item.guid ? $commonJS.checkViewer(item.guid) : item.url"
                    :preview-src-list="form.systemFileList ? form.systemFileList.map(item => { return item.guid ? $commonJS.checkViewer(item.guid) : item.url }) : []"></el-image>
                </span>
            </span>
            <span v-else>--</span>
          </el-form-item>
          <el-form-item label="发明点：">
            <span v-html="form.inventionPoint  || '--'"></span>
          </el-form-item>
        </el-form>
      </div>
  
    </div>
</template>

<script>
export default {
  components: {},
  props: {
    isEdit:false,
    projectId: '',
    choose:{
      type:Boolean,
      default:false
    }
  },
  data() {
    return {
        edit:this.isEdit,
        form:{
            systemFileList: []
        },
        rules:{}
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {
    this.getList()
  },
  methods: {
    //获取数据
    getList(){
      var params = {
        projectId:this.projectId
      }
      this.$api.queryTechnicalCase(params).then(response=>{
        if(response.code == 200){
          this.form = response.data || {}
          if(!this.form.systemFileList){
            this.$set(this.form,'systemFileList',[])
          }
        }
      }).catch(error=>{
        this.form={
          systemFileList:[],
        }
      })
    },
    // 编辑
    handleEdit() {
      this.edit = !this.edit
    },
    //保存
    isSave(){
      if(this.projectId){
        this.form.projectId = this.projectId
      }
      var fileGuids = this.$commonJS.checkUploadFile(this.form.systemFileList)
      if(!fileGuids){
        return
      }
      this.form.fileGuids = fileGuids
      this.$api.addOrUpdateTechnicalCase(this.form).then(response=>{
        if(response.code == 200){
          this.$message.success("编辑成功")
          this.getList()
          this.edit = !this.edit
        }
      }).catch(error=>{
        this.$message.error('编辑失败')
      })
      
    },
    // 图片变化的change事件
    handleChange(file, fileList) {
      file.raw.url = file.url
      this.form.systemFileList.push(file.raw)
      this.uploadFile(file.raw)
    },
    // 点击已上传的文件//showViewer是图片显示查看器
    handlePictureCardPreview(file) {
      this.$refs.image.showViewer = true
    },
    // 文件列表移除文件
    handleRemove(file) {
      let index = this.form.systemFileList.findIndex(item => {
        if (file.guid) {
          return item.guid == file.guid
        } else {
          return item.uid == file.uid
        }
      })
      if (index != -1) {
        this.form.systemFileList.splice(index, 1)
      }
    },
    //上传附件
    uploadFile(file) {
      let formData = new FormData()
      formData.append('sourceId', this.$constants.sourceId)
      formData.append('files', file)
      this.$api.uploadFile(formData).then(response => {
        if (response.code == 200) {
          file.guid = response.data[0]
        }
      })
    },
  },
};
</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>