Vue.component('product-attributes',{
    template: `
    <div class="pull-right">
        <button
            type="button"
            class="btn btn-primary"
            data-toggle="modal"
            data-target="#AttributesModal"
            @click="onModalOpen"
         >
            Изменить атрибуты
        </button>
        <!-- Modal -->
        <div class="modal fade" id="AttributesModal" tabindex="-1" role="dialog" aria-labelledby="AttributesModalLabel">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="AttributesModalLabel">Изменить атрибуты</h4>
              </div>
              <div class="modal-body">
                <div class="radio">
                    <label>
                        <input type="radio" v-model ="action_type" value="add">
                        Добавить
                    </label>
                </div>
                <div class="radio">
                    <label>
                        <input type="radio" v-model="action_type" value="delete">
                        Удалить
                    </label>
                </div>
                <label>
                    Выберите категорию:
                    <select v-model="category" class="form-control">
                        <option v-for="option in categories" :value="option">{{option}}</option>
                    </select>
                </label>

              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Отменить</button>
                <button type="button" class="btn btn-primary">Отправить изменения</button>
              </div>
            </div>
          </div>
        </div>
    </div>
    `,
    data() {
        return {
            categories: [],
            category: '',
            action_type: 'add'
        }
    },
    methods: {
        onModalOpen() {
            var table = $('#DataTables_Table_0').DataTable();

            var allCategories = [];
            $('#DataTables_Table_0 > tbody  > tr').each(function() {
                var id = $(this).find('td > input[type="checkbox"]').eq(0);
                var isChecked = id.prop('checked');
                if(isChecked){
                    var categoryColumn = $(this).find('td').eq(4);
                    var categories = categoryColumn.find('span').toArray().map(function (val, i) {
                        return $(val).text();
                    });
                    allCategories = allCategories.concat(categories);
                }
            });

            this.categories = _.uniq(allCategories)
        }
    }
});