
Vue.component('info-category', {
    props: ['category'],
    template: `
    <div class="">
    <h3>{{ category.id }}</h3>
    <table>
        <tr v-for="(item, index) in category.list"
        v-bind:for_id="field" + "[" category.id + "_" + item.id + "]"
            >
            <td><label for="{{for_id}}">{{ item.id }}</label></td>
            <td><input type="text" id={{for_id}} name={{for_id}} value={{item.value}}
                    v-on:change=""
            ></td>
        </tr>
    </table>
    </div>
    `
});

Vue.component('attribute-category', {
    props: ['category', 'index'],
    template: `
    <div class="AttributeClass">
    <h3>{{ category.id }} - {{category.priority}} - {{ category.sum }}</h3>
    <table>
        <tr is="attribute-item"
            v-for="item in category.list"
            v-bind:attr="item"
            v-bind:category_index="index"
            v-bind:key="item.id"
        ></tr>
    </table>
    </div>
    `
});

Vue.component('attribute-item', {
    props: ['attr', 'category_index'],
    template: `
    <tr>
        <td>{{ attr.id }}</td>
        <td>{{ attr.value }}</td>
        <td>
            <div class="circle" 
                v-for="n in 5" 
                v-bind:class="{full: n <= attr.value}"
                v-on:click="{attr.value = n; this.app.computeSum($event, category_index); this.app.computePriorities();}"
            >
            </div>
        </td>
    </tr>`
  })

Vue.component('priority-item', {
    props: ['priority'],
    template: `
    <tr>
        <td>{{ priority.id }}</td>
        <td>{{ priority.value }}</td>
        <td>{{ priority.assignedTo }}</td>
    </tr>`
  })

const isExist = (ref)       => typeof ref != 'undefined' && ref!=null;
const isArray = (ref)       => typeof ref=='object' && ref!=null;
const isFunction = (ref)    => typeof ref=='function' && ref!=null;
const isObject = (ref)      => typeof ref=='object' && ref!=null;
const getValue = (ref, def) => isExist(ref) ? ref : def;

function cloneObject(obj)
	{
	return Object.assign({}, obj);	// return JSON.parse(JSON.stringify(obj));
	}

function cloneArray(arr)
	{
	return Object.assign([], arr);
	}

var app_form = new Vue({ 
    name: 'App form',
    el: '#app_form',
    data: { 

        props: config,

        form_data: {
        },

        form_data_structure: {
            info: {
                id: "header-id",
                list: [
                    { id: "item-id", value: "" }
                ]
            }
            attributes: {
                id: "header-id",
                list: [
                    { id: "item-id", value: 1 }
                ],
                priority: "C",
                sum: 3
            },
            skills: {
                id: "header-id",
                list: [
                    { id: "item-id", value: 0 }
                ]
            },
            spells: {
                id: "header-id",
                list: [
                    { id: "item-id", value: 0 }
                ]
            }
        }

    },
    methods: {

        computeSum: function(event, index) { 
		var sum = 0, category = this.Attributes[index], list = category.list, len = list.length;
            for(var i = 0; i < len; i++) {
                sum += parseInt(list[i].value);
            }
		category.sum = sum;
            return sum;
        },

        computePriorities: function()	//event, index
		{  
/*
//console.log(this)
		var Attributes = this.Attributes; a = Attributes[0].sum, b = Attributes[1].sum, c = Attributes[2].sum;
//console.log(JSON.stringify(Attributes))
            if (a >= b && b >= c) {                
                Attributes[0].priority="A"
                Attributes[1].priority="B"
                Attributes[2].priority="C"
            }
		return ''
*/
	}

sheetBlankParser: function (blank, sheet)	// parse charactesr_sheet to list of [field_id, value]
	{
	var i, fn;
	fn = 'sheetBlankParser';
	if (!isObject(blank) || !isObject(sheet))
		{
		return;
		}
	for(i in blank)
		{
		if (!isObject(sheet) || !(i in sheet))
			{
			continue;
			}
		if (isObject(blank[i]))	// object, repeat
			{
			if (!isObject(sheet[i]))
				{
				this.error(fn, 'Value in "parsed object" is not type Object.');
				}
			this.sheetBlankParser(blank[i], sheet[i]);
			}
		else	{
			blank[i] = sheet[i];	// value, save
			}
		}
	}

//dataCreateNewStructure: function()
//	{
//	blank  = cloneObject(this.props.CharacterSheetBlank);
//	}

formDataNew: function()
	{
	this.form_data = cloneObject(this.form_data_structure);
	}

formDataUpdateBySheet: function(structure, sheet)
	{
	var i, j, k;
	for (i in structure)
		{
		structure[i].id = i;
		if (isObject(sheet[i]))
			{
			temp = cloneObject(structure[i].list[0]);
			k = 0;
			for (j in sheet[i])
				{
				if (!isExist(structure[i].list[k]))
					{
					structure[i].list[k] = cloneObject(temp);
					}
				structure[i].list[k].id    = j
				structure[i].list[k].value = sheet[i];
				k++;
				}
			}
		}
	}

sheetImport: function(sheet)
	{
	var fn = 'importCharacterSheet';
console.log(fn);
//console.log(fn + JSON.stringify(character_sheet));
	var i, i_end, list, fields, blank;
	sheet = isObject(sheet) ? character_sheet : {};
	blank = cloneObject(this.props.CharacterSheetBlank);
	this.sheetBlankParser(blank, sheet);	// save to blank
	this.formDataUpdateBySheet(this.form_data, blank);
	}

	}
/*
exportParser(template, obj, out)	// parse charactesr_sheet to list of [field_id, value]
	{
	var i, fn, id;
	fn = 'exportParser';
	if (!isObject(obj))
		{
		return false;
		}
	for(i in template)
		{
//console.log('exportParser '+JSON.stringify(obj))
		if (isObject(template[i]))
			{
			this.exportParser(template[i], obj, out[i]);
			}
		else	{
			id = template[i];
			if (!(id in obj) || !isExist(obj[id].value))
				{
				this.error(fn, 'Field or Field.value not exist in character_fields. ' + String(id));
				return;
				}
			out[i] = obj[id].value;
			}
		}
	}

exportCharacterSheet(value)
	{
	var fn = 'exportCharacterSheet';
console.log(fn);
	var character_sheet  = cloneObject(this.props.config.CharacterSheetBlank);
	var character_fields = cloneObject(this.state.character_fields);
//console.log('exportCharacterSheet '+JSON.stringify(character_sheet))
	this.exportParser(this.props.config.parser_template, character_fields, character_sheet);
console.log('exportCharacterSheet ' + JSON.stringify(character_sheet));
	return;
	}
	},
*/
});
		
//----------------------------
/*
	main: {
                list: [
                    { id: "Name", value: "" },
                    { id: "Age", value: "" },
                    { id: "Description", value: "" }
                ],
	attributes:
		{
                id: "Physical",                 
                list: [
                    { id: "Strength", value: 1 },
                    { id: "Dexterity", value: 1 },
                    { id: "Stamina", value: 1 },
                ],
                priority: "A",
		sum: 3
            },
            {
                id: "Social",                 
                list: [
                    { id: "Charisma", value: 1 },
                    { id: "Manipulation", value: 1 },
                    { id: "Composure", value: 1 }     
                ],
                priority: "B",
		sum: 3
            },
            {
                id: "Mental",                 
                list: [
                    { id: "Intelligence", value: 1 },
                    { id: "Wits", value: 1 },
                    { id: "Resolve", value: 1 } 
                ],
                priority: "C",
		sum: 3
            },
	skills:
		{
		"Physical":
			{
			"Athletics": 32,
			"Melee": 33,
			"Larceny": 34,
			"Shooting": 35,
			"Casting": 36,
			"Riding": 37,
			"Flying": 38,
			"Brewing": 39,
			"Stealth": 40,
			"Survival1": 41,
			"Brawl": 42,
			"Survival2": 43
			},
		"Social":
			{
			"Empathy": 45,
			"Intimidation": 46,
			"Persuasion": 47,
			"Subterfuge": 48,
			"Animal Ken": 49,
			"Expression": 50,
			"Etiquette": 51
			},
		"Mental":
			{
			"Awareness": 53,
			"Investigation": 54,
			"Ancient Runes": 55,
			"Herbology": 56,
			"Magic Theory": 57,
			"Potions": 58,
			"Magical Creatures": 59,
			"Crafts": 60,
		        }
		},
	"Spells":
		{
		"Physical":
			{
			"push": 72,
			"shield": 73,
			"rope": 74,
			"disarm": 75,
			"magic arm": 76
			},
		"Social":
			{
			"charm": 78,
			"intimidate": 79,
			"social defense charm": 80
			},
		"Mental":
			{
			"examine magic": 82,
			"mind defense": 83,
			"mind attack": 84
		        },
		"Elemental":
			{
			"fire bolt": 86,
			"lightning": 87,
			"freeze": 88
		        }
		}
*/
/*
        Attributes: [
            {
                id: "Physical",                 
                list: [
                    { id: "Strength", value: 1 },
                    { id: "Dexterity", value: 1 },
                    { id: "Stamina", value: 1 },
                ],
                priority: "A",
		sum: 3
            },
            {
                id: "Social",                 
                list: [
                    { id: "Charisma", value: 1 },
                    { id: "Manipulation", value: 1 },
                    { id: "Composure", value: 1 }     
                ],
                priority: "B",
		sum: 3
            },
            {
                id: "Mental",                 
                list: [
                    { id: "Intelligence", value: 1 },
                    { id: "Wits", value: 1 },
                    { id: "Resolve", value: 1 } 
                ],
                priority: "C",
		sum: 3
            }
        ],
        AttributePrioritiesRestricitons: [
            {id: "A", sum: 5},
            {id: "B", sum: 4},
            {id: "C", sum: 3}
        ]
*/



//var app = {
//  //  data: {
//    methods: {







// https://beautifier.io/
