<template>
  <div class="page-container">
    <div class="actions">
      <QueryForm :selected="selected" :loading="loading" @query="onQuery" :types="types" />
    </div>
    <BaseTable
      :columns="teamCols"
      :data="histories"
      :pagination="pagination"
      v-loading="loading.query"
      @row-dblclick="onDblClick"
      @selection-change="onSelectionChange"
      @page-change="onPageChange"
    >
      <template v-slot:deviceState="{ row }">
        <el-switch
          :active-value="1"
          :inactive-value="0"
          :value="row.deviceState"
          size="small"
          style="user-select:none"
        />
      </template>
    </BaseTable>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
import BaseTable from '@/components/BaseTable/index.vue'
import QueryForm from './QueryForm.vue'
import { elTableAlignLeft, getDefaultPagination } from '@/utils/constant'
import { IPagination } from '@/api/common'
import { ElTableColumn } from 'element-ui/types/table-column'
import { historyPage, IWarningInfo, deviceTypePage, IDeviceType } from './api'

@Component({ name: 'Device', components: { BaseTable, QueryForm } })
export default class Device extends Vue {
  @Prop({ type: Boolean, default: false }) isActive!: boolean
  teamCols: Partial<ElTableColumn>[] = [
    { type: 'selection', width: '50px' },
    { type: 'index', label: '序号', width: '60px' },
    { prop: 'partitionName', label: '排水分区', minWidth: '120px', ...elTableAlignLeft() },
    { prop: 'groupByName', label: '监测分组', minWidth: '120px', ...elTableAlignLeft() },
    { prop: 'deviceTypeName', label: '设备类型', minWidth: '120px', ...elTableAlignLeft() },
    { prop: 'deviceName', label: '设备名称', minWidth: '120px', ...elTableAlignLeft() },
    { prop: 'deviceCode', label: '设备编号', minWidth: '120px', ...elTableAlignLeft() },
    { prop: 'collectionDate', label: '采集数据时间', minWidth: '120px', ...elTableAlignLeft() },
    { prop: 'msgtype', label: '类型', minWidth: '120px', ...elTableAlignLeft() },
    { prop: 'targetName', label: '参数', minWidth: '120px', ...elTableAlignLeft() },
    { prop: 'checkValue', label: '检测值', minWidth: '120px', ...elTableAlignLeft() },
    { prop: 'warningName', label: '预警等级', minWidth: '120px', ...elTableAlignLeft() },
    { prop: 'upperLimit', label: '上限', minWidth: '120px', ...elTableAlignLeft() },
    { prop: 'lowerLimit', label: '下限', minWidth: '120px', ...elTableAlignLeft() },
    { prop: 'dateTime', label: '有效时段', minWidth: '120px', ...elTableAlignLeft() },
    { prop: 'handleStateName', label: '处理状态', minWidth: '120px', ...elTableAlignLeft() },
    { prop: 'handleUserName', label: '处理人', minWidth: '120px', ...elTableAlignLeft() },
    { prop: 'handleTime', label: '处理时间', minWidth: '120px', ...elTableAlignLeft() }
  ]

  visible = false

  current: Partial<IWarningInfo> = {}

  selected: IWarningInfo[] = []

  histories: IWarningInfo[] = []

  types: IDeviceType[] = []

  loading = { query: false, export: false }

  pagination: IPagination = getDefaultPagination()

  query = {}

  onQuery(query) {
    this.query = { ...query }
    this.doQuery({ current: 1 })
  }

  async doQuery(query = {}) {
    this.loading.query = true
    try {
      const {
        result: { records, size, total, current }
      } = await historyPage({ ...this.pagination, ...this.query, ...query, ...this.$store.getters['project/id'] })
      this.pagination = { current, size, total }
      this.histories = records || []
    } catch (error) {
      console.log(error)
    }
    this.loading.query = false
  }

  onPageChange(pagination) {
    this.pagination = { ...this.pagination, ...pagination }
    this.doQuery()
  }

  onAdd() {
    this.current = {}
    this.visible = true
  }

  onUpdate(row) {
    this.current = { ...row }
    this.visible = true
  }

  onExport(ids) {
    console.log(ids)
  }

  onDblClick(row) {
    this.current = { ...row }
    this.visible = true
  }

  onSelectionChange(selections) {
    this.selected = [...selections]
  }

  async getAllTypes() {
    try {
      const {
        result: { records }
      } = await deviceTypePage({ current: 1, size: 9999, ...this.$store.getters['project/id'] })
      this.types = records || []
    } catch (error) {
      console.log(error)
    }
  }

  preparing() {
    this.doQuery()
    this.getAllTypes()
  }

  mounted() {
    this.getAllTypes()
  }

  @Watch('isActive')
  refetchData(active: boolean) {
    if (active) {
      this.preparing()
    }
  }
}
</script>
