<template>
  <m-conditions>
    <template slot="search-group">
      <div class="list">
        <x-button type="ghost" size="small" @click="_ckQuery" icon="fa fa-search"></x-button>
      </div>
      <div class="list">
        <x-datepicker
                ref="datepicker"
                @on-change="_onChangeStartStop"
                type="daterange"
                format="YYYY-MM-DD HH:mm:ss"
                placement="bottom-end"
                :value="[searchParams.startDate,searchParams.endDate]"
                :panelNum="2">
          <x-input slot="input" readonly slot-scope="{value}" :value="value" style="width: 310px;" size="small" :placeholder="$t('Select date range')">
            <i slot="suffix"
               @click.stop="_dateEmpty()"
               class="ans-icon-fail-solid"
               v-show="value"
               style="font-size: 13px;cursor: pointer;margin-top: 1px;">
            </i>
          </x-input>
        </x-datepicker>
      </div>
      <div class="list">
        <x-select style="width: 160px;" @on-change="_onChangeState" :value="searchParams.stateType" >
          <x-input slot="trigger" readonly :value="selectedModel ? selectedModel.label : ''" slot-scope="{ selectedModel }" style="width: 160px;" size="small" :placeholder="$t('State')" suffix-icon="ans-icon-arrow-down">
          </x-input>
          <x-option
                  v-for="city in stateTypeList"
                  :key="city.label"
                  :value="city.code"
                  :label="city.label">
          </x-option>
        </x-select>
      </div>
      <div class="list">
        <x-input v-model="searchParams.host" @on-enterkey="_ckQuery" style="width: 140px;" size="small" :placeholder="$t('host')"></x-input>
      </div>
      <div class="list">
        <x-input v-model="searchParams.searchVal" @on-enterkey="_ckQuery" style="width: 200px;" size="small" :placeholder="$t('name')"></x-input>
      </div>
    </template>
  </m-conditions>
</template>
<script>
  import _ from 'lodash'
  import { stateType } from './common'
  import mConditions from '@/module/components/conditions/conditions'
  export default {
    name: 'instance-conditions',
    data () {
      return {
        // state(list)
        stateTypeList: stateType,
        searchParams: {
          // state
          stateType: '',
          // start date
          startDate: '',
          // end date
          endDate: '',
          // search value
          searchVal: '',
          // host
          host: ''
        }
      }
    },
    props: {},
    methods: {
      _ckQuery () {
        this.$emit('on-query', this.searchParams)
      },
      /**
       * change times
       */
      _onChangeStartStop (val) {
        this.searchParams.startDate = val[0]
        this.searchParams.endDate = val[1]
      },
      /**
       * change state
       */
      _onChangeState (val) {
        this.searchParams.stateType = val.value
      },
      /**
       * empty date
       */
      _dateEmpty () {
        this.searchParams.startDate = ''
        this.searchParams.endDate = ''
        this.$refs.datepicker.empty()
      }
    },
    watch: {
    },
    created () {
      // Routing parameter merging
      if (!_.isEmpty(this.$route.query)) {
        this.searchParams = _.assign(this.searchParams, this.$route.query)
      }
    },
    mounted () {
    },
    computed: {
    },
    components: { mConditions }
  }
</script>
