<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('batch_no'))" prop="batch">
            <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('semi_finished_id'))" prop="item_id">
            <el-input
              v-model="search.item_id"
              :placeholder="$t(key('enter_semi_finished_id'))"
              clearable
              style="width:200px"
              @keyup.enter.native="onSearch"
            />
          </el-form-item>
          <el-form-item :label="$t(key('workingsubclass'))" prop="workingsubclass">
            <el-select
              v-model="search.workingsubclass"
              :placeholder="$t(key('select_workingsubclass'))"
              clearable
              filterable
              style="width:200px"
              @focus="loadBatchOptions"
            >
              <el-option
                v-for="item in processOptions"
                :key="item.code || item.name"
                :label="item.name || item.code"
                :value="item.code || item.name"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t(key('finish_time'))" prop="start_time">
            <el-date-picker
              v-model="search.start_time"
              type="datetimerange"
              range-separator="-"
              :start-placeholder="$t(key('start_time'))"
              :end-placeholder="$t(key('end_time'))"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width:330px"
            />
          </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="toolbarButtons"
      :row-buttons="[]"
      :pagination="pagination"
      :table-attrs="{ size: 'mini', rowKey: 'id', highlightCurrentRow: true }"
      auto-height
      @page-change="onPageChange"
    >
      <template #col-last_status="{ row }">
        <el-tag :type="Number(row.last_status) === 0 ? 'danger' : 'success'" size="mini">
          {{ Number(row.last_status) === 0 ? $t(key('finished')) : $t(key('status_unused')) }}
        </el-tag>
      </template>
      <template #empty>
        <el-empty :description="$t('暂无数据')" :image-size="80" />
      </template>
    </page-table>

    <el-dialog :title="$t(key('input_semi_product_data'))" :visible.sync="dialogVisible" width="520px">
      <el-form ref="form" :model="form" :rules="rules" label-width="130px" size="mini">
        <el-form-item :label="$t(key('batch_id'))" prop="batch_id">
          <el-select
            v-model="form.batch_id"
            :placeholder="$t(key('select_batch_id'))"
            clearable
            filterable
            style="width:100%"
            @focus="loadBatchOptions"
            @change="onBatchChange"
          >
            <el-option
              v-for="item in batchOptions"
              :key="item.id"
              :label="item.batch"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t(key('workingsubclass'))" prop="process_code">
          <el-select
            v-model="form.process_code"
            :placeholder="$t(key('select_workingsubclass'))"
            clearable
            filterable
            style="width:100%"
            :disabled="!form.batch_id"
          >
            <el-option
              v-for="item in selectedBatchProcesses"
              :key="item.code || item.name"
              :label="item.name || item.code"
              :value="item.code || item.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t(key('device_code'))" prop="device_code">
          <el-select
            v-model="form.device_code"
            :placeholder="$t(key('select_device_code'))"
            clearable
            filterable
            style="width:100%"
            @focus="loadDeviceOptions"
          >
            <el-option
              v-for="item in deviceOptions"
              :key="item.code || item.device_code"
              :label="item.name || item.device_name || item.code || item.device_code"
              :value="item.code || item.device_code"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t(key('output_quantity'))" prop="item_quantity">
          <el-input-number v-model="form.item_quantity" :min="1" style="width:100%" />
        </el-form-item>
        <el-form-item :label="$t(key('output_date'))" prop="start_time">
          <el-date-picker
            v-model="form.start_time"
            type="date"
            value-format="yyyy-MM-dd"
            style="width:100%"
            :placeholder="$t(key('output_date'))"
          />
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button size="mini" @click="dialogVisible = false">{{ $t(key('cancel')) }}</el-button>
        <el-button size="mini" type="primary" :loading="submitting" @click="submitForm">
          {{ $t(key('confirm')) }}
        </el-button>
      </span>
    </el-dialog>
  </d2-container>
</template>

<script>
import { useTableColumns } from '@/composables/useTableColumns'
import { i18nMixin } from '@/composables/useI18n'
import PageTable from '@/components/page-table'
import { getBatchAll } from '@/api/planning-production/batch-list'
import { getDeviceAll } from '@/api/planning-production/equipment-monitoring'
import { createWipData, getWipDataList } from '@/api/planning-production/material-monitoring'

export default {
  name: 'planning-production-material-monitoring',
  components: { PageTable },
  mixins: [i18nMixin('page.planning_production.production_monitoring.material_monitoring')],
  data () {
    return {
      loading: false,
      submitting: false,
      dialogVisible: false,
      search: {
        batch: '',
        item_id: '',
        workingsubclass: '',
        start_time: []
      },
      tableData: [],
      pagination: {
        current: 1,
        size: 10,
        total: 0
      },
      form: {
        batch_id: '',
        process_code: '',
        device_code: '',
        item_quantity: undefined,
        start_time: ''
      },
      batchOptions: [],
      deviceOptions: []
    }
  },
  computed: {
    columns () {
      return useTableColumns([
        { prop: 'batch', label: this.key('batch_no'), minWidth: 150, showOverflowTooltip: true },
        { prop: 'item_id', label: this.key('semi_finished_id'), minWidth: 160, showOverflowTooltip: true },
        { prop: 'item_code', label: this.key('semi_product_code'), minWidth: 170, showOverflowTooltip: true },
        { prop: 'item_quantity', label: this.key('output_quantity'), minWidth: 120 },
        { prop: 'workingsubclass', label: this.key('workingsubclass'), minWidth: 150, showOverflowTooltip: true },
        { prop: 'device_code', label: this.key('production_device'), minWidth: 150, showOverflowTooltip: true },
        { prop: 'last_status', label: this.key('last_status'), width: 120, slot: 'last_status' },
        { prop: 'finish_time', label: this.key('finish_time'), minWidth: 170, showOverflowTooltip: true }
      ], {
        selectionWidth: 0,
        indexWidth: 55
      })
    },
    toolbarButtons () {
      return [
        {
          key: 'create',
          label: this.key('input_semi_product_data'),
          type: 'primary',
          icon: 'el-icon-plus',
          size: 'mini',
          onClick: this.openDialog
        }
      ]
    },
    rules () {
      return {
        batch_id: [{ required: true, message: this.$t(this.key('select_batch_id')), trigger: 'change' }],
        process_code: [{ required: true, message: this.$t(this.key('select_workingsubclass')), trigger: 'change' }],
        device_code: [{ required: true, message: this.$t(this.key('select_device_code')), trigger: 'change' }],
        item_quantity: [{ required: true, message: this.$t(this.key('enter_output_quantity')), trigger: 'blur' }]
      }
    },
    selectedBatch () {
      return this.batchOptions.find(item => String(item.id) === String(this.form.batch_id)) || {}
    },
    selectedBatchProcesses () {
      return Array.isArray(this.selectedBatch.process) ? this.selectedBatch.process : []
    },
    processOptions () {
      const map = new Map()
      this.batchOptions.forEach(batch => {
        const processes = Array.isArray(batch.process) ? batch.process : []
        processes.forEach(item => {
          const value = item.code || item.name
          if (value && !map.has(value)) map.set(value, item)
        })
      })
      return Array.from(map.values())
    }
  },
  created () {
    this.fetchData()
  },
  methods: {
    responseData (res) {
      return res && res.data ? res.data : (res || {})
    },
    searchParams () {
      const params = {
        batch: this.search.batch || undefined,
        item_id: this.search.item_id || undefined,
        workingsubclass: this.search.workingsubclass || undefined
      }
      if (Array.isArray(this.search.start_time) && this.search.start_time.length === 2) {
        params.start_time = this.search.start_time[0]
        params.end_time = this.search.start_time[1]
      }
      return params
    },
    async fetchData () {
      this.loading = true
      try {
        const res = await getWipDataList({
          ...this.searchParams(),
          page_no: this.pagination.current,
          page_size: this.pagination.size
        })
        const payload = this.responseData(res)
        this.tableData = Array.isArray(payload.data) ? payload.data : []
        this.pagination.total = Number(payload.count || 0)
      } finally {
        this.loading = false
      }
    },
    onSearch () {
      this.pagination.current = 1
      this.fetchData()
    },
    onReset () {
      this.search = {
        batch: '',
        item_id: '',
        workingsubclass: '',
        start_time: []
      }
      this.onSearch()
    },
    onPageChange (pagination) {
      this.pagination = pagination
      this.fetchData()
    },
    openDialog () {
      this.dialogVisible = true
      this.form = {
        batch_id: '',
        process_code: '',
        device_code: '',
        item_quantity: undefined,
        start_time: ''
      }
      this.$nextTick(() => {
        if (this.$refs.form) this.$refs.form.clearValidate()
      })
      this.loadBatchOptions()
      this.loadDeviceOptions()
    },
    async loadBatchOptions () {
      if (this.batchOptions.length) return
      const res = await getBatchAll({})
      const data = Array.isArray(res) ? res : (res && res.data) || []
      this.batchOptions = Array.isArray(data) ? data : []
    },
    async loadDeviceOptions () {
      if (this.deviceOptions.length) return
      const res = await getDeviceAll({})
      const payload = this.responseData(res)
      this.deviceOptions = Array.isArray(payload.data) ? payload.data : []
    },
    onBatchChange () {
      this.form.process_code = ''
    },
    submitForm () {
      this.$refs.form.validate(async valid => {
        if (!valid) return
        this.submitting = true
        try {
          await createWipData({ ...this.form })
          this.$message.success(this.$t(this.key('operation_success')))
          this.dialogVisible = false
          this.fetchData()
        } finally {
          this.submitting = false
        }
      })
    }
  }
}
</script>
