<template>
  <div class="key-dm-inbound-wrapper">
    <Tabs v-model="activeTab" @on-click="handleTabChange">
      <TabPane label="办公用品入库" name="inbound">
        <div class="search-div">
          <Row type="flex" :gutter="16">
            <Col span="8">
              <Input v-model="filters.inbound.inbound_no" placeholder="单号/批次号" style="width:60%" />
              <Button type="primary" class="mr10" @click="handleSearch('inbound')">搜索</Button>
              <Button @click="handleReset('inbound')">重置</Button>
            </Col>
            <Col span="16" class="text-right">
              <Button type="success" @click="openInboundModal">新增入库</Button>
            </Col>
          </Row>
        </div>
        <Table :data="tables.inbound" :loading="loading.inbound" :columns="inboundColumns" border>
          <template slot="action" slot-scope="{ row }">
            <Button size="small" @click="openDetail(row)">详细</Button>
            <Button size="small" type="primary" @click="openEdit(row)" v-if="canEdit(row)">修改</Button>
            <Poptip confirm title="确认删除？" transfer @on-ok="deleteInbound(row)">
              <Button size="small" type="error">删除</Button>
            </Poptip>
            <Poptip confirm title="确认执行入库？" transfer @on-ok="doInbound(row)" v-if="row.inbound_status===0">
              <Button size="small" type="success">入库</Button>
            </Poptip>
          </template>
        </Table>
        <Page class="page_style" :total="pagers.inbound.totalRecord" :current="pagers.inbound.pageNo" :page-size="pagers.inbound.pageSize"
          show-total show-sizer @on-change="pageChange('inbound', $event)" @on-page-size-change="sizeChange('inbound', $event)" />
      </TabPane>

      <TabPane label="办公用品归还" name="return">
        <div class="search-div">
          <Row type="flex" :gutter="16">
            <Col span="10">
              <Input v-model="filters.return.key" placeholder="申请单号/申请人" style="width:60%" />
              <Button type="primary" class="mr10" @click="handleSearch('return')">搜索</Button>
              <Button @click="handleReset('return')">重置</Button>
            </Col>
          </Row>
        </div>
        <Table :data="tables.return" :loading="loading.return" :columns="returnColumns" border>
          <template slot="action" slot-scope="{ row }">
            <Button size="small" type="primary" @click="openReturnModal(row)">归还</Button>
          </template>
        </Table>
        <Page class="page_style" :total="pagers.return.totalRecord" :current="pagers.return.pageNo" :page-size="pagers.return.pageSize"
          show-total show-sizer @on-change="pageChange('return', $event)" @on-page-size-change="sizeChange('return', $event)" />
      </TabPane>

      <TabPane label="库存查询" name="inventory">
        <div class="search-div">
          <Row type="flex" :gutter="16">
            <Col span="10">
              <Input v-model="filters.inventory.material_name" placeholder="物料名称/编码" style="width:60%" />
              <Button type="primary" class="mr10" @click="handleSearch('inventory')">搜索</Button>
              <Button @click="handleReset('inventory')">重置</Button>
            </Col>
          </Row>
        </div>
        <Table :data="tables.inventory" :loading="loading.inventory" :columns="inventoryColumns" border />
      </TabPane>
    </Tabs>

    <!-- 入库弹窗 -->
    <Modal v-model="inboundModal.visible" :title="inboundModal.isEdit ? '修改入库' : '新增入库'" width="800">
      <Form :model="inboundModal.form" :label-width="120" ref="inboundForm">
        <FormItem label="入库单号">
          <Input v-model="inboundModal.form.inbound_no" />
        </FormItem>
        <FormItem label="批次号">
          <Input v-model="inboundModal.form.batch_no" />
        </FormItem>
        <FormItem label="入库日期">
          <DatePicker v-model="inboundModal.form.inbound_date" type="date" />
        </FormItem>
        <FormItem label="存放位置">
          <Input v-model="inboundModal.form.storage_location" />
        </FormItem>
        <FormItem label="备注">
          <Input type="textarea" v-model="inboundModal.form.remark" :rows="2" />
        </FormItem>

        <h4>明细（从物料库选择）
          <div style="float: right;">
            <Button size="small" class="mr5" type="primary" @click="showMaterialSelector = true">添加</Button>
            <Button size="small" type="error" @click="deleteSelectedInboundDetails">删除</Button>
          </div>
        </h4>
        <Table :data="inboundModal.details" :columns="inboundDetailColumns" size="small" border @on-selection-change="onInboundDetailSelectionChange" style="width: 100%" />
        <MaterialSelector v-model="showMaterialSelector" :selected="[]" @on-ok="handleInboundMaterialSelectorOk" @cancel="showMaterialSelector = false" />
      </Form>
      <div slot="footer">
        <Button @click="inboundModal.visible=false">取消</Button>
        <Button type="primary" :loading="inboundModal.saving" @click="saveInbound">保存</Button>
      </div>
    </Modal>

    <!-- 归还弹窗 -->
    <Modal v-model="returnModal.visible" title="归还物品" width="700">
      <Form :model="returnModal.record" :label-width="120">
        <FormItem label="申请单号"><span>{{ returnModal.record.application_no }}</span></FormItem>
        <FormItem label="申请人"><span>{{ returnModal.record.applicant_name }}</span></FormItem>
        <FormItem label="归还明细">
          <Table :data="returnModal.details" :columns="returnDetailColumns" size="small" border />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="returnModal.visible=false">取消</Button>
        <Button type="primary" :loading="returnModal.saving" @click="confirmReturn">归还</Button>
      </div>
    </Modal>

    <!-- 详情弹窗 -->
    <Modal v-model="detailModal.visible" title="入库/归还详情" width="720">
      <Spin fix v-if="detailModal.loading"></Spin>
      <div v-else>
        <Row :gutter="16"><Col span="12"><p><strong>单号：</strong>{{ detailModal.data.inbound_no || detailModal.data.application_no }}</p></Col></Row>
        <Row class="mt8"><Col span="24"><h4>明细</h4></Col></Row>
        <Table :data="detailModal.details" :columns="detailDetailColumns" size="small" border />
        <Row class="mt8"><Col span="24"><h4>操作日志</h4></Col></Row>
        <Table :data="detailModal.logs" :columns="detailLogsColumns" size="small" border />
      </div>
      <div slot="footer"><Button type="primary" @click="detailModal.visible=false">关闭</Button></div>
    </Modal>
  </div>
</template>

<script>
import {
  getInboundList,
  saveInbound,
  deleteInbound,
  doInbound,
  getPendingReturnList,
  processReturn,
  getInventoryList,
  getInboundById
} from '@/api/key-dm-inbound'
import MaterialSelector from '@/view/key-person/key_dm_conf/materialSelector.vue'

export default {
  name: 'key-dm-inbound-index',
  components: { MaterialSelector },
  data () {
    return {
      activeTab: 'inbound',
      filters: { inbound: { inbound_no: '' }, return: { key: '' }, inventory: { material_name: '' } },
      tables: { inbound: [], return: [], inventory: [] },
      pagers: { inbound: { pageNo: 1, pageSize: 10, totalRecord: 0 }, return: { pageNo: 1, pageSize: 10, totalRecord: 0 }, inventory: { pageNo: 1, pageSize: 10, totalRecord: 0 } },
      loading: { inbound: false, return: false, inventory: false },
      inboundColumns: [
        { type: 'index', title: '序号', width: 60, align: 'center' },
        { title: '入库单号', key: 'inbound_no', align: 'center' },
        { title: '批次号', key: 'batch_no', align: 'center' },
        { title: '入库日期', key: 'inbound_date', align: 'center' },
        { title: '类型', key: 'inbound_type', align: 'center' },
        { title: '状态', key: 'inbound_status', align: 'center' },
        { title: '操作', slot: 'action', width: 360, align: 'center' }
      ],
      returnColumns: [
        { type: 'index', title: '序号', width: 60, align: 'center' },
        { title: '申请单号', key: 'application_no', align: 'center' },
        { title: '申请人', key: 'applicant_name', align: 'center' },
        { title: '部门', key: 'department_name', align: 'center' },
        { title: '发放状态', key: 'issue_status', align: 'center' },
        { title: '操作', slot: 'action', width: 140, align: 'center' }
      ],
      inventoryColumns: [
        { type: 'index', title: '序号', width: 60, align: 'center' },
        { title: '物料编码', key: 'material_code', align: 'center' },
        { title: '物料名称', key: 'material_name', align: 'center' },
        { title: '总量', key: 'total_quantity', align: 'center' },
        { title: '可用', key: 'available_quantity', align: 'center' },
        { title: '借出', key: 'borrowed_quantity', align: 'center' }
      ],
      // 模态窗口内表格列定义
      inboundDetailColumns: [
        { type: 'selection', width: 60 },
        { title: '物料编码', key: 'material_code', minWidth: 120 },
        { title: '物料名称', key: 'material_name', minWidth: 150 },
        { title: '入库数量', key: 'inbound_quantity', minWidth: 120, render: (h, params) => {
          return h('InputNumber', {
            props: {
              value: params.row.inbound_quantity || 0,
              min: 0,
              precision: 0
            },
            style: { width: '100px' },
            on: {
              input: (val) => {
                params.row.inbound_quantity = val || 0
                params.row.total_amount = ((params.row.inbound_quantity || 0) * (params.row.unit_price || 0)).toFixed(2)
              }
            }
          })
        }},
        { title: '单价', key: 'unit_price', minWidth: 120, render: (h, params) => {
          return h('InputNumber', {
            props: {
              value: params.row.unit_price || 0,
              min: 0,
              precision: 2
            },
            style: { width: '100px' },
            on: {
              input: (val) => {
                params.row.unit_price = val || 0
                params.row.total_amount = ((params.row.inbound_quantity || 0) * (params.row.unit_price || 0)).toFixed(2)
              }
            }
          })
        }},
        { title: '总金额', key: 'total_amount', minWidth: 120, render: (h, params) => {
          const amount = ((params.row.inbound_quantity || 0) * (params.row.unit_price || 0)).toFixed(2)
          return h('span', amount)
        }}
      ],
      returnDetailColumns: [
        { title: '物料名称', key: 'material_name' },
        { title: '申请数量', key: 'apply_quantity' },
        { title: '归还数量', key: 'returned_quantity' }
      ],
      detailDetailColumns: [
        { title: '物料编码', key: 'material_code' },
        { title: '物料名称', key: 'material_name' },
        { title: '数量', key: 'inbound_quantity' },
        { title: '单价', key: 'unit_price' }
      ],
      detailLogsColumns: [
        { title: '操作类型', key: 'op_type' },
        { title: '数量', key: 'quantity' },
        { title: '时间', key: 'create_time' }
      ],
      // 选择器控制与已选明细
      showMaterialSelector: false,
      inboundSelectedDetails: [],
      inboundModal: { visible: false, isEdit: false, saving: false, form: {}, details: [] },
      returnModal: { visible: false, record: {}, details: [], saving: false },
      detailModal: { visible: false, loading: false, data: {}, details: [], logs: [] }
    }
  },
  created () { this.fetchList('inbound') },
  methods: {
    handleTabChange (name) {
      this.activeTab = name
      if (name === 'return') this.fetchList('return')
      if (name === 'inventory') this.fetchList('inventory')
    },
    fetchList (tab) {
      const apiMap = { inbound: getInboundList, return: getPendingReturnList, inventory: getInventoryList }
      const api = apiMap[tab]; if (!api) return
      this.loading[tab] = true
      const payload = Object.assign({}, this.pagers[tab] || {}, { params: this.filters[tab] || {} })
      api(payload).then(ret => {
        if (ret.data && ret.data.errcode === 0) {
          const data = ret.data.data || {}
          this.tables[tab] = data.results || []
          if (data.totalRecord !== undefined) (this.pagers[tab] || {}).totalRecord = data.totalRecord
        } else this.$Notice.error({ title: '查询失败', desc: ret.data && ret.data.errmsg })
      }).finally(() => { this.loading[tab] = false })
    },
    handleSearch (tab) { (this.pagers[tab] || {}).pageNo = 1; this.fetchList(tab) },
    handleReset (tab) { this.filters[tab] = {}; (this.pagers[tab] || {}).pageNo = 1; this.fetchList(tab) },
    pageChange (tab, pageNo) { (this.pagers[tab] || {}).pageNo = pageNo; this.fetchList(tab) },
    sizeChange (tab, size) { (this.pagers[tab] || {}).pageSize = size; (this.pagers[tab] || {}).pageNo = 1; this.fetchList(tab) },

    openInboundModal () {
      this.inboundModal.isEdit = false
      this.inboundModal.form = { inbound_no: '', batch_no: '', inbound_date: '', inbound_type: 1, storage_location: '', remark: '' }
      this.inboundModal.details = []
      this.inboundModal.visible = true
    },
    onInboundDetailSelectionChange (list) {
      this.inboundSelectedDetails = list || []
    },
    handleInboundMaterialSelectorOk (selectedRows) {
      if (!Array.isArray(selectedRows) || selectedRows.length === 0) {
        this.$Message.warning('未选择物料')
        return
      }
      selectedRows.forEach(sel => {
        const code = sel.material_code
        const exist = this.inboundModal.details.find(d => d.material_code === code)
        if (exist) {
          exist.inbound_quantity = Number(exist.inbound_quantity || 0) + 1
        } else {
          this.inboundModal.details.push({
            material_code: sel.material_code,
            material_name: sel.material_name,
            inbound_quantity: 0,
            unit_price: 0,
            total_amount: 0
          })
        }
      })
      this.showMaterialSelector = false
    },
    deleteSelectedInboundDetails () {
      if (!this.inboundSelectedDetails || this.inboundSelectedDetails.length === 0) {
        this.$Message.warning('请先选择要删除的明细行')
        return
      }
      const toRemoveCodes = this.inboundSelectedDetails.map(r => r.material_code)
      this.inboundModal.details = this.inboundModal.details.filter(d => !toRemoveCodes.includes(d.material_code))
      this.inboundSelectedDetails = []
    },
    openEdit (row) {
      this.inboundModal.isEdit = true
      getInboundById({ id: row.id }).then(ret => {
        if (ret.data && ret.data.errcode === 0) {
          this.inboundModal.form = ret.data.data || {}
          this.inboundModal.details = ret.data.data.details || []
        }
      })
      this.inboundModal.visible = true
    },
    saveInbound () {
      this.inboundModal.saving = true
      saveInbound(Object.assign({}, this.inboundModal.form, { details: this.inboundModal.details })).then(ret => {
        if (ret.data && ret.data.errcode === 0) { this.$Message.success('保存成功'); this.inboundModal.visible = false; this.fetchList('inbound') } else this.$Notice.error({ title: '保存失败', desc: ret.data && ret.data.errmsg })
      }).finally(() => { this.inboundModal.saving = false })
    },
    canEdit (row) { return row.inbound_status === 0 },
    deleteInbound (row) { deleteInbound({ id: row.id }).then(ret => { if (ret.data && ret.data.errcode === 0) { this.$Message.success('删除成功'); this.fetchList('inbound') } else this.$Notice.error({ title: '删除失败', desc: ret.data && ret.data.errmsg }) }) },
    doInbound (row) { doInbound({ id: row.id }).then(ret => { if (ret.data && ret.data.errcode === 0) { this.$Message.success('入库成功'); this.fetchList('inbound'); this.fetchList('inventory') } else this.$Notice.error({ title: '入库失败', desc: ret.data && ret.data.errmsg }) }) },

    openReturnModal (row) {
      this.returnModal.record = Object.assign({}, row)
      this.returnModal.details = []
      getInboundById({ id: row.id }).then(ret => {
        if (ret.data && ret.data.errcode === 0) this.returnModal.details = ret.data.data.details || []
      })
      this.returnModal.visible = true
    },
    confirmReturn () {
      this.returnModal.saving = true
      processReturn({ id: this.returnModal.record.id }).then(ret => {
        if (ret.data && ret.data.errcode === 0) { this.$Message.success('归还已入库并更新库存'); this.returnModal.visible = false; this.fetchList('return'); this.fetchList('inventory') } else this.$Notice.error({ title: '归还失败', desc: ret.data && ret.data.errmsg })
      }).finally(() => { this.returnModal.saving = false })
    },

    openDetail (row) {
      this.detailModal.visible = true
      this.detailModal.loading = true
      getInboundById({ id: row.id }).then(ret => {
        if (ret.data && ret.data.errcode === 0) {
          this.detailModal.data = ret.data.data || {}
          this.detailModal.details = ret.data.data.details || []
          this.detailModal.logs = ret.data.data.logs || []
        } else this.$Notice.error({ title: '查询失败', desc: ret.data && ret.data.errmsg })
      }).finally(() => { this.detailModal.loading = false })
    }
  }
}
</script>

<style scoped>
.key-dm-inbound-wrapper { padding: 10px; }
.search-div { border: 1px solid #dce1e7; padding: 12px; margin-bottom: 12px; background-color: #f8fbff; }
.mr10 { margin-right: 10px; }
.text-right { text-align: right; }
.page_style { margin-top: 12px; text-align: right; }
.mt8 { margin-top: 8px; }
</style>
