<template>
    <div class="cms_table">
    	<div class="table_header">
    		<div class="table_row">
	            <div v-for="(col, i) in columns" :class="['table_cell', {['sortable']: col.orderBy}]" :key="i">
	                <div @click="orderBy(col.orderBy)" v-if="col.orderBy">
	                	{{ col.heading }}
	                	<i class="icon icon-angle-up" aria-hidden="true" v-if="currentOrderBy !== col.orderBy"></i>
	                	<i class="icon icon-angle-circled-down" aria-hidden="true" v-else-if="currentOrderDesc"></i>
	                	<i class="icon icon-angle-circled-up" aria-hidden="true" v-else></i>
	                </div>
	                <div v-else>{{ col.heading }}</div>
	            </div>
            </div>
    	</div>
    	<div class="table_content" is="transition-group" name="list">
            <div class="table_row" v-for="(row, ri) in rows" :key="ri">
                <div class="table_cell" v-for="(col, ci) in columns" :key="ci + 'c'">
                    <div v-if="col.prop">{{ getProp(row, col.prop) }}</div>
                    <div v-else-if="col.render">{{ col.render(row) }}</div>
                </div>
            </div>
    	</div>
    </div>
</template>

<script>
	export default {
		name: 'My-Table',
		props: {
			currentOrderBy: {
				type: String
			},
			currentOrderDesc: {
				type: Boolean
			},
			columns: {
				type: Array,
				default() {
					return [ ];
				}
			},
			rows: {
				type: Array,
				default() {
					return [ ];
				}
			}
		},
		data() {
			return {
			}
		},
		methods: {
			orderBy(col) {
				console.log(col);
				this.$emit('sort', {
					orderBy: col,
					orderDesc: false
				});
			},
			getProp(row, prop) {
				let props = prop.split('.');
				let val = row;
				props.forEach((p) => {
					if (typeof val == 'object') {
						val = val[p];
					}
				});
				return val;
			}
		}
	}
</script>

<style lang="less">
	@import "../mixins";
	.list-item {
	  display: inline-block;
	  margin-right: 10px;
	}
	.list-enter-active, .list-leave-active {
	  transition: all 0.2s;
	}
	.list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ {
	  opacity: 0;
	  transform: translateY(30px);
	}

	/*--------------------------------------------------------------
	# Content Tables
	--------------------------------------------------------------*/
	.cms_table{
		&>.table_header, &>.table_content{margin: 0px -25px;}
		&>.table_header{
			.table_row {background:none; font-size:13px; padding:10px 15px;}
			.icon {font-size:14px;}
		}
		.table_row{
		    position: relative;
			display: table;
			width: 100%;
		    table-layout: fixed;
		    background: white;
		    padding: 10px 15px;

		    &:nth-child(even) {
		    	background:#f5f3f4;
		   	}
		}

		.table_cell {
			display: table-cell;
			vertical-align: middle;
			padding:0px 10px;

			&.sortable{
				&:hover{
					cursor: pointer;
				}
			}
		}

		/*.cell_checkbox {width:40px;}
		.cell_image {width:120px; line-height:0;} .cell_image img {width:100%;}
		.cell_title {position:relative;}
		.cell_title a {color:#000;} .cell_title a:hover {color:#28b78d;}*/

		/* === Other cell types === */
		/*.cell_date {}
		.cell_author {}
		.cell_category {}
		.cell_status {position:relative; padding-left:20px;}

		.cell_status:before {
			content:"";
			display:block;
			position:absolute;
			left:0px; top:50%;
			margin-top:-5px;
			width:12px; height:12px;
			border-radius:100%;
			background:#88c87a;
		}

		.cell_status_online {color:#28b78d;} .cell_status_online:before {background-color:#28b78d;}
		.cell_status_offline {color:#ea5e5d;} .cell_status_offline:before {background-color:#ea5e5d;}
		.cell_status_remaining {color:#5fb1e9;} .cell_status_remaining:before {background-color:#5fb1e9;}
		.cell_status_expired {color:#eba760;} .cell_status_expired:before {background-color:#eba760;}
		*/

		/* === Cell settings === */
		/*.cell_settings {text-align:right; width:150px; position:relative; right:0px;}
		.cell_settings a {color:#000; list-style-type:none;}
		.cell_settings .fa-cog {font-size:20px;}
		.cell_settings_inner {
			position:absolute;
			width:205px; height:40px;
			top:50%;
			right:-3px;
			margin-top:-21px;
			border-radius:20px;
			background:#e0e0e0;
			padding:0px 10px;
			z-index:-1;
			overflow:hidden;
			opacity:0;
			-webkit-opacity:0;
			-moz-opacity:0;
			transition:all 0.3s;
		}
		.cell_settings_inner_container {float:right;}
		.cell_settings_inner_section {float:left; border-right:solid 1px #999; padding:0px 10px;}
		.cell_settings_inner_section_last {border:none; padding-right:3px;}
		.cell_settings_inner_section ul {list-style-type:none;}
		.cell_settings_inner_section ul li {float:left; padding-right:7px;}
		.cell_settings_inner_section_last ul li {padding:0px;}
		.cell_settings_inner_section ul li a {color:#000;}
		.cell_settings_inner_section ul li .fa {line-height:40px; font-size:20px;}

		.cell_settings_click, .cell_settings_close {cursor:pointer;}
		.cell_settings a:hover, .cell_settings_click:hover {color:#28b78d!important;}

		.cell_settings_inner_open {
			opacity:1;
			-webkit-opacity:1;
			-moz-opacity:1;
			width:205px;
			z-index:600;
			transition:all 0.3s;
		}*/
	}
</style>
