<template>
  <d2-container>
    <template #header>
      <div class="search-bar">
        <el-form :inline="true" size="mini">
          <el-form-item :label="$t(key('tray_no'))">
            <el-input
              v-model="search.tray"
              :placeholder="$t(key('enter_tray_no'))"
              clearable
              style="width:220px"
              @keyup.enter.native="onSearch"
            />
          </el-form-item>
          <el-form-item :label="$t(key('batch_no'))">
            <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('status'))">
            <el-select
              v-model="search.active"
              :placeholder="$t(key('select_status'))"
              clearable
              style="width:180px"
            >
              <el-option :label="$t(key('stop'))" value="0" />
              <el-option :label="$t(key('activated'))" value="1" />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t(key('login_time'))">
            <el-date-picker
              v-model="search.create_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" @click="onSearch">
              {{ $t(key('search')) }}
            </el-button>
            <el-button icon="el-icon-refresh" @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="rowButtons"
      :pagination="pagination"
      :help-text="$t(ckey('help'))"
      auto-height
      @page-change="onPageChange"
    >
      <template #col-status="{ row }">
        <el-tag v-if="row.active == 1" type="success">{{ $t(key('activated')) }}</el-tag>
        <el-tag v-else type="danger">{{ $t(key('stop')) }}</el-tag>
      </template>
    </page-table>

    <el-drawer
      :visible.sync="trayDrawerVisible"
      :with-header="false"
      size="100%"
      append-to-body
    >
      <div class="drawer-header">
        <el-page-header @back="trayDrawerVisible = false" :content="trayDrawerTitle" />
      </div>
      <el-row>
        <el-col :span="trayTimeline.length ? 6 : 0" v-if="trayTimeline.length">
          <div class="details-left">
            <el-timeline class="timeline">
              <el-timeline-item v-for="(item, index) in trayTimeline" :key="index">
                <p>
                  {{ $t(key('process')) }}: {{ item.process_name }}
                  <span v-if="item.is_next_process_code == 1" class="current-process">
                    {{ $t(key('current_process')) }}
                  </span>
                </p>
                <el-card>
                  <p>{{ $t(key('start_time')) }}: {{ item.beginTime }}</p>
                  <p>{{ $t(key('end_time')) }}: {{ item.endTime }}</p>
                  <p>{{ $t(key('device_number')) }}: {{ item.device_code }}</p>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-col>
        <el-col :span="trayTimeline.length ? 18 : 24">
          <div class="drawer-main">
            <el-form :inline="true" size="mini">
              <el-form-item :label="$t(key('battery_barcode'))">
                <el-input
                  v-model="traySearch"
                  :placeholder="$t(key('please_enter_battery_barcode'))"
                  clearable
                  style="width:320px"
                />
              </el-form-item>
            </el-form>
            <el-table :data="filteredTrayDetails" border height="calc(100vh - 160px)">
              <el-table-column type="index" width="60" :label="$t(key('serial_number'))" />
              <el-table-column min-width="160" prop="battery_id" :label="$t(key('battery_barcode'))">
                <template #default="{ row }">
                  <span class="link-text" @click="openBatteryDetails(row)">{{ row.battery_id }}</span>
                </template>
              </el-table-column>
              <el-table-column min-width="140" prop="batch" :label="$t(key('batch_no'))" />
              <el-table-column min-width="140" prop="tray" :label="$t(key('tray_no'))" />
              <el-table-column min-width="120" prop="lot" :label="$t(key('lot'))" />
              <el-table-column min-width="130" prop="active" :label="$t(key('activation_status'))">
                <template #default="{ row }">
                  <el-tag :type="row.active == 1 ? 'success' : 'warning'">
                    {{ row.active == 1 ? $t(key('activated')) : $t(key('stop')) }}
                  </el-tag>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-row>
    </el-drawer>

    <el-drawer
      :visible.sync="batteryDrawerVisible"
      :with-header="false"
      size="100%"
      append-to-body
    >
      <div class="drawer-header">
        <el-page-header @back="batteryDrawerVisible = false" :content="batteryDrawerTitle" />
      </div>
      <el-row v-loading="batteryLoading">
        <el-col :span="batteryTimeline.length ? 6 : 0" v-if="batteryTimeline.length">
          <div class="details-left">
            <el-timeline class="timeline">
              <el-timeline-item
                v-for="(item, index) in batteryTimeline"
                :key="index"
                :icon="item.is_select === '1' ? 'el-icon-check' : ''"
                :type="item.is_select === '1' ? 'success' : ''"
                :color="item.is_select === '1' ? '#67C23A' : ''"
                @click.native="selectBatteryTimeline(index)"
              >
                <p>
                  {{ $t(key('process')) }}: {{ item.process_name }}
                  <span v-if="item.is_next_process_code == 1" class="current-process">
                    {{ $t(key('current_process')) }}
                  </span>
                </p>
                <el-card :class="{ selected: item.is_select === '1' }">
                  <p>{{ $t(key('start_time')) }}: {{ item.beginTime }}</p>
                  <p>{{ $t(key('end_time')) }}: {{ item.endTime }}</p>
                  <p>{{ $t(key('device_number')) }}: {{ item.device_code }}</p>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-col>
        <el-col :span="batteryTimeline.length ? 18 : 24">
          <div class="drawer-main">
            <el-form :inline="true" size="mini">
              <el-form-item :label="$t(key('project_name'))">
                <el-input
                  v-model="batterySearch"
                  :placeholder="$t(key('enter_project_name_search'))"
                  clearable
                  style="width:320px"
                />
              </el-form-item>
            </el-form>
            <el-table :data="filteredBatteryDetails" border height="calc(100vh - 160px)">
              <el-table-column type="index" width="60" :label="$t(key('serial_number'))" />
              <el-table-column min-width="180" prop="name" :label="$t(key('project_name'))" />
              <el-table-column min-width="220" prop="content" :label="$t(key('content'))" />
            </el-table>
          </div>
        </el-col>
      </el-row>
    </el-drawer>
  </d2-container>
</template>

<script>
import { useTableColumns } from '@/composables/useTableColumns'
import { useTableButtons } from '@/composables/useTableButtons'
import { i18nMixin } from '@/composables/useI18n'
import { confirmMixin } from '@/composables/useConfirmHandle'
import {
  getBatchTrayList,
  trayUnbinding,
  getBatteryParam
} from '@/api/planning-production/batch-tray'
import { sendWorkerman } from '@/api/production-master-data/workerman'
import PageTable from '@/components/page-table'

export default {
  name: 'planning-production-tray-tracking',
  components: { PageTable },
  mixins: [i18nMixin('page.planning_production.batch_management.tray_tracking'), confirmMixin],
  data () {
    return {
      loading: false,
      tableData: [],
      pagination: { current: 1, size: 10, total: 0 },
      search: {
        tray: '',
        batch: '',
        active: '',
        create_time: []
      },
      columns: [],
      rowButtons: [],
      trayDrawerVisible: false,
      trayDrawerTitle: '',
      trayTimeline: [],
      trayDetailData: [],
      traySearch: '',
      batteryDrawerVisible: false,
      batteryDrawerTitle: '',
      batteryLoading: false,
      batteryTimeline: [],
      batteryDetailData: [],
      batterySearch: ''
    }
  },
  computed: {
    filteredTrayDetails () {
      const keyword = String(this.traySearch || '').toLowerCase()
      if (!keyword) return this.trayDetailData
      return this.trayDetailData.filter(row => String(row.battery_id || '').toLowerCase().includes(keyword))
    },
    filteredBatteryDetails () {
      const keyword = String(this.batterySearch || '').toLowerCase()
      if (!keyword) return this.batteryDetailData
      return this.batteryDetailData.filter(row => String(row.name || '').toLowerCase().includes(keyword))
    }
  },
  created () {
    this.search.tray = this.$route.params.tray || ''
    this.search.batch = this.$route.params.batch || ''
    this.columns = useTableColumns([
      { prop: 'tray', label: this.key('tray_no'), minWidth: 140 },
      { prop: 'lot', label: this.key('lot'), minWidth: 120 },
      { prop: 'status', label: this.key('status'), slot: 'status', minWidth: 110 },
      { prop: 'batch', label: this.key('batch_no'), minWidth: 140 },
      { prop: 'flow_name', label: this.key('flow_name'), minWidth: 160 },
      { prop: 'next_process_code', label: this.key('next_process_code'), minWidth: 140 },
      { prop: 'actual_input_battery_count', label: this.key('loaded_battery_qty'), minWidth: 150 },
      { prop: 'create_time', label: this.key('login_time'), minWidth: 170 },
      { prop: '_actions', label: this.key('actions'), width: 220, fixed: 'right' }
    ], { selectionWidth: 0 })
    const btns = useTableButtons({
      row: [
        {
          key: 'detail',
          label: this.key('detail'),
          icon: 'el-icon-position',
          auth: '/planning_production/production_batch_management/batch_tray/trace',
          onClick: this.openTrayDetails
        },
        {
          key: 'unbind',
          label: this.key('unbind'),
          icon: 'el-icon-unlock',
          auth: '/planning_production/production_batch_management/batch_tray/unbinding',
          cssStyle: { color: '#E6A23C', marginRight: '10px', cursor: 'pointer' },
          onClick: this.handleTrayUnbinding
        },
        {
          key: 'stop',
          label: this.key('stop'),
          icon: 'el-icon-close',
          color: 'danger',
          auth: '/planning_production/production_batch_management/batch_tray/inactivity',
          onClick: this.handleTrayInactivity
        }
      ]
    }, this.$permission)
    this.rowButtons = btns.rowButtons
    this.fetchData()
  },
  methods: {
    normalizeListResponse (res) {
      const data = Array.isArray(res) ? res : (res && res.data) || []
      if (Array.isArray(data)) return { list: data, total: data.length }
      return {
        list: data.data || [],
        total: data.count || 0
      }
    },
    async fetchData () {
      this.loading = true
      try {
        const res = await getBatchTrayList({
          ...this.search,
          page_no: this.pagination.current,
          page_size: this.pagination.size
        })
        const { list, total } = this.normalizeListResponse(res)
        this.tableData = list
        this.pagination.total = total
      } finally {
        this.loading = false
      }
    },
    onSearch () {
      this.pagination.current = 1
      this.fetchData()
    },
    onReset () {
      this.search = { tray: '', batch: '', active: '', create_time: [] }
      this.pagination.current = 1
      this.fetchData()
    },
    onPageChange (page) {
      this.pagination.current = page.current
      this.pagination.size = page.size
      this.fetchData()
    },
    openTrayDetails (row) {
      this.trayDrawerTitle = `【${row.tray || ''}】${this.$t(this.key('tray_details'))}`
      this.trayTimeline = row.date_log || []
      this.trayDetailData = row.trayDetailsData || []
      this.traySearch = ''
      this.trayDrawerVisible = true
    },
    async openBatteryDetails (row) {
      this.batteryDrawerTitle = `【${row.battery_id || ''}】${this.$t(this.key('battery_details'))}`
      this.batteryDrawerVisible = true
      this.batteryLoading = true
      this.batterySearch = ''
      try {
        const res = await getBatteryParam({
          subbatch: row.subbatch,
          batch: row.batch,
          tray: row.tray,
          lot: row.lot,
          battery_id: row.battery_id
        })
        const data = Array.isArray(res) ? res : (res && res.data) || []
        this.batteryTimeline = data.map((item, index) => ({
          ...item,
          is_select: index === 0 ? '1' : '0'
        }))
        this.batteryDetailData = this.batteryTimeline[0] ? (this.batteryTimeline[0].batteryDetailsData || []) : []
      } finally {
        this.batteryLoading = false
      }
    },
    selectBatteryTimeline (index) {
      this.batteryTimeline = this.batteryTimeline.map((item, itemIndex) => ({
        ...item,
        is_select: itemIndex === index ? '1' : '0'
      }))
      this.batteryDetailData = this.batteryTimeline[index]
        ? (this.batteryTimeline[index].batteryDetailsData || [])
        : []
    },
    async handleTrayUnbinding (row) {
      await this.$confirmAction(
        {
          message: this.key('tray_unbind_confirm'),
          title: this.key('prompt')
        },
        () => trayUnbinding({ batch: row.batch, tray: row.tray })
      )
      this.$message.success(this.$t(this.key('operation_success')))
      this.pagination.current = Math.min(
        this.pagination.current,
        Math.ceil((this.pagination.total - 1) / this.pagination.size) || 1
      )
      this.fetchData()
    },
    async handleTrayInactivity (row) {
      await this.$confirmAction(
        {
          message: this.key('tray_stop_confirm'),
          title: this.key('prompt')
        },
        () => sendWorkerman({
          sendData: {
            action: 'set_tray_inactivity',
            param: {
              batch: row.batch,
              tray: row.tray
            }
          }
        })
      )
      this.$message.success(this.$t(this.key('operation_success')))
      this.fetchData()
    }
  }
}
</script>

<style scoped>
.search-bar {
  padding: 10px 0;
}

/deep/ .el-form-item--mini.el-form-item {
  margin-bottom: 4px;
}

.drawer-header {
  padding: 24px;
  border-bottom: 1px solid #dcdfe6;
}

.details-left {
  height: calc(100vh - 73px);
  overflow-y: auto;
  background: #f2f3f5;
}

.timeline {
  padding-top: 20px;
}

.drawer-main {
  padding: 20px 20px 0;
}

.current-process {
  color: #f56c6c;
}

.link-text {
  color: #409eff;
  cursor: pointer;
}

.selected {
  color: #fff;
  background-color: #67c23a;
}
</style>
