const store = new Vuex.Store({
    state: {
      
        left: false,
			  toggleTheme: false,
			  headerReveal: false,
			 checkedNames: ['Jack', 'Mike']
    },
    mutations: {
				setLeft (state, val) {
    state.left = val
		},
		setToggleTheme  (state, val)  {
				state.toggleTheme = val
		},
		setHeader (state, val)  {
				state.header = val
		},



    },
    actions: {
       
    }
})
const stringOptions = [
  {
    label: "Google",
    value: {
      product: "Google",
      rate: 30,
      quantity: 5,
      expiry_left: 150
    }
  },
  {
    label: "Facebook",
    value: {
      product: "Facebook",
      rate: 30,
      quantity: 5,
      expiry_left: 150
    }
  },
  {
    label: "Twitter",
    value: {
      product: "Twitter",
      rate: 30,
      quantity: 5,
      expiry_left: 150
    }
  },
  {
    label: "Apple Inc.",
    value: {
      product: "Apple Inc.",
      rate: 30,
      quantity: 5,
      expiry_left: 150
    }
  },
  {
    label: "Linux Inc.",
    value: {
      product: "Linux Inc.",
      rate: 30,
      quantity: 5,
      expiry_left: 150
    }
  },
  {
    label: "Dell Inc.",
    value: {
      product: "Dell Inc.",
      rate: 30,
      quantity: 5,
      expiry_left: 150
    }
  },
  {
    label: "Oracle",
    value: {
      product: "Oracle",
      rate: 30,
      quantity: 5,
      expiry_left: 150
    }
  }
];
new Vue({
store,
  el: '#q-app',
	
  data: function () {
    return {
       rate:0,
      quantity:0,
      total_invoice: 0,
      sum: 0,
      lazy: [],
      multiple: [], //model that takes selected values
      filterOptions: [], //value to add on select
      columns: [
        {
          name: "desc", //dont rename name
          required: false,
          label: "Goods/Services",
          align: "left",
          field: "product",
          sortable: false
        },

        { name: "rate", label: "Rate(Rs)", field: "rate", sortable: false }, //dont rename name
        {
          name: "quantity",
          label: "Quantity",
          field: "quantity",
          sortable: false
        }, //dont rename name
        {
          name: "total",
          label: "Total",
          field: "total",
          sortable: false
        } //dont rename name
        /*   {
          name: "expiry_left",
          label: "Expiry Left",
          field: "expiry_left",
          sortable: false
        }  */
      ],
      filter: "",
       ecategory: "",
      add:true,
      show: false,
        changeTheme: false,
      searchBox: "",
      mobileSearchBoxToggle: false,
      drawer:true,
      menuList : [
  {
    icon: 'face',
    label: 'Profile',
    route: '/profile',
    separator: true
  },
  {
    icon: 'home',
    label: 'Home',
    route: '/',
    separator: false
  },
  {
    iconSrc: '',
    label: 'Goods',
    route: '/my_products',
    separator: false
  },
  {
    iconSrc: '',
    label: 'Services',
    route: '/my_services',
    separator: false
  },
  {
    iconSrc: '',
    label: 'Measurement',
    route: '/measurement',
    separator: true
  },
  {
    iconSrc: '',
    label: 'Bought',
    route: '/payment_bought',
    separator: false
  },
  {
    iconSrc: '',
    label: 'Sold',
    route: '/payment_sold',
    separator: true
  },
  {
    icon: 'settings',
    label: 'Settings',
    route: '/settings',
    separator: false
  },
  {
    icon: 'logout',
    label: 'Logout',
    route: '/logout',
    separator: false
  }
],
      pagination: {
        sortBy: 'name',
        descending: false,
        page: 2,
        rowsPerPage: 3,
         rowsNumber: 4 
      },
    lazy: [
        /* {
          product: "hululu",
          rate: 30,
          quantity: 5,
          expiry_left: 150
        } */
      ],
      multiple:[],
      
     
      filter: "" 
    }
  },
  methods: {
    onValueChange() {
      this.$refs["select"].__resetInputValue();
    },
    createValue(val, done) {
      console.log(val);
      if (val.length > 0) {
        if (!this.filterOptions.includes(val)) {
          this.filterOptions.push(val);
        }
        done(val, "toggle");
      }
    },

    filterFn(val, update) {
      update(() => {
        if (val === "") {
          this.filterOptions = stringOptions;
        } else {
          const needle = val.toLowerCase();

          this.filterOptions = stringOptions.filter(
            v => v.label.toLowerCase().indexOf(needle) > -1
          );
        }
      });
    }
  	
	},
  watch: {
   
    multiple() {
      // this.multiple.forEach(myFunction);

      this.sum = this.multiple.map(arrayItem => {
        var x = 0;
        return (x += arrayItem.value.rate*arrayItem.value.quantity);
      });
      this.total_invoice = this.sum.reduce((total, value, index, array) => {
        return total += value;
      });
    }
  },

	    computed: {
       
        checkedNames: {
            get() {
                return this.$store.state.checkedNames
            },
            set(str) {
                this.$store.dispatch('updateChecked', str)
            }
        },
				   header: {
      get() {
        return this.$store.state.layoutDemo.header;
      },
      set(val) {
        this.$store.commit("layoutDemo/setHeader", val);
      }
    },
    left: {
      get() {
        return this.$store.state.left;
      },
      set(val) {
        this.$store.commit("setLeft", val);
      }
    },
    themeToggle: {
      get() {
        return this.$store.state.toggleTheme;
      },
      set(val) {
        this.$store.commit("setToggleTheme", val);
      }
    },
    }
})