<template>
  <div class="height_100">
    <el-container>
        <el-header>
            <div class="head">
                <el-button type="primary" size="small" class="margin-right_10" @click="add">添加</el-button>
                <el-button type="primary" size="small" class="margin-right_10" :loading="btnLoading" @click="save">保存</el-button>
            </div>
        </el-header>
        <el-main>
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="order" label="序号" width="120" align="center">
                    <template slot-scope="scope">
                        <div>
                            <el-input  v-model="scope.row.order" @blur="check(scope.row)" placeholder="请输入序号"></el-input>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="专利号/标题" align="center">
                    <template slot="header">
                        <span>专利号/标题</span>
                        <span class="margin-left_10">
                            <el-tooltip class="item" effect="dark" content="专利文献则输入专利号，非专利文献输入文献标题" placement="top">
                                <i class="el-icon-info"></i>
                            </el-tooltip>
                        </span>
                    </template>
                    <template slot-scope="scope">
                        <div>
                            <el-input v-model="scope.row.name" placeholder="请输入专利号/标题"></el-input>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="type" label="文献类型" align="center">
                    <template slot-scope="scope">
                        <div>
                            <el-select v-model="scope.row.type" placeholder="请选择">
                                <el-option label="专利"  value="0"></el-option>
                                <el-option label="非专利"  value="1"></el-option>
                            </el-select>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="publicDate" label="公开日" align="center">
                    <template slot="header">
                        <span>公开日</span>
                        <span class="margin-left_10">
                            <el-tooltip class="item" effect="dark" content="专利文献不需要选择公开日，非专利文献需要选择公开日（出版日）" placement="top">
                                <i class="el-icon-info"></i>
                            </el-tooltip>
                        </span>
                    </template>
                    <template slot-scope="scope">
                        <div>
                            <el-date-picker v-if="scope.row.type == 1" v-model="scope.row.publicDate" style="width: 100%" type="date" placeholder="选择日期"></el-date-picker>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="authorName" label="权利人/作者" align="center">
                    <template slot="header">
                        <span>权利人/作者</span>
                        <span class="margin-left_10">
                            <el-tooltip class="item" effect="dark" content="专利文献不需要输入权利人/作者，非专利文献需要文献作者" placement="top">
                                <i class="el-icon-info"></i>
                            </el-tooltip>
                        </span>
                    </template>
                    <template slot-scope="scope">
                        <div>
                            <el-input v-if="scope.row.type == 1" v-model="scope.row.authorName" placeholder="请输入权利人/作者"></el-input>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="description" label="备注" align="center">
                    <template slot-scope="scope">
                        <div>
                            <el-input v-model="scope.row.description" placeholder="请输入备注"></el-input>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <div class="caozuo">
                            <el-upload
                                v-if="scope.row.type == 1"
                                class="margin-right_10"
                                action="#"
                                :show-file-list="false"
                                :auto-upload="false"
                                :limit="1"
                                :on-change="(file,fileList)=>upload(file,fileList,scope.row)"
                            >
                                <el-button type="text" size="small">点击上传</el-button>
                            </el-upload>
                            <el-button @click="remove(scope)" type="text" size="small">移除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    projectId:{
        default:0
    }
  },
  data() {
    return {
        tableData:[],
        btnLoading:false,
        evidences:[]
    };
  },
  watch: {},
  computed: {},
  created() {},
  async mounted() {
    await this.getEvidence()
    this.add()
  },
  methods: {
    //获取已添加的证据文献
    async getEvidence(){
        var params = {
            projectId:this.projectId
        }
        await this.$api.queryCompareLiterature(params).then(response=>{
            if(response.code == 200){
                this.evidences = response.data.data.sort((a,b)=>{
                    return a.sysOrder - b.sysOrder
                })
            }
        }).catch(error=>{
            this.evidences = []
        })
    },
    /**
     * 校验序号
     * @param {*} row 
     */
    check(row){
        var num = row.order.replace(/[^0-9]/g, "");
        var data = this.evidences.concat(this.tableData)
        var index = data.findIndex(item=>{
            return item.sysOrder == num && item.order!=row.order
        })
        if(index == -1){
            row.sysOrder = num
        }else{
            this.$message.warning('已存在该序号文献！')
            this.$set(row,'order',`D${row.sysOrder}`)
        }
    },
    //移除
    remove(scope){
        var index = scope.$index
        this.tableData.splice(index,1)
    },
    //上传文件
    upload(file,fileList,row){
        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){
                row.literatureNo = response.data[0]
            }
        })
    },
    //添加
    add(){
        var order = 1
        if(this.tableData.length == 0){
            if(this.evidences.length != 0){
                var currentOrder = this.evidences[this.evidences.length - 1].sysOrder
                order = Number(currentOrder) + 1
            }
        }else{
            var currentOrder = this.tableData[this.tableData.length - 1].sysOrder
            order = Number(currentOrder) + 1
        }
        this.tableData.push(
            {
                sysOrder:order,
                order : `D${order}`,
                projectId:this.projectId,
                type:'0',
            }
        )
    },
    //保存
    save(){

        var data = this.tableData.filter(item=>{
            return item.name
        })
        for(var i = 0;i<data.length;i++){
            if(data[i].name){
                if(data[i].type == 0){
                    data[i].literatureNo = data[i].name
                }
            }
        }
        var params = {
            updateBatchLiteratureDTOs:data,
            projectId:this.projectId
        }
        this.btnLoading = true
        this.$api.updateCompareLiteratureBatch(params).then(response=>{
            if(response.code == 200){
                this.$message.success('任务已发起，等待导入中...')
                this.btnLoading  = false
            }
        }).catch(error=>{
            this.$message.error('任务添加失败')
            this.btnLoading  =false
        })
    },
    comeBack(){
        this.$confirm('是否返回证据文献清单', '提示', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'info'
        }).then(() => {
            // this.$router.back()
        }).catch(err => {
          
      })
    }
  },
};
</script>
<style lang="scss" scoped>
.head{
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
}
.caozuo{
    display: flex;
    justify-content: center;
}
</style>