<div id="myModal" class="modal">
        <div class="modal-content">
          <form id="customerForm">
            <div class="form-group">
              <label>客户代码:</label>
              <input type="text" id="customerCode" readonly>
            </div>
            <div class="form-group">
              <label>客户名称:</label>
              <input type="text" id="customerName" required>
            </div>
            <div class="form-group">
              <label>地址:</label>
              <input type="text" id="address">
            </div>
            <div class="form-group">
              <label>网站:</label>
              <input type="url" id="website">
            </div>
            <div class="button-group">
              <button type="button" id="submitForm">确认</button>
              <button type="button" id="closeModal">取消</button>
            </div>
          </form>
        </div>
      </div>

    

    let yourElement = document.getElementById("yourElement");
    let wsheet = new websheet('HTML', yourElement,0,0,800,400);

    class PopFrom {

      static #instance;
      constructor() {
        if (!PopFrom.#instance) {
          PopFrom.#instance = this;
          console.log('11111111');
          document.getElementById('closeModal').addEventListener('click', this.closeModal);
          this.submitDate = this.submitDate.bind(this);
          document.getElementById('submitForm').addEventListener('click', this.submitDate);
          this.click_number = 1;
        }
        return PopFrom.#instance;
      }

      openModal(code, editCell) {
        document.getElementById('customerCode').value = code;
        document.getElementById('myModal').style.display = 'flex';
        this.EditCell = editCell;
      }

      submitDate() {
        const formData = {
          code: document.getElementById('customerCode').value,
          name: document.getElementById('customerName').value,
          address: document.getElementById('address').value,
          website: document.getElementById('website').value
        };
        console.log('你的数据:', formData);
        //修改单元格数据 这里设置ABCDEFG 
        this.EditCell.SetCellValue('ABCDEFG' + this.click_number++);
        this.closeModal();
      }

      closeModal() {
        document.getElementById('myModal').style.display = 'none';
      }
    }

    let yourElement = document.getElementById("yourElement");
   let wsheet = new websheet('HTML', yourElement, 0, 0, document.documentElement.clientWidth * 0.99, document.documentElement.clientHeight*0.6);


    class PopEditCell extends websheet.Model.BaseCell {


      /**
      * 
      * @param x  单元格的开始坐X标
      * @param y   单元格的开始坐Y标
      * @param width width 单元格的宽度
      * @param height height单元格的高度
      * @param Document 
      */
      constructor(canvas, ctx, x, y, width, height, document) {
        super(canvas, ctx, x, y, width, height, document);//必须调用父类
        //初始化你自己的变量
        this.popFrom = new PopFrom();
        this.name = 'PopEditCell';//控件的名称
      }

      Draw() {
        super.Draw();//必须调用父类
        //这里你的代码 
        this.drawArrowWithPath();
      }

      // 绘制箭头和方框
      drawArrowWithPath() {
        // 绘制绿色倒三角
        this.ctx.fillStyle = 'lightgreen';
        this.ctx.beginPath();
        this.ctx.moveTo(this.x + this.width - 16, this.y + this.height - 10);               // 右下角顶点
        this.ctx.lineTo(this.x + this.width, this.y + this.height - 10); // 向左延伸底边
        this.ctx.lineTo(this.x + this.width - 8, this.y + this.height - 2); // 向上延伸侧边
        this.ctx.closePath();
        this.ctx.fill();
      }

      // public CellClick(event: MouseEvent): void {
      //   alert('CellClick');
      // }

      CellDbClick(event) {
        //alert('CellDbClick');
        this.popFrom.openModal(this.value, this);
      }

    }



    /**
    * 第一步 获取激活sheet
    */


    let activeSheet = wsheet.ActiveSheet();

    activeSheet.SetCellValue('A3', '自定义弹出');

    /**
    * 第二步 一个下进度条控件，并注册
    */


    activeSheet.SetCellValue('B3', 'A0000001');//

    activeSheet.setCellEditor('B3', PopEditCell);


    activeSheet.SetCellValue('B5', 'A0000005');//
    activeSheet.setCellEditor('B5', PopEditCell);


    /**
    * 第三步   重新绘制表格
    */
    activeSheet.setColWidth(1, 160);
    activeSheet.setColWidth(2, 260);
    activeSheet.setColWidth(3, 160);
    activeSheet.setColWidth(4, 160);
    activeSheet.setColWidth(5, 160);
    activeSheet.WorkFormula(); //重建公式
    activeSheet.cacl();//公式计算

    wsheet.BuildSheet();
    wsheet.Draw();