<template>
    <view class="courseInfo">
        <view>xxxxx</view>
        <view @click="startLearn">开始学习</view>
        <view @click="openInputCode">输入口令</view>
        <view @click="pay">付费学习</view>

        <u-modal v-model="show">
            <view class="slot-content">
                <view v-if="toggleFlag === 'tolearn'">
                    <label>www.baidu.com</label>
                </view>
                <view v-else class="input-list">
                    <!-- input输入框 -->
                    <input class="input-item" v-if="focus" adjust-position="false" auto-blur="true"
                        @blur="inputCodeBlur" @input="inputCode" :focus="focus" v-model="code" @focus="inputFocus"
                        type="number" oneTimeCode maxlength="6" />
                    <!-- 验证码输入框 -->
                    <view class="code-list" @click="focusClick">
                        <view class="code-item" v-for="(item, index) in 6" :key="index"
                            :style="(index == code.length && focus ? 'border-color:#3c9cff;' : '')">{{ code[index] || ''
                            }}
                        </view>
                    </view>
                </view>

            </view>
        </u-modal>
    </view>
</template>

<script>
export default {
    data() {
        return {
            toggleFlag:'',
            show: false,
            focus: false,
            code: ''
        }
    },
    methods: {
        startLearn() {
            this.show = true
            this.toggleFlag = 'tolearn'
        },
        focusClick() {
            this.focus = true
        },
        pay() {
            console.log('pay for this');
        },
        openInputCode() {
            this.show = true
        },
        inputCode(e) {
            let value = e.detail.value
            this.code = value
        },
        inputFocus(e) {
            console.log(e);
        },
        inputCodeBlur(e) {
            let value = e.detail.value
            this.focus = false
        }
    }
}
</script>

<style lang="scss">
.courseInfo {
    .slot-content {
        font-size: 28rpx;
        color: $u-content-color;
        padding-left: 30rpx;
    }

    .input-list {
        display: flex;
        align-items: center;

        .input-item {
            width: 0rpx;
        }

        .code-list {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .code-item {
                width: 80rpx;
                height: 80rpx;
                text-align: center;
                line-height: 80rpx;
                border: 1rpx solid #eee;
                border-radius: 10rpx;
            }
        }
    }

}
</style>