<template>
    <div>
        <div class="down">
            <el-dropdown trigger="click" @command="handleCommand">
                <span>编辑<i class="el-icon-caret-bottom"></i></span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="show">查看详情</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <el-dialog title="编辑" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
            <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="msg[0].val3"></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" @click="onSubmit">确认</el-button>
                    <el-button @click="dialogVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>

export default {
    name: 'detailDialog',//速度组件
    props: {
        msg: {
            type: Array,
            default() {
                return []
            }
        }
    },
    data() {
        return {
            dialogVisible: false,
            startTime: '',
            endTime: '',
            checkList: ['复选框 A']
        }
    },
    methods: {
        onSubmit(){

        },
        handleCommand(command) {  // 用户名下拉菜单选择事件
            if (command == 'show') {
                this.dialogVisible = true
            }
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },

    },
    mounted() {

    }
}
</script>
<style scoped>
.down {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 100;
}
.el-form-item{
    margin-bottom: 20px;
}
</style>