/**
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

<template>
  <div class="rk-trace-search">
    <div>
      <a class="rk-trace-search-btn r" @click="status = !status">
        <span class="mr-5 vm">{{this.$t('more')}}</span>
        <svg class="icon trans vm" :style="`transform: rotate(${status?180:0}deg);`">
          <use xlink:href="#arrow-down"></use>
        </svg>
      </a>
      <a class="rk-trace-search-btn bg-blue r mr-10" @click="getTraceList">
        <svg class="icon mr-5 vm">
          <use xlink:href="#search"></use>
        </svg>
        <span class="vm">{{this.$t('search')}}</span>
      </a>
      <div class="flex-h">
        <TraceSelect :hasSearch="true" :title="this.$t('service')" :value="service" @input="chooseService" :data="rocketTrace.services"/>
        <TraceSelect :hasSearch="true" :title="this.$t('instance')" v-model="instance" :data="rocketTrace.instances"/>
        <TraceSelect  :title="this.$t('status')" :value="traceState" @input="chooseStatus"
        :data="[{label:'All', key: 'ALL'}, {label:'Success', key: 'SUCCESS'}, {label:'Error', key: 'ERROR'}]"/>
        <div class="mr-10" style="padding: 3px 15px 0">
          <div class="sm grey">{{this.$t('endpointName')}}</div>
          <input type="text"  v-model="endpointName" class="rk-trace-search-input">
        </div>
      </div>
    </div>
    <div class="rk-trace-search-more flex-h" v-show="status">
      <div class="mr-15">
        <span class="sm b grey mr-10">{{this.$t('traceID')}}:</span>
        <input type="text" v-model="traceId" class="rk-trace-search-input dib">
      </div>
      <div class="mr-15">
        <span class="sm b grey mr-10">{{this.$t('duration')}}:</span>
        <div class="rk-trace-search-range dib">
          <input class="vm tc" v-model="minTraceDuration">
          <span class="grey vm">-</span>
          <input class="vm tc" v-model="maxTraceDuration">
        </div>
      </div>
      <div>
        <span class="sm b grey mr-5">{{this.$t('timeRange')}}:</span>
        <RkDate class="sm" v-model="time" position="bottom" format="YYYY-MM-DD HH:mm:ss"/>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import { Action, Getter, State } from 'vuex-class';
import { Trace, DurationTime, Option } from '../../../store/interfaces';
import TraceSelect from './trace-select.vue';

@Component({components: {TraceSelect}})
export default class TraceTool extends Vue {
  @State('rocketbot') private rocketbotGlobal: any;
  @State('rocketTrace') private rocketTrace: any;
  @Getter('durationTime') private durationTime: any;
  @Action('rocketTrace/GET_SERVICES') private GET_SERVICES: any;
  @Action('rocketTrace/GET_INSTANCES') private GET_INSTANCES: any;
  @Action('rocketTrace/GET_TRACELIST') private GET_TRACELIST: any;
  @Action('rocketTrace/SET_TRACE_FORM') private SET_TRACE_FORM: any;

  private time: Date[] = [new Date() , new Date()];
  private status: boolean = true;
  private maxTraceDuration: string = '';
  private minTraceDuration: string = '';
  private service: Option  = {label: 'All', key: ''};
  private instance: Option  = {label: 'All', key: ''};
  private endpointName: string = '';
  private traceId: string = '';
  private traceState: Option  = {label: 'All', key: 'ALL'};
  private dateFormate = (date: Date, step: string) => {
    const year = date.getFullYear();
    const monthTemp = date.getMonth() + 1;
    let month: string = `${monthTemp}`;
    if (monthTemp < 10) {
      month = `0${monthTemp}`;
    }
    if (step === 'MONTH') {
      return `${year}-${month}`;
    }
    const dayTemp = date.getDate();
    let day: string = `${dayTemp}`;
    if (dayTemp < 10) { day = `0${dayTemp}`; }
    if (step === 'DAY') { return `${year}-${month}-${day}`; }
    const hourTemp = date.getHours();
    let hour: string = `${hourTemp}`;
    if (hourTemp < 10) { hour = `0${hourTemp}`; }
    if (step === 'HOUR') { return `${year}-${month}-${day} ${hour}`; }
    const minuteTemp = date.getMinutes();
    let minute: string = `${minuteTemp}`;
    if (minuteTemp < 10) { minute = `0${minuteTemp}`; }
    if (step === 'MINUTE') { return `${year}-${month}-${day} ${hour}${minute}`; }
  }
  private globalTimeFormate = (time: Date[]): any => {
    let step = 'MINUTE';
    const unix = Math.round(time[1].getTime()) - Math.round(time[0].getTime());
    if (unix <= 60 * 60 * 1000) {
      step = 'MINUTE';
    } else if (unix <= 24 * 60 * 60 * 1000) {
      step = 'HOUR';
    } else if (unix <= 30 * 24 * 60 * 60 * 1000) {
      step = 'DAY';
    } else {
      step = 'MONTH';
    }
    return { start: this.dateFormate(time[0], step), end: this.dateFormate(time[1], step), step };
  }
  private chooseService(i: any) {
    if (this.service.key === i.key) {
      return;
    }
    this.instance = {label: 'All', key: ''};
    this.service = i;
    if (i.key === '') {
      return;
    }
    this.GET_INSTANCES({duration: this.durationTime, serviceId: i.key});
  }
  private chooseStatus(i: any) {
    this.traceState = i;
  }
  private getTraceList() {
    this.GET_SERVICES({duration: this.durationTime});
    const temp: any = {
        queryDuration: this.globalTimeFormate(this.time),
        traceState:  this.traceState.key,
        paging: {pageNum: 1, pageSize: 15, needTotal: true},
        queryOrder: this.rocketTrace.traceForm.queryOrder,
    };
    if (this.service.key) { temp.serviceId = this.service.key; }
    if (this.instance.key) { temp.serviceInstanceId = this.instance.key; }
    if (this.maxTraceDuration) { temp.maxTraceDuration = this.maxTraceDuration; }
    if (this.minTraceDuration) { temp.minTraceDuration = this.minTraceDuration; }
    if (this.endpointName) { temp.endpointName = this.endpointName; }
    if (this.traceId) { temp.traceId = this.traceId; }
    this.SET_TRACE_FORM(temp);
    this.GET_TRACELIST();
  }
  private mounted() {
    this.time = [this.rocketbotGlobal.duration.start, this.rocketbotGlobal.duration.end];
    this.getTraceList();
  }
}
</script>

<style lang="scss">
.rk-trace-search {
  flex-shrink: 0;
  background-color: #333840;
  color: #eee;
  width: 100%;
  padding: 3px 15px 8px;
}

.rk-trace-search-input {
  border-style: unset;
  outline: 0;
  padding: 2px 5px;
  border-radius: 3px;
}
.rk-trace-search-range{
  border-radius: 3px;
  background-color: #fff;
  padding: 1px;
  border-radius: 3px;
  input{
    width: 38px;
    border-style: unset;
    outline: 0;
  }
}
.rk-trace-search-btn{
  padding: 3px 9px;
  background-color: #484b55;
  border-radius: 4px;
  margin-top: 12px;
  &.bg-blue{
    background-color: #448dfe;
  }
}
.rk-trace-search-more{
  background-color: #484b55;
  padding: 4px 10px;
  border-radius: 3px;
  margin-top: 8px;
  position: relative;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,.1);
  &:after {
    bottom: 100%;
    right: 30px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(0, 0,0, 0);
    border-bottom-color: #484b55;
    border-width: 8px;
    margin-right: 0px;
  }
}
</style>