<template>
  <div class="page-container">
    <div class="actions">
      <QueryForm
        :selected="selected"
        :points="points"
        :loading="loading"
        @query="onQuery"
        @add="onAdd"
        @update="onUpdate"
        @del="onDel"
        @export="onExport"
      />
    </div>
    <BaseTable
      :columns="neighborCols"
      :data="teams"
      :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>
    <NeighborForm
      :visible.sync="visible"
      :title="`${current.id ? '修改' : '新增'}站点关系`"
      :data="current"
      :points="points"
      @submit="onSubmit"
      :loading="loading.add || loading.update"
    />
  </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 NeighborForm from './NeighborForm.vue'
import { getDefaultPagination } from '@/utils/constant'
import { neighborCols } from '../utils'
import { INeighbor, IPoint } from '../api/common'
import { IPagination } from '@/api/common'
import { addNeighbor, deleteNeighborBatch, neighborPage, updateNeighbor } from '../api/neighbor'
import { pointPage } from '../api/point'

@Component({ name: 'Device', components: { BaseTable, QueryForm, NeighborForm } })
export default class Device extends Vue {
  @Prop({ type: Boolean, default: false }) isActive!: boolean
  neighborCols = neighborCols

  visible = false

  current: Partial<INeighbor> = {}

  selected: INeighbor[] = []

  points: IPoint[] = []

  teams: INeighbor[] = []

  loading = { query: false, del: false, export: false, add: false, update: 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 neighborPage({ ...this.pagination, ...this.query, ...query })
      this.pagination = { current, size, total }
      this.teams = records || []
    } catch (error) {
      console.log(error)
    }
    this.loading.query = false
  }

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

  async onSubmit(data: INeighbor) {
    this.loading[data.id ? 'update' : 'add'] = true
    try {
      const { result } = await (data.id
        ? updateNeighbor({ ...data })
        : addNeighbor({ ...data, ...this.$store.getters['project/info'] }))
      this.$message[result ? 'success' : 'error'](`${data.id ? '修改' : '新增'}站点关系${result ? '成功!' : '失败!'}`)
      if (result) {
        this.visible = false
        this.doQuery()
      }
    } catch (error) {
      console.log(error)
    }
    this.loading[data.id ? 'update' : 'add'] = false
  }

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

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

  async onDel(ids) {
    await this.$confirm(`是否确认删除这${this.selected.length}项站点关系？`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    this.loading.del = true
    try {
      const { result } = await deleteNeighborBatch(ids)
      this.$message[result ? 'success' : 'error'](`删除站点关系${result ? '成功!' : '失败!'}`)
      result && this.doQuery()
    } catch (error) {
      console.log(error)
    }
    this.loading.del = false
  }

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

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

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

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

  preparing() {
    this.doQuery()
    this.getAllPoints()
  }
  mounted() {
    this.preparing()
  }

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