<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="referenceName" align="center">
                    <template slot-scope="scope">
                        <span>{{scope.row.referenceName}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="说明" prop="remark" align="center">
                    <template slot-scope="scope">
                        <span>{{scope.row.remark}}</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" @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="URL" prop="referenceUrl" align="center">
                    <template slot-scope="scope">
                        <a :href="scope.row.referenceUrl"  target="_blank">{{scope.row.referenceUrl}}</a>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="160" align="center">
                    <template slot-scope="scope">
                        <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:'referenceName',
                    label:'名称',
                    components:'el-input',
                    type:'text'
                },
                {
                    field:'remark',
                    label:'说明',
                    components:'el-input',
                    type:'text'
                },
                {
                    field:'systemFileList',
                    label:'附件',
                    components:'myUpload',
                    type:'upload',
                },
                {
                    field:'referenceUrl',
                    label:'URL',
                    components:'el-input',
                    type:'text'
                },
            ],
        };
    },
    watch: {},
    computed: {},
    created() {},
    mounted() {},
    methods: {
        getList(){
            this.loading = true
            this.$api.queryOtherReferences(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.deleteOtherReferences(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.addOtherReferences(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>