<template>
  <tf-page :isActive="isActive">
    <template v-slot:action>
      <QueryForm
        :selected="selected"
        :loading="loading"
        @query="onQuery"
        @add="onAdd"
        @update="onUpdate"
        @del="onDel"
        @export="onExport"
      />
    </template>
    <tf-table
      :columns="teamCols"
      :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>
    </tf-table>
    <FlawForm
      :visible.sync="visible"
      :title="`${current.id ? '修改' : '新增'}缺陷特征`"
      :data="current"
      @submit="onSubmit"
      :loading="loading.add || loading.update"
      :types="drainageTypes"
    />
  </tf-page>
</template>

<script lang="ts">
  import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
  import QueryForm from './QueryForm.vue'
  import FlawForm from './FlawForm.vue'
  import { getDefaultPagination } from '@/utils/constant'
  import { flawCols } from '../utils'
  import { IOriginalDictionary, IPagination } from '@/api/common'
  import { flawPage, addFlaw, deleteFlawBatch, updateFlaw, getDictKeys } from '../api/flaw'
  import { IFlaw } from '../api/common'

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

    visible = false

    current: Partial<IFlaw> = {}

    selected: IFlaw[] = []

    teams: IFlaw[] = []

    loading = { query: false, del: false, export: false, add: false, update: false }

    pagination: IPagination = getDefaultPagination()

    query = {}

    drainageTypes: IOriginalDictionary[] = []

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

    async doQuery(query = {}) {
      this.loading.query = true
      try {
        const {
          result: { records, size, total, current }
        } = await flawPage({ ...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: IFlaw) {
      this.loading[data.id ? 'update' : 'add'] = true
      try {
        const { result } = await (data.id ? updateFlaw({ ...data }) : addFlaw({ ...data }))
        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 deleteFlawBatch(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 getWaterTypes() {
      try {
        const result = await getDictKeys()
        this.drainageTypes = result as IOriginalDictionary[]
      } catch (error) {
        console.log(error)
      }
    }

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

    mounted() {
      this.preparing()
    }
  }
</script>
