<template>
    <div>
        <div style="display:flex;justify-content: flex-end;margin-bottom:20px">
            <!-- <el-button @click="checkEcharts">分析图</el-button> -->
            <el-button @click="addPermit">添加</el-button>
        </div>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column label="许可人" prop="licensor" align="center">
                <template slot-scope="scope">
                    <span v-if="!scope.row.vVisible">{{scope.row.licensor}}</span>
                    <el-input v-else v-model="scope.row.licensor"></el-input>
                </template>
            </el-table-column>
            <el-table-column label="被许可人" prop="licensee" align="center">
                <template slot-scope="scope">
                    <span v-if="!scope.row.vVisible">{{scope.row.licensee}}</span>
                    <el-input v-else v-model="scope.row.licensee" placeholder="请输入被许可人姓名"></el-input>
                </template>
            </el-table-column>
            <el-table-column label="被许可人国家" prop="licenseeCountry" align="center">
                <template slot-scope="scope">
                   <span v-if="!scope.row.vVisible">{{scope.row.licenseeCountry}}</span>
                   <el-input v-else v-model="scope.row.licenseeCountry" placeholder="请输入被许可人国家"></el-input>
               </template>
           </el-table-column>
           <el-table-column label="许可时间" prop="licenseTime" align="center">
               <template slot-scope="scope">
                   <span v-if="!scope.row.vVisible">{{scope.row.licenseTime? scope.row.licenseTime.slice(0,10):'' }}</span>
                   <el-date-picker style="width:100%" v-else v-model="scope.row.licenseTime" type="date" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd" placeholder="选择日期时间"> </el-date-picker>
               </template>
           </el-table-column>
           <el-table-column label="截止时间" prop="licenseDeadLine" align="center">
               <template slot-scope="scope">
                   <span v-if="!scope.row.vVisible">{{scope.row.licenseDeadLine? scope.row.licenseDeadLine.slice(0,10):'' }}</span>
                   <el-date-picker style="width:100%" v-else v-model="scope.row.licenseDeadLine" type="date" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd" placeholder="选择日期时间"> </el-date-picker>
               </template>
           </el-table-column>
           <el-table-column label="许可费用/万元" prop="licenseFee" align="center">
               <template slot-scope="scope">
                   <span v-if="!scope.row.vVisible">{{scope.row.licenseFee}}</span>
                   <el-input v-else v-model="scope.row.licenseFee" placeholder="请输入许可费用"></el-input>
               </template>
           </el-table-column>
            <el-table-column label="许可类型" prop="licenseType" align="center">
                <template slot-scope="scope">
                    <span v-if="!scope.row.vVisible">{{scope.row.licenseType?permitTypeList.filter(item=>item.value == scope.row.licenseType )[0].label:''}}</span>
                    <el-select v-else v-model="scope.row.licenseType" placeholder="请选择">
                       <el-option
                            v-for="item in permitTypeList"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                        </el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="160" align="center">
                <template slot-scope="scope">
                   <div class="special">
                       <span v-if="!scope.row.vVisible" class="items" @click="edit(scope.row)">编辑</span>
                       <span v-else class="items" @click="submit1(scope.row)">保存</span>
                       <span>&nbsp;|&nbsp;</span>
                       <span class="items" v-if="!scope.row.vVisible" @click="deleteit(scope.row)">删除</span>
                       <span v-else class="items" @click="getList">取消</span>
                   </div>
               </template>
            </el-table-column>
        </el-table>
        <div style="display: flex;justify-content: center;">
            <el-pagination
                background
                layout="total,prev, pager, next,jumper"
                :total="total"
                @current-change="handleCurrentChange"
                :current-page="queryParams.current" :page-size="queryParams.size">
            </el-pagination>
        </div>
        <el-dialog title="新增许可历史" :visible.sync="permitVisible" width="1000px" :before-close="close">
            <div>
                <el-form ref="form" :model="form" :rules="rules">
                    <el-form-item label="许可人" prop="licensor">
                        <el-input v-model="form.licensor" placeholder="请输入许可人"></el-input>
                    </el-form-item>
                    <el-form-item label="被许可人" prop="licensee">
                        <el-input v-model="form.licensee" placeholder="请输入被许可人"></el-input>
                    </el-form-item>
                    <el-form-item label="被许可人国家" prop="licenseeCountry">
                        <el-input v-model="form.licenseeCountry" placeholder="请输入被许可人国家"></el-input>
                    </el-form-item>
                    <el-form-item label="许可时间" prop="licenseTime">
                        <el-date-picker
                            style="width: 100%"
                            v-model="form.licenseTime"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="选择日期时间"
                        >
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="截止时间" prop="licenseDeadLine">
                        <el-date-picker
                            style="width: 100%"
                            v-model="form.licenseDeadLine"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="选择日期时间"
                        >
                     </el-date-picker>
                    </el-form-item>
                    <el-form-item label="许可费用/万元" prop="licenseFee" >
                        <el-input v-model="form.licenseFee"  placeholder="请输入许可费用"></el-input>
                    </el-form-item>
                    <el-form-item label="许可类型" prop="licenseType">
                        <el-select v-model="form.licenseType" placeholder="请选择许可类型" style="width:100%">
                       <el-option
                            v-for="item in permitTypeList"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                        </el-option>
                    </el-select>
                    </el-form-item>
                </el-form>
            </div> 
            <div slot="footer" class="dialog-footer" style="display: flex;justify-content: flex-end;">
                <el-button @click="close">取 消</el-button>
                <el-button type="primary" @click="submit" :loading="btnLoading">确定</el-button>
            </div> 
        </el-dialog>
        <el-dialog title="分析图" :visible.sync="dialogVisible" width="1000px">
               <div>
                   <el-form :inline="true">
                       <el-form-item label="时间">
                           <el-select v-model="queryParams.time" @change="changeEcharts(1)" placeholder="请选择">
                                <el-option
                                    v-for="item in timeList"
                                    :key="item.value"
                                   :label="item.label"
                                   :value="item.value">
                                </el-option>
                            </el-select>
                       </el-form-item>
                   </el-form>
               </div>
               <div id="echarts" style="width:850px;height:300px">

               </div>
        </el-dialog>
       </div>
</template>
<script>
import { commonMixins } from "../mixins"
export default {
   mixins: [commonMixins],
   data() {
    const licenseFeeRule=(rule,value,callback)=>{
        if(value){
            if(!isNaN(value)){
                callback()
            }else{
                callback(new Error('许可费用只能为数字'))
            }
        }else{
            callback()
        }
    }
       return {
            permitVisible:false,
            btnLoading:false,
           dialogVisible:false,
           timeList:[],
           form:{},
           queryParams:{  
                patentNo:this.patent.patentNo,  
                size:10,
                current:1,
           },
           total:0
,           permitTypeList:[
               {
                   label:'独占许可',
                   value:'1'
               },
               {
                   label:'普通许可',
                   value:'2'
               },
               {
                   label:'排他许可',
                   value:'3'
               },
           ],
           tableData:[],
           rules:{
            licenseFee:[{required:false,validator:licenseFeeRule,trigger: "blur",}]
           },
       }
   },
   watch:{
        patent(val){
            this.queryParams.patentNo = val.patentNo
            this.getList()
        }
   },
   computed:{
   },
   mounted() {
        this.getList()
   },
   methods: {
        //查询许可历史
        getList(){
            this.$api.queryPermissionRecord(this.queryParams).then(response=>{
                if(response.code == 200){
                    this.tableData = response.data.list
                    this.total = response.data.total
                }
            })
        },
        // 分页
        handleCurrentChange(val) {
            this.queryParams.current = val
            this.getList()
        },
        //编辑许可历史
       edit(row){
           this.$set(row,'vVisible',!row.vVisible)
       },
       //删除许可费率
       deleteit(row){
        this.$confirm('确认删除本条数据吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            this.$api.deletePermissionRecord({id:row.id}).then(response=>{
                if(response.code == 200){
                    this.$message.success('删除成功！')
                    if(this.tableData.length==1&&this.queryParams.current!=1){
                        this.queryParams.current -= 1
                    }
                    this.getList()
                }else{
                    this.$message.error('删除失败！')
                }
            }).catch(e=>{
                this.$message.error('删除失败！')
            })
        })
            
       },
       //打开添加许可费率弹窗
       addPermit(){
            this.form = {
                patentNo:this.patent.patentNo,
                licensor:this.patent.applicant.filter(a => a.dataType === 1).length>0?this.patent.applicant.filter(a => a.dataType === 1)[0].name:''
            }
            this.permitVisible = true
       },
       //关闭弹框
       close(){
            this.form = {}
            this.btnLoading=false
            this.permitVisible = false
       },
       //保存
       submit1(row){
            row.patentNo = this.patent.patentNo
            this.$api.updatePermissionRecord(row).then(response=>{
                if(response.code == 200){
                    this.$message.success('修改成功！')
                    this.$set(row,'vVisible',!row.vVisible) 
                }else{
                    this.$message.error('修改失败！')
                }
            }).catch(e=>{
                this.$message.error('修改失败！')
            })
        },
       //确认添加许可历史
       submit(){
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.$api.addPermissionRecord(this.form).then(response=>{
                        if(response.code == 200){
                            this.$message.success('添加成功！')
                            this.getList()
                            this.close()
                        }else{
                            this.$message.error('添加失败！')
                            this.btnLoading = false
                        }
                    }).catch(e=>{
                        this.$message.error('添加失败！')
                        this.btnLoading = false
                    })
                }else {
                    // console.log('error submit!!');
                    return false;
                }
        })
       },
       //查看分析图
       checkEcharts(row){
           this.dialogVisible = true
           this.$nextTick(() => {
               this.timeList=[]
               var chartDom = document.getElementById('echarts') 
               var myChart = this.$echarts.init(chartDom)
           })
          
       }
   },
}
</script>
<style lang="scss" scoped>
.items{
   cursor: pointer;
}
</style>