<template>
    <!-- 作为无效证据使用历史 -->
  <div class="height_100">
    <el-container>
        <el-header>
            <div class="head">
                <el-button size="small" @click="add">添加</el-button>
            </div>
        </el-header>
        <el-main>
            <el-table :data="tableData" v-loading="loading" border style="width: 100%">
                <el-table-column label="无效案号" prop="invalidCaseNum" align="center">
                    <template slot-scope="scope">
                        <span>{{scope.row.invalidCaseNum}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="被无效专利" prop="invalidedPatent" align="center">
                    <template slot-scope="scope">
                        <span>{{scope.row.invalidedPatent}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="无效时间" prop="invalidTime" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.invalidTime">{{scope.row.invalidTime.substring(0,10)}}</span>
                        <span v-else></span>
                    </template>
                </el-table-column>
                <el-table-column label="无效理由" prop="invalidReason" align="center">
                    <template slot-scope="scope">
                        <span>{{scope.row.invalidReason}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="是否被审查员认可" prop="ifApproved" align="center">
                    <template slot-scope="scope">
                        <span>{{scope.row.ifApproved?'是':'否'}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="附件" prop="reportFiles" align="center">
                    <template slot-scope="scope">
                        <span>
                          <span v-if="scope.row.systemFileList">
                            <div v-for="item in scope.row.systemFileList" :key="item.guid" class="fileList">
                                <myTooltip :content="item.originalName">
                                    <div class="noWrap">{{ item.originalName }}</div>
                                </myTooltip>
                                <myMenu :data="item" :deleted="scope.row.ifAdd?true:false" @delFile="delFile(scope.row,item)"></myMenu>
                            </div>
                            </span>
                             <span v-else><i class="el-icon-minus"></i></span>
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="160" align="center">
                    <template slot-scope="scope" v-if="scope.row.ifAdd">
                        <div class="special">
                            <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
                            <el-button type="text" size="small" @click="del(scope.row)">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
        <!-- <el-footer class="pagination">
            <el-pagination  background layout="total,prev,sizes, pager, next,jumper" :total="total" @current-change="handleCurrentChange" :current-page="queryParams.current" :page-size="queryParams.size"></el-pagination>
        </el-footer> -->
    </el-container>
    <addMessage ref="addMessage" @save="save"></addMessage>
  </div>
</template>

<script>
import mixins from './mixins/index';
export default {
    mixins:[mixins],
    components: {},
    props: {},
    data() {
        return {
            field:[
                {
                    field:'invalidCaseNum',
                    label:'无效案号',
                    components:'el-input',
                    type:'text'
                },
                {
                    field:'invalidedPatent',
                    label:'被无效专利',
                    components:'el-input',
                    type:'text'
                },
                {
                    field:'invalidTime',
                    label:'无效时间',
                    components:'el-date-picker',
                    type:'date'
                },
                {
                    field:'invalidReason',
                    label:'无效理由',
                    components:'el-input',
                    type:'text'
                },
                {
                    field:'ifApproved',
                    label:'是否被审查员认可',
                    components:'el-select',
                    type:'select',
                    options:[
                        {
                            label:'是',
                            value:true
                        },
                        {
                            label:'否',
                            value:false
                        },
                    ]
                },
                {
                    field:'systemFileList',
                    label:'附件',
                    components:'myUpload',
                    type:'upload',
                },
            ],
        };
    },
    watch: {},
    computed: {},
    created() {},
    mounted() {},
    methods: {
        getList(){
            this.loading = true
            this.$api.queryAsInvalidReasonHistory(this.queryParams).then(response=>{
                if(response.code == 200){
                    this.tableData = response.data.data
                    this.total = response.data.total
                    this.loading = false
                }
            }).catch(error=>{
                this.tableData = []
                this.total = 0
                this.loading = false
            })
        },
        async add(){
            if(!(await this.$permission.projectPermission(this.projectId))){
                this.$showPermissionDialog()
                return false
            }
            var form = {}
            var title = '添加作为无效证据使用历史'
            this.$refs.addMessage.open(this.field,form,title)
        },
        async edit(row){
            if(!(await this.$permission.projectPermission(this.projectId))){
                this.$showPermissionDialog()
                return false
            }
            var title = '编辑作为无效证据使用历史'
            this.$refs.addMessage.open(this.field,row,title)
        },
        del(row){
            this.deletes([row.id])
        },
        async deletes(ids){
            if(!(await this.$permission.projectPermission(this.projectId))){
                this.$showPermissionDialog()
                return false
            }
            this.$confirm('是否删除', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$api.deleteAsInvalidReasonHistory(ids).then(response=>{
                    if(response.code == 200){
                        this.$message.success('删除成功')
                        this.getList()
                    }
                }).catch(error=>{

                })
            })
        },
        save(val){
            this.$refs.addMessage.changeBtnLoading(true)
            var form = {
                ...val,
                patentNo:this.patentNo
            }
            var a = ''
            if(form.id){
                a='编辑'
            }else{
                a='添加'
            }
            this.$api.addAsInvalidReasonHistory(form).then(response=>{
                if(response.code == 200){
                    this.$message.success(a+'成功')
                    this.$refs.addMessage.changeBtnLoading(false)
                    this.$refs.addMessage.close()
                    this.getList()
                }
            }).catch(error=>{
                this.$message.error(a+'失败')
                this.$refs.addMessage.changeBtnLoading(false)
            })
        },
        
    },
};
</script>
<style lang="scss" scoped>
.head{
    width: 100%;
    display: flex;
    justify-content: flex-end;
}
.fileList{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>