<template>
  <d2-container>
    <template #header>
      <div class="search-bar">
        <el-form :inline="true" :model="search" ref="searchForm" size="mini">
          <el-form-item :label="$t(key('batch'))" prop="batch">
            <el-input
              v-model="search.batch"
              :placeholder="$t(key('enter_batch_no'))"
              clearable
              style="width:220px"
              @keyup.enter.native="onSearch"
            />
          </el-form-item>
          <el-form-item :label="$t(key('time_range'))" prop="time">
            <el-date-picker
              v-model="search.time"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetimerange"
              :range-separator="$t(key('to'))"
              :start-placeholder="$t(key('time_start'))"
              :end-placeholder="$t(key('time_end'))"
              style="width:360px"
            />
          </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' }"
      auto-height
      @page-change="onPageChange"
    >
      <template #col-is_batch_finish="{ row }">
        <el-tag v-if="row.is_batch_finish == 1" type="success">
          {{ $t(key('finished')) }}
        </el-tag>
        <el-tag v-else type="danger">
          {{ $t(key('incomplete')) }}
        </el-tag>
      </template>
      <template #empty>
        <el-empty :description="$t('暂无数据')" :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 { getBatchDefectReport } from '@/api/planning-production/batch-defect-report'

export default {
  name: 'planning-production-batch-defect-report',
  components: { PageTable },
  mixins: [i18nMixin('page.planning_production.batch_management.batch_defect_report')],
  data () {
    return {
      loading: false,
      search: {
        batch: '',
        time: []
      },
      tableData: [],
      title1: [],
      title2: [],
      pagination: {
        current: 1,
        size: 10,
        total: 0
      }
    }
  },
  computed: {
    columns () {
      return useTableColumns(this.normalizeColumns(this.title1), {
        selectionWidth: 0,
        indexWidth: 0
      })
    }
  },
  mounted () {
    this.fetchData()
  },
  methods: {
    normalizeColumns (source) {
      if (!Array.isArray(source) || !source.length) {
        return [
          { prop: 'batch', label: this.key('batch_no'), minWidth: 150 },
          { prop: 'is_batch_finish', label: this.key('status'), width: 120, slot: 'is_batch_finish' }
        ]
      }

      return source.map((item, index) => {
        const prop = item.prop || item.field || item.key || item.name || `col_${index}`
        const label = item.name || item.label || prop
        const column = {
          prop,
          label,
          minWidth: item.minWidth || item.width || 120
        }

        if (item.width) {
          column.width = item.width
          delete column.minWidth
        }
        if (prop === 'is_batch_finish') {
          column.slot = 'is_batch_finish'
        }

        return column
      })
    },
    buildParams () {
      return {
        ...this.search,
        page_no: this.pagination.current,
        page_size: this.pagination.size
      }
    },
    fetchData () {
      this.loading = true
      getBatchDefectReport(this.buildParams())
        .then(res => {
          const data = res.data || {}
          this.tableData = data.data || []
          this.title1 = data.title1 || []
          this.title2 = data.title2 || []
          this.pagination.total = Number(data.count || 0)
        })
        .finally(() => {
          this.loading = false
        })
    },
    onSearch () {
      this.pagination.current = 1
      this.fetchData()
    },
    onReset () {
      this.$refs.searchForm.resetFields()
      this.pagination.current = 1
      this.fetchData()
    },
    onPageChange (page) {
      this.pagination = page
      this.fetchData()
    }
  }
}
</script>

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