<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    title="查看订单详情"
    @cancel="handleCancel"
    wrapClassName="custom-modal-box"
  >
    <div class="info-box">
      <a-card :bordered="false">
        <div class="title-name">{{ baseInfo?.theme }}</div>
        <div class="title-info">
          <span>创建人：{{ baseInfo?.createUserName }}</span>
          <span>创建时间：{{ baseInfo?.createDate }}</span>
          <span>最后修改人：{{ baseInfo?.modifyUserName }}</span>
          <span>修改时间：{{ baseInfo?.modifyDate }}</span>
        </div>
        <div>
          <a-button size="small" class="title-btn" @click="handlePrint">打印</a-button>
        </div>
      </a-card>
      <a-card :bordered="false">
        <a-tabs v-model:activeKey="activeKey">
          <a-tab-pane key="1" tab="订单信息">
            <a-row>基础信息</a-row>
            <a-row>
              <a-col :span="12">采购单号：{{ baseInfo?.purchaseNumber }}</a-col>
              <a-col :span="12">订单主题：{{ baseInfo?.theme }}</a-col>
            </a-row>
            <a-row>
              <a-col :span="12">采购日期：{{ baseInfo?.purchaseDate }}</a-col>
              <a-col :span="12">供应商名称：{{ baseInfo?.supplierName }}</a-col>
            </a-row>
            <a-row>
              <a-col :span="12">联系人：{{ baseInfo?.supplierPerson }}</a-col>
              <a-col :span="12">联系方式：{{ baseInfo?.supplierWay }}</a-col>
            </a-row>
            <a-row>
              <a-col :span="12">采购部门：{{ baseInfo?.purchaseDeptName }}</a-col>
              <a-col :span="12">采购人员：{{ baseInfo?.purchasePersonName }}</a-col>
            </a-row>
            <a-row>
              <a-col :span="12">联系电话：{{ baseInfo?.purchasePhone }}</a-col>
              <a-col :span="12">关联项目：{{ baseInfo?.relatedProjectName }}</a-col>
            </a-row>
            <a-row> 结算方式：{{ baseInfo?.payTypeName }} </a-row>
            <a-row> 交货地址：{{ baseInfo?.payAddress }} </a-row>
            <a-row> 备注：{{ baseInfo?.remark }} </a-row>
            <BasicTable @register="registerPurchaseTable">
              <template #toolbar>
                <a-button type="primary" @click="handleExport('purchase')">导出</a-button>
              </template>
            </BasicTable>
            <div class="table-bottom">
              <span>合计</span>
              <div>
                <span>总量：{{ baseInfo?.countSum }}</span>
                <span> 总金额：{{ baseInfo?.amountSum }}</span>
              </div>
            </div>
            <div>
              附件：
              <Upload
                v-if="baseInfo?.filePath"
                v-model:value="baseInfo.filePath"
                listType="dragger"
                :style="{ width: '200px', display: 'none' }"
                :showRemoveIcon="false"
              />
            </div>
          </a-tab-pane>
          <a-tab-pane key="2">
            <template #tab>
              <span>
                入库记录
                <Icon
                  icon="ant-design:check-circle-filled"
                  :size="20"
                  v-if="baseInfo?.inStoreState === 1"
                />
                <Icon
                  icon="ant-design:exclamation-circle-filled"
                  color="#FF1A2E"
                  :size="20"
                  v-else
                />
              </span>
            </template>

            <BasicTable @register="registerInstoreTable">
              <template #toolbar>
                <a-button type="primary" @click="handleExport('instore')">导出</a-button>
              </template>
            </BasicTable>
          </a-tab-pane>
          <a-tab-pane key="3">
            <template #tab>
              <span>
                到票记录
                <Icon
                  icon="ant-design:check-circle-filled"
                  :size="20"
                  v-if="baseInfo?.ticketState === 1"
                />
                <Icon
                  icon="ant-design:exclamation-circle-filled"
                  color="#FF1A2E"
                  :size="20"
                  v-else
                />
              </span>
            </template>
            <BasicTable @register="registerTicketTable">
              <template #toolbar>
                <a-button type="primary" @click="handleExport('ticket')">导出</a-button>
              </template>
            </BasicTable>
          </a-tab-pane>
          <a-tab-pane key="4">
            <template #tab>
              <span>
                付款记录
                <Icon
                  icon="ant-design:check-circle-filled"
                  :size="20"
                  v-if="baseInfo?.payState === 1"
                />
                <Icon
                  icon="ant-design:exclamation-circle-filled"
                  color="#FF1A2E"
                  :size="20"
                  v-else
                />
              </span>
            </template>
            <BasicTable @register="registerPayTable">
              <template #toolbar>
                <a-button type="primary" @click="handleExport('pay')">导出</a-button>
              </template>
            </BasicTable>
          </a-tab-pane>
          <a-tab-pane key="5" tab="审批记录">
            <FlowRecord
              v-if="isReady"
              :list="workflowList"
              :processInstanceId="baseInfo.processInstanceId"
            />
          </a-tab-pane>
          <a-tab-pane key="6" tab="操作记录">
            <BasicTable @register="registerLogTable">
              <template #toolbar>
                <a-button type="primary" @click="handleExport('log')">导出</a-button>
              </template>
            </BasicTable>
          </a-tab-pane>
        </a-tabs>
      </a-card>
    </div>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicTable, useTable, BasicColumn, FormSchema } from '/@/components/Table';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import {
    exportPurchaseInfo,
    exportInstoreInfo,
    exportTicketInfo,
    exportPayInfo,
    exportLogInfo,
  } from '/@/api/erp/purchase/order';
  import { getPurchaseCheckInfo } from '/@/api/erp/purchase/order';
  import { getRecordList } from '/@/api/erp/purchase/order';
  import { getFileList } from '/@/api/system/file';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { downloadByData } from '/@/utils/file/download';
  import FlowRecord from '/@/views/workflow/task/components/flow/FlowRecord.vue';
  import Icon from '/@/components/Icon/index';
  import Upload from '/@/components/Form/src/components/Upload.vue';
  import printJS from 'print-js';
  import domtoimage from 'dom-to-image';
  import { isNil } from 'lodash-es';
  import { getFileUrl } from '/@/utils/event/design';

  const purchaseColumns: BasicColumn[] = [
    {
      title: '物料编码',
      dataIndex: 'code',
    },
    {
      title: '物料名称',
      dataIndex: 'name',
    },
    {
      title: '规格型号',
      dataIndex: 'model',
    },
    {
      title: '单位',
      dataIndex: 'unitName',
    },
    {
      title: '单价',
      dataIndex: 'price',
    },
    {
      title: '采购数量',
      dataIndex: 'count',
    },
    {
      title: '折扣',
      dataIndex: 'discount',
    },
    {
      title: '税率',
      dataIndex: 'taxRate',
    },
    {
      title: '税费',
      dataIndex: 'taxBreak',
    },
    {
      title: '税后金额',
      dataIndex: 'afterTaxAmount',
    },
    {
      title: '已入库数量',
      dataIndex: 'inStoreCount',
    },
    {
      title: '未入库数量',
      dataIndex: 'noInStoreCount',
    },
    {
      title: '退货数量',
      dataIndex: 'returnCount',
    },
    {
      title: '交付日期',
      dataIndex: 'deliveryDate',
    },
  ];
  const instoreColumns: BasicColumn[] = [
    {
      dataIndex: 'code',
      title: '入库单号',
      align: 'center',
      width: 100,
    },

    {
      dataIndex: 'theme',
      title: '入库订单主题',
      align: 'center',
      width: 100,
    },
    {
      dataIndex: 'date',
      title: '入库日期',
      align: 'center',
      width: 100,
    },
    {
      dataIndex: 'name',
      title: '供应商名称',
      align: 'center',
      width: 100,
    },
    {
      dataIndex: 'person',
      title: '入库人员',
      align: 'center',
      width: 100,
    },
    {
      dataIndex: 'store',
      title: '入库仓库',
      align: 'center',
      width: 100,
    },
  ];
  const ticketColumns: BasicColumn[] = [
    {
      dataIndex: 'code',
      title: '到票编号',
      align: 'center',
      width: 100,
    },
    {
      dataIndex: 'theme',
      title: '到票主题',
      align: 'center',
      width: 100,
    },
    {
      dataIndex: 'date',
      title: '到票日期',
      align: 'center',
      width: 100,
    },
    {
      dataIndex: 'name',
      title: '开票方',
      align: 'center',
      width: 100,
    },
    {
      dataIndex: 'ticketNum',
      title: '发票号码',
      align: 'center',
      width: 100,
    },
    {
      dataIndex: 'ticketAmout',
      title: '到票金额',
      align: 'center',
      width: 100,
    },
  ];
  const payColumns: BasicColumn[] = [
    {
      dataIndex: 'code',
      title: '付款编号',
      align: 'center',
      width: 100,
    },
    {
      dataIndex: 'theme',
      title: '付款主题',
      align: 'center',
      width: 100,
    },
    {
      dataIndex: 'date',
      title: '付款日期',
      align: 'center',
      width: 100,
    },
    {
      dataIndex: 'amount',
      title: '付款总额',
      align: 'center',
      width: 100,
    },
    {
      dataIndex: 'payer',
      title: '收款方',
      align: 'center',
      width: 100,
    },
    {
      dataIndex: 'account',
      title: '银行账号',
      align: 'center',
      width: 100,
    },
  ];
  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: 8 },
      componentProps: {
        placeholder: '请输入要查询的关键字',
      },
    },
  ];

  const purchaseInfoDataSource = ref<any>([]);
  const instoreDataSource = ref<any>([]);
  const ticketDataSource = ref<any>([]);
  const payDataSource = ref<any>([]);
  const logInfoDataSource = ref<any>([]);

  const isReady = ref(false);
  const rowId = ref('');
  const activeKey = ref('1');
  const baseInfo = ref();
  const workflowList = ref();
  const imgList = ref<any>([]);
  const { notification } = useMessage();

  const [registerModal, { setModalProps }] = useModalInner(async (data) => {
    setModalProps({
      confirmLoading: false,
      destroyOnClose: true,
      showCancelBtn: false,
      showOkBtn: false,
      width: 1000,
      fixedHeight: true,
      footer: null,
    });
    rowId.value = data.id;
    getInfo();
  });

  const [registerPurchaseTable, { getSelectRowKeys: getPurchaseRowKeys }] = useTable({
    title: '采购物料',
    dataSource: purchaseInfoDataSource,
    rowKey: 'id',
    columns: purchaseColumns,
    bordered: true,
    pagination: false,
    rowSelection: {
      type: 'checkbox',
    },
  });
  const [registerInstoreTable, { getSelectRowKeys: getInstoreRowKeys, setProps: setInstoreProps }] =
    useTable({
      dataSource: instoreDataSource,
      rowKey: 'id',
      columns: instoreColumns,
      handleSearchInfoFn(info) {
        const filterData = instoreDataSource.value.filter((item) => {
          for (const key in item) {
            if (!isNil(item[key]) && item[key].toString().indexOf(info.keyword) > -1) {
              return item;
            }
          }
        });
        setInstoreProps({ dataSource: filterData });
        return info;
      },
      formConfig: {
        schemas: searchFormSchema,
      },
      bordered: true,
      pagination: false,
      useSearchForm: true,
      rowSelection: {
        type: 'checkbox',
      },
    });
  const [registerTicketTable, { getSelectRowKeys: getTicketRowKeys, setProps: setTicketProps }] =
    useTable({
      dataSource: ticketDataSource,
      rowKey: 'id',
      columns: ticketColumns,
      handleSearchInfoFn(info) {
        const filterData = ticketDataSource.value.filter((item) => {
          for (const key in item) {
            if (!isNil(item[key]) && item[key].toString().indexOf(info.keyword) > -1) {
              return item;
            }
          }
        });
        setTicketProps({ dataSource: filterData });
        return info;
      },
      formConfig: {
        schemas: searchFormSchema,
      },
      bordered: true,
      pagination: false,
      useSearchForm: true,
      rowSelection: {
        type: 'checkbox',
      },
    });
  const [registerPayTable, { getSelectRowKeys: getPayRowKeys, setProps: setPayProps }] = useTable({
    dataSource: payDataSource,
    rowKey: 'id',
    columns: payColumns,
    handleSearchInfoFn(info) {
      const filterData = payDataSource.value.filter((item) => {
        for (const key in item) {
          if (!isNil(item[key]) && item[key].toString().indexOf(info.keyword) > -1) {
            return item;
          }
        }
      });
      setPayProps({ dataSource: filterData });
      return info;
    },
    formConfig: {
      schemas: searchFormSchema,
    },
    bordered: true,
    pagination: false,
    useSearchForm: true,
    rowSelection: {
      type: 'checkbox',
    },
  });
  const [registerLogTable, { getSelectRowKeys: getLogRowKeys, setProps: setLogProps }] = useTable({
    dataSource: logInfoDataSource,
    rowKey: 'id',
    columns: logColumns,
    handleSearchInfoFn(info) {
      const filterData = logInfoDataSource.value.filter((item) => {
        for (const key in item) {
          if (!isNil(item[key]) && item[key].toString().indexOf(info.keyword) > -1) {
            return item;
          }
        }
      });
      setLogProps({ dataSource: filterData });
      return info;
    },
    formConfig: {
      schemas: searchFormSchema,
    },
    useSearchForm: true,
    bordered: true,
    pagination: false,
    rowSelection: {
      type: 'checkbox',
    },
  });

  const getInfo = async () => {
    const res = await getPurchaseCheckInfo(rowId.value);
    baseInfo.value = res;
    purchaseInfoDataSource.value = res?.caseErpPurchaseDetailList;
    instoreDataSource.value = res?.inStoreLogVoList.map((x) => {
      return {
        code: x.code,
        theme: x.theme,
        date: x.date,
        name: x.name,
        person: x.person,
        store: x.store,
      };
    });
    ticketDataSource.value = res?.ticketLogVoList.map((x) => {
      return {
        code: x.code,
        theme: x.theme,
        date: x.date,
        name: x.name,
        ticketNum: x.ticketNum,
        ticketAmout: x.ticketAmout,
      };
    });
    payDataSource.value = res?.payLogVoList.map((x) => {
      return {
        code: x.code,
        theme: x.theme,
        date: x.date,
        amount: x.amount,
        payer: x.payer,
        account: x.account,
      };
    });
    logInfoDataSource.value = res?.logList.map((x) => {
      return {
        operateUserAccount: x.operateUserAccount,
        createDate: x.createDate,
        executeResultJson: x.executeResultJson,
      };
    });
    if (baseInfo.value.processInstanceId) {
      const res = await getRecordList(baseInfo.value.processInstanceId);
      workflowList.value = [
        {
          records: res.taskRecords,
          schemaName: '当前流程',
        },
      ];
    }
    isReady.value = true;

    if (baseInfo.value.filePath) {
      imgList.value = await getFileList({ folderId: baseInfo.value.filePath });
      imgList.value?.forEach((x) => {
        x.url = getFileUrl(x);
      });
    }
  };

  const handleCancel = () => {
    isReady.value = false;
    workflowList.value = [];
    activeKey.value = '1';
  };

  const handleExport = async (type) => {
    const params: any = {
      saleId: rowId.value,
    };
    let title = '';
    let res;
    switch (type) {
      case 'purchase':
        if (!notice(getPurchaseRowKeys().length)) return;
        title = '采购信息';
        params.ids = getPurchaseRowKeys();
        res = await exportPurchaseInfo(params);
        break;
      case 'instore':
        if (!notice(getInstoreRowKeys().length)) return;
        title = '入库记录';
        params.ids = getInstoreRowKeys();
        res = await exportInstoreInfo(params);
        break;
      case 'ticket':
        if (!notice(getTicketRowKeys().length)) return;
        title = '到票记录';
        params.ids = getTicketRowKeys();
        res = await exportTicketInfo(params);
        break;
      case 'pay':
        if (!notice(getPayRowKeys().length)) return;
        title = '付款记录';
        params.ids = getPayRowKeys();
        res = await exportPayInfo(params);
        break;
      case 'log':
        title = '操作记录';
        params.ids = getLogRowKeys();
        res = await exportLogInfo(params);
        break;
    }
    downloadByData(
      res.data,
      `${title}.xlsx`,
      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    );
  };

  const notice = (length) => {
    if (!length) {
      notification.warning({
        message: 'Tip',
        description: '请选择需要导出的数据',
      });
      return false;
    }
    return true;
  };

  const handlePrint = async () => {
    const element: HTMLElement = window.document.querySelector('.info-box')!;
    const url = await domtoimage.toPng(element);
    printJS({
      printable: url,
      type: 'image',
      documentTitle: '打印',
    });
  };
</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;
    }

    .title-info {
      margin: 10px 0;

      span {
        margin-right: 40px;
      }
    }

    .table-bottom {
      display: flex;
      justify-content: space-between;
      margin: 10px 0;

      & > div > span {
        margin-left: 40px;
      }
    }

    .title-btn {
      margin-right: 5px;
    }
  }

  .ant-row {
    margin-bottom: 15px;
  }

  :deep(.vben-basic-table) {
    height: 300px;
  }

  :deep(.ant-table-wrapper),
  :deep(.ant-table-title) {
    background-color: #f8f8f8;
  }

  :deep(.ant-card-body) {
    background-color: #f8f8f8;
    margin-bottom: 12px;
    padding: 15px;
  }

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

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