<template>
    <!-- 断面的表格 -->
    <div class="tableContent">
        <div v-if="tableData && tableData.length > 0">
            <el-table :data="tableData" style="width: 100%" height="250" v-if="triggerType == '实时触发'">
                <!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column>
                <el-table-column align="center" prop="zone_id" label="区域编号"></el-table-column> -->
                <el-table-column align="center" prop="name" label="区域名称"></el-table-column>
                <el-table-column align="center" prop="time" label="时间戳"></el-table-column>
                <!-- <el-table-column align="center" prop="" label="视频帧"></el-table-column> -->
                <el-table-column align="center" label="目标类型" prop="type">
                    <!-- <template slot-scope="scope">
                        <span v-if="scope.row.type == 'Person'">行人</span>
                        <span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
                        <span v-if="scope.row.type == 'Non_Motor'">非机动车</span>
                        <span v-if="scope.row.type == 'Motor Vehicle|Non_Motor'">机动车|非机动车</span>
                        <span v-if="scope.row.type == 'Motor Vehicle|Person'">机动车|行人</span>
                        <span v-if="scope.row.type == 'Person|Non_Motor'">行人|非机动车</span>
                        <span v-if="scope.row.type == 'Person|Motor Vehicle'">行人|机动车</span>
                        <span v-if="scope.row.type == 'Person|Non_Motor|Motor Vehicle'">行人|非机动车|机动车</span>
                        <span v-if="scope.row.type == 'Person|Motor Vehicle|Non_Motor'">行人|非机动车|机动车</span>
                        <span v-if="scope.row.type == 'Non_Motor|Person|Motor Vehicle'">行人|非机动车|机动车</span>
                        <span v-if="scope.row.type == 'Non_Motor|Motor Vehicle|Person'">行人|非机动车|机动车</span>
                        <span v-if="scope.row.type == 'Motor Vehicle|Non_Motor|Person'">行人|非机动车|机动车</span>
                        <span v-if="scope.row.type == 'Motor Vehicle|Person|Non_Motor'">行人|非机动车|机动车</span>
                        <span v-if="scope.row.type == 'Non_Motor|Motor Vehicle'">非机动车|机动车</span>
                        <span v-if="scope.row.type == 'Non_Motor|Person'">非机动车|行人</span>
                    </template> -->
                </el-table-column>
                <el-table-column align="center" prop="n_stay" label="存车数"></el-table-column>
                <el-table-column align="center" prop="n_queue" label="排队数"></el-table-column>
                <el-table-column align="center" prop="occ" label="占用状态"></el-table-column>
                <el-table-column align="center" prop="speed" label="空间平均速度">
                    <template slot-scope="scope">
                        {{
                            scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
                                ? Math.abs(scope.row.speed)
                                : scope.row.speed == '-1'
                                ? '-'
                                : scope.row.speed
                        }}
                    </template>
                </el-table-column>
            </el-table>

            <!-- 固定间隔 -->
            <el-table :data="tableData" style="width: 100%" height="250" v-if="triggerType == '固定间隔'">
                <el-table-column align="center" prop="gate_id" label="断面编号"></el-table-column>
                <el-table-column align="center" prop="name" label="断面名称"></el-table-column>
                <el-table-column align="center" prop="time" label="时间戳"></el-table-column>
                <el-table-column align="center" prop="interval" label="时间序号"></el-table-column>
                <el-table-column align="center" prop="type" label="目标类型">
                    <!-- <template slot-scope="scope">
                        <span v-if="scope.row.type == 'Person'">行人</span>
                        <span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
                        <span v-if="scope.row.type == 'Non_Motor'">非机动车</span>
                        <span v-if="scope.row.type == 'Motor Vehicle|Non_Motor'">机动车|非机动车</span>
                        <span v-if="scope.row.type == 'Motor Vehicle|Person'">机动车|行人</span>
                        <span v-if="scope.row.type == 'Person|Non_Motor'">行人|非机动车</span>
                        <span v-if="scope.row.type == 'Person|Non_Motor|Motor Vehicle'">行人|非机动车|机动车</span>
                        <span v-if="scope.row.type == 'Person|Motor Vehicle|Non_Motor'">行人|非机动车|机动车</span>
                        <span v-if="scope.row.type == 'Non_Motor|Person|Motor Vehicle'">行人|非机动车|机动车</span>
                        <span v-if="scope.row.type == 'Non_Motor|Motor Vehicle|Person'">行人|非机动车|机动车</span>
                        <span v-if="scope.row.type == 'Motor Vehicle|Non_Motor|Person'">行人|非机动车|机动车</span>
                        <span v-if="scope.row.type == 'Motor Vehicle|Person|Non_Motor'">行人|非机动车|机动车</span>
                        <span v-if="scope.row.type == 'Non_Motor|Motor Vehicle'">非机动车|机动车</span>
                        <span v-if="scope.row.type == 'Non_Motor|Person'">非机动车|行人</span>
                    </template> -->
                </el-table-column>
                <el-table-column align="center" prop="in_flow" label="入流流量"></el-table-column>
                <el-table-column align="center" prop="out_flow" label="出流流量"></el-table-column>
                <el-table-column align="center" prop="flow" label="断面流量"></el-table-column>
                <el-table-column align="center" prop="in_spd" label="入流平均速度"></el-table-column>
                <el-table-column align="center" prop="out_spd" label="出流平均速度"></el-table-column>
                <el-table-column align="center" prop="speed" label="断面的平均速度"></el-table-column>
            </el-table>
        </div>
        <div v-else>
            <el-empty :image-size="100"></el-empty>
        </div>
    </div>
</template>

<script>
export default {
    name: 'tableShow',
    props: {
        tableData: {
            type: Array,
            default() {
                return [];
            }
        },
        triggerType: {
            type: String
        }
    },
    data() {
        return {
          //表格字段备注
          tableOptions:[
                {
                    type:'实时触发',
                    column:[
                        {prop:'name',label:'区域名称'},
                        {prop:'time',label:'时间戳'},
                        {prop:'type',label:'目标类型'},
                        {prop:'n_stay',label:'存车数'},
                        {prop:'n_queue',label:'排队数'},
                        {prop:'occ',label:'占用状态'},
                        {prop:'speed',label:'空间平均速度'},
                    ]
                },
                {
                    type:'固定时刻', //TODO-目前代码里无此逻辑
                    column:[
                        {prop:'name',label:'区域名称'},
                        {prop:'time',label:'时间戳'},
                        {prop:'type',label:'目标类型'},
                        {prop:'n_stay',label:'存车数'},
                        {prop:'n_queue',label:'排队数'},
                        {prop:'occ',label:'占用状态'},
                        {prop:'speed',label:'空间平均速度'},
                    ]
                },
                {
                    type:'固定间隔',
                    column:[
                        {prop:'gate_id',label:'断面编号'},
                        {prop:'name',label:'断面名称'},
                        {prop:'time',label:'时间戳'},
                        {prop:'interval',label:'时间序号'},
                        {prop:'type',label:'目标类型'},
                        {prop:'in_flow',label:'入流流量'},
                        {prop:'out_flow',label:'出流流量'},
                        {prop:'flow',label:'断面流量'},
                        {prop:'in_spd',label:'入流平均速度'},
                        {prop:'out_spd',label:'出流平均速度'},
                        {prop:'speed',label:'断面的平均速度'},
                    ]
                }
            ]
        };
    },
    watch: {
        tableData: {
            handler(newVal) {
                console.log(newVal, '断面表格数据');
            }
        }
    },
    methods: {}
};
</script>

<style scoped lang="scss">
.tableContent {
    position: relative;
    width: 100%;
    // height: 100%;
}
</style>