<div class="form-filter">
  <select name="type" v-model="filter_unit" v-on:change="onSelectUnitChange">
    <option value="metric">Metric</option>
    <option value="standard">Standard</option>
  </select>
</div><!-- /filter -->

  <table style="text-align: center;">
    <thead>
      <tr>
        <th v-for="column in columns">
          <a
            href="#"
            v-on:click="sort(column.shortcode)">{{column.label}}
          </a>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(product) in showProducts">
        <td>{{product.pn}}</td>
        <td>{{product.od}}</td>
        <td>{{product.id}}</td>
        <td>{{product.thickness}}</td>
        <td>{{product.lo}}</td>
        <td>{{product.weight}}</td>
      </tr>
    </tbody>
  </table>
</div><!-- /app -->

var vm = new Vue({
        el: '#app',
        data: {
            currentSort: 'pn',
            currentSortDir: 'asc',
            category: 'all',
            filter_unit: 'metric',
            search: '',
            columns: [
                { label: 'P/N', shortcode: 'pn' },
                { label: 'OD (De,mm)', shortcode: 'od' },
                { label: 'ID (De,mm)', shortcode: 'id' },
                { label: 'Thickness (De,mm)', shortcode: 'thickness' },
                { label: 'LO', shortcode: 'lo' },
                { label: 'Weight (kg/1000)', shortcode: 'weight' },
            ], // columns
            products: [
                {
                    pn: 170158,
                    od: 13,
                    id: .44,
                    thickness: 1,
                    lo: .45,
                    weight: .7,
                    category: 'chrome',
                },{
                    pn: 1803561,
                    od: 12,
                    id: .8,
                    thickness: .7,
                    lo: .11,
                    weight: .5,
                    category: 'chrome',
                },{
                    pn: 170149,
                    od: 9,
                    id: .64,
                    thickness: .6,
                    lo: .75,
                    weight: .3,
                    category: 'stainless',
                },{
                    pn: 150149,
                    od: 15,
                    id: .22,
                    thickness: .3,
                    lo: .55,
                    weight: .9,
                    category: 'chrome',
                },
            ], // products
        },
        computed: {
            showProducts(){
                return this.products
                .filter(a => {
                    return (a.pn + '').includes(this.search)
                })
                .sort((a, b) => {
                    if (this.currentSortDir === 'asc') {
                        //console.log( this.currentSort );
                        return a[this.currentSort] >= b[this.currentSort];
                    }
                    return a[this.currentSort] <= b[this.currentSort];
                })
            }
        },
        methods: {
            sort:function(col) {
                // if you click the same label twice
                if(this.currentSort == col){
                    // sort by asc
                    this.currentSortDir = this.currentSortDir === 'asc' ? 'desc' : 'asc';
                }else{
                    this.currentSort = col;
                }
            }, // sort

        onSelectUnitChange:function(){
                if(this.filter_unit == 'standard'){
                // change values of OD using this equation. current OD value * 0.0393701
                // change table header OD(De,mm) to OD(De,in)
                // also will be doing a similar process to ID and Thickness
                console.log('standard change');
                }
            },

        }, // methods
    }); // vue

filteredProducts() {
  let filteredProducts = []
  let _product
  this.showProducts.forEach(product => {
    _product = product
    // do the logic here
    if (this.filter_unit === 'metric') {
      _product.displayWeight = _product.weight * 25
    } else if (this.filter_unit === 'standard') {
      _product.displayWeight = _product.weight + 10
    }
    filteredProducts.push(_product)
  })
  return filteredProducts
}

onSelectUnitChange:function(){
  if(this.filter_unit == 'standard'){
    this.products.forEach(p => {
      p.od *= 0.0393701
      p.id *= 0.0393701
      p.thickness *= 0.0393701
    })
    this.columns[1].label = "OD(De,in)"
    this.columns[2].label = "ID(De,in)"
    this.columns[3].label = "Thickness(De,in)"
  } else {
    this.products.forEach(p => {
      p.od /= 0.0393701
      p.id /= 0.0393701
      p.thickness /= 0.0393701
    })
    this.columns[1].label = "OD(De,mm)"
    this.columns[2].label = "ID(De,mm)"
    this.columns[3].label = "Thickness(De,mm)"
  }
}