<template>
    <div class="mt20">
        <el-table :data="classArr" border highlight-current-row ref="table"
        @row-click="(row, column, event) => $rowClick(row,column, event, 'table')"
        >
            <el-table-column label="班次名称" prop="className" width="300px"></el-table-column>
            <el-table-column label="考勤时间" prop="" fixed="right">
                <template slot-scope="scope">
                    <div>
                        <el-tag class="ml10" v-for="(item,index) in scope.row.attendanceClassDetailList" :key="index">
                            {{item.goWorkDate}} ~ {{item.offWorkDate}}
                        </el-tag>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <div class="mt20">
            <el-button type="primary" size="mini" @click="saveRowBanci">确定</el-button>
            <el-button type="" size="mini" @click="cancelBanci">取消</el-button>
        </div>
    </div> 
</template>

<script>
export default {
    props:{
        classArr:{
            type:Array,
            default:[]
        },
        currentArr:{
            type:Object,
            default:{}
        }
    },
    data(){
        return{
            selected:{}
        }
    },
    mounted() {
       this.selected = this.currentArr
        this.$nextTick(() => {
            let index = this.classArr.findIndex(item => item.id == this.selected.id)
            this.$refs['table'].setCurrentRow(this.classArr[index],true) 
        })  
    },
    methods:{
        saveRowBanci(){
            this.$emit('saveRowBanci',this.selected)
        },
        cancelBanci(){
            this.$emit('cancelBanci',null)
        },
        // 表格切换高亮点击
        $rowClick (row, column, ev, ref) {
            this.selected = row
            const $table = this.$refs[ref]
            // 因为不知道表格中包裹了多少层元素,所以需要通过查询点击元素的所有父级元素找到符合条件的类名进行判断
            const haveHeightLight = [...ev.path].some(el => {
                if (el.classList) return [...el.classList].indexOf('el-table__row') !== -1 && [...el.classList].indexOf('current-row') !== -1
            })
            try {
                $table[0].setCurrentRow(haveHeightLight ? '' : row)
            } catch (e) {
                $table.setCurrentRow(haveHeightLight ? '' : row)
            }
        },
    }
}
</script>

<style>

</style>