<template>
  <d2-container>
    <template #header>
      <div class="search-bar">
        <el-form ref="searchForm" :inline="true" :model="search" size="mini">
          <el-form-item :label="$t(key('device_code'))" prop="device_code">
            <el-input v-model.trim="search.device_code" :placeholder="$t(key('enter_device_code'))" clearable style="width:200px" @keyup.enter.native="onSearch" />
          </el-form-item>
          <el-form-item :label="$t(key('status'))" prop="status">
            <el-select v-model="search.status" :placeholder="$t(key('select_status'))" clearable style="width:160px">
              <el-option :label="$t(key('running'))" value="running" />
              <el-option :label="$t(key('idle'))" value="idle" />
              <el-option :label="$t(key('error'))" value="error" />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t(key('time_range'))" prop="time">
            <el-date-picker v-model="search.time" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" range-separator="-" :start-placeholder="$t(key('start_time'))" :end-placeholder="$t(key('end_time'))" style="width:330px" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" :disabled="loading" @click="onSearch">{{ $t(key('query')) }}</el-button>
            <el-button icon="el-icon-refresh" :disabled="loading" @click="onReset">{{ $t(key('reset')) }}</el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>

    <page-table :columns="columns" :data="tableData" :loading="loading" :toolbar-buttons="[]" :row-buttons="[]" :pagination="pagination" :table-attrs="{ size: 'mini', rowKey: rowKey, highlightCurrentRow: true }" auto-height @page-change="onPageChange">
      <template #empty><el-empty :description="$t(key('no_data'))" :image-size="80" /></template>
    </page-table>
  </d2-container>
</template>

<script>
import { useTableColumns } from '@/composables/useTableColumns'
import { i18nMixin } from '@/composables/useI18n'
import PageTable from '@/components/page-table'
import { getEquipmentHistoryList } from '@/api/data-platform/production-reports/equipment-history'

export default {
  name: 'data-platform-production-reports-equipment-history',
  components: { PageTable },
  mixins: [i18nMixin('page.data_platform.production_reports.equipment_history')],
  data () {
    return {
      loading: false,
      search: { device_code: '', status: '', time: [] },
      tableData: [],
      pagination: { current: 1, size: 10, total: 0 }
    }
  },
  computed: {
    columns () {
      return useTableColumns([
        { prop: 'device_code', label: this.key('device_code'), minWidth: 160, showOverflowTooltip: true },
        { prop: 'device_name', label: this.key('device_name'), minWidth: 160, showOverflowTooltip: true },
        { prop: 'status', label: this.key('status'), minWidth: 120, showOverflowTooltip: true },
        { prop: 'status_name', label: this.key('status_name'), minWidth: 140, showOverflowTooltip: true },
        { prop: 'start_time', label: this.key('start_time'), minWidth: 170, showOverflowTooltip: true },
        { prop: 'end_time', label: this.key('end_time'), minWidth: 170, showOverflowTooltip: true },
        { prop: 'duration', label: this.key('duration'), minWidth: 120, showOverflowTooltip: true },
        { prop: 'remark', label: this.key('remark'), minWidth: 220, showOverflowTooltip: true }
      ], { selectionWidth: 0, indexWidth: 55 })
    }
  },
  methods: {
    rowKey (row) {
      return row.id || [row.device_code, row.start_time, row.end_time].filter(Boolean).join('-')
    },
    responseData (res) {
      return res && res.data !== undefined ? res.data : res
    },
    buildParams () {
      const time = Array.isArray(this.search.time) ? this.search.time : []
      return { ...this.search, start_time: time[0], end_time: time[1], page_no: this.pagination.current, page_size: this.pagination.size }
    },
    async fetchData () {
      this.loading = true
      try {
        const res = await getEquipmentHistoryList(this.buildParams())
        const data = this.responseData(res)
        const list = Array.isArray(data) ? data : (Array.isArray(data && data.data) ? data.data : [])
        this.tableData = list
        this.pagination.total = Number(data && data.count) || list.length
      } finally {
        this.loading = false
      }
    },
    onSearch () {
      this.pagination.current = 1
      this.fetchData()
    },
    onReset () {
      this.search = { device_code: '', status: '', time: [] }
      this.pagination.current = 1
      this.tableData = []
      this.pagination.total = 0
    },
    onPageChange (page) {
      this.pagination = { ...this.pagination, ...page }
      this.fetchData()
    }
  }
}
</script>

<style lang="scss" scoped>
.search-bar { margin-bottom: -18px; }
</style>
