<template lang="">
	<div>
    <div class='panel-wrap'  v-if="isShow" data-value="exit"  @tap='colse_da'>
			<div class="vehicle-panel" :style="{background:backgroundColor,height:'472rpx'}">
				<!-- height:'500rpx'; -->
				<div class='topItem'>
					<!-- <span class='check'  @tap='check'>中/英</span>
					<span class='contentShow'>{{oinp}}</span> -->
					<span class='exit' @tap='vehicleTap("ok")'>完成</span>
				</div>
				<!--省份简写键盘-->
				<div v-if="keyBoardType === 1">
					<div class="vehicle-panel-row">
						<div class='vehicle-panel-row-button' v-for="(item,idx) in keyVehicle1" @tap='vehicleTap(item)' :key="idx">{{item}}</div>
					</div>
					<div class="vehicle-panel-row">
						<div class='vehicle-panel-row-button' v-for="(item,idx) in keyVehicle2" @tap='vehicleTap(item)'  :key="idx">{{item}}</div>
					</div>
					<div class="vehicle-panel-row">
						<div class='vehicle-panel-row-button' v-for="(item,idx) in keyVehicle3" @tap='vehicleTap(item)'  :key="idx">
							{{item}}
						</div>
					</div>
				
					<div class="vehicle-panel-row-last">
						<div  class='vehicle-panel-row-button vehicle-panel-row-button-img' @tap="check">
							ABC
						</div>
						<div class='vehicle-panel-row-button vehicle-panel-row-button-last' @tap='vehicleTap(item)'  v-for="(item,idx) in keyVehicle4" 	:key="idx">
							{{item}}
						</div>
						<div  class='vehicle-panel-row-button vehicle-panel-row-button-img'>
							<img src='https://eshangtech.com/wanmeiyizhanImg/keyboard-delete.svg' class='vehicle-en-button-delete' @tap='vehicleTap("delete")' mode='aspectFit'>
						</div>
					</div>
				</div>
				<!--英文键盘  -->
				<div v-else>
					<div class="vehicle-panel-row">
						<div class='vehicle-panel-row-button ' @tap='vehicleTap(item)' v-for="(item,idx) in keyNumber" 
							:key="idx">{{item}}</div>
					</div>
					<div class="vehicle-panel-row">
						<div class='vehicle-panel-row-button' v-for="(item,idx) in keyEnInput1" @tap='vehicleTap(item)' :key="idx" :class="{'vehicle-panel-row-button-number':item==='I'|| item==='O'}" >{{item}}</div>
					</div>
					<div class="vehicle-panel-row">
						<div class='vehicle-panel-row-button' v-for="(item,idx) in keyEnInput2" @tap='vehicleTap(item)' :key="idx">{{item}}</div>
					
					</div>
					<div class="vehicle-panel-row-last">
						<div   class='vehicle-panel-row-button vehicle-panel-row-button-img' @tap="check">
							省份
						</div>
						<div class='vehicle-panel-row-button vehicle-panel-row-button-last' @tap='vehicleTap(item)' v-for="(item,idx) in keyEnInput3"
							:key="idx">
							{{item}}
						</div>

						<div  class='vehicle-panel-row-button vehicle-panel-row-button-img'>
							<img src='https://eshangtech.com/wanmeiyizhanImg/keyboard-delete.svg' class='vehicle-en-button-delete' @tap='vehicleTap("delete")' mode='aspectFit'>
						</div>
						<!-- <div :style="{border:buttonBorder}" class='vehicle-panel-row-button vehicle-panel-ok' @tap='vehicleTap("ok")' >确定</div> -->
					</div>
				</div>
			</div>
		</div>
	</div>

</template>
<script>
export default {
  props: {
    isShow: false,
    oinp: "",
    keyBoardType: {
      type: Number,
      default: 1,
    },
    // keyBoardType: 1,
  },
  data() {
    return {
      keyVehicle1: ["陕", "京", "津", "沪", "冀", "豫", "云", "辽", "吉", "黑"],
      keyVehicle2: ["湘", "皖", "鲁", "苏", "浙", "赣", "甘", "晋", "蒙", "闽"],
      keyVehicle3: ["鄂", "桂", "粤", "川", "青", "藏", "琼", "宁", "贵", "渝"],
      keyVehicle4: ["新", "使", "领", "警", "学", "港", "澳"],
      keyNumber: "1234567890",
      keyEnInput1: "QWERTYUIOP",
      keyEnInput2: "ASDFGHJKL",
      keyEnInput3: "ZXCVBNM",
      backgroundColor: "#cfd5dc",
      //   keyBoardType: 1,
      buttonBorder: "1px solid #ccc",
    };
  },
  methods: {
    vehicleTap: function (event) {
      console.log("event", event);
      switch (event) {
        case "delete":
          this.$emit("delete");
          // this.$emit('inputchange', event)
          break;
        case "ok":
          this.$emit("ok");
          break;
        case "exit":
          this.$emit("exit");
          break;
        default:
          if (event === "I" || event === "O") {
            return;
          }
          this.$emit("inputchange", event);
      }
    },
    colse_da() {
      this.$emit("exit2");
    },
    check() {
      if (this.keyBoardType === 1) {
        this.keyBoardType = 2;
      } else if (this.keyBoardType === 2) {
        this.keyBoardType = 1;
      }
    },
  },
};
</script>

<style scoped>
:host {
  width: 100%;
}
.bgf7 {
  background: #fefefe;
}
/* .panel-wrap {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 999;
	} */
.vehicle-panel {
  width: 100%;
  position: fixed;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 1000;
  background: #fff;
  padding-bottom: 28rpx;
}
.jik {
  width: 0.6rem;
  height: 0.8rem;
}

.vehicle-panel-row {
  display: flex;
  justify-content: center;
  align-items: center;
}
.vehicle-panel-row-last {
  display: flex;
  justify-content: center;
  align-items: center;
}
.vehicle-panel-row-button {
  background-color: #fff;
  margin: 7rpx 5rpx;
  font-size: 32rpx;
  width: 60rpx;
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 4rpx #7f7f7f;
}
.vehicle-panel-row-button-number {
  background-color: #eee;
  box-shadow: none;
}
/* .vehicle-panel-row-button-last {
		width: 0.9rem;
		height: 0.9rem;
		line-height: 0.9rem;
	} */
.vehicle-hover {
  background-color: #ccc;
}
.vehicle-panel-row-button-img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 96rpx;
  background: #acb3bd;
  font-size: 28rpx;
  box-shadow: 0 2rpx 4rpx #acb3bd;
}
.vehicle-en-button-delete {
  width: 52rpx;
  height: 80rpx;
}
.vehicle-panel-ok {
  background-color: #6a7cff;
  color: #fff;
  width: 1.5rem;
  height: 0.8rem;
  line-height: 0.8rem;
}
.topItem {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 80rpx;
  /* background: #f0f0f0; */
}
.exit {
  margin-right: 30rpx;
  color: #000;
  font-size: 28rpx;
  display: block;
  line-height: 0.5rem;
}
.check {
  margin-left: 0.3rem;
  color: #6a7cff;
  font-size: 0.28rem;
  display: block;
  line-height: 0.5rem;
}
</style>