<template>
  <div>
    <el-dialog  :title="title" :visible.sync="showDialog" width="600px" :close-on-click-modal="false"  :before-close="handleClose" append-to-body>
        <div style="height:calc(100vh - 350px)">
            <div style="height:calc(100% - 30px)">
                <el-table :data="tableData" max-height="calc(100% - 0)" border style="width: 100%;">
                    <el-table-column label="#" width="60" type="index" align="center">
                        <template slot-scope="scope">
                            <div v-if="refresh">
                                <el-checkbox :label="scope.row.id" @change="changeSelect(scope.row)" :checked="checkList.filter(item=>{return item.id == scope.row.id}).length>0">
                                    <span>{{ (scope.$index + 1) + ((queryParams.current - 1) * queryParams.size) }}</span>
                                </el-checkbox>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="" label="无效证据">
                        <template slot-scope="scope">
                            <div>
                                <span v-for="(item,index) in scope.row.literatures" :key="item.id">
                                    <span v-if="item.id <= 0">{{ item.name }}</span>
                                    <span v-else>D{{ item.sysOrder }}</span>
                                    <span v-if="index < scope.row.literatures.length-1"> + </span>
                                </span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="evidenceText" label="无效证据详情">
                        <template slot-scope="scope">
                            <div>
                                <div v-html="scope.row.evidenceText"></div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="evidenceDescription" label="说明"></el-table-column>
                </el-table>
            </div>
            
            <div class="pagination">
                <el-pagination background layout="total, sizes, prev, pager, next, jumper"
                    :current-page.sync="queryParams.current" :page-size.sync="queryParams.size"
                    @current-change="handleCurrentChange" @size-change="getInvalidHistory" :total="total">
                </el-pagination>
            </div>
            
        </div>
        
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="submit" >确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
        title:'无效记录历史',
        showDialog:false,
        loading:false,
        tableData:[],
        checkList:[],
        refresh:true,
        queryParams:{
            current:1,
            size:10
        },
        total:0,
        featureId:''
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {},
  methods: {
    open(featureId){
        this.showDialog = true
        this.featureId = featureId
        this.checkList = []
        this.getInvalidHistory()
        this.refreshCheck()
    },
    refreshCheck(){
        this.refresh = false
        this.$nextTick(()=>{
            this.refresh = true
        })
    },
    handleClose(){
        this.showDialog = false
    },
    changeSelect(row){
        var index = this.checkList.findIndex(item=>{
            return item.id == row.id
        })
        if(index == -1){
            this.checkList.push(row)
        }else{
            this.checkList.splice(index,1)
        }
    },
    //确认
    submit(){
        this.$emit('invalidHistory',this.checkList)
        this.handleClose()
    },
    handleCurrentChange(val){
        this.queryParams.current = val
        this.getInvalidHistory()
    },
    //获取历史无效记录
    getInvalidHistory(){
        var params = {
            ...this.queryParams,
            featureId:this.featureId
        }
        this.loading = true
        this.$api.queryInvalidHistory(params).then(response=>{
            if(response.code == 200){
                this.tableData = response.data.data
                this.loading = false
            }
        }).catch(error=>{
            this.tableData = []
            this.loading = false
        })
        
    }
  },
};
</script>
<style lang="scss" scoped>
</style>