<template>
    <div class="attr-list">
        <CommonAttr></CommonAttr>
        <el-form label-position="top">
            <el-form-item label="样式类型">
                <el-select v-model="curComponent.propValue.type" placeholder="请选择">
                    <el-option
                        v-for="item in [{label:'默认',value: 'none'},{label:'卡片',value:'card'}]"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="图片适配方式">
                <el-select v-model="curComponent.propValue.fit" placeholder="请选择">
                    <el-option
                        v-for="item in [{label:'充满',value: 'fill'},
                                        {label:'包含',value:'contain'},
                                        {label:'覆盖',value:'cover'},
                                        {label:'无',value:'none'},
                                        {label:'缩小',value:'scale-down'}]"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="图片内容">
                <el-tag
                    v-for="(tag,i) in curComponent.propValue.urls"
                    :key="tag"
                    style="margin-right: .5rem;"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(tag)"
                >
                    <el-popover
                        style="display: inline-block;"
                        placement="top-start"
                        width="200"
                        trigger="hover"
                    >
                        <el-image
                            style="width: 100%; height: auto;"
                            :src="tag"
                            fit="contain"
                        />
                        <div slot="reference">图{{ i }}</div>
                    </el-popover>
                </el-tag>
                <el-button size="small">+添加</el-button>
            </el-form-item>
            <el-form-item label="切换间隔">
                <el-input-number
                    v-model="curComponent.propValue.interval"
                    size="small"
                    :step="500"
                    step-strictly
                ></el-input-number>
            </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: {
        handleClose(tag) {
            this.curComponent.propValue.urls.splice(this.curComponent.propValue.urls.indexOf(tag), 1)
        },
    },
}
</script>
