<!--
 * @Author: ChenChanghua
 * @Date: 2022-01-25 10:27:17
 * @LastEditors: ZhengYi
 * @LastEditTime: 2023-04-28
 * @Description: file content
-->
<script setup>
import { VERTICAL, SimpleWidget } from "jsview";
import KeyboardItem from "./KeyboardItem.vue";

const props=defineProps({
    name: String,
    onClick: Function,
    onEdge: Function,
})
const _initData=()=>{
  const result = [];
  result.push({
    width: 120,
    height: 40,
    focusable: true,
    content: "删除",
  });
  result.push({
    width: 120,
    height: 40,
    focusable: true,
    content: "清空",
  });
  for (let i = 0; i < 36; ++i) {
    result.push({
      width: 40,
      height: 40,
      focusable: true,
      content:
        i < 26 ? String.fromCharCode(i + 65) : String.fromCharCode(i - 26 + 48),
    });
  }
  return result;
}


const direction=VERTICAL
const data=_initData()

   const  _measures=(item)=> {
      return {
        width: item.width,
        height: item.height,
      };
    }
</script>

<template>
  <simple-widget
    ref="sw"
    :name="props.name"
    :data="data"
    :width="260"
    :height="300"
    :padding="{ left: 10, right: 10, top: 10, bottom: 10 }"
    :direction="direction"
    :measures="_measures"
    :onEdge="props.onEdge"
  >
    <template #renderItem="{ data, query, onEdge, onAction }">
      <keyboard-item
        :data="data"
        :query="query"
        :onEdge="onEdge"
        :onAction="onAction"
        :onClick="props.onClick"
      />
    </template>
  </simple-widget>
</template>