<template>
  <el-form class="form" ref="form" v-bind="{ labelWidth: '8em', size: 'small' }" :model="formData" inline>
    <el-form-item label="设备名称">
      <el-input v-model="formData.deviceName" placeholder="请输入设备名称" size="small" maxlength="50" clearable />
    </el-form-item>

    <el-form-item label="设备类型" prop="deviceType">
      <el-select
        v-model="formData.deviceType"
        filterable
        placeholder="设备类型"
        size="small"
        clearable
        style="width:180px"
      >
        <el-option v-for="item in types" :key="item.id" :label="item.deviceTypeName" :value="item.id" />
      </el-select>
    </el-form-item>

    <el-form-item label="报警类型:">
      <el-select v-model="formData.type" filterable placeholder="报警类型" size="small" clearable style="width:120px">
        <el-option :value="1" label="预警" />
        <el-option :value="0" label="告警" />
      </el-select>
    </el-form-item>

    <el-form-item label="处理状态:">
      <el-select
        v-model="formData.handleState"
        filterable
        placeholder="处理状态"
        size="small"
        clearable
        style="width:120px"
      >
        <el-option :value="0" label="未读" />
        <el-option :value="1" label="已读" />
        <el-option :value="2" label="不告警" />
      </el-select>
    </el-form-item>

    <el-form-item label="数据采集时间:">
      <el-date-picker
        v-model="formData.timeRange"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
        style="width:230px"
      >
      </el-date-picker>
    </el-form-item>

    <el-form-item class="btns">
      <el-button
        type="primary"
        size="small"
        :loading="loading.query"
        :disabled="loading.query"
        @click="onQuery"
        style="margin-left: 3em"
        icon="el-icon-search"
      >
        查询
      </el-button>
      <div>
        <el-button
          type="primary"
          size="small"
          :loading="loading.assign"
          :disabled="loading.assign || ids.length !== 1"
          @click="$emit('export', ids)"
          icon="el-icon-download"
        >
          导出
        </el-button>
      </div>
    </el-form-item>
  </el-form>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
import { IWarningInfo, IDeviceType } from './api'
const format = 'YYYY-MM-DD HH:mm:ss'

@Component({ name: 'QueryForm' })
export default class QueryForm extends Vue {
  @Prop({ type: Object, default: () => ({ query: false, export: false }) })
  loading!: { query?: boolean; report?: boolean; assign?: boolean }
  @Prop({ type: Array, default: () => [] }) selected!: IWarningInfo[]
  @Prop({ type: Array, default: () => [] }) types!: IDeviceType[]

  formData: Partial<Omit<IWarningInfo, 'type' | 'handleState'>> & {
    timeRange?: (string | Date)[]
    type: number[]
    handleState: number[]
  } = {
    deviceName: '',
    type: [],
    handleState: [],
    timeRange: [
      this.$moment()
        .add(-7, 'day')
        .startOf('day')
        .toDate(),
      this.$moment()
        .endOf('day')
        .toDate()
    ]
  }

  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])
        }
      },
      {
        text: '最近一年',
        onClick(picker) {
          const end = new Date()
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)
          picker.$emit('pick', [start, end])
        }
      }
    ]
  }

  onQuery() {
    const { timeRange, ...rest } = this.formData
    const [beginTime, endTime] = timeRange || []
    this.$emit('query', {
      ...rest,
      beginTime: beginTime
        ? this.$moment(beginTime)
            .startOf('day')
            .format(format)
        : undefined,
      endTime: endTime
        ? this.$moment(endTime)
            .endOf('day')
            .format(format)
        : undefined
    })
  }

  mounted() {
    this.onQuery()
  }

  get ids() {
    return this.selected.map((item) => item.id)
  }
}
</script>

<style lang="scss" scoped>
.form {
  display: flex;
  flex-wrap: wrap;
  >>> .el-form-item.btns {
    flex: 1 1 auto;
    > div {
      display: flex;
      justify-content: space-between;
      align-items: center;
      &::before,
      &::after {
        display: none;
      }
    }
  }

  >>> .el-form-item--small.el-form-item {
    margin-bottom: 10px;
  }
}
</style>
