<template>
  <d2-container>
    <template #header>
      <div class="search-bar">
        <el-form :inline="true" :model="search" size="mini">
          <el-form-item label="关键字"><el-input v-model.trim="search.keyword" placeholder="请输入关键字" clearable style="width:180px" @keyup.enter.native="onSearch" /></el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" :disabled="loading" @click="onSearch">查询</el-button>
            <el-button icon="el-icon-refresh" :disabled="loading" @click="onReset">重置</el-button>

            <el-button icon="el-icon-download" :disabled="loading" @click="exportTask">导出</el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>
    <el-table v-loading="loading" :data="tableData" size="mini" border height="calc(100vh - 220px)">
      <el-table-column type="index" width="55" />
      <el-table-column v-for="column in displayColumns" :key="column.prop" :prop="column.prop" :label="column.label" min-width="150" show-overflow-tooltip />
      <el-table-column v-if="canEdit || canDelete" label="操作" fixed="right" width="150"><template slot-scope="scope"><el-button v-if="canEdit" type="text" size="mini" @click="openDialog(scope.row)">编辑</el-button><el-button v-if="canDelete" type="text" size="mini" class="danger" @click="remove(scope.row)">删除</el-button></template></el-table-column>
      <template #empty><el-empty description="暂无数据" :image-size="80" /></template>
    </el-table>
    <div class="pager"><el-pagination background layout="total, sizes, prev, pager, next, jumper" :current-page="pagination.current" :page-size="pagination.size" :total="pagination.total" @current-change="changePage" @size-change="changeSize" /></div>
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="640px"><el-form ref="form" :model="form" label-width="130px" size="mini"><el-form-item v-for="field in formFields" :key="field.prop" :label="field.label" :prop="field.prop"><el-input v-model="form[field.prop]" clearable /></el-form-item></el-form><template #footer><el-button size="mini" @click="dialogVisible=false">取消</el-button><el-button type="primary" size="mini" :loading="saving" @click="save">确定</el-button></template></el-dialog>
  </d2-container>
</template>
<script>
import { getList, createExportTask } from '@/api/equipment-management/inspection-logs'
export default {
  name: 'equipment-management-inspection-logs',
  data () {
    return {
      loading: false,
      saving: false,
      canCreate: false,
      canEdit: false,
      canDelete: false,
      canExport: true,
      search: { keyword: '' },
      tableData: [],
      pagination: { current: 1, size: 10, total: 0 },
      columns: [
        { prop: 'device_code', label: '设备编码' },
        { prop: 'device_name', label: '设备名称' },
        { prop: 'check_item_name', label: '点检项目' },
        { prop: 'check_result', label: '点检结果' },
        { prop: 'check_user', label: '点检人员' },
        { prop: 'check_time', label: '点检时间' }
      ],
      formFields: [

      ],
      form: {},
      dialogVisible: false
    }
  },
  computed: {
    dialogTitle () { return this.form && this.form.id ? '编辑设备点检日志' : '新增设备点检日志' },
    displayColumns () { const keys = new Set(this.columns.map(item => item.prop)); const extra = Object.keys(this.tableData[0] || {}).filter(key => !keys.has(key) && key !== 'id').slice(0, 8).map(key => ({ prop: key, label: key })); return [...this.columns, ...extra] }
  },
  mounted () { this.fetchData() },
  methods: {
    responseData (res) { return res && res.data !== undefined ? res.data : res },
    normalizeList (data) { if (Array.isArray(data)) return { list: data, total: data.length }; if (data && Array.isArray(data.data)) return { list: data.data, total: Number(data.count || data.total || data.data.length) }; if (data && data.data && Array.isArray(data.data.data)) return { list: data.data.data, total: Number(data.data.count || data.data.total || data.data.data.length) }; return { list: [], total: 0 } },
    buildParams () { return { ...this.search, page_no: this.pagination.current, page_size: this.pagination.size } },
    async fetchData () { this.loading = true; try { const res = await getList(this.buildParams()); const data = this.normalizeList(this.responseData(res)); this.tableData = data.list; this.pagination.total = data.total } finally { this.loading = false } },
    onSearch () { this.pagination.current = 1; this.fetchData() },
    onReset () { this.search = { keyword: '' }; this.pagination.current = 1; this.fetchData() },
    changePage (page) { this.pagination.current = page; this.fetchData() },
    changeSize (size) { this.pagination.size = size; this.pagination.current = 1; this.fetchData() },
    openDialog (row) { this.form = row ? { ...row } : {}; this.dialogVisible = true },
    async exportTask () {
      await this.$confirm('确认创建导出任务？', '提示', { type: 'warning' })
      await createExportTask(this.buildParams())
      this.$message.success('导出任务创建成功')
    }
  }
}
</script>
<style lang="scss" scoped>
.search-bar { margin-bottom: -18px; }
.pager { padding-top: 10px; text-align: right; }
.danger { color: #f56c6c; }
</style>
