<!--suppress JSAnnotator -->
<template>
<!-- Page, data-name contains page name which can be used in callbacks -->
        <div class="page " data-name="asset-rating"> <!-- page-with-subnavbar -->
        <!-- Top Navbar -->
            <div class="navbar">
                <div class="navbar-inner">
                    <div class="left">
                        <a href="#" class="link back">
                            <i class="icon icon-back"></i>
                        </a>
                    </div>
                    <div class="title sliding">{{@global.LANGUAGE.ASSET_LIST_MSG38}}</div>
                    <div class="right">
                        <!-- <a href="#" class="link">
                                                 <i class="f7-icons icon-notification"></i>
                                             </a>    -->
                    </div>

                </div>
            </div>

            <div class="toolbar tabbar toolbar-top tabbar-custom">
                <div class="toolbar-inner">
                    <a href="#tab-per-day" class="tab-link tab-link-active">
                        {{@global.LANGUAGE.ASSET_RATING_MSG00}}
                    </a>
                    <a href="#tab-per-week" class="tab-link">
                        {{@global.LANGUAGE.ASSET_RATING_MSG01}}
                    </a>
                </div>
            </div>

            <!--<div class="page-content">
                {{#unless isDataLoaded}}
                <div class="progressbar-infinite color-custom"></div>
                <div key="key-skeleton-per-day">
                    <div class="block skeleton-text skeleton-effect-blink">
                        <div class="skeleton-block" style="width: 200px; height: 100px; margin: auto; border-radius: 100px 100px 0 0"></div>
                    </div>
                    <div class="block-title text-align-center skeleton-text skeleton-effect-blink">
                        some title here
                    </div>
                    <div class="block text-align-center skeleton-text skeleton-effect-blink">
                        stars template here
                    </div>
                    <div key="skeleton-per-day" class="list no-hairline-bottom no-hairline-top no-margin-top">
                        <ul>
                            {{#each '123'}}
                            <li class="item-content skeleton-text skeleton-effect-blink">
                                <div class="item-media text-color-lightgray">
                                    <div class="skeleton-block" style="width: 25px; height: 25px;"></div>
                                </div>
                                <div class="item-inner">
                                    <div class="item-title">object name</div>
                                    <div class="item-after">obj val</div>
                                </div>
                            </li>
                            {{/each}}
                        </ul>
                    </div>
                </div>

                {{else}}
                <div key="key-gauge-wrapper-per-day" class="block">
                    <div class="row">
                        <div class="col text-align-center">
                            <div
                              class="gauge gauge-init"
                              data-type="semicircle"
                              data-value="{{PerDayGauge.value}}"
                              data-value-text="{{PerDayGauge.valueText}}"
                              data-value-text-color="#333"
                              data-border-color="{{PerDayGauge.borderColor}}"
                              data-border-width="15"
                              data-label-text="{{@global.LANGUAGE.ASSET_RATING_MSG06}}"
                              data-label-text-color="#8e8e93"
                            ></div>
                        </div>
                    </div>
                </div>
                <div class="block-title text-align-center text-transform-uppercase">
                    {{@global.LANGUAGE.ASSET_LIST_MSG38}}
                </div>
                <div class="block text-align-center">
                    {{PerDayStars.template}}
                </div>
                <div class="list list-custom no-hairlines no-margin-top">
                    <ul>
                        {{#SummaryPerDay}}
                        <li>
                            <div class="item-content">
                                <div class="item-media text-color-lightgray">{{#if Icon}}<i class="f7-icons {{Icon}}"></i>{{/Icon}}</div>
                                <div class="item-inner">
                                    <div class="item-title">{{Name}}</div>
                                    <div class="item-after">{{Value}}</div>
                                </div>
                            </div>
                        </li>
                        {{else}}
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title">{{@gloabl.LANGUAGE.PROMPT_MSG0119}}</div>
                                </div>
                            </div>
                        </li>
                        {{/SummaryPerDay}}
                    </ul>
                </div>
                {{/unless}}
            </div>-->

            <div class="tabs-animated-wrap">
                <div class="tabs">
                    <div class="page-content tab tab-active" id="tab-per-day">
                        {{#unless isDataLoaded}}
                        <div key="key-preloader-per-day" class="block block-strong text-align-center ">
                            <div class="preloader color-{{@global.DEALER_PRELOADER_COLOR_CLASS}}"></div>
                        </div>
                        {{else}}

                        <div key="key-gauge-wrapper-per-day" class="block">
                            <div class="row">
                                <div class="col text-align-center">
                                    <div
                                      class="gauge gauge-init"
                                      data-type="semicircle"
                                      data-value="{{PerDayGauge.value}}"
                                      data-value-text="{{PerDayGauge.valueText}}"
                                      data-value-text-color="#333"
                                      data-border-color="{{PerDayGauge.borderColor}}"
                                      data-border-width="15"
                                      data-label-text="{{@global.LANGUAGE.ASSET_RATING_MSG06}}"
                                      data-label-text-color="#8e8e93"
                                    ></div>
                                </div>
                            </div>
                        </div>
                        <div class="block-title text-align-center text-transform-uppercase">
                            {{@global.LANGUAGE.ASSET_LIST_MSG38}}
                        </div>
                        <div class="block text-align-center">
                            {{PerDayStars.template}}
                        </div>
                        <div class="list list-custom no-hairlines no-margin-top">
                            <ul>
                                {{#SummaryPerDay}}
                                <li>
                                    <div class="item-content three-rows">
                                        <div class="item-media text-color-lightgray">{{#if Icon}}<i class="f7-icons {{Icon}}"></i>{{/Icon}}</div>
                                        <div class="item-inner">
                                            <div class="item-title">{{Name}}</div>
                                            <div class="item-after">{{Value}}</div>
                                        </div>
                                    </div>
                                </li>
                                {{else}}
                                <li>
                                    <div class="item-content">
                                        <div class="item-inner">
                                            <div class="item-title">{{@gloabl.LANGUAGE.PROMPT_MSG0119}}</div>
                                        </div>
                                    </div>
                                </li>
                                {{/SummaryPerDay}}
                            </ul>
                        </div>
                        {{/unless}}
                    </div>

                    <div class="page-content tab" id="tab-per-week">
                        {{#unless isDataLoaded}}
                        <div key="key-preloader-per-week" class="block block-strong text-align-center">
                            <div class="preloader color-{{@global.DEALER_PRELOADER_COLOR_CLASS}}"></div>
                        </div>
                        {{else}}

                        <div key="key-gauge-wrapper-per-week" class="block">
                            <div class="row">
                                <div class="col text-align-center">
                                    <div
                                      class="gauge gauge-init"
                                      data-type="semicircle"
                                      data-value="{{PerWeekGauge.value}}"
                                      data-value-text="{{PerWeekGauge.valueText}}"
                                      data-value-text-color="#333"
                                      data-border-color="{{PerWeekGauge.borderColor}}"
                                      data-border-width="15"
                                      data-label-text="{{@global.LANGUAGE.ASSET_RATING_MSG06}}"
                                      data-label-text-color="#8e8e93"
                                    ></div>
                                </div>
                            </div>
                        </div>
                        <div class="block-title text-align-center text-transform-uppercase">
                            {{@global.LANGUAGE.ASSET_LIST_MSG38}}
                        </div>
                        <div class="block text-align-center">
                            {{PerWeekStars.template}}
                        </div>
                        <div key="summary-list-per-week" class="list list-custom no-hairlines no-margin-top">
                            <ul>
                                {{#SummaryPerWeek}}
                                <li>
                                    <div class="item-content three-rows">
                                        <div class="item-media text-color-lightgray">{{#if Icon}}<i class="f7-icons {{Icon}}"></i>{{/Icon}}</div>
                                        <div class="item-inner">
                                            <div class="item-title">{{Name}}</div>
                                            <div class="item-after">{{Value}}</div>
                                        </div>
                                    </div>
                                </li>
                                {{else}}
                                <li>
                                    <div class="item-content">
                                        <div class="item-inner">
                                            <div class="item-title">{{@gloabl.LANGUAGE.PROMPT_MSG0119}}</div>
                                        </div>
                                    </div>
                                </li>
                                {{/SummaryPerWeek}}
                            </ul>
                        </div>
                        {{/unless}}
                    </div>

                </div>
            </div>

        </div>
</template>


<script>
  // script must return component object
    return {
        data: function () {
            var self = this;
            var ret = {
                isDataLoaded: false

            };

            return ret;
        },
        methods: {
            getDriverBehavior: function (imei){
                let self = this;

                /*self.$app.request.promise.get(API_URL.GET_ASSET_RAITING, {imei: imei}, 'json')
                  .then(function (result) {*/
                self.$app.request.get(API_URL.GET_ASSET_RAITING, {imei: imei}, function (result, xhr, status) {
                      if(result && result.MajorCode === '000' ) {
                          if (!result.Data) {
                              self.loadingStopped();
                              self.$app.dialog.alert('No Data to display')
                              return;
                          }
                          self.$setState({
                              isDataLoaded: true,
                              SummaryPerDay: [
                                  {
                                      Icon: 'icon-name',
                                      Name: LANGUAGE.HOME_MSG001,
                                      Value: result.Data.Name ? result.Data.Name : LANGUAGE.COM_MSG103,
                                  },{
                                      Icon: 'icon-imei',
                                      Name: 'IMEI',
                                      Value: result.Data.IMEI ? result.Data.IMEI : LANGUAGE.COM_MSG103,
                                  },{
                                      Icon: 'icon-braking',
                                      Name: LANGUAGE.ASSET_RATING_MSG02,
                                      Value: result.Data.today && result.Data.today.HarshBracking && result.Data.today.HarshBracking > 0 ? result.Data.today.HarshBracking : 0,
                                  },{
                                      Icon: 'icon-speed',
                                      Name: LANGUAGE.ASSET_RATING_MSG03,
                                      Value: result.Data.today && result.Data.today.HarshAcceleration && result.Data.today.HarshAcceleration > 0 ? result.Data.today.HarshAcceleration : 0,
                                  },{
                                      Icon: 'icon-engine',
                                      Name: LANGUAGE.ASSET_RATING_MSG04,
                                      Value: result.Data.today && result.Data.today.ExcessiveIdling && result.Data.today.ExcessiveIdling > 0 ? result.Data.today.ExcessiveIdling : 0,
                                  },{
                                      Icon: 'icon-overspeed',
                                      Name: LANGUAGE.ASSET_RATING_MSG05,
                                      Value: result.Data.today && result.Data.today.Speeding && result.Data.today.Speeding > 0 ? result.Data.today.Speeding : 0,
                                  },{
                                      Icon: 'icon-mileage',
                                      Name: LANGUAGE.REPORT_PANEL_MSG122,
                                      Value: result.Data.today && result.Data.today.Mileage && result.Data.today.Mileage > 0 ? Protocol.Helper.getMileageValue(POSINFOASSETLIST[result.Data.IMEI].Unit, result.Data.today.Mileage) + '&nbsp;' + Protocol.Helper.getMileageUnit(POSINFOASSETLIST[result.Data.IMEI].Unit) : 0,
                                  },{
                                      Icon: 'icon-report-duration',
                                      Name: LANGUAGE.REPORT_PANEL_MSG101,
                                      Value: result.Data.today && result.Data.today.Duration && result.Data.today.Duration > 0 ? TimeSpan(parseFloat(result.Data.today.Duration) * 60000 * 60).format("^hh:mm:ss") : 0,
                                  },
                              ],
                              PerDayGauge: self.$app.methods.getGaugeRaitingDetails(result.Data.today && result.Data.today.points && result.Data.today.points > 0 ? result.Data.today.points : 0),
                              PerDayStars: self.$app.methods.getStars(result.Data.today && result.Data.today.points && result.Data.today.points > 0 ? result.Data.today.points : 0),

                              SummaryPerWeek: [
                                  {
                                      Icon: 'icon-name',
                                      Name: LANGUAGE.HOME_MSG001,
                                      Value: result.Data.Name ? result.Data.Name : LANGUAGE.COM_MSG103,
                                  },{
                                      Icon: 'icon-imei',
                                      Name: 'IMEI',
                                      Value: result.Data.IMEI ? result.Data.IMEI : LANGUAGE.COM_MSG103,
                                  },{
                                      Icon: 'icon-braking',
                                      Name: LANGUAGE.ASSET_RATING_MSG02,
                                      Value: result.Data.week && result.Data.week.HarshBracking && result.Data.week.HarshBracking > 0 ? result.Data.week.HarshBracking : 0,
                                  },{
                                      Icon: 'icon-speed',
                                      Name: LANGUAGE.ASSET_RATING_MSG03,
                                      Value: result.Data.week && result.Data.week.HarshAcceleration && result.Data.week.HarshAcceleration > 0 ? result.Data.week.HarshAcceleration : 0,
                                  },{
                                      Icon: 'icon-engine',
                                      Name: LANGUAGE.ASSET_RATING_MSG04,
                                      Value: result.Data.week && result.Data.week.ExcessiveIdling && result.Data.week.ExcessiveIdling > 0 ? result.Data.week.ExcessiveIdling : 0,
                                  },{
                                      Icon: 'icon-overspeed',
                                      Name: LANGUAGE.ASSET_RATING_MSG05,
                                      Value: result.Data.week && result.Data.week.Speeding && result.Data.week.Speeding > 0 ? result.Data.week.Speeding : 0,
                                  },{
                                      Icon: 'icon-mileage',
                                      Name: LANGUAGE.REPORT_PANEL_MSG122,
                                      Value: result.Data.week && result.Data.week.Mileage && result.Data.week.Mileage > 0 ? Protocol.Helper.getMileageValue(POSINFOASSETLIST[result.Data.IMEI].Unit, result.Data.week.Mileage) + '&nbsp;' + Protocol.Helper.getMileageUnit(POSINFOASSETLIST[result.Data.IMEI].Unit) : 0,
                                  },{
                                      Icon: 'icon-report-duration',
                                      Name: LANGUAGE.REPORT_PANEL_MSG101,
                                      Value: result.Data.week && result.Data.week.Duration && result.Data.week.Duration > 0 ? TimeSpan(parseFloat(result.Data.week.Duration) * 60000 * 60).format("^hh:mm:ss") : 0,
                                  },
                              ],
                              PerWeekGauge: self.$app.methods.getGaugeRaitingDetails(result.Data.week && result.Data.week.points && result.Data.week.points > 0 ? result.Data.week.points : 0),
                              PerWeekStars: self.$app.methods.getStars(result.Data.week && result.Data.week.points && result.Data.week.points > 0 ? result.Data.week.points : 0),
                          })
                      }else{
                          self.$app.dialog.alert(LANGUAGE.PROMPT_MSG0121);
                      }
                  },
                  function (xhr, status) {
                      self.loadingStopped();
                      self.$app.preloader.hide();
                      self.$app.dialog.alert(LANGUAGE.PROMPT_MSG0121);
                  },
                  'json');
                /*)
                  .catch(function (err) {
                      console.log(err);
                      this.loadingStopped();
                      if (err && err.status === 404){
                          self.$app.dialog.alert(LANGUAGE.PROMPT_MSG0120);
                      }else{
                          self.$app.dialog.alert(LANGUAGE.PROMPT_MSG0121);
                      }
                  })*/
            },
            loadingStopped(){
                this.$setState({
                    PerDayGauge: this.$app.methods.getGaugeRaitingDetails(0),
                    PerDayStars: this.$app.methods.getStars(0),
                    PerWeekGauge: this.$app.methods.getGaugeRaitingDetails(0),
                    PerWeekStars: this.$app.methods.getStars(0),
                    isDataLoaded: true,
                    SummaryPerDay: [{
                        Icon: 'icon-status-imei',
                        Name: 'IMEI',
                        Value: this.$route.query.imei ? this.$route.query.imei : 'n/a',
                    }],
                    SummaryPerWeek: [{
                        Icon: 'icon-status-imei',
                        Name: 'IMEI',
                        Value: this.$route.query.imei ? this.$route.query.imei : 'n/a',
                    }],
                });
            },

        },

        on: {
            pageInit: function (e, page) {

                if (!this.$route.query.imei) {
                    this.loadingStopped();
                    this.$app.dialog.alert('No IMEI parameter')
                }else{
                    this.getDriverBehavior(this.$route.query.imei)
                }


            },


        }
    };
</script>