import { UIUtils } from '@kit.ArkUI';
import { symbol } from './util';

@Entry
@Component
struct Index {
  @State arr: Array<number> = [0, 1, 2];

  build() {
    Column() {
      CompV2({ arr: UIUtils.enableV2Compatibility(this.arr) });
    };
  };
};

@ComponentV2
struct CompV2 {
  @Require @Param arr: Array<number>;

  build() {
    Column({ space: 10 }) {
      Row() {
        Text(`[0] ${this.arr[0]} `);
        Text(`[1] ${this.arr[1]} `);
        Text(`[2] ${this.arr[2]} `);
        Text(`[3] ${this.arr[3]} `);
      }.border({ style: BorderStyle.Dotted });

      Button('arr[1] = 8')
        .onClick(() => {
          console.error('onclick arr[1] = 8');
          this.arr[1] = 8; // FireChange('8');
        });

      Button('arr[3] = 8')
        .onClick(() => {
          console.error('onclick arr[3] = 8');
          this.arr[3] = 8; // FireChange('OB_LENGTH');
        });

      Button('arr[0] = 0')
        .onClick(() => {
          console.error('onclick arr[0] = 0');
          this.arr[0] = 0; // no FireChange;
        });

      Button('arr[symbol] = ...')
        .onClick(() => {
          console.error('onclick arr[symbol] = ...');
          const s = symbol;
          this.arr[s] = 4; // no FireChange;
        });
    };
  };
};