<template>
  <div>
    <el-table size="small" v-if="materialsInventoryList.length !== 0" :data="materialsInventoryList">
      <el-table-column label="序号" type="index" width="60" align="center" />
      <el-table-column label="出入库" align="center" prop="outPut">
        <template #default="scope">
          <dict-tag :options="out_put_type" :value="scope.row.outPut" />
        </template>
      </el-table-column>
      <el-table-column label="材料数量" align="center" prop="number" />
      <el-table-column label="剩余库存数量" align="center" prop="residue" />
      <el-table-column label="出入库负责人" align="center" prop="operator" />
      <el-table-column label="交接单位" align="center" prop="recipient" />
      <el-table-column label="领用人" align="center" prop="shipper" />
      <el-table-column label="操作时间" align="center" prop="outPutTime" width="160" />
      <el-table-column label="备注" align="center" prop="remark" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-tooltip content="删除" placement="top">
            <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['materials:materialsInventory:remove']">
              删除
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      size="small"
      v-model:page="materialsSearchParams.pageNum"
      v-model:limit="materialsSearchParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script setup lang="ts">
import { MaterialsInventoryQuery, MaterialsInventoryVO } from '@/api/materials/materialsInventory/types';
import { delMaterialsInventory, listMaterialsInventory } from '@/api/materials/materialsInventory';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { out_put_type } = toRefs<any>(proxy?.useDict('out_put_type'));

interface Props {
  materialsId: string | number;
  projectId: string | number;
}

const props = defineProps<Props>();
const ids = ref<Array<string | number>>([]);
const loading = ref(true);
// 搜索条件
const materialsSearchParams = reactive<MaterialsInventoryQuery>({
  materialsId: props.materialsId,
  projectId: props.projectId,
  pageNum: 1,
  pageSize: 10
});
const total = ref<number>(0);

const materialsInventoryList = ref<MaterialsInventoryVO[]>([]);
/** 展开选中数据 */
const getList = async () => {
  loading.value = true;
  const res = await listMaterialsInventory({ ...materialsSearchParams });
  materialsInventoryList.value = res.rows;
  total.value = res.total;
  loading.value = false;
};

/** 删除按钮操作 */
const handleDelete = async (row?: MaterialsInventoryVO) => {
  const _ids = row?.id || ids.value;
  await proxy?.$modal.confirm('是否确认删除材料出/入库编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
  await delMaterialsInventory(_ids);
  proxy?.$modal.msgSuccess('删除成功');
  await getList();
};

onMounted(() => {
  getList();
});
</script>
