<template>
  <div class="station">
    <div class="station-head">
      <div class="station-head-title">货物基本信息</div>
      <div class="station-head-content flex-wrap">
        <div class="station-head-content-list" v-for="item in dataInfo" :key="item.id">{{item.name}}：{{item.value}}</div>
      </div>
    </div>
    <div class="station-status flex">
      <div class="station-status-info flex-wrap">
        <div class="manageTitle">货物跟踪信息</div>
        <div class="status">正常</div>
      </div>
      <div class="station-status-search">
        <Search @clear="clear" @search="search" />
      </div>
    </div>
    <div class="station-list flex-wrap">
      <div class="station-list-left">
        <div class="title flex-wrap">
          <div class="title-list">航班号CA1001</div>
        </div>
        <Steps :datas="datas" />
      </div>
    </div>
    <div class="station-table">
      <Table height="calc(100vh - 540px)" :tableHeader="tableHeader" :tableData="tableData" />
    </div>
  </div>
</template>

<script setup lang="ts">
import Search from "@/components/search/index.vue";
import Steps from "@/components/steps/index.vue";
import Table from "@/components/tableTemp/index.vue";
import { ElMessage } from "element-plus";
const dataInfo = [
  {
    id: 1,
    name: "货物编码",
    value: "56888829",
  },
  {
    id: 2,
    name: "运单",
    value: "FA56888829",
  },
  {
    id: 3,
    name: "运单类型",
    value: "国际普货",
  },
];
const datas = [
  {
    id: 1,
    name: "收运核单",
    flag: true,
    labelWidth: 100,
    children: ["A32", "534件", "通过", "10:25"],
  },
  {
    id: 2,
    name: "安检",
    flag: true,
    children: ["A32", "534件", "通过", "10:25"],
  },
  {
    id: 3,
    name: "理货",
    flag: true,
    children: ["A32", "534件", "通过", "10:25"],
  },
  {
    id: 4,
    name: "待运区",
    flag: true,
    children: ["A32", "534件", "通过", "10:25"],
  },
  {
    id: 5,
    name: "货站交接",
    flag: true,
    children: ["A32", "534件", "通过", "10:25"],
  },
  {
    id: 6,
    name: "入园",
    flag: true,
    children: ["A32", "534件", "通过", "10:25"],
  },
  {
    id: 7,
    name: "装机",
    flag: true,
    labelWidth: 100,
    children: ["A32", "534件", "通过", "10:25"],
  },
];
const datas1 = [
  {
    id: 1,
    name: "卸机",
    flag: true,
    labelWidth: 100,
    children: ["A32", "534件", "通过", "10:25"],
  },
  {
    id: 2,
    name: "入园",
    flag: true,
    children: ["A32", "534件", "通过", "10:25"],
  },
  {
    id: 3,
    name: "货站交接",
    flag: true,
    children: ["A32", "534件", "通过", "10:25"],
  },
  {
    id: 4,
    name: "提取",
    flag: true,
    children: ["A32", "534件", "通过", "10:25"],
  },
];
const tableHeader = [
  { columnLabel: "航班号", columnName: "fightNo", needShow: true },
  { columnLabel: "航班日期", columnName: "containerNo", needShow: true },
  { columnLabel: "起飞航站-预计起飞时间", columnName: "goodsNo", needShow: true },
  { columnLabel: "目的航站-预计降落时间", columnName: "dwon1", needShow: true },
  { columnLabel: "节点名称", columnName: "return", needShow: true },
  { columnLabel: "位置码", columnName: "receipt", needShow: true },
  { columnLabel: "位置描述", columnName: "securityCheck", needShow: true },
  { columnLabel: "处理时间", columnName: "tally", needShow: true },
  { columnLabel: "处理结果", columnName: "dwon2", needShow: true },
  { columnLabel: "数据来源", columnName: "waitingArea", needShow: true },
  { columnLabel: "设备ID", columnName: "goodSstation1", needShow: true },
  { columnLabel: "操作人", columnName: "offBoard1", needShow: true },
  { columnLabel: "发往位置", columnName: "installEquipment", needShow: true },
  { columnLabel: "发往位置描述", columnName: "unloading", needShow: true },
];
const tableData = [
  {
    id: 1,
    fightNo: "CA1001",
    containerNo: "2022/9/10",
    goodsNo: "SZX-11:35",
    dwon1: "PEK-14:35",
    return: "入园",
    receipt: "A03",
    securityCheck: "A区03闸口",
    tally: "2022/09/10 07:10",
    dwon2: "通过",
    waitingArea: "人工扫描",
    goodSstation1: "56",
    offBoard1: "张伯伦",
    installEquipment: "B12",
    unloading: "货站B12闸口",
    demo: "DOU2329U2",
  },
  {
    id: 2,
    fightNo: "CA1001",
    containerNo: "2022/9/10",
    goodsNo: "SZX-11:35",
    dwon1: "PEK-14:35",
    return: "入园",
    receipt: "A03",
    securityCheck: "A区03闸口",
    tally: "2022/09/10 07:10",
    dwon2: "通过",
    waitingArea: "人工扫描",
    goodSstation1: "56",
    offBoard1: "张伯伦",
    installEquipment: "B12",
    unloading: "货站B12闸口",
    demo: "DOU2329U2",
  },
  {
    id: 3,
    fightNo: "CA1001",
    containerNo: "2022/9/10",
    goodsNo: "SZX-11:35",
    dwon1: "PEK-14:35",
    return: "入园",
    receipt: "A03",
    securityCheck: "A区03闸口",
    tally: "2022/09/10 07:10",
    dwon2: "通过",
    waitingArea: "人工扫描",
    goodSstation1: "56",
    offBoard1: "张伯伦",
    installEquipment: "B12",
    unloading: "货站B12闸口",
    demo: "DOU2329U2",
  },
];
const search = (val) => {
  ElMessage.success(`搜索成功：${val}`);
};
const clear = () => {
  ElMessage.success(`清除`);
};
</script>

<style lang="scss" scoped>
.station {
  &-head {
    height: 144px;
    background: #410425;
    padding: 24px 30px;
    color: #ffffff;
    &-title {
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      margin-bottom: 40px;
    }
    &-content {
      &-list {
        margin-right: 100px;
        &:last-child {
          margin-right: 0;
        }
      }
    }
  }
  &-status {
    margin: 24px 0;
    line-height: 32px;
    .status {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #519f6b;
    }
  }
  &-list {
    margin-bottom: 8px;
    &:last-child {
      margin-bottom: 0;
    }
    .title {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #101116;
      margin-bottom: 28px;
      &-list {
        margin-right: 50px;
      }
    }
    &-left {
      background: #ffffff;
      padding: 24px 24px 12px 24px;
      flex: 1;
    }
    &-right {
      flex: 1;
      background: #ffffff;
      padding: 24px 24px 12px 24px;
    }
  }
  :deep &-table {
    margin-top: 16px;
    .scoreColumn {
      background: #eef3d6;
    }
  }
}
</style>
