<!--
  - 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>
  <v-container grid-list-xl fluid >
    <v-layout row wrap>
      <v-flex lg12>
        <breadcrumb title="routingRule" :items="breads"></breadcrumb>
      </v-flex>
      <v-flex lg12>
        <v-card flat color="transparent">
          <v-card-text>
            <v-form>
              <v-layout row wrap>
                <v-combobox
                  id="serviceSearch"
                  v-model="filter"
                  :loading="searchLoading"
                  :items="typeAhead"
                  :search-input.sync="input"
                  @keyup.enter="submit"
                  flat
                  append-icon=""
                  hide-no-data
                  :suffix="queryBy"
                  :label="$t('searchRoutingRule')"
                ></v-combobox>
                <v-menu class="hidden-xs-only">
                  <v-btn slot="activator" large icon>
                    <v-icon>unfold_more</v-icon>
                  </v-btn>

                  <v-list>
                    <v-list-tile
                      v-for="(item, i) in items"
                      :key="i"
                      @click="selected = i">
                      <v-list-tile-title>{{ $t(item.title) }}</v-list-tile-title>
                    </v-list-tile>
                  </v-list>
                </v-menu>
                <v-text-field
                  v-show="selected === 0"
                  label="Version"
                  :hint="$t('dataIdVersionHint')"
                  v-model="serviceVersion4Search"
                ></v-text-field>
                <v-text-field
                  v-show="selected === 0"
                  label="Group"
                  :hint="$t('dataIdGroupHint')"
                  v-model="serviceGroup4Search"
                ></v-text-field>
                <v-btn @click="submit" color="primary" large>{{$t('search')}}</v-btn>

              </v-layout>
            </v-form>
          </v-card-text>
        </v-card>
      </v-flex>
    </v-layout>
    <v-flex lg12>
      <v-card>
        <v-toolbar flat color="transparent" class="elevation-0">
          <v-toolbar-title><span class="headline">{{$t('searchResult')}}</span></v-toolbar-title>
          <v-spacer></v-spacer>
          <v-btn outline color="primary" @click.stop="openDialog" class="mb-2">{{$t('create')}}</v-btn>
        </v-toolbar>

        <v-card-text class="pa-0" v-show="selected === 0">
          <v-data-table
            :headers="serviceHeaders"
            :items="serviceRoutingRules"
            hide-actions
            class="elevation-0"
          >
            <template slot="items" slot-scope="props">
              <td class="text-xs-left">{{ props.item.service }}</td>
              <td class="text-xs-left">{{ props.item.serviceGroup }}</td>
              <td class="text-xs-left">{{ props.item.serviceVersion }}</td>
              <td class="text-xs-left">{{ props.item.enabled }}</td>
              <td class="text-xs-center px-0">
                <v-tooltip bottom v-for="op in operations" :key="op.id">
                  <v-icon small class="mr-2" slot="activator" @click="itemOperation(op.icon(props.item), props.item)">
                    {{op.icon(props.item)}}
                  </v-icon>
                  <span>{{$t(op.tooltip(props.item))}}</span>
                </v-tooltip>
              </td>
            </template>
          </v-data-table>
        </v-card-text>
        <v-card-text class="pa-0" v-show="selected === 1">
          <v-data-table
            :headers="appHeaders"
            :items="appRoutingRules"
            hide-actions
            class="elevation-0"
          >
            <template slot="items" slot-scope="props">
              <td class="text-xs-left">{{ props.item.application }}</td>
              <td class="text-xs-left">{{ props.item.enabled }}</td>
              <td class="text-xs-center px-0">
                <v-tooltip bottom v-for="op in operations" :key="op.id">
                  <v-icon small class="mr-2" slot="activator" @click="itemOperation(op.icon(props.item), props.item)">
                    {{op.icon(props.item)}}
                  </v-icon>
                  <span>{{$t(op.tooltip(props.item))}}</span>
                </v-tooltip>
              </td>
            </template>
          </v-data-table>
        </v-card-text>
      </v-card>
    </v-flex>

    <v-dialog v-model="dialog" width="800px" persistent >
      <v-card>
        <v-card-title class="justify-center">
          <span class="headline">{{$t('createNewRoutingRule')}}</span>
        </v-card-title>
        <v-card-text >
          <v-layout wrap>
            <v-flex xs24 sm12 md8>
              <v-text-field
                label="Service class"
                :hint="$t('dataIdClassHint')"
                v-model="service"
              ></v-text-field>
            </v-flex>
            <v-flex xs6 sm3 md2>
              <v-text-field
                label="Version"
                :hint="$t('dataIdVersionHint')"
                v-model="serviceVersion"
              ></v-text-field>
            </v-flex>
            <v-flex xs6 sm3 md2>
              <v-text-field
                label="Group"
                :hint="$t('dataIdGroupHint')"
                v-model="serviceGroup"
              ></v-text-field>
            </v-flex>
          </v-layout>
          <v-text-field
            label="Application Name"
            hint="Application name the service belongs to"
            v-model="application"
          ></v-text-field>

          <v-subheader class="pa-0 mt-3">{{$t('ruleContent')}}</v-subheader>
          <ace-editor v-model="ruleText" :readonly="readonly"></ace-editor>

        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn flat @click.native="closeDialog">{{$t('close')}}</v-btn>
          <v-btn depressed color="primary" @click.native="saveItem">{{$t('save')}}</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <v-dialog v-model="warn" persistent max-width="500px">
      <v-card>
        <v-card-title class="headline">{{$t(this.warnTitle)}}</v-card-title>
        <v-card-text >{{this.warnText}}</v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn flat @click.native="closeWarn">{{$t('cancel')}}</v-btn>
          <v-btn depressed color="primary" @click.native="deleteItem(warnStatus)">{{$t('confirm')}}</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

  </v-container>

</template>
<script>
import yaml from 'js-yaml'
import AceEditor from '@/components/public/AceEditor'
import operations from '@/api/operation'
import Breadcrumb from '@/components/public/Breadcrumb'
export default {
  components: {
    AceEditor,
    Breadcrumb
  },
  data: () => ({
    items: [
      { id: 0, title: 'serviceName', value: 'service' },
      { id: 1, title: 'app', value: 'application' }
    ],
    breads: [
      {
        text: 'serviceGovernance',
        href: ''
      },
      {
        text: 'routingRule',
        href: ''
      }
    ],
    selected: 0,
    dropdown_font: ['Service', 'App', 'IP'],
    ruleKeys: ['enabled', 'force', 'runtime', 'group', 'version', 'rule'],
    pattern: 'Service',
    filter: '',
    serviceVersion4Search: '',
    serviceGroup4Search: '',
    dialog: false,
    warn: false,
    updateId: '',
    application: '',
    service: '',
    serviceVersion: '',
    serviceGroup: '',
    warnTitle: '',
    warnText: '',
    warnStatus: {},
    height: 0,
    searchLoading: false,
    typeAhead: [],
    input: null,
    timerID: null,
    operations: operations,
    serviceRoutingRules: [
    ],
    appRoutingRules: [
    ],
    template:
        'enabled: true\n' +
        'runtime: false\n' +
        'force: true\n' +
        'conditions:\n' +
        ' - \'=> host != 172.22.3.91\'\n',
    ruleText: '',
    readonly: false,
    appHeaders: [],
    serviceHeaders: []
  }),
  methods: {
    setAppHeaders: function () {
      this.appHeaders = [
        {
          text: this.$t('appName'),
          value: 'application',
          align: 'left'
        },
        {
          text: this.$t('enabled'),
          value: 'enabled',
          sortable: false
        },
        {
          text: this.$t('operation'),
          value: 'operation',
          sortable: false,
          width: '115px'
        }
      ]
    },
    setServiceHeaders: function () {
      this.serviceHeaders = [
        {
          text: this.$t('serviceName'),
          value: 'service',
          align: 'left'
        },
        {
          text: this.$t('group'),
          value: 'group',
          align: 'left'

        },
        {
          text: this.$t('version'),
          value: 'group',
          align: 'left'

        },
        {
          text: this.$t('enabled'),
          value: 'enabled',
          sortable: false
        },
        {
          text: this.$t('operation'),
          value: 'operation',
          sortable: false,
          width: '115px'
        }
      ]
    },
    querySelections (v) {
      if (this.timerID) {
        clearTimeout(this.timerID)
      }
      // Simulated ajax query
      this.timerID = setTimeout(() => {
        if (v && v.length >= 4) {
          this.searchLoading = true
          if (this.selected === 0) {
            this.typeAhead = this.$store.getters.getServiceItems(v)
          } else if (this.selected === 1) {
            this.typeAhead = this.$store.getters.getConsumerItems(v)
          }
          this.searchLoading = false
          this.timerID = null
        } else {
          this.typeAhead = []
        }
      }, 500)
    },
    submit: function () {
      this.filter = document.querySelector('#serviceSearch').value.trim()
      this.search(true)
    },
    search: function (rewrite) {
      if (!this.filter) {
        this.$notify.error('Either service or application is needed')
        return
      }
      const type = this.items[this.selected].value
      const url = '/rules/route/condition/?' + type + '=' + this.filter + '&serviceVersion=' + this.serviceVersion4Search + '&serviceGroup=' + this.serviceGroup4Search
      this.$axios.get(url)
        .then(response => {
          if (this.selected === 0) {
            this.serviceRoutingRules = response.data
          } else {
            this.appRoutingRules = response.data
          }
          if (rewrite) {
            if (this.selected === 0) {
              this.$router.push({ path: 'routingRule', query: { service: this.filter, serviceVersion: this.serviceVersion4Search, serviceGroup: this.serviceGroup4Search } })
            } else if (this.selected === 1) {
              this.$router.push({ path: 'routingRule', query: { application: this.filter } })
            }
          }
        })
    },
    closeDialog: function () {
      this.ruleText = this.template
      this.updateId = ''
      this.service = ''
      this.serviceVersion = ''
      this.serviceGroup = ''
      this.application = ''
      this.dialog = false
      this.readonly = false
    },
    openDialog: function () {
      this.dialog = true
    },
    openWarn: function (title, text) {
      this.warnTitle = title
      this.warnText = text
      this.warn = true
    },
    closeWarn: function () {
      this.warnTitle = ''
      this.warnText = ''
      this.warn = false
    },
    saveItem: function () {
      const rule = yaml.safeLoad(this.ruleText)
      if (!this.service && !this.application) {
        this.$notify.error('Either service or application is needed')
        return
      }
      if (this.service && this.application) {
        this.$notify.error('You can not set both service ID and application name')
        return
      }
      const vm = this
      rule.service = this.service
      const serviceVersion = this.serviceVersion == null ? '' : this.serviceVersion
      const serviceGroup = this.serviceGroup == null ? '' : this.serviceGroup
      rule.application = this.application
      rule.serviceVersion = serviceVersion
      rule.serviceGroup = serviceGroup
      if (this.updateId !== '') {
        if (this.updateId === 'close') {
          this.closeDialog()
        } else {
          rule.id = this.updateId
          this.$axios.put('/rules/route/condition/' + rule.id, rule)
            .then(response => {
              if (response.status === 200) {
                if (vm.service) {
                  vm.selected = 0
                  vm.search(vm.service, true)
                  vm.filter = vm.service
                } else {
                  vm.selected = 1
                  vm.search(vm.application, true)
                  vm.filter = vm.application
                }
                this.closeDialog()
                this.$notify.success('Update success')
              }
            })
        }
      } else {
        this.$axios.post('/rules/route/condition/', rule)
          .then(response => {
            if (response.status === 201) {
              if (vm.service) {
                vm.selected = 0
                vm.search(vm.service, true)
                vm.filter = vm.service
              } else {
                vm.selected = 1
                vm.search(vm.application, true)
                vm.filter = vm.application
              }
              this.closeDialog()
              this.$notify.success('Create success')
            }
          })
          .catch(error => {
            console.log(error)
          })
      }
    },
    itemOperation: function (icon, item) {
      const itemId = item.id
      const serviceVersion = item.serviceVersion == null ? '' : item.serviceVersion
      const serviceGroup = item.serviceGroup == null ? '' : item.serviceGroup
      const scope = item.scope == null ? '' : item.scope
      switch (icon) {
        case 'visibility':
          this.$axios.get('/rules/route/condition/' + itemId)
            .then(response => {
              const conditionRoute = response.data
              this.serviceVersion = conditionRoute.serviceVersion
              this.serviceGroup = conditionRoute.serviceGroup
              this.scope = conditionRoute.scope
              delete conditionRoute.serviceVersion
              delete conditionRoute.serviceGroup
              delete conditionRoute.scope
              this.handleBalance(conditionRoute, true)
              this.updateId = 'close'
            })
          break
        case 'edit':
          this.$axios.get('/rules/route/condition/' + itemId)
            .then(response => {
              const conditionRoute = response.data
              this.serviceVersion = conditionRoute.serviceVersion
              this.serviceGroup = conditionRoute.serviceGroup
              this.scope = conditionRoute.scope
              delete conditionRoute.serviceVersion
              delete conditionRoute.serviceGroup
              delete conditionRoute.scope
              this.handleBalance(conditionRoute, false)
              this.updateId = itemId
            })
          break
        case 'block':
          this.openWarn(' Are you sure to block Routing Rule', 'service: ' + itemId)
          this.warnStatus.operation = 'disable'
          this.warnStatus.id = itemId
          this.warnStatus.serviceVersion = serviceVersion
          this.warnStatus.serviceGroup = serviceGroup
          this.warnStatus.scope = scope
          break
        case 'check_circle_outline':
          this.openWarn(' Are you sure to enable Routing Rule', 'service: ' + itemId)
          this.warnStatus.operation = 'enable'
          this.warnStatus.id = itemId
          this.warnStatus.serviceVersion = serviceVersion
          this.warnStatus.serviceGroup = serviceGroup
          this.warnStatus.scope = scope
          break
        case 'delete':
          this.openWarn('warnDeleteRouteRule', 'service: ' + itemId)
          this.warnStatus.operation = 'delete'
          this.warnStatus.id = itemId
          this.warnStatus.serviceVersion = serviceVersion
          this.warnStatus.serviceGroup = serviceGroup
          this.warnStatus.scope = scope
      }
    },
    handleBalance: function (conditionRoute, readonly) {
      this.service = conditionRoute.service
      this.application = conditionRoute.application
      delete conditionRoute.service
      delete conditionRoute.id
      delete conditionRoute.app
      delete conditionRoute.group
      delete conditionRoute.application
      delete conditionRoute.priority
      this.ruleText = yaml.safeDump(conditionRoute)
      this.readonly = readonly
      this.dialog = true
    },
    setHeight: function () {
      this.height = window.innerHeight * 0.5
    },
    deleteItem: function (warnStatus) {
      const id = warnStatus.id
      const operation = warnStatus.operation
      const serviceVersion = warnStatus.serviceVersion
      const serviceGroup = warnStatus.serviceGroup
      const scope = warnStatus.scope
      if (operation === 'delete') {
        this.$axios.delete('/rules/route/condition/' + id + '?serviceVersion=' + serviceVersion + '&serviceGroup=' + serviceGroup + '&scope=' + scope)
          .then(response => {
            if (response.status === 200) {
              this.warn = false
              this.search(this.filter, false)
              this.$notify.success('Delete success')
            }
          })
      } else if (operation === 'disable') {
        this.$axios.put('/rules/route/condition/disable/' + id + '?serviceVersion=' + serviceVersion + '&serviceGroup=' + serviceGroup + '&scope=' + scope)
          .then(response => {
            if (response.status === 200) {
              this.warn = false
              this.search(this.filter, false)
              this.$notify.success('Disable success')
            }
          })
      } else if (operation === 'enable') {
        this.$axios.put('/rules/route/condition/enable/' + id + '?serviceVersion=' + serviceVersion + '&serviceGroup=' + serviceGroup + '&scope=' + scope)
          .then(response => {
            if (response.status === 200) {
              this.warn = false
              this.search(this.filter, false)
              this.$notify.success('Enable success')
            }
          })
      }
    }
  },
  created () {
    this.setHeight()
  },
  computed: {
    queryBy () {
      return this.$t('by') + this.$t(this.items[this.selected].title)
    },
    area () {
      return this.$i18n.locale
    }
  },
  watch: {
    input (val) {
      this.querySelections(val)
    },
    area () {
      this.setAppHeaders()
      this.setServiceHeaders()
    }
  },
  mounted: function () {
    this.setAppHeaders()
    this.setServiceHeaders()
    this.$store.dispatch('loadServiceItems')
    this.$store.dispatch('loadConsumerItems')
    this.ruleText = this.template
    const query = this.$route.query
    let filter = null
    let queryServiceVersion = null
    let queryServiceGroup = null
    const vm = this
    Object.keys(query).forEach(function (key) {
      if (key === 'service') {
        filter = query[key]
        if (query.serviceVersion) {
          queryServiceVersion = query.serviceVersion
        }
        if (query.serviceGroup) {
          queryServiceGroup = query.serviceGroup
        }
        vm.selected = 0
      }
      if (key === 'application') {
        filter = query[key]
        vm.selected = 1
      }
    })
    if (queryServiceVersion != null) {
      this.serviceVersion4Search = query.serviceVersion
    }
    if (queryServiceGroup != null) {
      this.serviceGroup4Search = query.serviceGroup
    }
    if (filter !== null) {
      this.filter = filter
      this.search(false)
    }
  }

}
</script>