<template>
  <tf-page :isActive="isActive">
    <template v-slot:action>
      <QueryForm
        :selected="selected"
        :loading="loading"
        @query="onQuery"
        :standardNames="standardNames"
        :levels="levels"
      />
    </template>
    <tf-table
      :columns="dataQueryCols"
      :data="results"
      :pagination="pagination"
      v-loading="loading.query"
      :cell-style="cellStyle"
      @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>
  </tf-page>
</template>

<script lang="ts">
  import { Vue, Component, Prop } from 'vue-property-decorator'
  import QueryForm from './QueryForm.vue'
  import { getDefaultPagination } from '@/utils/constant'
  import { dataQueryCols } from '../utils'
  import { fetchBaseStandards, fetchDictionary, IOriginalDictionary, IPagination } from '@/api/common'
  import { dataQueryPage } from '../api/dataQuery'
  import { IDataQuery } from '../api/common'

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

    visible = false

    current: Partial<IDataQuery> = {}

    selected: IDataQuery[] = []

    results: IDataQuery[] = []

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

    pagination: IPagination = getDefaultPagination()

    standardNames: string[] = []

    levels: IOriginalDictionary[] = []

    query = {}

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

    cellStyle({ row: { checkResult, codeValue }, column: { property } }) {
      const colors = {
        /** 轻度 (黄色) */
        '2': 'yellow',
        /** 中度 (橙色) */
        '3': '#e6a23c',
        /** 严重 (红色) */
        '4': '#e7304e'
      }
      if (property === 'checkResult') {
        return { color: colors[codeValue] }
      }
    }
    async doQuery(query = {}) {
      this.loading.query = true
      try {
        const {
          result: { records, size, total, current }
        } = await dataQueryPage({ ...this.pagination, ...this.query, ...query })
        this.pagination = { current, size, total }
        this.results = records || []
      } catch (error) {
        console.log(error)
      }
      this.loading.query = false
    }

    onPageChange(pagination) {
      this.pagination = { ...this.pagination, ...pagination }
      this.doQuery()
    }
    async fetchBaseStandards() {
      try {
        const { result } = await fetchBaseStandards()
        this.standardNames = [...new Set((result || []).map((item) => item.targetName))]
      } catch (error) {
        console.log(error)
      }
    }
    async fetchLevels() {
      try {
        const { result } = await fetchDictionary()
        this.levels = result || []
      } catch (error) {
        console.log(error)
      }
    }
    preparing() {
      this.doQuery()
      this.fetchBaseStandards()
      this.fetchLevels()
    }

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