<template>
    <div style="">
        <el-container>
            <el-main  style="border:0;padding:20px">
                <div class="header1">
                    <el-button type="primary" @click="saveProduct">保存</el-button>
                </div>
                <div class="demo-input-suffix" style="width:800px;margin:0 auto" >
                    <div>
                        <el-form ref="form" :model="product" :rules="productRules" label-width="200px">
                            <el-form-item label="标的产品：" prop="productName">
                            <el-input v-model="product.productName" placeholder="请输入标的产品"></el-input>
                        </el-form-item> 
                        <el-form-item label="调查标的说明：" prop="productDescription">
                            <el-input type="textarea" v-model="product.productDescription" placeholder="请输入调查标的说明"></el-input>
                        </el-form-item>
                        <el-form-item label="调查区域：" prop="surveyArea">
                            <el-input type="textarea" v-model="product.surveyArea" placeholder="请输入调查区域"></el-input>
                        </el-form-item>
                        <el-form-item label="产品图：">
                            <el-upload ref="upload"  action="#" :auto-upload="false" multiple :on-change="handleChangeUpload"  list-type="picture" :show-file-list="false">
                                <span style="display:flex;flex-direction:row;flex-wrap:wrap;">
                                    <span class="avatar" v-if="product.reportFiles" v-for="(item,index) in product.reportFiles" style="margin-left:10px">
                                        <span class="deleteImg">
                                            <span> 
                                                <i class="el-icon-zoom-in" @click.stop="handlePictureCardPreview1(item)"></i>
                                                <i class="el-icon-delete" @click.stop="handleRemove1(index)"></i>
                                            </span>
                                        </span>
                                        <img :src="$p + item.address" >
                                    </span>
                                    <span class="avatar" v-for="(item,index) in dialogImageUrl" 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(index)"></i>
                                            </span>
                                        </span>
                                        <img  :src="item" >
                                    </span>
                                    <i class="el-icon-plus avatar-uploader-icon"></i>
                                </span>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="检索策略：">
                            <el-input type="textarea" v-model="product.searchPolicy" placeholder="请输入检索策略"></el-input>
                        </el-form-item>
                        <el-form-item label="检索截止日期：" prop="deadLine">
                            <el-date-picker
                                style="width:100%"
                                    v-model="product.deadLine"
                                    type="date"
                                    placeholder="选择日期"
                                    @change="isDates">
                                </el-date-picker>
                        </el-form-item>
                        <el-form-item label="关注企业/发明人/技术方向：">
                            <el-input type="textarea" v-model="product.focusInformation" placeholder="请输入关注企业/发明人/技术方向"></el-input>
                        </el-form-item>
                        </el-form>
                    </div>
                </div>
            </el-main>
        </el-container>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="ImageUrl" alt="暂无数据">
        </el-dialog>
    </div>
</template>

<script>


export default{
    props:['reportId'],
  data() {
    const isTime = (rule, value, callback) => {
      console.log(this.isDate);
      if (this.isDate) {
        let a = Date.parse(new Date)
        let b = Date.parse(value)
        if (value) {
          if (b+8.64e7<a) {//8.64e7一天的时间//只适用YYYY-mm-dd格式
            callback(new Error('禁止选择以前时间，请重新选择'))
          } else {
            callback()
          }
        } else {
          callback()
        }
      }else {
          callback()
      }
     
    }
    return {
            isDate:true,
            file:[],
            dialogImageUrl:[],
            ImageUrl:'',
            dialogVisible:false,
            product:{},
            productRules:{
                productName: [{ required: true, message: '请输入标的专利/产品', trigger: 'blur' },],
                productDescription: [{ required: true, message: '请输入调查标的说明', trigger: 'blur' },],
              surveyArea: [{ required: true, message: '请输入调查区域', trigger: 'blur' },],
              deadLine: [
                  {  required: false, validator:isTime, trigger: 'change' }
                ],
            },
          Already: [],
            //  pickerOptions: {
            //     disabledDate (time) {
            //         //disabledDate 文档上：设置禁用状态，参数为当前日期，要求返回 Boolean
            //         return time.getTime() < Date.now()- 8.64e7//选当前时间之后的时间
            //       }
            //   },
        }
    },
    mounted() {
        if(this.$s.getSession('reportMessage1').type == 3){
             this.$set(this.product, 'productName', this.$s.getSession('reportMessage1').signPatentNo)
        }
       
        console.log(this.product.productName);
        this.getProduct()
    },
  methods: {
    isDates() {
      this.isDate=true
    },
        handleChangeUpload(file, fileList) {
            if(this.product.reportFiles){
                var index3 = this.product.reportFiles.findIndex(item=>{
                    return item.name+'.'+item.suffix == file.raw.name
                })
                if(index3!=-1){
                    this.Already.push(this.product.reportFiles[index3].name)
                    var index2 = fileList.reverse().findIndex(item=>{
                        return item.raw.name == file.raw.name
                    })
                    fileList.splice(index2,1)
                }else{
                    this.inFile(file, fileList)
                }
                }else{
                    this.inFile(file, fileList)
                }
                this.$nextTick(()=>{
                    var b = ''
                    if(this.Already.length>0){
                        this.Already.forEach(item=>{
                            b = b+item+','
                        })
                        this.$alert('文件'+b+'已存在', '提示', {
                            confirmButtonText: '确定',
                            type:'warning',
                            callback: action => {
                                this.Already = []
                            }
                        });
                    }
                })
            },
            inFile(file, fileList){
                var index = this.file.findIndex(item=>{
                    return item.name == file.raw.name
                })
                if(index!=-1){
                    this.Already.push(this.file[index].name)
                    var index2 = fileList.reverse().findIndex(item=>{
                        return item.raw.name == file.raw.name
                    })
                    fileList.splice(index2,1)
                }else{
                    this.dialogImageUrl.push(file.url) 
                    this.file.push(file.raw) 
                }
            },
        // handleChangeUpload(file, fileList) {
        //     this.dialogImageUrl.push(file.url) 
        //     // this.hideUploadEdit = true
        //     this.file.push(file.raw)
        // },
        handleRemove(index) {
            this.file.splice(index,1)
            this.dialogImageUrl.splice(index,1)
            // this.ruleForm.filePath = ''
        },
        handlePictureCardPreview(file) {
            this.ImageUrl = file
            this.dialogVisible = true;
        },
        handleRemove1(index) {
            this.product.reportFiles.splice(index,1)
        },
        handlePictureCardPreview1(file) {
            this.ImageUrl = this.$p + file.address
            this.dialogVisible = true;
        },
        getProduct(){
            let a = {
                reportId:this.reportId
            }
            this.$api.getProduct(a).then(response=>{
                if (response.code == 200) {
                  if (response.data) {
                    if (response.data.deadLine) {
                        this.isDate=false
                      }
                        this.product = response.data
                    }else{
                        this.$emit('isSave',false)
                    }
                    
                }
            })
        },
        saveProduct(){
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.product.reportId = this.reportId
                    let formData = new FormData()
                    if(this.file.length>0){
                        this.file.forEach(item=>{
                            formData.append('files', item)
                        })
                    }
                    formData.append('jsons', JSON.stringify(this.product))
                    if(this.product.id){
                        this.$api.updateProduct(formData).then(response=>{
                            if(response.code == 200){
                                this.dialogImageUrl = []
                                this.file = []
                                this.$message.success('产品信息修改成功')
                                this.$emit('isSave',true)
                                this.getProduct()
                            }
                        })
                    }else{
                        this.$api.addProduct(formData).then(response=>{
                            if(response.code == 200){
                                this.dialogImageUrl = []
                                this.file = []
                                this.$message.success('产品信息保存成功')
                                this.$emit('isSave',true)
                                this.getProduct()
                            }
                        })
                    }
                }
            })

           
            
        },
    },
}
</script>

<style lang="scss" scoped>
    .header1{
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
    }
    .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>
