<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('tray_code'))" prop="tray_id">
            <el-input v-model.trim="search.tray_id" :placeholder="$t(key('tray_code_placeholder'))" clearable style="width:220px" @keyup.enter.native="fetchData" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" :disabled="loading" @click="fetchData">{{ $t(key('query')) }}</el-button>
            <el-button icon="el-icon-refresh" :disabled="loading" @click="resetSearch">{{ $t(key('reset')) }}</el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>

    <page-table
      :columns="columns"
      :data="tableData"
      :loading="loading"
      :toolbar-buttons="[]"
      :row-buttons="rowButtons"
      :pagination="pagination"
      :table-attrs="{ size: 'mini', rowKey: 'id', highlightCurrentRow: true }"
      auto-height
      @page-change="onPageChange"
    >
      <template #col-active="{ row }">
        <el-tag :type="Number(row.active) === 1 ? 'success' : 'info'" size="mini">
          {{ Number(row.active) === 1 ? $t(key('active')) : $t(key('inactive')) }}
        </el-tag>
      </template>
      <template #empty>
        <el-empty :description="$t(key('data_empty'))" :image-size="80" />
      </template>
    </page-table>

    <el-drawer :visible.sync="detailVisible" :with-header="false" size="100%" append-to-body>
      <div class="drawer-header">
        <el-page-header @back="detailVisible = false" :content="$t(key('battery_detail_data'))" />
      </div>
      <div class="detail-layout">
        <aside v-if="timeLine.length" class="detail-timeline">
          <el-timeline>
            <el-timeline-item v-for="(item, index) in timeLine" :key="index">
              <p>{{ $t(key('process')) }}: {{ item.process_name || '-' }}</p>
              <el-card shadow="never">
                <p>{{ $t(key('start_time')) }}: {{ item.beginTime || '-' }}</p>
                <p>{{ $t(key('end_time')) }}: {{ item.endTime || '-' }}</p>
                <p>{{ $t(key('device_no')) }}: {{ item.device_code || '-' }}</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </aside>
        <main class="detail-main">
          <el-form :inline="true" :model="detailSearch" size="mini">
            <el-form-item :label="$t(key('battery_id'))">
              <el-input v-model.trim="detailSearch.battery_id" :placeholder="$t(key('search_battery_id'))" clearable style="width:220px" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-close" @click="cancelBatteryActive">{{ $t(key('cancel_battery_active')) }}</el-button>
            </el-form-item>
          </el-form>
          <el-table :data="filteredDetails" border size="mini" height="calc(100vh - 170px)" @selection-change="selection = $event">
            <el-table-column type="selection" width="48" />
            <el-table-column prop="id" :label="$t(key('sort'))" width="70" />
            <el-table-column prop="battery_id" :label="$t(key('battery_id'))" min-width="180" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-link type="primary" @click="goBatteryTrace(scope.row.battery_id)">{{ scope.row.battery_id }}</el-link>
              </template>
            </el-table-column>
            <el-table-column prop="batch" :label="$t(key('production_batch'))" min-width="140" show-overflow-tooltip />
            <el-table-column prop="model" :label="$t(key('model'))" min-width="120" show-overflow-tooltip />
            <el-table-column prop="flow_name" :label="$t(key('process_flow_name'))" min-width="160" show-overflow-tooltip />
            <el-table-column prop="tray" :label="$t(key('tray_no'))" min-width="130" show-overflow-tooltip />
            <el-table-column prop="lot" :label="$t(key('lot'))" min-width="120" show-overflow-tooltip />
            <el-table-column prop="active" :label="$t(key('activation_status'))" min-width="120" />
            <el-table-column prop="class" :label="$t(key('category'))" min-width="120" />
            <el-table-column prop="classname" :label="$t(key('grade'))" min-width="120" />
          </el-table>
        </main>
      </div>
    </el-drawer>
  </d2-container>
</template>

<script>
import { useTableColumns } from '@/composables/useTableColumns'
import { i18nMixin } from '@/composables/useI18n'
import PageTable from '@/components/page-table'
import { cancelTraceBatteryActive, getTrayTraceDetail, getTrayTraceList } from '@/api/data-platform/traceability/tray'

export default {
  name: 'data-platform-traceability-tray',
  components: { PageTable },
  mixins: [i18nMixin('page.data_platform.traceability.tray')],
  data () {
    return {
      loading: false,
      detailLoading: false,
      search: { tray_id: this.$route.query.tray || '' },
      tableData: [],
      pagination: { current: 1, size: 10, total: 0 },
      detailVisible: false,
      activeTrayId: '',
      detailData: [],
      timeLine: [],
      detailSearch: { battery_id: '' },
      selection: []
    }
  },
  computed: {
    columns () {
      return useTableColumns([
        { prop: 'id', label: this.key('id'), width: 90, sortable: 'custom' },
        { prop: 'tray', label: this.key('tray'), minWidth: 140, showOverflowTooltip: true },
        { prop: 'batch', label: this.key('login_batch'), minWidth: 140, showOverflowTooltip: true },
        { prop: 'lot', label: this.key('lot'), minWidth: 120, showOverflowTooltip: true },
        { prop: 'active', label: this.key('is_active'), minWidth: 110, slot: 'active' },
        { prop: 'input_battery_count', label: this.key('input_battery_count'), minWidth: 140 },
        { prop: 'create_time', label: this.key('login_time'), minWidth: 170, showOverflowTooltip: true },
        { prop: 'cancel_active_time', label: this.key('cancel_active_time'), minWidth: 170, showOverflowTooltip: true }
      ], { selectionWidth: 0, indexWidth: 55, operationWidth: 130 })
    },
    rowButtons () {
      return [{ key: 'detail', label: this.key('battery_detail'), type: 'primary', icon: 'el-icon-document', size: 'mini', onClick: this.openDetail }]
    },
    filteredDetails () {
      const keyword = String(this.detailSearch.battery_id || '').toLowerCase()
      return this.detailData.filter(item => !keyword || String(item.battery_id || '').toLowerCase().includes(keyword))
    }
  },
  mounted () {
    if (this.search.tray_id) this.fetchData()
  },
  methods: {
    responseData (res) { return res && res.data !== undefined ? res.data : res },
    async fetchData () {
      this.loading = true
      try {
        const res = await getTrayTraceList({ ...this.search, page_no: this.pagination.current, page_size: this.pagination.size })
        const data = this.responseData(res)
        this.tableData = Array.isArray(data) ? data : []
        this.pagination.total = Number(data && data.count) || this.tableData.length
      } finally {
        this.loading = false
      }
    },
    resetSearch () {
      this.search.tray_id = ''
      this.tableData = []
      this.pagination.current = 1
      this.pagination.total = 0
    },
    onPageChange (page) {
      this.pagination = { ...this.pagination, ...page }
      this.fetchData()
    },
    async openDetail (row) {
      this.activeTrayId = row.id
      this.detailVisible = true
      await this.loadDetail()
    },
    async loadDetail () {
      if (!this.activeTrayId) return
      this.detailLoading = true
      try {
        const res = await getTrayTraceDetail({ tray_id: this.activeTrayId })
        const data = this.responseData(res) || {}
        this.detailData = Array.isArray(data.data) ? data.data.filter(item => item.battery_id !== 0 && item.battery_id !== '') : []
        this.timeLine = Array.isArray(data.date_log) ? data.date_log : []
      } finally {
        this.detailLoading = false
      }
    },
    async cancelBatteryActive () {
      if (!this.selection.length) {
        this.$message.error(this.$t(this.key('please_select_at_least_one_battery')))
        return
      }
      await cancelTraceBatteryActive({ batterData: JSON.stringify(this.selection) })
      this.$message.success(this.$t(this.key('cancel_success')))
      this.loadDetail()
    },
    goBatteryTrace (batteryId) {
      this.detailVisible = false
      this.$router.push({ path: '/data_middleground/produce/traceability/battery', query: { battery_id: batteryId } })
    }
  }
}
</script>

<style lang="scss" scoped>
.search-bar { margin-bottom: -18px; }
.drawer-header { padding: 20px 24px; border-bottom: 1px solid #ebeef5; }
.detail-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); height: calc(100vh - 73px); }
.detail-timeline { overflow: auto; padding: 18px; background: #f5f7fa; border-right: 1px solid #ebeef5; }
.detail-main { min-width: 0; padding: 16px; }
</style>
