<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%" row-key="id" >
                <el-table-column type="expand">
                    <template slot-scope="scope">
                        <div class="details">
                            <div class="details_item">
                                <div>案件详情：</div>
                                <div>
                                    <div v-if="scope.row.visible">
                                        <el-button type="text" size="small" @click="cancel(scope.row)">取消</el-button>
                                        <el-button type="text" size="small" @click="saveDetails(scope.row)">保存</el-button>
                                    </div>
                                    <el-button v-else type="text" size="small" @click="editDetails(scope.row)">编辑</el-button>
                                    
                                </div>
                            </div>
                            <div class="details_item1">
                                <el-input type="textarea" v-if="scope.row.visible" v-model="scope.row.caseDetails_copy"></el-input>
                                <span v-else>{{scope.row.caseDetails}}</span>  
                            </div>
                        </div>
                        
                    </template>
                </el-table-column>
                <el-table-column label="原告" prop="plaintiff" align="center">
                    <template slot-scope="scope">
                        <span>{{scope.row.plaintiff}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="被告" prop="defendant" align="center">
                    <template slot-scope="scope">
                        <span>{{scope.row.defendant}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="案由" prop="causeOfAction" align="center">
                    <template slot-scope="scope">
                        <span>{{scope.row.causeOfAction}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="受理法院" prop="court" align="center">
                    <template slot-scope="scope">
                        <span>{{scope.row.court}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="起诉时间" prop="indictTime"  align="center">
                    <template slot-scope="scope">
                        <span>{{scope.row.indictTime}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="审理结果" prop="result" align="center">
                    <template slot-scope="scope">
                        <span>{{scope.row.result}}</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="systemFileList" 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="操作" 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:'plaintiff',
                    label:'原告',
                    components:'el-input',
                    type:'text'
                },
                {
                    field:'defendant',
                    label:'被告',
                    components:'el-input',
                    type:'text'
                },
                {
                    field:'causeOfAction',
                    label:'案由',
                    components:'el-input',
                    type:'text'
                },
                {
                    field:'court',
                    label:'受理法院',
                    components:'el-input',
                    type:'text'
                },
                {
                    field:'indictTime',
                    label:'起诉时间',
                    components:'el-date-picker',
                    type:'date'
                },
                {
                    field:'result',
                    label:'审理结果',
                    components:'el-input',
                    type:'text',
                },
                {
                    field:'caseDetails',
                    label:'案件详情',
                    components:'el-input',
                    type:'text',
                },
                {
                    field:'systemFileList',
                    label:'附件',
                    components:'myUpload',
                    type:'upload',
                },
                {
                    field:'remark',
                    label:'备注',
                    components:'el-input',
                    type:'text',
                },
            ],

        };
    },
    watch: {},
    computed: {},
    created() {},
    mounted() {},
    methods: {
        editDetails(row){
            this.$set(row,'caseDetails_copy',row.caseDetails)
            this.$set(row,'visible',true)
        },
        cancel(row){
            this.$set(row,'caseDetails_copy',null)
            this.$set(row,'visible',false)
        },
        saveDetails(row){
            var form = JSON.parse(JSON.stringify(row))
            form.caseDetails = row.caseDetails_copy
            this.$api.addLitigationHistory(form).then(response=>{
                if(response.code == 200){
                    this.$message.success('编辑成功')
                    this.$set(row,'caseDetails',row.caseDetails_copy)
                    this.$set(row,'visible',false)
                }
            }).catch(error=>{
                this.$message.error('编辑失败')
            })
        },
        
        getList(){
            this.loading = true
            this.$api.queryLitigationHistory(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)
        },
        async del(row){
            if(!(await this.$permission.projectPermission(this.projectId))){
                this.$showPermissionDialog()
                return false
            }
            this.deletes([row.id])
        },
        deletes(ids){
            this.$confirm('是否删除', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$api.deleteLitigationHistory(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.addLitigationHistory(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;
}
.details{
    width: 100%;
    padding:5px 20px;
    .details_item{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center; 
    }
    
}
.fileList{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>