<script>
import { getAction } from '@api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { mixinDevice } from '@/utils/mixin'
import MaterialRecordModal from '@/views/workOrder/modules/work/MaterialRecordModal.vue' // 引入 MaterialRecordModal 组件

export default {
  name: 'ReplacementRecordModal',
  components: {
    MaterialRecordModal // 注册组件
  },
  data() {
    return {
      title: "材料/备件更换记录",
      width: 800,
      visible: false,
      disableSubmit: false,
      workOrderId: '',
      loading: false,
      dataSource: [],
      columns: [
        {
          title: '序号',
          align: "center",
          dataIndex: 'seq'
        },
        {
          title: '物资编码',
          align: "center",
          dataIndex: 'materialCode'
        },
        {
          title: '物资描述',
          align: "center",
          dataIndex: 'materialDescription'
        },
        {
          title: '单位',
          align: "center",
          dataIndex: 'unit'
        },
        {
          title: '数量',
          align: "center",
          dataIndex: 'quantity'
        }
      ],
      urls: {
        list: "/workOrder/replacementRecords/list",
        add: "/workOrder/replacementRecords/add",
      },
      materialRecordModalVisible: false // 新增一个状态来控制 MaterialRecordModal 的显示
    }
  },
  methods: {
    add(id) {
      this.workOrderId = id;
      getAction(this.urls.list, { workOrder: this.workOrderId }).then(res => {
        if (res.success) {
          this.dataSource = res.result.records;
        } else {
          this.$message.error(res.message);
        }
      })
      this.visible = true;
    },
    handleAdd() {
      this.materialRecordModalVisible = true; // 显示 MaterialRecordModal
      this.$refs.materialRecordModal.add(this.workOrderId); // 传递 workOrderId
    },
    handleCancel() {
      this.visible = false;
    },
    refreshTable() {
      this.add(this.workOrderId); // 调用 add 方法刷新表格数据
    }
  }
}
</script>

<template>
  <div>
    <j-modal
      :title="title"
      :width="width"
      :visible="visible"
      switchFullscreen
      @ok="handleOk"
      :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }"
      @cancel="handleCancel"
      cancelText="关闭">
      <div class="table-operator">
        <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
      </div>
      <a-table ref="table"
               size="middle"
               :scroll="{ x: true }"
               bordered
               rowKey="id"
               :columns="columns"
               :dataSource="dataSource"
               :loading="loading"></a-table>
    </j-modal>

    <!-- 添加 MaterialRecordModal 组件 -->
    <MaterialRecordModal
      ref="materialRecordModal"
      :visible="materialRecordModalVisible"
      @cancel="materialRecordModalVisible = false"
      @refreshTable="refreshTable" /> <!-- 监听自定义事件 -->
  </div>
</template>

<style scoped>
</style>
