<template>
  <div v-if="crud.props.searchToggle">
    <el-form :model="query" class="filter-form" inline>
      <el-form-item label="日志类型:">
        <el-select
          v-model="querySearch.logType"
          filterable
          size="small"
          placeholder="请选择日志类型"
          @change="handleLogTypeChange"
        >
          <el-option
            v-for="logType in logTypes"
            :key="logType.logType"
            :label="logType.logType"
            :value="logType.logType"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="querySearch.logType === '设备日志'" label="请选择设备:">
        <el-select
          v-model="query.device_code"
          filterable
          clearable
          size="small"
          placeholder="请选择设备号"
        >
          <el-option
            v-for="device in deviceList"
            :key="device.device_code"
            :label="device.device_code"
            :value="device.device_code"
          />
        </el-select>
      </el-form-item>

      <el-form-item
        v-if="querySearch.logType === '设备日志'"
        label="设备日志类型:"
      >
        <el-select
          v-model="query.deviceLogType"
          filterable
          clearable
          size="small"
          placeholder="设备日志类型"
        >
          <el-option
            v-for="deviceLogType in deviceLogTypes"
            :key="deviceLogType.code"
            :label="deviceLogType.name"
            :value="deviceLogType.code"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="querySearch.logType === '接口日志'" label="请求路径:">
        <el-input
          v-model="query.request_url"
          clearable
          size="small"
          placeholder="请输入任务号"
          style="width: 200px;"
        />
      </el-form-item>
      <el-form-item label="内容详情:">
        <el-input
          v-model="query.blurry"
          clearable
          size="small"
          placeholder="请输入你要搜索的内容详情"
          style="width: 200px;"
        />
      </el-form-item>

      <el-form-item label="记录时间:">
        <el-date-picker
          v-model="query.createTime"
          type="datetimerange"
          :picker-options="pickerOptions"
          format="yyyy-MM-dd HH:mm:ss"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
        />
      </el-form-item>
      <rrOperation />
    </el-form>

  </div>
</template>

<script>
import { header } from '@crud/crud'
import rrOperation from '@crud/RR.operation'

export default {
  components: { rrOperation },
  mixins: [header()],
  props: {
    deviceList: Array,
    deviceLogTypes: Array,
    logTypes: Array
  },
  data() {
    return {
      querySearch: {
        logType: null
      },
      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: ''
    }
  },
  watch: {
    logTypes: {
      immediate: true,
      handler(newVal) {
        if (newVal.length > 0 && !this.query.logType) {
          this.querySearch.logType = newVal[0].logType
        }
      }
    }
  },
  created() {
  },
  methods: {
    handleLogTypeChange(value) {
      this.query.logType = value
      this.$emit('performSearch', this.query.logType)
    }
  }
}
</script>
