<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="licensor" align="center">
                    <template slot-scope="scope">
                        <span>{{scope.row.licensor}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="被许可人" prop="licensee" align="center">
                    <template slot-scope="scope">
                        <span>{{scope.row.licensee}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="被许可人国家" prop="licenseeCountry" align="center">
                    <template slot-scope="scope">
                        <span>{{scope.row.licenseeCountry}}</span>
                    </template>
            </el-table-column>
            <el-table-column label="许可时间" prop="licenseTime" align="center">
                <template slot-scope="scope">
                    <span>{{scope.row.licenseTime? scope.row.licenseTime.slice(0,10):'' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="截止时间" prop="licenseDeadLine" align="center">
                <template slot-scope="scope">
                    <span>{{scope.row.licenseDeadLine? scope.row.licenseDeadLine.slice(0,10):'' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="许可费用/万元" prop="licenseFee" align="center">
                <template slot-scope="scope">
                    <span>{{scope.row.licenseFee}}</span>
                </template>
            </el-table-column>
                <el-table-column label="许可类型" prop="licenseType" align="center">
                    <template slot-scope="scope">
                        <span>{{permitTypeList[scope.row.licenseType]}}</span>
                    </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:'licensor',
                    label:'许可人',
                    components:'el-input',
                    type:'text'
                },
                {
                    field:'licensee',
                    label:'被许可人',
                    components:'el-input',
                    type:'text'
                },
                {
                    field:'licenseeCountry',
                    label:'被许可人国家',
                    components:'el-input',
                    type:'text'
                },
                {
                    field:'licenseTime',
                    label:'许可时间',
                    components:'el-date-picker',
                    type:'date'
                },
                {
                    field:'licenseDeadLine',
                    label:'截止时间',
                    components:'el-date-picker',
                    type:'date'
                },
                {
                    field:'licenseFee',
                    label:'许可费用(万元)',
                    components:'el-input-number',
                    type:'number',
                    min:0,
                    max:'Infinity',
                    precision:2,
                    step:0.1
                },
                {
                    field:'licenseType',
                    label:'许可类型',
                    components:'el-select',
                    type:'select',
                    options:[
                        {
                            label:'独占许可',
                            value:'1'
                        },
                        {
                            label:'普通许可',
                            value:'2'
                        },
                        {
                            label:'排他许可',
                            value:'3'
                        },
                    ]
                },
            ],
            permitTypeList:{
                '1':'独占许可',
                '2':'普通许可',
                '3':'排他许可'
            }
        };
    },
    watch: {},
    computed: {},
    created() {},
    mounted() {},
    methods: {
        getList(){
            this.loading = true
            this.$api.queryPermissionRecord(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 licensor = ''
            if(this.patent.rightHolder && this.patent.rightHolder.length>0){
                licensor = this.patent.rightHolder[0]
            }
            var form = {
                licensor:licensor
            }
            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.deletePermissionRecord(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.addPermissionRecord(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;
}
</style>