const template = html`
<div>
    <h4><i class="fa fa-book"></i></i>On-site Hours</h4>
        <div class="form-group row">
            <label class="col-sm-10 control-label">Monthly emergency</label>
            <div class="col-sm-2">
            <input type="text" class="form-control" name="emergency" v-model="data.emergency">
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-10 control-label">Monthly recurring</label>
            <div class="col-sm-2">
            <input type="text" class="form-control" name="recurring" v-model="data.recurring">

            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-10 control-label">Monthly rolling period start day</label>
            <div class="col-sm-2" >
            <input type="text" class="form-control" name="recurring" v-model="data.start">
            </div>
        </div>
        <button class="btn btn-success" @click="save()">save</button>
</div>
`
import api from "../../api.js";

setTimeout(()=>{
    new Vue({
    el: "#clientvue",
    data() {
        return {
            data: {
            },
            id:0,
            show: false
        }
    },
    async mounted() {
        
        this.id =  window.location.pathname.split('/').slice(-1)[0]
        
        await this.load();
        this.$forceUpdate();
    },
    filters: {
        ordinalSuffix(i) {
            var j = i % 10,
                k = i % 100;
            if (j == 1 && k != 11) {
                return i + "st";
            }
            if (j == 2 && k != 12) {
                return i + "nd";
            }
            if (j == 3 && k != 13) {
                return i + "rd";
            }
            return i + "th";
        }
    },
    methods:{
        async load(){
            const data = await api.get['contractsTask/'+this.id]()
            this.data =  {
                onSite:data['on-site'],
                ...data[0]
            }
            
        },
        async save(){
            await api.post.contractsTask(this.id,this.data)
            await this.load();
        }
    },
    template
})}
,50)
export default true
