// // import * as Three from "three";
// import  Three from "three";
// // import  { OctahedronGeometry } from "three";
// import path from "path";
// import { OrbitControls } from "three-orbitcontrols-ts";

//import router from "./router.vue";
// import i18n from "../i18n.js";
// import router from "../router.js";
// import ElementPlus from 'element-plus';
// import 'element-plus/dist/index.css';
// import 'animate.css';
//console.log(createApp);
//console.log(i18n);
import {createApp } from 'vue';
console.log(router);
const app=createApp({
  template:'#app',
//  template:`<div v-html='info'>template</div>`,
  components:{
    Home,
  },
  data(){
    return{
      info:`<span style='color:red; font-size:30px'>hello vue template</span>`,
      number:0,
      locale:null,
      books:[
        {username:"Linux从入门到精通",nickname:"night-cherry",password:"peking press",descrption:"123"},
      ],
    }
  },
  methods:{
    interface_web(){
      console.log("---------tomcat server----------");
      console.log("this.tomcat_res : "+this.tomcat_res);
      console.log("------this.books : "+this.books);
      const _books=this.books;
      let _tomcat_res=this.tomcat_res;
      // console.log("------this : "+this);
      const request = new XMLHttpRequest();
      request.onload=function(){
        console.log("--------parse tomcat server string--------");
        const res=JSON.parse(request.responseText);

        _tomcat_res=res[0].usename;
        console.log("res:"+res);
        console.log("res[0].usename :"+res[0].usename);
        console.log("res[0].nickname :"+res[0].nickname);
        console.log("res[0].password :"+res[0].password);
        console.log("res[0].description :"+res[0].description);
        console.log("res[1]:"+res[1]);
        console.log("res[1][\"usename\"] :"+res[1]["usename"]);
        console.log("res[1][\"nickname\"] :"+res[1]["nickname"]);
        console.log("res[1].password :"+res[1].password);
        console.log("res[1].description :"+res[1].description);
        console.log("this.tomcat_res : "+this.tomcat_res);
        alert("this.tomcat_res : "+_tomcat_res);
        
        console.log("------  _books : "+_books);
        // console.log("------this.books : "+this.books);
        try{
          for(const item of res){
            console.log(item);
            _books.push(item);
          }
          // _books.concat(res);
        }catch(e){
          console.log("the way == _books.push(res[0])  is wrong!!!");
          try{
            _books.push(res[0]);

          }catch(e){
            console.log("the way == _books.push(res[0])  is wrong!!!");
          }
        }finally{
          console.log("--object array operation done--");
        }
        // console.log("------books : "+books);
        // console.log("------this : "+this);
        console.log("this.tomcat_res : "+_tomcat_res);
      };
      request.open("POST","http://ancientapes.cc:8080/maven/book_quick");
      request.send("test tomcat");
    }
    
  },
  setup(){
    // console.log("Threejs modele");
        
    // // const scene=new Three.Scene();
    // // const camera=new Three.PerspectiveCamera();
    // // const odemetry=new OctahedronGeometry();
    // // document.body.append(new Element(`<h1>index.js</h1>`))
    // var canvas=document.getElementById("canvas");
    // canvas.width=window.innerWidth;
    // canvas.heigt=window.innerHeight;
    // var gl=canvas.getContext("webgl");
    // gl.viewport(0,0,canvas.width,canvas.heigt);


    // console.log("Three",Three);
    // const scene=new Three.Scene();
    // const camera=new Three.PerspectiveCamera(
    //     75,
    //     window.innerWidth/window.innerHeight,
    //     0.1,
    //     1000
    // );
    // camera.position.set(0,0,10);
    // scene.add(camera);

    // const geometry = new Three.BoxGeometry( 1, 3, 2 ); 
    // const material = new Three.MeshBasicMaterial( {color: 0xffffff} ); 
    // const cube = new Three.Mesh( geometry, material ); 
    // scene.add( cube );
    // console.log("cube",cube);
    // console.log("cube.position",cube.position);

    // const geometry_buffer=new Three.BufferGeometry();
    // const vertices=new Float32Array([
    //     -1.0,-1.0,1.0,
    //     1.0,-1.0,1.0,
    //     1.0,1.0,1.0,
    //     1.0,1.0,1.0
    //     -1.0,1.0,1.0,
    //     -1.0,-1.0,1.0
    // ]);

    // geometry_buffer.setAttribute("position",new Three.BufferAttribute(vertices,3));
    // const material_buffer=new Three.MeshBasicMaterial({color: 0xffff00});
    // const geometry_buffer_mesh=new Three.Mesh(geometry_buffer,material_buffer);
    // scene.add(geometry_buffer_mesh);
    // geometry_buffer_mesh.position.set(-10,-2,0);
    // // geometry_buffer_mesh.position.x=-10;
    // // geometry_buffer_mesh.position.y=-2;


    // const cube_geometry=new Three.BoxGeometry(2,2,2);
    // const textureloader=new Three.TextureLoader();
    // path.resolve(path.dirname.toString());
    // console.log("path",path);
    // const texture_object=textureloader.load("../media/texture/shazi.png");
    // const textureLoader = new Three.TextureLoader();
    // const textureFlare0 = textureLoader.load( "../media//texture/envolope.jpg" );
    // console.log("textureFlare0",texture_object);
    // const basic_material=new Three.MeshBasicMaterial({
    //     // color:0xf012f0,
    //     map:texture_object,
    // });
    // const cube_geometry_object=new Three.Mesh(cube_geometry,basic_material);
    // scene.add(cube_geometry_object);
    // cube_geometry_object.position.set(8,-3,0);

    // const renderer=new Three.WebGLRenderer();
    // renderer.setSize(window.innerWidth*0.95,window.innerHeight*0.95);
    // window.addEventListener("resize",(EventTarget)=>{
    //     console.log("resize_______________");
    //     camera.aspect=window.innerWidth*0.95,window.innerHeight*0.95;
    //     camera.updateProjectionMatrix();
    //     renderer.setSize(window.innerWidth*0.95,window.innerHeight*0.95);
    //     renderer.setPixelRatio(window.devicePixelRatio);
    // });


    // const controls=new OrbitControls(camera,renderer.domElement);
    // controls.enableDamping=true;

    // // renderer.render(scene,camera);
    // let rare_positionx= cube.position.x-2;
    // let rare_positiony= cube.position.y-2;
    // let step=0.02, range=400,mark=0;
    // function render_each_second(){
    //     // renderer.render(scene,camera);
    //     controls.update();
    //     if(mark<= range){
    //         cube.position.x+=step;
    //         cube.position.y+=step;
    //         cube.rotateZ(0.02);
    //         cube.rotateY(0.015);
    //         cube_geometry_object.rotateX(0.01);
    //         cube_geometry_object.rotateY(0.01);
    //         cube_geometry_object.rotateZ(0.01);
    //         geometry_buffer_mesh.rotateY(0.05);
    //         mark=mark + 1;
    //     }else{
    //         // cube.position.x=(step*range);
    //         cube.position.x=(rare_positionx);
    //         cube.position.y=(rare_positiony);
    //         mark=0;
    //     }
    //     // (times < n)?cube.position.x+=times:cube.position.x=rare_position;
    //     // console.log("cube.position",cube.position);
    //     renderer.render(scene,camera);
    //     requestAnimationFrame(render_each_second);
    // };
    // render_each_second();

    // console.log("renderer",renderer);
    // document.body.appendChild(renderer.domElement);

    // // import {OrbitControls} from 'three';//three/examples/jsm/controls/OrbitControls
    // // import { OrbitControls } from "three/addons/controls/OrbitControls.js";
    // // import { OrbitControls } from "three-orbitcontrols-ts";
    // // const controls=new Three.OrbitControls(camera,renderer.domElement);

    // // import { OrbitControls } from 'three-orbitcontrols-ts';
    // // const controls=new Three.OrbitControls(camera,renderer.domElement);
    // // const controls=new OrbitControls(camera,renderer.domElement);

    // // setTimeout(() => {
    // //     console.log("cube.position",cube.position);
    // //     cube.position.set(10,1000,500);
    // //     console.log("cube.position",cube.position);
    // // }, 1500);
  }
}).mount("#app");
// }).use(i18n).use(router).mount("#app");
//Vue.createApp(app).mount("#app");