<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    title="历史明细"
    :width="1000"
    wrapClassName="custom-modal-box"
  >
    <div class="custom-modal-padding-box">
      <a-tabs v-model:activeKey="activeKey" :style="{ height: '100%' }">
        <a-tab-pane key="1" tab="全部">
          <NodeHead nodeName="库存数据列表" class="title" />
          <BasicTable @register="registerAllTable">
            <template #bodyCell="{ column, record }">
              <template v-if="column.dataIndex == 'type'">
                <span :style="getStyleType(record.type)">{{ getType(record.type) }}</span>
              </template>
              <template v-if="column.dataIndex == 'operateType'">
                <span :style="getOperateStyleType(record.operateType)">
                  {{ getOperateType(record.operateType) }}
                </span>
              </template>
            </template>
          </BasicTable>
        </a-tab-pane>
        <a-tab-pane key="2" tab="入库详情">
          <NodeHead nodeName="入库数据列表" class="title" />
          <BasicTable @register="registerInStoreTable">
            <template #bodyCell="{ column, record }">
              <template v-if="column.dataIndex == 'type'">
                <span :style="getStyleType(record.type)">{{ getType(record.type) }}</span>
              </template>
              <template v-if="column.dataIndex == 'operateType'">
                <span :style="getOperateStyleType(record.operateType)">
                  {{ getOperateType(record.operateType) }}
                </span>
              </template>
            </template>
          </BasicTable>
        </a-tab-pane>
        <a-tab-pane key="3" tab="出库详情">
          <NodeHead nodeName="出库数据列表" class="title" />
          <BasicTable @register="registerOutStoreTable">
            <template #bodyCell="{ column, record }">
              <template v-if="column.dataIndex == 'type'">
                <span :style="getStyleType(record.type)">{{ getType(record.type) }}</span>
              </template>
              <template v-if="column.dataIndex == 'operateType'">
                <span :style="getOperateStyleType(record.operateType)">
                  {{ getOperateType(record.operateType) }}
                </span>
              </template>
            </template>
          </BasicTable>
        </a-tab-pane>
      </a-tabs>
    </div>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { getMaterialHistoryPageList } from '/@/api/erp/material/list';
  import { NodeHead } from '/@/components/ModalPanel/index';
  const allColumns: BasicColumn[] = [
    {
      title: '库存类别',
      dataIndex: 'type',
    },
    {
      title: '产品名称',
      dataIndex: 'name',
      width: 200,
    },
    {
      title: '操作类型',
      dataIndex: 'operateType',
    },
    {
      title: '操作时间',
      dataIndex: 'createDate',
    },
    {
      title: '数量',
      dataIndex: 'count',
      width: 100,
    },
    {
      title: '库存结余',
      dataIndex: 'localInventory',
      width: 100,
    },
  ];
  const columns: BasicColumn[] = [
    {
      title: '库存类别',
      dataIndex: 'type',
    },
    {
      title: '产品名称',
      dataIndex: 'name',
      width: 200,
    },
    {
      title: '操作类型',
      dataIndex: 'operateType',
    },
    {
      title: '操作时间',
      dataIndex: 'createDate',
    },
    {
      title: '数量',
      dataIndex: 'count',
      width: 100,
    },
  ];
  const activeKey = ref('1');
  const rowId = ref('');
  const [registerModal, { setModalProps }] = useModalInner(async (data) => {
    setModalProps({ destroyOnClose: true, fixedHeight: true });
    rowId.value = data.id;
    activeKey.value = '1';
  });

  const [registerAllTable] = useTable({
    title: '库存数据列表',
    useSearchForm: false,
    showTableSetting: false,
    api: getMaterialHistoryPageList,
    beforeFetch: (paramas) => {
      return { id: rowId.value, ...paramas };
    },
    rowKey: 'id',
    columns: allColumns,
  });
  const [registerInStoreTable] = useTable({
    api: getMaterialHistoryPageList,
    useSearchForm: false,
    showTableSetting: false,
    beforeFetch: (paramas) => {
      return { id: rowId.value, type: 1, ...paramas };
    },
    rowKey: 'id',
    columns,
  });
  const [registerOutStoreTable] = useTable({
    api: getMaterialHistoryPageList,
    useSearchForm: false,
    showTableSetting: false,
    beforeFetch: (paramas) => {
      return { id: rowId.value, type: 0, ...paramas };
    },
    rowKey: 'id',
    columns,
  });

  const getType = (record) => {
    return record === 1 ? '入库' : '出库';
  };
  const getStyleType = (record) => {
    if (record === 1) {
      return `
      color: #5e95ff;
      background: rgba(28,141,255,0.08);
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #1C8DFF;
      padding:2px 12px;`;
    } else {
      return `
      color: #f59a23;
      background: rgba(255,119,0,0.08);
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #FF7700;
      padding:2px 12px;`;
    }
  };

  const getOperateType = (record) => {
    switch (record) {
      case -1:
        return '盘点减少';
      case 0:
        return '报废';
      case 1:
        return '盘点增加';
      case 2:
        return '订单销售';
      case 3:
        return '库存采购';
      default:
        break;
    }
  };
  const getOperateStyleType = (record) => {
    if (record == -1 || record == 1 || record == 3) {
      return `
      color: #5e95ff;
      background: rgba(28,141,255,0.08);
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #1C8DFF;
      padding:2px 12px;`;
    } else if (record == 0) {
      return `
      background: rgba(255,84,97,0.08);
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #FF5461;
      color: #FF5461;
      padding:2px 12px;
      `;
    } else {
      return `
      color: #5e95ff;
      background: rgba(28,141,255,0.08);
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #1C8DFF;
      padding:2px 12px;`;
    }
  };
</script>
<style lang="less" scoped>
  :deep(.ant-tabs-content) {
    height: calc(100% - 40px) !important;
  }

  .custom-modal-padding-box {
    height: 100%;
    padding: 0 16px;
  }

  .title {
    margin-bottom: 18px;
  }
</style>
