<template>
  <div style="padding: 20px;">
    <el-row :gutter="20">
      <el-col :span="6">
        <div>
          <el-row>
            <el-input v-model="queryParams.orderCode" placeholder="请输入单据编号" clearable
              @keyup.enter.native="handleQuery" />
          </el-row>
          <el-tree v-loading="orderListLoading" :data="treeData" :props="defaultProps" @node-click="handleNodeClick" />
          <el-pagination :current-page="queryParams.pageNum" :page-size="10" :total="total"
            layout="prev, pager, next" />
        </div>
      </el-col>

      <el-col :span="18">
        <el-tabs v-if="currentOrder" v-model="activeTab">
          <el-tab-pane label="订单信息" name="orderDetail">
            <el-form>
              <el-form-item label="订单ID">
                <el-input v-model="currentOrder.orderId" disabled />
              </el-form-item>
              <el-form-item label="订单编号">
                <el-input v-model="currentOrder.orderCode" disabled />
              </el-form-item>
              <el-form-item label="销售经理">
                <el-input v-model="currentOrder.salesManager" disabled />
              </el-form-item>
              <el-form-item label="客户">
                <el-input v-model="currentOrder.customerName" disabled />
              </el-form-item>
              <el-form-item label="含税金额">
                <el-input v-model="currentOrder.taxAmount" disabled />
              </el-form-item>
              <el-form-item label="无税金额">
                <el-input v-model="currentOrder.noTaxAmount" disabled />
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="订单明细" name="orderList">
            <order-detail-list :orderId="currentOrder.orderId" />
          </el-tab-pane>
          <el-tab-pane label="应收明细" name="receivable">
            <el-table v-loading="rightLoading" :data="currentOrder.receivables">
              <el-table-column label="应收ID" align="center" prop="receivableId" v-if="false" />
              <el-table-column label="客户" align="center" prop="customerName" />
              <el-table-column label="订单ID" align="center" prop="orderId" />
              <el-table-column label="到期日" align="center" prop="dueDate" width="180">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.dueDate, '{y}-{m}-{d}') }}</span>
                </template>
              </el-table-column>
              <el-table-column label="应收金额" align="center" prop="amount" />
              <el-table-column label="已收金额" align="center" prop="paidAmount" />
              <el-table-column label="未收金额" align="center" prop="balanceAmount" />
              <el-table-column label="状态" align="center" prop="status" />
              <el-table-column label="备注" align="center" prop="remark" />
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="应付明细" name="payable">
            <el-table v-loading="rightLoading" :data="currentOrder.payables">
              <el-table-column label="应付ID" align="center" prop="payableId" v-if="false" />
              <el-table-column label="供应商" align="center" prop="supplierName" />
              <el-table-column label="订单ID" align="center" prop="orderId" />
              <el-table-column label="到期日" align="center" prop="dueDate" width="180">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.dueDate, '{y}-{m}-{d}') }}</span>
                </template>
              </el-table-column>
              <el-table-column label="应付金额" align="center" prop="amount" />
              <el-table-column label="已付金额" align="center" prop="paidAmount" />
              <el-table-column label="未付金额" align="center" prop="balanceAmount" />
              <el-table-column label="状态" align="center" prop="status" />
              <el-table-column label="备注" align="center" prop="remark" />
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="凭证管理" name="document">
            <el-table :data="currentOrder.documents" style="width: 100%">
              <el-table-column prop="documentCode" label="凭证编号" />
              <el-table-column prop="documentDate" label="凭证日期" />
              <el-table-column prop="documentAmount" label="凭证金额" />
              <el-table-column prop="documentStatus" label="凭证状态" />
            </el-table>
          </el-tab-pane>
        </el-tabs>

        <el-empty v-else description="请选择订单" />
      </el-col>
    </el-row>
  </div>

</template>

<script>
import { listOrder } from "@/api/wms/order";
import { listOrderDetail } from "@/api/wms/orderDetail";
import { listReceivable } from "@/api/finance/receivable";
import { listPayable } from "@/api/finance/payable";
import { listFinancialDocument } from "@/api/finance/financialDocument";

import OrderDetailList from '@/views/wms/order/panels/detail.vue'

export default {
  name: "Order",
  components: {
    OrderDetailList
  },
  data() {
    return {
      activeTab: "orderDetail",
      currentOrder: null,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderCode: undefined
      },
      orderListLoading: false,
      treeData: [],
      total: 0,
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      rightLoading: false,
    }
  },
  mounted() {
    this.getList();
  },
  methods: {
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    getList() {
      this.orderListLoading = true;
      listOrder(this.queryParams).then(response => {
        this.treeData = response.rows.map(item => ({
          label: item.orderCode,
          value: item
        }));
        this.total = response.total;
      }).finally(() => {
        this.orderListLoading = false;
      });
    },
    handleNodeClick(data) {
      this.currentOrder = data.value;
      this.fetchData(data.value.orderId);
    },
    async fetchData(orderId) {
      this.rightLoading = true;
      // 需要逐个获取订单明细、应收明细、应付明细、凭证管理
      const orderDetail = (await listOrderDetail({ orderId, pageSize: 1000 })).rows;
      const receivableDetail = (await listReceivable({ orderId, pageSize: 1000 })).rows;
      const payableDetail = (await listPayable({ orderId, pageSize: 1000 })).rows;
      const documentDetail = (await listFinancialDocument({ orderId, pageSize: 1000 })).rows;
      this.rightLoading = false;
      this.currentOrder = {
        ...this.currentOrder,
        details: orderDetail,
        receivables: receivableDetail,
        payables: payableDetail,
        documents: documentDetail
      }
    }
  }
}
</script>