<template>
  <div>
    <el-row type="flex" style="margin-top: 15px; margin-bottom: 15px" justify="center">
      <el-col :xs="24" :sm="24" :md="24" :lg="20" :xl="16">
        <div style="display: flex; justify-content: space-between;align-items: flex-end;">
          <h2>出货详情</h2>
          <div>
            <el-button size="small">编辑</el-button>
            <el-button size="small">操作</el-button>
            <el-button type="primary" size="small">异常登记</el-button>
            <el-button type="primary" size="small">费用登记</el-button>
            <el-button type="danger" size="small">删除</el-button>
          </div>
        </div>
        <el-card style="margin-top: 15px">
          <el-descriptions :column="4" border>
            <el-descriptions-item label="自编号"></el-descriptions-item>
            <el-descriptions-item label="运输方式"></el-descriptions-item>
            <el-descriptions-item label="出货渠道"></el-descriptions-item>
            <!-- <el-descriptions-item label="柜型"></el-descriptions-item> -->
            <el-descriptions-item label="状态"></el-descriptions-item>
            <el-descriptions-item label="总计"></el-descriptions-item>
            <el-descriptions-item label="始发地"></el-descriptions-item>
            <el-descriptions-item label="目的地"></el-descriptions-item>
            <el-descriptions-item label="SO.NO"></el-descriptions-item>
          </el-descriptions>
        </el-card>

        <el-tabs style="margin-top: 15px" type="border-card">
          <el-tab-pane label="明细">
            <div class="detail-pane">
              <p>当前部分：</p>
              <el-select v-model="value" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
              <p class="box-weight">9箱子xxx</p>
              <p class="document-status">单证状态：我司全代</p>
            </div>
            <el-table :data="[]" style="width: 100%">
              <el-table-column prop="" label="序号"> </el-table-column>
              <el-table-column prop="" label="订单号"> </el-table-column>
              <el-table-column prop="" label="货物信息"> </el-table-column>
              <el-table-column prop="" label="计划箱数"> </el-table-column>
              <el-table-column prop="" label="实装箱数"> </el-table-column>
              <el-table-column prop="" label="卸柜箱数"> </el-table-column>
              <el-table-column prop="" label="提货点"> </el-table-column>
              <el-table-column prop="" label="体积"> </el-table-column>
              <el-table-column prop="" label="重量"> </el-table-column>
              <el-table-column prop="" label="货值"> </el-table-column>
              <el-table-column prop="" label="报关方式"> </el-table-column>
              <el-table-column prop="" label="报关费用"> </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="状态"></el-tab-pane>
          <el-tab-pane label="费用">
            <el-table :data="[]" style="width: 100%">
              <el-table-column prop="" label="序号"> </el-table-column>
              <el-table-column prop="" label="费用类型"> </el-table-column>
              <el-table-column prop="" label="供应商"> </el-table-column>
              <el-table-column prop="" label="金额"> </el-table-column>
              <el-table-column prop="" label="实付金额"> </el-table-column>
              <el-table-column prop="" label="实付日期"> </el-table-column>
              <el-table-column prop="" label="操作"> </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="异常">
            <el-table :data="[]" style="width: 100%">
              <el-table-column prop="" label="序号"> </el-table-column>
              <el-table-column prop="" label="操作步骤"> </el-table-column>
              <el-table-column prop="" label="异常"> </el-table-column>
              <el-table-column prop="" label="异常详情"> </el-table-column>
              <el-table-column prop="" label="异常时间"> </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="表单">
            <el-table :data="[]" style="width: 50%">
              <el-table-column prop="" label="文件类型"> </el-table-column>
              <el-table-column prop="" label="下载链接"> </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getCustomer, getCustomerSelect } from "@/api/ecw/customer";
import { DICT_TYPE, getDictDataLabel } from "@/utils/dict";
import { getProductTypeList } from "@/api/ecw/productType";
import { getNodeList } from "@/api/ecw/node";
import CustomerFollow from "@/components/CustomerFollow";
import { parseTime } from "@/utils/ruoyi";
import CustomerComplaint from "@/views/ecw/customerComplaint";
import { listServiceUser } from "@/api/system/user";
import { getCustomerContactsListByCustomer } from "@/api/ecw/customerContacts";

export default {
  name: "boxQuery",
  props: {
    customerId: String,
  },
  components: {
    CustomerFollow,
    CustomerComplaint,
  },
  created() {
    getNodeList().then((r) => {
      this.nodeList = r.data;
    });
    getCustomer(this.id).then((response) => {
      this.customer = { ...this.customer, ...response.data };

      getCustomerContactsListByCustomer({ customerId: this.id }).then((r) => {
        this.customerContacts = r.data;
      });
    });
    getProductTypeList().then((r) => {
      this.productTypeList = r.data;
    });

    getCustomerSelect().then((r) => {
      this.customerSelect = r.data;
    });
    listServiceUser().then((r) => {
      this.serviceUserList = r.data;
    });
  },
  data() {
    return {
      DICT_TYPE,
      getDictDataLabel,
      parseTime,
      nodeList: [],
      productTypeList: [],
      customerSelect: [],
      serviceUserList: [],
      customerContacts: [],
      customer: {
        id: undefined,
        number: undefined,
        name: undefined,
        level: undefined,
        country: undefined,
        type: undefined,
        agentId: undefined,
        company: undefined,
        address: undefined,
        productType: undefined,
        productId: undefined,
        pickupPoint: undefined,
        memberId: undefined,
        birthday: undefined,
        balance: undefined,
        source: undefined,
        picture: undefined,
        customerService: undefined,
        customerLines: [],
        promoter: undefined,
        status: undefined,
        founder: undefined,
        department: undefined,
        invoiceTitle: undefined,
        licenseNumber: undefined,
        bank: undefined,
        bankNumber: undefined,
        project: undefined,
        billingAddress: undefined,
        billingTell: undefined,
        taxRate: undefined,
        remarks: undefined,
        arrivalConfirm: undefined,
        weightUnit: undefined,
        createTime: undefined,
      },
    };
  },
  computed: {
    productType() {
      const productType = this.productTypeList.find(
        (p) => p.id === parseInt(this.customer.productType)
      );
      return productType ? productType.titleZh : "";
    },
    pickupPoint() {
      const pickupPoint = this.nodeList.find(
        (p) => p.id === parseInt(this.customer.pickupPoint)
      );
      return pickupPoint ? pickupPoint.titleZh : "";
    },
    promoter() {
      return (
        this.customerSelect.find((e) => e.id === this.customer.promoter)
          ?.name || ""
      );
    },
    customerService() {
      return (
        this.serviceUserList.find((e) => e.id === this.customer.customerService)
          ?.nickname || ""
      );
    },
    id() {
      return this.customerId ? parseInt(this.customerId) : undefined;
    },
  },
};
</script>

<style lang="scss" scoped>
.detail-pane {
  display: flex;
  .box-weight {
    margin-left: 10px;
  }
  .document-status {
    flex: 1;
    text-align: right;
  }
}
</style>
