<template>
<div>
<button 
          id="btnSubmit"
          type="button" 
          class="btn btn-primary" 
          @click="change" ></button>
<button 
          id="btnSubmit"
          type="button" 
          class="btn btn-primary" 
          @click="del" ></button>
<v-table
            is-horizontal-resize
            style="width:100%"
            :columns="columns"
            :table-data="tableData"
            row-hover-color="-sharpeee"
            row-click-color="-sharpedf7ff"
            :cell-edit-done="cellEditDone"
            :select-all="selectALL"
            :select-change="selectChange"
            :select-group-change="selectGroupChange"
            @on-custom-comp="customCompFunc"
    ></v-table>
    <!-- {{selected}} -->
</div>

</template>
<script>
import "vue-easytable/libs/themes-base/index.css"
import {VTable} from "vue-easytable"
import Vue from "vue"
Vue.component(VTable.name, VTable)
export default{
  name:"HelloWorld",
  data(){
    return {
      response:null,
      index:0,
      my:null,
      id:0,
      itd:[],
      selects:[],
      at:["","",""],
      // tableData:[],
      // tableData:JSON.parse(localStorage.getItem("test")),
      tableData: [
                        {"name":"","tel":"156*****1987","hobby":"","address":"56917"},
                        {"name":"","tel":"182*****1538","hobby":"","address":"122"},
                        {"name":"","tel":"161*****0097","hobby":"","address":"739"},
                        {"name":"","tel":"197*****1123","hobby":"","address":"24"},
                        {"name":"","tel":"183*****6678","hobby":"","address":"867-871"}
                     ],
                    columns:  [
                      {width: 60, titleAlign: "center",columnAlign:"center",type: "selection"},
                             {field: "name", title:"", width: 80, titleAlign: "center",columnAlign:"center",isEdit:true,
                               isResize:true},
                             {field: "tel", title: "", width: 150, titleAlign: "center",columnAlign:"center",isEdit:true,isResize:true},
                             {field: "hobby", title: "", width: 150, titleAlign: "center",columnAlign:"center",isEdit:true,isResize:true},
                             {field: "address", title: "", width: 280, titleAlign: "center",columnAlign:"left",isEdit:true,isResize:true},
                             {field: "method", title: "method", width: 100, titleAlign: "center",columnAlign:"center",componentName:"method-options",isResize:true}
                     ]

    }
  },
  methods:{
    selectALL(selection){

                    console.log("select-aLL",selection);
                 },

    selectChange(selection,rowData){
                  console.log("select-change",selection,rowData);
                 },

    selectGroupChange(selection){
                    console.log("select-group-change",selection);
                    this.selects=selection
                 },
     cellEditDone(newValue,oldValue,rowIndex,rowData,field){

                this.tableData[rowIndex][field] = newValue;
                // this.tableData=[]
                // ...
            },
      del(){
        for(let i=0;i<this.selects.length;iPP){
          for(let x in this.selects){
            let index=x.indexOf(this.tableData)
            this.tableData.splice(index,1)
          }
        }
      },
      add(){
        let arr=this.tableData
        // console.log(arr.length)
        let it=this.at.indexOf(arr[this.index]["name"])
        for(let i=0;i<=this.index;iPP){
          if(it<2){
            arr[this.index]["name"]=this.at[it+1]
          }
          else{
            arr[this.index]["name"]=this.at[2]
          }
          
        }
    
        this.indexPP
        if(this.index>=5){
          this.index=0
        }
      },
            change(){
              // console.log(selected)
              fetch("http://172.28.14.63:8000/api/lavatest",{
                headers: {
                    Authorization: "Basic cm9vdDpBYTEyMzQ1Ng=="
                }
            }).then(res=>{
              // console.log(res.status)
              this.response=res
              // return res.json()
            }).then(data=>{
              console.log(this.response)
              // console.log(data)
            })
            
             this.my=setInterval(this.add,
             1000)
            },
            customCompFunc(params){
              //  console.log(params["itd"]);
              
              this.itd[params["itd"]]=params["value"]
              for(let i=0;i<this.tableData.length;iPP){
                if(this.itd[i]==undefined){
                  this.itd[i]="Get"
                }
              }
              console.log(this.itd)
            }
  }
  
}
Vue.component("method-options",{
  data:function(){
    return {
      selects: [
            {method: "Get"},
            {method: "Post"},
            {method: "Put"},
            {method: "Delete"},
            {method: "Head"},
            {method: "Options"},
        ]
    }
  },
  template:"<span><select  @change="selectVal"><option v-for="item in selects">{{ item.method }}</option></select></span>",
  props:{
            rowData:{
                type:Object
            },
            field:{
                type:String
            },
            index:{
                type:Number
            }
        },
  methods:{
    selectVal(e){
      let params = {itd:this.index,value:e.target.value};
      // console.log(e.target.value)
      this.$emit("on-custom-comp",params);
    }
  }
})
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
    .cell-edit-color{
        color:red;
        font-weight: bold;
    }
</style>