<template>
    <div class="attr-list">
        <CommonAttr></CommonAttr>
        <el-form label-position="top">
            <el-form-item label="起始时刻">
                <el-date-picker
                    v-model="curComponent.propValue.startTime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetime"
                    placeholder="为空表示此刻开始"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间">
                <el-date-picker
                    v-model="curComponent.propValue.endTime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetime"
                    placeholder="选择结束时刻"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="显示设置">
                <el-checkbox v-model="curComponent.propValue.showDays" :label="true">天</el-checkbox>
                <el-checkbox v-model="curComponent.propValue.showHours" :label="true">时</el-checkbox>
                <el-checkbox v-model="curComponent.propValue.showMinutes" :label="true">分</el-checkbox>
                <el-checkbox v-model="curComponent.propValue.showSeconds" :label="true">秒</el-checkbox>
            </el-form-item>
            <el-form-item label="单位设置">
                <el-select v-model="curComponent.propValue.labels.days" placeholder="请选择">
                    <el-option key="d0" label="英文" value="Days"></el-option>
                    <el-option key="d1" label="中文" value="天"></el-option>
                    <template slot="prefix">天</template>
                </el-select>
                <el-select v-model="curComponent.propValue.labels.hours" placeholder="请选择" style="margin-top: 5px;">
                    <el-option key="d0" label="英文" value="Hours"></el-option>
                    <el-option key="d1" label="中文" value="时"></el-option>
                    <template slot="prefix">时</template>
                </el-select>
                <el-select v-model="curComponent.propValue.labels.minutes" placeholder="请选择" style="margin-top: 5px;">
                    <el-option key="m0" label="英文" value="Minutes"></el-option>
                    <el-option key="m1" label="中文" value="分"></el-option>
                    <template slot="prefix">分</template>
                </el-select>
                <el-select v-model="curComponent.propValue.labels.seconds" placeholder="请选择" style="margin-top: 5px;">
                    <el-option key="s0" label="英文" value="Seconds"></el-option>
                    <el-option key="s1" label="中文" value="秒"></el-option>
                    <template slot="prefix">秒</template>
                </el-select>
            </el-form-item>
            <el-form-item label="计时器数字大小">
                <el-input v-model="curComponent.propValue.countdownSize" style="width: 100%;text-align: center;">
                    <template slot="suffix"><p>rem</p></template>
                </el-input>
            </el-form-item>
            <el-form-item label="计时器标签">
                <el-input v-model="curComponent.propValue.labelSize" style="width: 100%;text-align: center;">
                    <template slot="suffix"><p>rem</p></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: {
        handleClose(tag) {
            this.curComponent.propValue.urls.splice(this.curComponent.propValue.urls.indexOf(tag), 1)
        },
        handlePickerStart(value) {
            this.curComponent.propValue.startTime = value
        },
    },
}
</script>
