<template>
    <div class="attr-list">
        <CommonAttr></CommonAttr>
        <el-form label-position="top">
            <el-form-item label="视频地址">
                <el-input v-model="curComponent.propValue.src" placeholder="请输入地址" />
            </el-form-item>
            <el-form-item label="视频类型(支持播放flv直播流)">
                <el-select v-model="curComponent.propValue.type" placeholder="请选择">
                    <el-option
                        v-for="item in [{value:'mp4'},{value:'flv'}]"
                        :key="item.value"
                        :label="item.value"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
                <el-checkbox
                    v-model="curComponent.propValue.isLive"
                    :disabled="curComponent.propValue.type ==='mp4'"
                    :label="true"
                >
                    是直播？
                </el-checkbox>
            </el-form-item>
            <el-form-item label="显示设置">
                <el-checkbox v-model="curComponent.propValue.controls" :label="true">控制条</el-checkbox>
                <el-checkbox v-model="curComponent.propValue.loop" :label="true">循环播放</el-checkbox>
                <el-checkbox v-model="curComponent.propValue.autoplay" :label="true">自动播放</el-checkbox>
                <el-checkbox v-model="curComponent.propValue.muted" :label="true">静音播放</el-checkbox>
            </el-form-item>
            <el-form-item label="圆角(输入浮点数)">
                <el-input v-model="curComponent.propValue.borderRadius" placeholder="请设置圆角" style="width: 40%;">
                    <template slot="suffix">rem</template>
                </el-input>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import CommonAttr from '@/custom-component/common/CommonAttr.vue'

export default {
    components: { CommonAttr },
    computed: {
        curComponent() {
            return this.$store.state.curComponent
        },
    },
    mounted() {
    },
    methods: {
    },
}
</script>
