<template>
    <view 
        class="form-item"
        :class="[__layoutStyle]"
    >
        <view class="form-item__text c-text-gap-cancel">{{ label }}</view>
        <view class="form-item__right">
            <!-- input -->
            <input
                v-if="data.type === 'input'"
                :value="data.value"
                type="text"
                :focus="data.isFocus"
                :name="data.inputName"
                :placeholder="data.placeholder"
                :maxlength="data.maxlength"
                cursor-spacing="20"
                placeholder-class="form-item__placeholder"
                autocomplete="off"
                class="form-item__input"
                @focus="formFocus($event)"
                @input="formInput($event)"
                @blur="formBlur($event)"
            >
            <c-icon
                v-show="data.clear && data.value && data.isFocus"
                class="form-item__del-icon"
                name="close-circle-solid"
                font-size="0.18rem"
                @tap.stop="clearInput"
            />
            <!-- input end -->
            <!-- number input -->
            <input
                v-if="data.type === 'number'"
                :value="data.value"
                type="number"
                :focus="data.isFocus"
                :name="data.inputName"
                :placeholder="data.placeholder"
                :maxlength="data.maxlength"
                cursor-spacing="20"
                placeholder-class="form-item__placeholder"
                autocomplete="off"
                class="form-item__input"
                @focus.stop="formFocus($event)"
                @input="formInput($event)"
                @blur="formBlur($event)"
            >
            <c-icon
                v-show="data.clear && data.value && data.isFocus"
                class="form-item__del-icon"
                name="close-circle-solid"
                font-size="0.18rem"
                color="#b8b8b8"
                @tap.stop="clearInput"
            />
            <!-- tel input end -->
        </view>
        <slot></slot>
    </view>
</template>

<script>
/**
 * @file 表单元素组件
 * @author jiaxiangju
 * @categories 业务组件
 * @tags [component]
 */
import CIcon from '@baidu/med-ui/components/Icon/Icon';
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        CIcon,
    },
    data() {
        return {
            // isFocus: false
        };
    },
    props: {
        /**
         * form item风格
         */
        layoutStyle: {
            type: String,
            default: '1'
        },
        /**
         * 表单元素索引
         */
        index: {
            type: Number,
            default: 0
        },
        /**
         * 表单元素文案
         */
        label: {
            type: String,
            default: ''
        },
        /**
         * 表单元素数据
         * {
                "title": "兑换码",
                "inputName": "key",
                "maxlength": 11,
                "msg": "请输入兑换码",
                "placeholder": "请输入兑换码",
                "required": "1",
                "type": "input",
                "clear": "1",
                "value": ""
            }
         */
        data: {
            type: Object,
            default() {
                return {};
            }
        }
    },
    computed: {
        __layoutStyle() {
            let className = '';
            switch (this.layoutStyle) {
                case '1':
                    className = 'layout-style1';
                    break;
                case '2':
                    className = 'layout-style2';
                    break;
                default:
                    break;
            }
            return className;
        }
    },
    watch: {
        'data': {
            handler: 'dataChange',
            immediate: true,
            deep: true
        }
    },
    methods: {
        dataChange(newVal, oldVal) {
            // console.log(newVal, oldVal, 'watch kkkkk');
            // console.log('--=-=-=-=-=-=-=-=-=', this.data);
        },
        clearInput() {
            // console.log('on clear');
            this.$emit('changeVal', this.index, '', 'clear');
        },
        formFocus(e) {
            // console.log('on sfocus', this.index);
            this.$emit('changeVal', this.index, true, 'focus');
        },
        formBlur(e) {
            setTimeout(() => {
                // console.log('on blur', this.index);
                this.$emit('changeVal', this.index, false, 'focus');
            }, 10);
        },
        formInput(e) {
            // if (e.detail.value.length >= this.data.maxlength) {
            //     this.$api.showToast({
            //         title: `最多${this.data.maxlength}位字符`,
            //         icon: 'none'
            //     });
            // }
            const value = e.detail.value.slice(0, this.data.maxlength);
            this.$emit('changeVal', this.index, value);
        }
    }
};
</script>
<style lang="less" scoped>
.form-item {
    position: relative;
    &.layout-style1 {
        width: 100%;
        height: .48rem;
        margin: 0 auto .15rem;
        display: flex;
        align-items: center;
        background: #f5f5f5;
        border-radius: .09rem;
        .form-item__text {
            font-size: .16rem;
            color: #525252;
            text-align: left;
            margin-left: .15rem;
            padding-right: .08rem;
            &::after {
                content: "|";
                color: #e0e0e0;
                padding-left: .08rem;
                font-size: .14rem;
            }
        }
        .form-item__right {
            flex: 1;
            position: relative;
        }
    }
    &.layout-style2 {
        width: 100%;
        height: .48rem;
        display: flex;
        align-items: center;
        background: #fff;
        border-bottom: 1px solid #e0e0e0;
        box-sizing: border-box;
        .form-item__text {
            font-size: .15rem;
            color: #1f1f1f;
            text-align: left;
            padding-right: .24rem;
            width: .6rem;
        }
        .form-item__right {
            flex: 1;
            position: relative;
        }
        &:last-child {
            border-bottom: none;
        }
    }
    &__del-icon {
        position: absolute;
        z-index: 99;
        padding: .1rem;
        top: 50%;
        right: 0.05rem;
        color: #999;
        transform: translateY(-50%);
    }
    &__placeholder {
        color: #b8b8b8;
        font-size: 0.16rem;
    }
    &__input {
        color: #1f1f1f;
        text-align: left;
        border: none;
        height: .44rem;
        outline: none;
        font-size: .16rem;
        margin-right: .4rem;
        background: none;
    }
}
</style>
