<template>
  <a-modal
    :visible="visible"
    title="工单资源管理"
    width="1200px"
    @cancel="handleCancel"
    :footer="null"
  >
    <a-tabs default-active-key="1">

      <!-- 工具借用 -->
      <a-tab-pane key="1" tab="工具借用">
        <a-table
          rowKey="id"
          :columns="toolColumns"
          :dataSource="toolData"
          :loading="loadingTool"
          bordered
          size="middle"
          :pagination="false"
        >
          <template slot="userSlot" slot-scope="text">
            <j-dict-tag dict-code="sys_user,realname,id" :text="text"/>
          </template>
        </a-table>

      </a-tab-pane>


      <!-- 物料消耗 -->
      <a-tab-pane key="2" tab="物料消耗">
        <a-table
          rowKey="id"
          :columns="materialColumns"
          :dataSource="materialData"
          :loading="loadingMaterial"
          bordered
          size="middle"
          :pagination="false"
        />

      </a-tab-pane>

    </a-tabs>

    <!-- 工具借用表单 -->
    <tool-borrowing-record-modal
      ref="toolForm"
      @ok="loadToolData"
    />

    <!-- 物料消耗表单 -->
    <bu-material-stock-modal
      ref="materialForm"
      @ok="loadMaterialData"
    />

  </a-modal>
</template>

<script>
import { getAction } from '@/api/manage'
import ToolBorrowingRecordModal from '@/views/toolBorrowingRecord/modules/ToolBorrowingRecordModal.vue'
import BuMaterialStockModal from '@/views/material/modules/BuMaterialStockModal.vue'

export default {
  name: 'WorkOrderResourceModal',
  components: {
    ToolBorrowingRecordModal,
    BuMaterialStockModal
  },
  props: {
    visible: Boolean,
    workOrderId: String
  },
  data() {
    return {
      loadingTool: false,
      loadingMaterial: false,
      toolData: [],
      materialData: [],

      toolColumns: [
        { title: '工具', align: 'center', dataIndex: 'toolId_dictText' },
        { title: '数量', align: 'center', dataIndex: 'count' },
        { title: '借用人', align: 'center', dataIndex: 'borrower',scopedSlots: { customRender: 'userSlot' }, },
        { title: '借用时间', align: 'center', dataIndex: 'borrowTime' },
        { title: '状态', align: 'center', dataIndex: 'status_dictText' },
      ],

      materialColumns: [
        { title: '物料', align: 'center', dataIndex: 'materialId_dictText' },
        { title: '数量', align: 'center', dataIndex: 'quantity' },
        { title: '类型', align: 'center', dataIndex: 'type_dictText' },
        { title: '操作人', align: 'center', dataIndex: 'operator_dictText' },
        { title: '时间', align: 'center', dataIndex: 'alterTime' },
        { title: '备注', align: 'center', dataIndex: 'remark' }
      ],

      url: {
        toolList: '/toolBorrowingRecord/list',
        materialList: '/material/buMaterialStock/list'
      }
    }
  },

  watch: {
    visible(val) {
      if (val) {
        this.loadToolData()
        this.loadMaterialData()
      }
    }
  },

  methods: {

    /* ========== 工具部分 ========== */

    loadToolData() {
      if (!this.workOrderId) return
      this.loadingTool = true
      getAction(this.url.toolList, {
        workOrder: this.workOrderId
      }).then(res => {
        if (res.success) {
          this.toolData = res.result.records
        }
        this.loadingTool = false
      })
    },

    /* ========== 物料部分 ========== */

    loadMaterialData() {
      if (!this.workOrderId) return
      this.loadingMaterial = true
      getAction(this.url.materialList, {
        workOrder: this.workOrderId
      }).then(res => {
        if (res.success) {
          this.materialData = res.result.records
        }
        this.loadingMaterial = false
      })
    },

    handleCancel() {
      this.$emit('update:visible', false)
    }
  }
}
</script>
