<template>
  <!-- 产品信息录入/产品信息 -->
  <div>
    <!-- <div style="display: flex;justify-content: end;">
      <el-button v-if="isFormEdit" type="primary" @click="isSave">保存</el-button>
      <el-button v-if="!isFormEdit" type="primary" @click="handleEdit">编辑</el-button>
    </div> -->
    <div style="display: flex;justify-content: end;">
      <slot name="save"></slot>
      <slot name="edit"></slot>
    </div>
    <div style="width: 500px;margin: auto;">
      <el-form v-if="isFormEdit" :model="form" status-icon :rules="rules" ref="form" label-width="120px"
        class="demo-form">

        <el-form-item label="标的产品：" prop="productName">
          <el-input v-model="form.productName" placeholder="请输入标的产品"></el-input>
        </el-form-item>
        <el-form-item label="标的说明：" prop="productDescription">
          <el-input v-model="form.productDescription" placeholder="请输入标的说明"></el-input>
        </el-form-item>

        <el-form-item v-if="reportType == 3" label="调查区域：" prop="surveyArea">
          <el-input v-model="form.surveyArea" placeholder="请输入调查区域"></el-input>
        </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 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 v-if="reportType == 3" label="检索策略：">
          <el-input v-model="form.searchPolicy" placeholder="请输入检索策略"></el-input>
        </el-form-item>
        <el-form-item label="检索截止日期：">
          <el-date-picker style="width:100%" v-model="form.deadLine" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
            placeholder="请选择检索截止日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item v-if="reportType == 3" label="关注企业/发明人/技术方向：">
          <el-input v-model="form.focusInformation" placeholder="请输入关注企业/发明人/技术方向"></el-input>
        </el-form-item>
        <el-form-item label="备注：">
          <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="form.description"></el-input>
        </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="标的产品：">
          <span>{{ form.productName }}</span>
        </el-form-item>
        <el-form-item label="标的说明：">
          <span>{{ form.productDescription }}</span>
        </el-form-item>
        <el-form-item v-if="reportType == 3" label="调查区域：" prop="surveyArea">
          <span>{{ form.surveyArea }}</span>
        </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 v-if="isFormEdit" class="el-icon-delete" @click.stop="handleRemove(item)"></i>
                  </span>
                </span>
                <el-image 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 v-if="isFormEdit" class="el-icon-plus avatar-uploader-icon"></i>
            </span>
          </el-upload>
        </el-form-item>
        <el-form-item v-if="reportType == 3" label="检索策略：">
          <span>{{ form.searchPolicy }}</span>
        </el-form-item>
        <el-form-item label="检索截止日期：">
          <span>{{ form.deadLine }}</span>
        </el-form-item>
        <el-form-item v-if="reportType == 3" label="关注企业/发明人/技术方向：">
          <span>{{ form.focusInformation }}</span>
        </el-form-item>
        <el-form-item label="备注：">
          <span>{{ form.description }}</span>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>

<script>
export default {
  props: {
    // 信息(patentNo,reportId)
    patentNo: '',
    projectId: '',
    // 报告类型
    reportType: '',
    // 是否可以编辑
    isFormEdit: {
      type: Boolean,
      default: true
    },
    isSave: {
      type: Boolean
    }
  },
  data() {
    return {
      // 表单信息
      form: {
        systemFileList: []
      },
      // 表单校验
      rules: {
        productName: [{ required: true, message: '请输入标的产品', trigger: 'blur' },],
        productDescription: [{ required: true, message: '请输入标的说明', trigger: 'blur' },],
        surveyArea: [{ required: true, message: '请输入调查区域', trigger: 'blur' },],
      },
    }
  },
  watch: {
    isSave(val) {
      this.isSaveForm()
    },
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 编辑
    handleEdit() {
      this.isFormEdit = !this.isFormEdit
    },
    // 获取数据
    getList() {
      let params = {
        patentNo: this.patentNo,
        projectId: this.projectId,
      }
      this.$api.getProductMessage(params).then(res => {
        if (res.code == 200) {
          this.form = res.data.data
          if (!this.form.systemFileList) {
            this.$set(this.form, 'systemFileList', [])
          }
        }
      }).catch(error => {
        this.form = {
          systemFileList: []
        }
      })
    },
    // 保存
    isSaveForm() {
      // 判断文件是否都上传完毕
      this.$commonJS.allUploadFile(this.form)
      let params = {
        patentNo: this.patentNo,
        projectId: this.projectId,
        ...this.form
      }
      this.$api.addProductMessage(params).then(res => {
        if (res.code == 200) {
          this.$message.success('保存成功')
          this.$emit('handleEdit',false)
        }
      })
    },
    // 图片变化的change事件
    handleChange(file, fileList) {
      file.raw.url = file.url
      this.form.systemFileList.push(file.raw)
      this.uploadFile(file)
    },
    // 点击已上传的文件//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.raw)
      this.$api.uploadFile(formData).then(response => {
        if (response.code == 200) {
          file.guid = response.data[0]
          file.raw.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>