<template>
  <div class="info-box">
    <div>
      <a-button @click="emit('returnPage')">返回</a-button>
      <span class="text-base font-bold pl-5">物料详情查看</span>
    </div>
    <a-divider />
    <a-card :bordered="false">
      <div class="title-name">{{ baseInfo?.name }}</div>
      <div class="title-info">
        <span>创建人：{{ baseInfo?.createUserName }}</span>
        <span>创建时间：{{ baseInfo?.createDate }}</span>
        <span>最后修改人：{{ baseInfo?.modifyUserName }}</span>
        <span>最后修改时间：{{ baseInfo?.modifyDate }}</span>
      </div>
    </a-card>
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane key="1" tab="物料信息">
        <div class="sub-title">基础信息</div>
        <div class="title-info">
          <span>物料编码：{{ baseInfo?.code }}</span>
          <span>物料名称：{{ baseInfo?.name }}</span>
          <span>规格型号：{{ baseInfo?.model }}</span>
          <span>单位：{{ baseInfo?.unitName }}</span>
          <span>物料类别：{{ baseInfo?.typeName }}</span>
          <span>物料属性：{{ baseInfo?.propertyName }}</span>
          <span>状态：{{ baseInfo?.state === 1 ? '启用' : '禁用' }}</span>
        </div>
        <div class="my-6 img-box">
          <span>图片资料：</span>
          <a-image-preview-group v-if="imgList.length">
            <a-image v-for="(item, index) in imgList" :key="index" :src="item.url" />
          </a-image-preview-group>
          <span style="color: #999" v-else>暂无数据</span>
        </div>
        <div class="sub-title">库存信息</div>
        <a-table :dataSource="materialDataSource" :columns="materialColumns" :pagination="false" />
      </a-tab-pane>
      <a-tab-pane key="2" tab="采购记录">
        <BasicTable @register="registerPurchaseTable" />
      </a-tab-pane>
      <a-tab-pane key="3" tab="入库记录">
        <BasicTable @register="registerInStoreTable" />
      </a-tab-pane>
      <a-tab-pane key="4" tab="出库记录">
        <BasicTable @register="registerOutStoreTable" />
      </a-tab-pane>
      <a-tab-pane key="5" tab="操作记录">
        <BasicTable @register="registerLogTable" />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import { BasicTable, useTable, BasicColumn, FormSchema } from '/@/components/Table';
  import {
    getMaterialListInfo,
    getPurchaseInfo,
    getInStoreInfo,
    getOutStoreInfo,
    getLogInfo,
  } from '/@/api/erp/material/list';
  import { getFileList } from '/@/api/system/file';
  import { getFileUrl } from '/@/utils/event/design';

  const materialColumns = [
    {
      title: '本地仓库',
      dataIndex: 'localHouse',
      key: 'localHouse',
      align: 'center',
    },
    {
      title: 'A02仓库',
      dataIndex: 'aHouse',
      key: 'aHouse',
      align: 'center',
    },
    {
      title: '原料仓库',
      dataIndex: 'rawMaterialHouse',
      key: 'rawMaterialHouse',
      align: 'center',
    },
    {
      title: '研发仓库',
      dataIndex: 'researchHouse',
      key: 'researchHouse',
      align: 'center',
    },
    {
      title: '总库存',
      dataIndex: 'totalHouse',
      key: 'totalHouse',
      align: 'center',
    },
  ];
  const purchaseColumns: BasicColumn[] = [
    {
      dataIndex: 'number',
      title: '采购单号',
      align: 'center',
    },

    {
      dataIndex: 'theme',
      title: '采购主题',
      align: 'center',
    },
    {
      dataIndex: 'purchaseDate',
      title: '采购日期',
      align: 'center',
    },
    {
      dataIndex: 'purchasePersonName',
      title: '采购人员',
      align: 'center',
    },
    {
      dataIndex: 'purchaseDeptName',
      title: '采购部门',
      align: 'center',
    },
    {
      dataIndex: 'supplierName',
      title: '供应商',
      align: 'center',
    },
    {
      dataIndex: 'count',
      title: '采购数量',
      align: 'center',
    },
    {
      dataIndex: 'amountSum',
      title: '采购金额',
      align: 'center',
    },
  ];
  const inStoreColumns: BasicColumn[] = [
    {
      dataIndex: 'number',
      title: '入库单号',
      align: 'center',
    },
    {
      dataIndex: 'theme',
      title: '入库主题',
      align: 'center',
    },
    {
      dataIndex: 'date',
      title: '入库日期',
      align: 'center',
    },
    {
      dataIndex: 'insertType',
      title: '入库类型',
      align: 'center',
    },
    {
      dataIndex: 'count',
      title: '数量',
      align: 'center',
    },
    {
      dataIndex: 'person',
      title: '入库人员',
      align: 'center',
    },
    {
      dataIndex: 'store',
      title: '入库仓库',
      align: 'center',
    },
  ];
  const outStoreColumns: BasicColumn[] = [
    {
      dataIndex: 'number',
      title: '出库单号',
      align: 'center',
    },
    {
      dataIndex: 'theme',
      title: '出库主题',
      align: 'center',
    },
    {
      dataIndex: 'date',
      title: '出库日期',
      align: 'center',
    },
    {
      dataIndex: 'outType',
      title: '出库类型',
      align: 'center',
    },
    {
      dataIndex: 'count',
      title: '数量',
      align: 'center',
    },
    {
      dataIndex: 'person',
      title: '出库人员',
      align: 'center',
    },
    {
      dataIndex: 'store',
      title: '出库仓库',
      align: 'center',
    },
  ];
  const logColumns: BasicColumn[] = [
    {
      dataIndex: 'operateUserAccount',
      title: '操作人',
      align: 'center',
    },
    {
      dataIndex: 'createDate',
      title: '操作时间',
      align: 'center',
    },
    {
      dataIndex: 'executeResultJson',
      title: '操作内容',
      align: 'center',
    },
  ];

  const searchFormSchema: FormSchema[] = [
    {
      field: 'keyword',
      label: '',
      component: 'Input',
      colProps: { span: 4 },
      componentProps: {
        placeholder: '请输入要查询的关键字',
      },
    },
  ];

  const props = defineProps({
    id: String,
  });
  const emit = defineEmits(['returnPage']);
  const materialDataSource = ref<any>([]);

  const activeKey = ref('1');
  const baseInfo = ref();
  const imgList = ref<any>([]);
  onMounted(async () => {
    baseInfo.value = await getMaterialListInfo(props.id!);
    materialDataSource.value = [
      {
        localHouse: baseInfo.value.localHouse,
        aHouse: baseInfo.value.aHouse,
        rawMaterialHouse: baseInfo.value.rawMaterialHouse,
        researchHouse: baseInfo.value.researchHouse,
        totalHouse: baseInfo.value.totalHouse,
      },
    ];
    if (baseInfo.value.fileId) {
      imgList.value = await getFileList({ folderId: baseInfo.value.fileId });
      imgList.value?.forEach((x) => {
        x.url = getFileUrl(x);
      });
    }
  });

  const [registerPurchaseTable] = useTable({
    api: getPurchaseInfo,
    beforeFetch: (paramas) => {
      return { id: props.id, ...paramas };
    },
    rowKey: 'id',
    columns: purchaseColumns,
    formConfig: {
      schemas: searchFormSchema,
    },
    useSearchForm: true,
    bordered: true,
    pagination: false,
  });
  const [registerInStoreTable] = useTable({
    api: getInStoreInfo,
    beforeFetch: (paramas) => {
      return { id: props.id, ...paramas };
    },
    rowKey: 'id',
    columns: inStoreColumns,
    formConfig: {
      schemas: searchFormSchema,
    },
    useSearchForm: true,
    bordered: true,
    pagination: false,
  });
  const [registerOutStoreTable] = useTable({
    api: getOutStoreInfo,
    beforeFetch: (paramas) => {
      return { id: props.id, ...paramas };
    },
    rowKey: 'id',
    columns: outStoreColumns,
    formConfig: {
      schemas: searchFormSchema,
    },
    useSearchForm: true,
    bordered: true,
    pagination: false,
  });
  const [registerLogTable] = useTable({
    api: getLogInfo,
    beforeFetch: (paramas) => {
      return { id: props.id, ...paramas };
    },
    rowKey: 'id',
    columns: logColumns,
    formConfig: {
      schemas: searchFormSchema,
    },
    useSearchForm: true,
    bordered: true,
    pagination: false,
  });
</script>
<style lang="less" scoped>
  .info-box {
    background-color: #fff;
    width: 100%;
    height: 100%;
    padding: 16px;
    margin-right: 8px;

    .title-name {
      font-size: 18px;
      color: #444;
      font-weight: 700;
      margin-bottom: 25px;
    }

    .title-info span {
      margin-right: 40px;
    }

    .sub-title {
      color: #333;
      font-weight: 700;
      margin-bottom: 24px;
    }

    .img-box {
      display: flex;
      align-items: center;
    }
  }

  :deep(.ant-image) {
    width: 100px;
    height: 75px;
    padding: 5px;
    border: 1px solid silver;
    border-radius: 4px;
    margin-right: 10px;
  }

  :deep(.ant-image-img) {
    height: 100%;
  }

  :deep(.ant-divider) {
    height: 1px;
    background-color: #dcdfe6;
  }

  :deep(.ant-card-body) {
    background-color: #f8f8f8;
  }

  :deep(.ant-tabs) {
    height: 70%;
  }

  :deep(.ant-tabs-content) {
    height: 100%;
  }
</style>
