<template>
  <div>
    <ul>
      <TableTree :data="formateddata"></TableTree>
    </ul>
  </div>

</template>
<script>
import TableTree from "@/components/TableTree.vue"; // @ is an alias to /src

export default {
  components: { TableTree },
  props: {
    usersdata: Object
  },
  data: function() {
    return {
      selectedvaluedown: [],
      selectedindexdown: 0,
      formateddata: {}
    };
  },
  created: function() {
    this.formatusersdata();
  },
  methods: {
    //fromate the data from single array structure to tree structure
    formatusersdata: function() {
      var formateddata = {};
      var areas = [];
      var cities = [];
      var companies = [];
      formateddata.name = this.usersdata.header;
      formateddata.children = [];
      for (var item of this.usersdata.info) {
        if (areas.indexOf(item.state) === -1) {
          areas.push(item.state);
        }
      }
      for (var area of areas) {
        formateddata.children.push({ name: [area], children: [] });
      }
      for (var citychild of formateddata.children) {
        for (var item of this.usersdata.info) {
          if (item.state === citychild.name[0]) {
            var found = citychild.children.some(function(each) {
              return each.name[0] === item.city;
            });
            if (!found) {
              citychild.children.push({ name: [item.city], children: [] });
            }
          }
        }
        for (var company of citychild.children) {
          var arr = [];
          for (var item of this.usersdata.info) {
            if (
              item.city === company.name[0] &&
              item.state === citychild.name[0]
            ) {
              for (var x in item) {
                if (x != "state" && x != "city") arr.push(item[x]);
              }
              company.children.push({ name: arr });
            }
          }
        }
      }
      this.formateddata = formateddata;
    },
    //// function below is for swap table header uses.
    getindexvalue: function(index) {
      var array = [this.formateddata.title[index]];
      for (var area of this.formateddata.area) {
        for (var item of area.companies) {
          array.push(item.info[index]);
        }
      }
      return array;
    },
    addindexvalue: function(index, selectedvalue) {
      var counter = 0;
      this.formateddata.title.splice(index, 1, selectedvalue[0]);
      for (var area of this.formateddata.area) {
        for (var item in area.companies) {
          counter += 1;
          area.companies[item].info.splice(index, 1, selectedvalue[counter]);
        }
      }
    },
    onmousedown: function(e) {
      var index = this.usersdata.header.indexOf(e.target.innerHTML);
      this.selectedvaluedown = this.getindexvalue(index);
      this.selectedindexdown = index;
    },
    onmouseup: function(e) {
      var index = this.usersdata.header.indexOf(e.target.innerHTML);
      var selectedvalueup = this.getindexvalue(index);
      this.addindexvalue(index, this.selectedvaluedown);
      this.addindexvalue(this.selectedindexdown, selectedvalueup);
    }
  }
};
</script>
<style>
th,
tr,
td {
  border: black solid 1px;
}

table {
  border-collapse: collapse;
}
</style>

