<template>
  <div v-if="crud.props.searchToggle">
<!--    <el-input-->
<!--      v-model="query.method"-->
<!--      clearable-->
<!--      size="small"-->
<!--      placeholder="请输入你要搜索的方法名"-->
<!--      style="width: 200px;"-->
<!--      class="filter-item"-->
<!--    />-->
    <el-select
      v-model="query.method"
      clearable
      filterable
      size="small"
      placeholder="请输入你要搜索的方法名"
      class="filter-item"
      style="width: 200px"
      @change="crud.toQuery"
    >
      <el-option v-for="item in methods" :key="item.id" :label="item.label" :value="item.value" />
    </el-select>
    <el-input
      v-model="query.requestparam"
      clearable
      size="small"
      placeholder="请输入你要搜索的请求参数"
      style="width: 200px;"
      class="filter-item"
    />
    <el-input
      v-model="query.responseparam"
      clearable
      size="small"
      placeholder="请输入你要搜索的返回参数"
      style="width: 200px;"
      class="filter-item"
    />
    <el-input
      v-model="query.blurry"
      clearable
      size="small"
      placeholder="请输入你要搜索的内容详情"
      style="width: 200px;"
      class="filter-item"
    />
    <!--
        <date-range-picker v-model="query.createTime" class="date-item" />
    -->

    <el-date-picker
      v-model="query.createTime"
      type="datetimerange"
      :picker-options="pickerOptions"
      format="yyyy-MM-dd HH:mm:ss"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      class="date-item1"
    />
    <rrOperation />
  </div>
</template>

<script>
import { header } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import {queryAddressCodeList} from "../../../api/acs/Address";

export default {
  components: { rrOperation },
  mixins: [header()],

  data() {
    return {
      methods: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      value2: ''
    }
  },
  created() {
    queryAddressCodeList().then(data => {
      this.methods = data.content
    })
  },
}
</script>

<style scoped>
.date-item1 {
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 10px;
  height: 30.5px !important;
  width: 350px;
}

</style>

