<template>
    <view>
        <view v-if="isShow" class="vehicle-panel" :style="'height:488rpx;bottom:' + bottom">
            <!-- 数字键盘 -->
            <view class="number-panel-box" v-if="keyBoardType == 2">
                <view class="number-panel-row">
                    <view class="number-panel-row-key vehicle-hover" onTap="vehicleTap" :data-value="item" :key="index" v-for="(item, index) in keyPhone">
                        {{ item }}
                    </view>
                    <view onLongTap="longPressDelete" onTap="vehicleTap" class="number-panel-row-button vehicle-hover" data-value="delete">
                        <image src="/static/pages/image/airport-card/delete.png" class="vehicle-en-button-delete" mode="aspectFit">删除</image>
                    </view>
                </view>
            </view>
            <!-- 英文键盘 -->
            <block class="letter-panel-box" v-if="keyBoardType == 1">
                <view class="vehicle-panel-row">
                    <view
                        class="vehicle-panel-row-button vehicle-panel-row-button-number vehicle-hover"
                        onTap="vehicleTap"
                        :data-value="item"
                        :key="index"
                        v-for="(item, index) in keyNumber"
                    >
                        {{ item }}
                    </view>
                </view>
                <view class="vehicle-panel-row">
                    <view class="vehicle-panel-row-button vehicle-hover" onTap="vehicleTap" :data-value="item" :key="index" v-for="(item, index) in keyEnInput1">
                        {{ item }}
                    </view>
                </view>
                <view class="vehicle-panel-row">
                    <view class="vehicle-panel-row-button vehicle-hover" onTap="vehicleTap" :data-value="item" :key="index" v-for="(item, index) in keyEnInput2">
                        {{ item }}
                    </view>
                    <view onLongTap="longPressDelete" class="vehicle-panel-row-button vehicle-panel-row-button-img vehicle-hover">
                        <image src="/static/pages/image/airport-card/delete.png" class="vehicle-en-button-delete" onTap="vehicleTap" data-value="delete" mode="aspectFit">
                            删除
                        </image>
                    </view>
                </view>
                <view class="vehicle-panel-row-last">
                    <view
                        class="vehicle-panel-row-button vehicle-panel-row-button-last vehicle-hover"
                        onTap="vehicleTap"
                        :data-value="item"
                        :key="index"
                        v-for="(item, index) in keyEnInput3"
                    >
                        {{ item }}
                    </view>
                    <view class="vehicle-panel-row-button vehicle-panel-ok" onTap="vehicleTap" data-value="ok">确认</view>
                </view>
            </block>
        </view>
        <!-- 适配iPhoneX的底条 -->
        <view class="adaptive" v-if="isAdaptive"></view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            keyNumber: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
            keyEnInput1: ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
            keyEnInput2: ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
            keyEnInput3: ['Z', 'X', 'C', 'V', 'B', 'N', 'M'],
            keyPhone: [1, 2, 3, 4, 5, 6, 7, 8, 9, '+', 0],
            bottom: '0',
            isShow: true,
            keyBoardType: 2
        };
    },
    mixins: [],
    props: {
        isShow: true,
        keyBoardType: 1,
        //键盘样式 “1” 为数字英文键盘 “2” 为数字键盘
        backgroundColor: '#fff',
        onInputChange: (val) => {},
        onIputdelete: () => {},
        onInputOk: () => {},
        isAdaptive: false,
        onLongPressDelete: () => {}
    },
    didMount() {
        if (this.props.isAdaptive) {
            this.setData({
                bottom: '60rpx'
            });
        } else {
            this.setData({
                bottom: '0'
            });
        }
    },
    methods: {
        vehicleTap: function (event) {
            // console.log(event,'....')
            let val = event.target.dataset.value;
            switch (val) {
                case 'delete':
                    this.props.onIputdelete(val);
                    this.props.onInputChange(val);
                    break;
                case 'ok':
                    this.props.onInputOk(val);
                    break;
                default:
                    this.props.onInputChange(val);
            }
        },
        longPressDelete() {
            //长按清除
            this.props.onLongPressDelete();
        }
    },
    created: function () {}
};
</script>
<style>
/* 数字键盘样式 */
.number-panel-box {
    display: flex;
    width: 750rpx;
}
.number-panel-row {
    display: flex;
    background: rgba(210, 213, 219, 0.9);
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 7rpx;
    padding-bottom: 0;
}
.number-panel-row-key {
    background-color: #fff;
    margin: 7rpx;
    padding: 5rpx;
    width: 220rpx;
    height: 94rpx;
    text-align: center;
    line-height: 94rpx;
    border-radius: 10rpx;
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.35);
    font-size: 50rpx;
}
.number-panel-row-button {
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(210, 213, 219, 0.9);
    width: 220rpx;
    height: 94rpx;
    border-radius: 10rpx;
    margin: 7rpx;
    padding: 5rpx;
}
.number-panel-img image {
    width: 70rpx;
    height: 105rpx;
}
/* 字母键盘样式 */
.vehicle-panel {
    width: 100%;
    position: fixed;
    left: 0;
    z-index: 1000;
    background: #d2d5db;
    overflow: hidden;
    box-sizing: border-box;
}
.letter-panel-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.vehicle-panel-row {
    display: flex;
    justify-content: space-between;
    padding-top: 10rpx;
    align-items: center;
}
.vehicle-panel-row-last {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 35rpx;
    padding-top: 10rpx;
}
.vehicle-panel-row-button {
    background-color: #fff;
    margin: 5rpx;
    padding: 5rpx;
    width: 63rpx;
    height: 84rpx;
    text-align: center;
    line-height: 86rpx;
    font-size: 46rpx;
    background: #ffffff;
    box-shadow: 0 2rpx 0 0 rgba(0, 0, 0, 0.35);
    border-radius: 10rpx;
}
.vehicle-panel-row-button-last {
    width: 85rpx;
    height: 84rpx;
    line-height: 86rpx;
}
.vehicle-hover:active {
    background-color: #ccc;
}
.vehicle-panel-row-button-img {
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(171, 179, 189, 0.5);
}
.vehicle-en-button-delete {
    width: 46rpx;
    height: 34rpx;
}
.vehicle-panel-row-button-img:active {
    background-color: #fff;
}
.vehicle-panel-ok {
    background-color: #4287ff;
    width: 180rpx;
    height: 84rpx;
    font-family: 'PingFangSC-Medium';
    font-size: 32rpx;
    color: #fff;
}
.vehicle-panel-ok:active {
    background-color: #4b71e6;
}
.adaptive {
    width: 750rpx;
    height: 60rpx;
    background: #d2d5db;
    position: absolute;
    z-index: 999;
    left: 0;
    bottom: 0;
}
</style>
