<template>
  <d2-container>
    <template #header>
      <div class="search-bar">
        <el-form :inline="true" size="mini">
          <el-form-item :label="$t(key('batch_no'))">
            <el-input
              v-model="search.batch"
              :placeholder="$t(key('enter_batch_no'))"
              clearable
              style="width:200px"
              @keyup.enter.native="onSearch"
            />
          </el-form-item>
          <el-form-item :label="$t(key('process_flow'))">
            <el-select
              v-model="search.flow_id"
              :placeholder="$t(key('select_process_flow'))"
              clearable
              filterable
              style="width:200px"
              @focus="loadFlowOptions"
            >
              <el-option
                v-for="item in flowOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t(key('product_model'))">
            <el-select
              v-model="search.product_model_id"
              :placeholder="$t(key('select_product_model'))"
              clearable
              filterable
              style="width:200px"
              @focus="loadProductOptions"
            >
              <el-option
                v-for="item in productOptions"
                :key="item.product_model_id || item.id"
                :label="item.name || item.code"
                :value="item.product_model_id || item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t(key('factory_area'))">
            <el-select
              v-model="search.area_id"
              :placeholder="$t(key('select_area'))"
              clearable
              filterable
              style="width:180px"
              @focus="loadAreaOptions"
              @change="onSearchAreaChange"
            >
              <el-option
                v-for="item in areaOptions"
                :key="item.area_id || item.id"
                :label="item.name"
                :value="item.area_id || item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t(key('production_line'))">
            <el-select
              v-model="search.line_id"
              :placeholder="$t(key('select_line'))"
              clearable
              filterable
              style="width:180px"
              @focus="loadLineOptions(search.area_id)"
            >
              <el-option
                v-for="item in searchLineOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t(key('create_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
      ref="pageTable"
      :columns="columns"
      :data="tableData"
      :loading="loading"
      :toolbar-buttons="toolbarButtons"
      :row-buttons="rowButtons"
      :pagination="pagination"
      :help-text="$t(ckey('help'))"
      auto-height
      @page-change="onPageChange"
    />

    <el-dialog
      :visible.sync="dialogVisible"
      :title="$t(dialogTitle)"
      width="35%"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      @close="onDialogClose"
    >
      <el-form ref="batchForm" :model="formData" :rules="rules" label-width="130px" size="mini">
        <el-form-item :label="$t(key('process_flow'))" prop="flow_id">
          <el-select
            v-model="formData.flow_id"
            :placeholder="$t(key('select_process_flow'))"
            :disabled="isEdit"
            clearable
            filterable
            style="width:90%"
            @focus="loadFlowOptions"
          >
            <el-option
              v-for="item in flowOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t(key('batch_no'))" prop="batch">
          <el-input
            v-model="formData.batch"
            :placeholder="$t(key('enter_batch_no'))"
            :disabled="isEdit"
            clearable
            style="width:90%"
          />
        </el-form-item>
        <el-form-item :label="$t(key('factory_area'))" prop="area_id">
          <el-select
            v-model="formData.area_id"
            :placeholder="$t(key('select_area'))"
            :disabled="isEdit"
            clearable
            filterable
            style="width:90%"
            @focus="loadAreaOptions"
            @change="onFormAreaChange"
          >
            <el-option
              v-for="item in areaOptions"
              :key="item.area_id || item.id"
              :label="item.name"
              :value="item.area_id || item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t(key('production_line'))" prop="line_id">
          <el-select
            v-model="formData.line_id"
            :placeholder="$t(key('select_line'))"
            :disabled="isEdit"
            clearable
            filterable
            style="width:90%"
            @focus="loadLineOptions(formData.area_id)"
          >
            <el-option
              v-for="item in formLineOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t(key('planned_completion_date'))" prop="planned_completion_date">
          <el-date-picker
            v-model="formData.planned_completion_date"
            type="date"
            value-format="yyyy-MM-dd"
            :placeholder="$t(key('select_planned_completion_date'))"
            clearable
            style="width:90%"
          />
        </el-form-item>
        <el-form-item :label="$t(key('planned_completion_quantity'))" prop="planned_completion_quantity">
          <el-input-number
            v-model="formData.planned_completion_quantity"
            :min="1"
            :step="1"
            :precision="0"
            controls-position="right"
            style="width:90%"
          />
        </el-form-item>
        <el-form-item :label="$t(key('remark'))" prop="remark">
          <el-input
            v-model="formData.remark"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 6 }"
            :placeholder="$t(key('enter_remark'))"
            clearable
            style="width:90%"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button size="mini" @click="dialogVisible = false">{{ $t(key('cancel')) }}</el-button>
        <el-button size="mini" type="primary" :loading="submitting" @click="onDialogSubmit">
          {{ $t(key('confirm')) }}
        </el-button>
      </template>
    </el-dialog>

    <el-dialog
      :visible.sync="importVisible"
      :title="$t(key('battery_batch_login'))"
      width="50%"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      @close="resetImport"
    >
      <el-form label-width="140px" size="mini">
        <el-alert :title="$t(key('upload_warning'))" :closable="false" type="warning" />
        <el-form-item class="import-row" :label="$t(key('data_import_text_file'))">
          <el-select
            v-model="importBatch"
            :placeholder="$t(key('select_batch'))"
            clearable
            filterable
            style="width:220px"
            @focus="loadBatchOptions"
          >
            <el-option
              v-for="item in batchOptions"
              :key="item.id || item.batch"
              :label="item.batch"
              :value="item.batch"
            />
          </el-select>
          <el-upload
            ref="upload"
            class="upload-inline"
            action=""
            accept=".txt"
            :multiple="false"
            :show-file-list="true"
            :file-list="importFileList"
            :http-request="handleTxtUpload"
            :disabled="!importBatch"
          >
            <el-button size="mini" type="success" :disabled="!importBatch">
              {{ $t(key('select_file')) }}
            </el-button>
          </el-upload>
          <el-button size="mini" type="warning" @click="resetImport">
            {{ $t(key('reset')) }}
          </el-button>
        </el-form-item>
        <el-form-item :label="$t(key('preview'))">
          <page-table
            :columns="importColumns"
            :data="importTableData"
            :loading="importLoading"
            :height="350"
            :toolbar-buttons="[]"
            :row-buttons="[]"
          />
        </el-form-item>
        <div class="import-count">{{ $t(key('quantity')) }}: {{ importTableData.length }}</div>
      </el-form>
      <template #footer>
        <el-button size="mini" @click="importVisible = false">{{ $t(key('cancel')) }}</el-button>
        <el-button size="mini" type="primary" :loading="importLoading" @click="submitImport">
          {{ $t(key('confirm')) }}
        </el-button>
      </template>
    </el-dialog>
  </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 {
  getBatchAll,
  getBatchList,
  createBatch,
  editBatch,
  deleteBatch,
  getProcessBatch
} from '@/api/planning-production/batch-list'
import { getProcessRoutingList } from '@/api/production-master-data/process-routing'
import { getProductBatteryAll } from '@/api/production-master-data/product-management'
import { getFactoryAreaALL } from '@/api/production-master-data/factory-area'
import { getProductionLineList } from '@/api/production-master-data/production-line'
import { sendWorkerman } from '@/api/production-master-data/workerman'
import PageTable from '@/components/page-table'

export default {
  name: 'planning-production-batch-list',
  components: { PageTable },
  mixins: [i18nMixin('page.planning_production.batch_management.batch_list'), confirmMixin],
  data () {
    const positiveInteger = (rule, value, callback) => {
      if (value === '' || value === undefined || value === null) {
        callback()
        return
      }
      if (!/^[1-9][0-9]*$/.test(String(value))) {
        callback(new Error(this.$t(this.key('enter_positive_integer'))))
        return
      }
      callback()
    }

    return {
      loading: false,
      submitting: false,
      importLoading: false,
      tableData: [],
      dialogVisible: false,
      importVisible: false,
      dialogTitle: '',
      handleType: 'create',
      editId: null,
      search: {
        batch: '',
        flow_id: '',
        product_model_id: '',
        area_id: '',
        line_id: '',
        create_time: []
      },
      pagination: { current: 1, size: 10, total: 0 },
      formData: this.getDefaultForm(),
      rules: {
        batch: [
          { required: true, message: this.key('enter_batch_no'), trigger: 'blur' },
          { min: 1, max: 100, message: this.key('length_1_100'), trigger: 'blur' }
        ],
        flow_id: [
          { required: true, message: this.key('select_process_flow'), trigger: 'change' }
        ],
        area_id: [
          { required: true, message: this.key('select_area'), trigger: 'change' }
        ],
        line_id: [
          { required: true, message: this.key('select_line'), trigger: 'change' }
        ],
        planned_completion_quantity: [
          { validator: positiveInteger, trigger: 'blur' }
        ]
      },
      columns: [],
      toolbarButtons: [],
      rowButtons: [],
      importColumns: [],
      flowOptions: [],
      productOptions: [],
      areaOptions: [],
      searchLineOptions: [],
      formLineOptions: [],
      batchOptions: [],
      importBatch: '',
      importFileList: [],
      importTableData: [],
      hasActiveBattery: false
    }
  },
  computed: {
    isEdit () {
      return this.handleType === 'edit'
    }
  },
  created () {
    this.columns = useTableColumns([
      { prop: 'batch', label: this.key('batch_no'), minWidth: 150 },
      { prop: 'planned_completion_date', label: this.key('planned_completion_date'), minWidth: 160 },
      { prop: 'planned_completion_quantity', label: this.key('planned_completion_quantity'), minWidth: 170 },
      { prop: 'flow_name', label: this.key('process_flow_name'), minWidth: 160 },
      { prop: 'area_name', label: this.key('factory_area'), minWidth: 130 },
      { prop: 'line_name', label: this.key('production_line'), minWidth: 130 },
      { prop: 'product_model_code', label: this.key('product_model'), minWidth: 150 },
      { prop: 'input_amount', label: this.key('input_quantity'), minWidth: 120 },
      { prop: 'remark', label: this.key('remark'), minWidth: 180 },
      { prop: 'create_time', label: this.key('create_time'), minWidth: 170 },
      { prop: '_actions', label: this.key('operation'), width: 180, fixed: 'right' }
    ], { selectionWidth: 0 })

    this.importColumns = useTableColumns([
      { prop: 'batch', label: this.key('batch'), minWidth: 150 },
      { prop: 'battery_id', label: this.key('barcode'), minWidth: 180 },
      { prop: 'active', label: this.key('activation_status'), minWidth: 140 }
    ], { selectionWidth: 0 })

    const btns = useTableButtons({
      toolbar: [
        {
          key: 'add',
          label: this.key('add'),
          icon: 'el-icon-plus',
          type: 'primary',
          auth: '/planning_production/production_batch_management/batch/create',
          onClick: this.openAdd
        },
        {
          key: 'battery-login',
          label: this.key('battery_batch_login'),
          icon: 'el-icon-upload2',
          type: 'success',
          auth: '/planning_production/production_batch_management/batch/import',
          onClick: this.openImport
        }
      ],
      row: [
        {
          key: 'edit',
          label: this.key('edit'),
          icon: 'el-icon-edit',
          auth: '/planning_production/production_batch_management/batch/edit',
          onClick: this.openEdit
        },
        {
          key: 'delete',
          label: this.key('delete'),
          icon: 'el-icon-delete',
          color: 'danger',
          auth: '/planning_production/production_batch_management/batch/delete',
          onClick: this.handleDelete
        }
      ]
    }, this.$permission)
    this.toolbarButtons = btns.toolbarButtons
    this.rowButtons = btns.rowButtons
    this.fetchData()
  },
  methods: {
    getDefaultForm () {
      return {
        flow_id: '',
        batch: '',
        area_id: '',
        line_id: '',
        planned_completion_date: '',
        planned_completion_quantity: undefined,
        remark: ''
      }
    },
    normalizeListResponse (res) {
      const root = res || {}
      const data = res && res.data !== undefined ? res.data : res
      if (Array.isArray(data)) {
        return { list: data, total: Number(root.count || root.total || data.length) }
      }
      if (data && Array.isArray(data.list)) {
        return { list: data.list, total: Number(root.count || root.total || data.count || data.total || data.list.length) }
      }
      if (data && Array.isArray(data.rows)) {
        return { list: data.rows, total: Number(root.count || root.total || data.count || data.total || data.rows.length) }
      }
      if (data && Array.isArray(data.records)) {
        return { list: data.records, total: Number(root.count || root.total || data.count || data.total || data.records.length) }
      }
      if (data && Array.isArray(data.data)) {
        return { list: data.data, total: Number(root.count || root.total || data.count || data.total || data.data.length) }
      }
      if (data && data.data && Array.isArray(data.data.data)) {
        return { list: data.data.data, total: Number(root.count || root.total || data.count || data.total || data.data.count || data.data.total || data.data.data.length) }
      }
      if (data && data.data && Array.isArray(data.data.list)) {
        return { list: data.data.list, total: Number(root.count || root.total || data.count || data.total || data.data.count || data.data.total || data.data.list.length) }
      }
      return { list: [], total: 0 }
    },
    async fetchData () {
      this.loading = true
      try {
        const res = await getBatchList({
          ...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 = {
        batch: '',
        flow_id: '',
        product_model_id: '',
        area_id: '',
        line_id: '',
        create_time: []
      }
      this.searchLineOptions = []
      this.pagination.current = 1
      this.fetchData()
    },
    onPageChange (page) {
      this.pagination.current = page.current
      this.pagination.size = page.size
      this.fetchData()
    },
    onSearchAreaChange () {
      this.search.line_id = ''
      this.searchLineOptions = []
    },
    onFormAreaChange () {
      this.formData.line_id = ''
      this.formLineOptions = []
    },
    async loadFlowOptions () {
      if (this.flowOptions.length) return
      try {
        const res = await getProcessRoutingList({ page_no: 1, page_size: 1000 })
        this.flowOptions = this.normalizeListResponse(res).list
      } catch { /* handled by interceptor */ }
    },
    async loadProductOptions () {
      if (this.productOptions.length) return
      try {
        const res = await getProductBatteryAll({})
        const data = Array.isArray(res) ? res : (res && res.data) || []
        this.productOptions = Array.isArray(data) ? data : []
      } catch { /* handled by interceptor */ }
    },
    async loadAreaOptions () {
      if (this.areaOptions.length) return
      try {
        const res = await getFactoryAreaALL({})
        const data = Array.isArray(res) ? res : (res && res.data) || []
        this.areaOptions = Array.isArray(data) ? data : []
      } catch { /* handled by interceptor */ }
    },
    async loadLineOptions (areaId) {
      try {
        const res = await getProductionLineList({
          area_id: areaId || '',
          page_no: 1,
          page_size: 1000
        })
        const lines = this.normalizeListResponse(res).list
        if (this.dialogVisible) {
          this.formLineOptions = lines
        } else {
          this.searchLineOptions = lines
        }
      } catch { /* handled by interceptor */ }
    },
    openAdd () {
      this.handleType = 'create'
      this.dialogTitle = this.key('add_batch')
      this.editId = null
      this.formData = this.getDefaultForm()
      this.formLineOptions = []
      this.loadFlowOptions()
      this.loadAreaOptions()
      this.$nextTick(() => {
        this.$refs.batchForm && this.$refs.batchForm.clearValidate()
        this.dialogVisible = true
      })
    },
    openEdit (row) {
      this.handleType = 'edit'
      this.dialogTitle = this.key('edit_batch')
      this.editId = row.id
      this.formData = {
        flow_id: row.flow_id || '',
        batch: row.batch || '',
        area_id: row.area_id || '',
        line_id: row.line_id || '',
        planned_completion_date: row.planned_completion_date || '',
        planned_completion_quantity: row.planned_completion_quantity || undefined,
        remark: row.remark || ''
      }
      this.loadFlowOptions()
      this.loadAreaOptions()
      this.loadLineOptions(row.area_id)
      this.dialogVisible = true
    },
    onDialogSubmit () {
      this.$refs.batchForm.validate(async valid => {
        if (!valid) {
          this.$message.warning(this.$t(this.key('validation_failed')))
          return
        }
        this.submitting = true
        try {
          if (this.handleType === 'create') {
            await createBatch(this.formData)
          } else {
            await editBatch({ ...this.formData, id: this.editId })
          }
          this.$message.success(this.$t(this.key('operation_success')))
          this.dialogVisible = false
          this.fetchData()
        } finally {
          this.submitting = false
        }
      })
    },
    onDialogClose () {
      this.formData = this.getDefaultForm()
      this.editId = null
      this.formLineOptions = []
    },
    async handleDelete (row) {
      await this.$confirmAction(
        {
          message: this.key('confirm_operation'),
          title: this.key('prompt')
        },
        () => deleteBatch({ batch: row.batch })
      )
      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()
    },
    openImport () {
      this.importVisible = true
      this.importBatch = ''
      this.importFileList = []
      this.importTableData = []
      this.hasActiveBattery = false
    },
    async loadBatchOptions () {
      if (this.batchOptions.length) return
      try {
        const res = await getBatchAll({})
        const data = Array.isArray(res) ? res : (res && res.data) || []
        this.batchOptions = Array.isArray(data) ? data : []
      } catch { /* handled by interceptor */ }
    },
    resetImport () {
      this.importBatch = ''
      this.importFileList = []
      this.importTableData = []
      this.hasActiveBattery = false
      this.importLoading = false
      if (this.$refs.upload) this.$refs.upload.clearFiles()
    },
    handleTxtUpload (upload) {
      const file = upload.file
      if (!file) {
        this.$message.error(this.$t(this.key('file_not_exist')))
        return
      }
      if (!/\.txt$/i.test(file.name)) {
        this.$message.error(this.$t(this.key('file_format_error')))
        return
      }
      if (!this.importBatch) {
        this.$message.error(this.$t(this.key('select_batch')))
        return
      }

      this.importLoading = true
      const reader = new FileReader()
      reader.onload = async event => {
        try {
          const lines = String(event.target.result || '')
            .split(/\r?\n/)
            .map(line => line.trim())
            .filter(Boolean)
          if (!lines.length) {
            this.$message.error(this.$t(this.key('upload_file_error')))
            return
          }

          const res = await getProcessBatch({
            battery: lines.map(batteryIds => ({ battery_ids: batteryIds }))
          })
          const data = res && res.data !== undefined ? res.data : res
          if (data && data.status === 1 && Array.isArray(data.battery_id)) {
            this.hasActiveBattery = false
            this.importTableData = data.battery_id.map(batteryId => ({
              battery_id: batteryId,
              active: 0,
              batch: this.importBatch
            }))
          } else {
            const rows = Array.isArray(data) ? data : []
            this.hasActiveBattery = rows.some(item => item.active === 1)
            this.importTableData = rows.map(item => ({
              ...item,
              batch: this.importBatch
            }))
          }
          this.$message.success(this.$t(this.key('import_data_success')))
        } finally {
          this.importLoading = false
        }
      }
      reader.onerror = () => {
        this.importLoading = false
        this.$message.error(this.$t(this.key('upload_file_error')))
      }
      reader.readAsText(file)
    },
    async submitImport () {
      if (!this.importTableData.length) {
        this.$message.error(this.$t(this.key('please_import_data')))
        return
      }
      if (this.hasActiveBattery) {
        this.$message.error(this.$t(this.key('active_battery_exist')))
        return
      }

      this.importLoading = true
      try {
        await sendWorkerman({
          sendData: {
            action: 'set_single_login',
            param: {
              battery_ids: this.importTableData.map(row => row.battery_id),
              device_code: 'WEBMAN_LOGIN',
              batch: this.importTableData[0].batch,
              lot: ''
            }
          }
        })
        this.$message.success(this.$t(this.key('operation_success')))
        this.importVisible = false
        this.resetImport()
        this.fetchData()
      } finally {
        this.importLoading = false
      }
    }
  }
}
</script>

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

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

.import-row /deep/ .el-form-item__content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.upload-inline {
  display: inline-block;
}

.import-count {
  margin-left: 140px;
  line-height: 28px;
}
</style>
