<template>

    <!-- 区域的表格 -->
    <div class="tableContent">
        <div class="down">
            <el-dropdown trigger="click" @command="handleCommand">
                <span class="moreIcon"></span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="show">查看详情</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>


        <div v-if="msg">
            <!-- 触发 -->
            <el-table :data="msg" style="width: 100%" v-if="type == '触发' ">
                <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column>
                <el-table-column align="center" prop="graphical_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" 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>
                    </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="占用状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.occ == '1'">占用</span>

                    </template>
                </el-table-column>
                <el-table-column align="center" prop="speed" label="空间平均速度"></el-table-column>
            </el-table>
            <el-table :data="msg" style="width: 100%" v-if="type == '周期时刻' ">
                <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column>
                <el-table-column align="center" prop="graphical_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" 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>
                    </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="占用状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.occ == '1'">占用</span>

                    </template>
                </el-table-column>
                <el-table-column align="center" prop="speed" label="空间平均速度"></el-table-column>
            </el-table>
            <!-- 周期统计 -->
            <el-table :data="msg" style="width: 100%" v-if="type == '周期统计'">
                <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="timestamp" label="时间戳"></el-table-column>
                <el-table-column align="center" 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>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="enter_flow" label="驶入流量"></el-table-column>
                <el-table-column align="center" prop="leave_flow" label="驶离流量"></el-table-column>
                <el-table-column align="center" prop="ave_stay" label="平均存车数"></el-table-column>
                <el-table-column align="center" prop="ave_queue" label="平均排队数"></el-table-column>
                <el-table-column align="center" prop="ave_occ" label="平均占有率"></el-table-column>
                <el-table-column align="center" prop="ave_delay" label="平均延误"></el-table-column>
                <el-table-column align="center" prop="ave_speed" label="平均速度"></el-table-column>
            </el-table>
        </div>

        <el-dialog title="编辑" :visible.sync="dialogVisible" width="40%">
            <el-form :model="msg" label-width="80px">
                <el-form-item label="val1">
                    <el-time-select placeholder="起始时间" v-model="startTime"
                        :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }">
                    </el-time-select>
                    <el-time-select placeholder="结束时间" v-model="endTime"
                        :picker-options="{ start: '08:30', step: '00:15', end: '18:30', minTime: startTime }">
                    </el-time-select>
                </el-form-item>
                <el-form-item label="val2">
                    <el-select>
                        <el-option> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="val3">
                    <el-input v-model="dialogVisible"></el-input>
                </el-form-item>
                <el-form-item label="val4">
                    <el-checkbox-group v-model="checkList">
                        <el-checkbox label="数值"></el-checkbox>
                        <el-checkbox label="表格"></el-checkbox>
                        <el-checkbox label="时间曲线图"></el-checkbox>
                        <el-checkbox label="均值图"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary">确认</el-button>
                    <el-button @click="dialogVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
  
<script>
export default {
    name: 'tableShow', //表格组件
    props: {
        msg: {
            type: Array,
            default() {
                return [];
            }
        },
        type: {
            type: String
        },
    },
    data() {
        return {
            dialogVisible: false,
            startTime: '',
            endTime: '',
            checkList: ['复选框 A']
        };
    },
    methods: {
        handleCommand(command) {
            // 用户名下拉菜单选择事件
            if (command == 'show') {
                this.dialogVisible = true;
            }
        }
    },
    mounted() { 
        // console.log(this.type,'129129');
    }
};
</script>
<style scoped>
.tableContent {
    position: relative;
}

.down {
    position: absolute;
    top: -35px;
    right: 5px;
    z-index: 100;
}

.down .moreIcon {
    width: 5px;
    height: 18px;
    background-size: 5px 18px;
    background-image: url(../../assets/img/more.png);
    display: block;
}

.el-form-item {
    margin-bottom: 20px;
}

.tableContent {
    border: 1px solid #e4e7ed;
}
</style>