import { Grid, GridItem } from 'vant';
import { defineComponent } from 'vue';
import styles from './tool.module.less';
import iconPen from '../image/icon-pen.png';

export type ToolType = 'init' | 'pen';

export type ToolItem = {
  type: ToolType;
  name: string;
  icon: string;
};

export default defineComponent({
  name: 'o-tool',
  emits: ['handleTool'],
  setup(props, { emit }) {
    const tool: ToolItem[] = [
      {
        type: 'pen',
        icon: iconPen,
        name: '批注'
      }
    ];
    return () => (
      <div class={styles.tool}>
        <div class={styles.title}>教学功能</div>
        <Grid class={styles.grid} columnNum={3} border={false}>
          {tool.map(item => (
            <GridItem
              icon={item.icon}
              text={item.name}
              onClick={() => emit('handleTool', item)}></GridItem>
          ))}
        </Grid>
      </div>
    );
  }
});
