<template>
  <div class="station scroll-y">
    <div class="station-head">
      <div class="station-head-title">运单基本信息</div>
      <div class="station-head-content flex">
        <div 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 class="title-list">出港: 深圳机场</div>
        </div>
        <Steps :datas="datas" />
      </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 class="title-list">出港: 深圳机场</div>
        </div>
        <Steps :datas="datas" />
      </div>
    </div>
    <div class="station-table">
      <Table
        height="calc(100vh - 700px)"
        :tableHeader="tableHeader"
        :tableData="tableData"
        @cell-click="cellClickHandler"
      />
    </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: 0,
    name: '运单',
    value: 'FA56888829',
  },
  {
    id: 1,
    name: '运单类型',
    value: '国际普货',
  },
  {
    id: 2,
    name: '货代公司',
    value: '深圳市联运通货有限公司',
  },
  {
    id: 3,
    name: '品名',
    value: '电路板、手机外壳',
  },
  {
    id: 4,
    name: '特货信息',
    value: '特',
  },
  {
    id: 5,
    name: '始发机场',
    value: 'SZX',
  },
  {
    id: 6,
    name: '目的机场',
    value: 'CTU',
  },
]
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: false,
    children: ['A32', '534件', '通过', '10:25'],
  },
  {
    id: 7,
    name: '安检安检',
    flag: false,
    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: false,
    children: ['A32', '534件', '通过', '10:25'],
  },
]
const tableHeader = [
  { columnLabel: '航班号', columnName: 'fightNo', needShow: true },
  { columnLabel: '集装器编号', columnName: 'containerNo', needShow: true },
  {
    columnLabel: '货物编码',
    columnName: 'goodsNo',
    needShow: true,
    columnClassName: 'cell-click',
  },
  { columnLabel: '拉下', columnName: 'dwon1', needShow: true },
  { columnLabel: '退运', columnName: 'return', needShow: true },
  {
    columnLabel: '入园',
    columnName: 'receipt',
    lableClass: 'scoreColumn',
    columnClassName: 'scoreColumn',
    needShow: true,
  },
  {
    columnLabel: '海关',
    columnName: 'securityCheck',
    lableClass: 'scoreColumn',
    columnClassName: 'scoreColumn',
    needShow: true,
  },
  {
    columnLabel: '运抵',
    columnName: 'tally',
    lableClass: 'scoreColumn',
    columnClassName: 'scoreColumn',
    needShow: true,
  },
  {
    columnLabel: '安检',
    columnName: 'dwon2',
    lableClass: 'scoreColumn',
    columnClassName: 'scoreColumn',
    needShow: true,
  },
  {
    columnLabel: '收运核单',
    columnName: 'waitingArea',
    lableClass: 'scoreColumn',
    columnClassName: 'scoreColumn',
    needShow: true,
  },
  {
    columnLabel: '理货',
    columnName: 'goodSstation1',
    lableClass: 'scoreColumn',
    columnClassName: 'scoreColumn',
    needShow: true,
  },
  {
    columnLabel: '拉下',
    columnName: 'offBoard1',
    lableClass: 'scoreColumn',
    columnClassName: 'scoreColumn',
    needShow: true,
  },
  {
    columnLabel: '待运区',
    columnName: 'installEquipment',
    lableClass: 'scoreColumn',
    columnClassName: 'scoreColumn',
    needShow: true,
  },
  {
    columnLabel: '货站交接',
    columnName: 'unloading',
    lableClass: 'scoreColumn',
    columnClassName: 'scoreColumn',
    needShow: true,
  },
  {
    columnLabel: '机下交接',
    columnName: 'offBoard2',
    lableClass: 'scoreColumn',
    columnClassName: 'scoreColumn',
    needShow: true,
  },
  {
    columnLabel: '提取',
    columnName: 'goodSstation2',
    lableClass: 'scoreColumn',
    columnClassName: 'scoreColumn',
    needShow: true,
  },
]
const tableData = [
  {
    id: 1,
    fightNo: 'CA1001',
    containerNo: 'DOU2424U2',
    goodsNo: '56888829',
    dwon1: 'Y',
    return: 'Y',
    receipt: 'A203-未通过-15:40',
    securityCheck: 'A203-未通过-15:40',
    tally: 'A203-未通过-15:40',
    dwon2: 'A203-未通过-15:40',
    waitingArea: 'A203-未通过-15:40',
    goodSstation1: 'A203-未通过-15:40',
    offBoard1: 'A203-未通过-15:40',
    installEquipment: 'A203-未通过-15:40',
    unloading: 'A203-未通过-15:40',
    offBoard2: 'A203-未通过-15:40',
    goodSstation2: 'A203-未通过-15:40',
    extract: 'A203-未通过-15:40',
  },
  {
    id: 2,
    fightNo: 'CA1001',
    containerNo: 'DOU2424U2',
    goodsNo: '56888829',
    dwon1: 'Y',
    return: 'Y',
    receipt: 'A203-未通过-15:40',
    securityCheck: 'A203-未通过-15:40',
    tally: 'A203-未通过-15:40',
    dwon2: 'A203-未通过-15:40',
    waitingArea: 'A203-未通过-15:40',
    goodSstation1: 'A203-未通过-15:40',
    offBoard1: 'A203-未通过-15:40',
    installEquipment: 'A203-未通过-15:40',
    unloading: 'A203-未通过-15:40',
    offBoard2: 'A203-未通过-15:40',
    goodSstation2: 'A203-未通过-15:40',
    extract: 'A203-未通过-15:40',
  },
  {
    id: 3,
    fightNo: 'CA1001',
    containerNo: 'DOU2424U2',
    goodsNo: '56888829',
    dwon1: 'Y',
    return: 'Y',
    receipt: 'A203-未通过-15:40',
    securityCheck: 'A203-未通过-15:40',
    tally: 'A203-未通过-15:40',
    dwon2: 'A203-未通过-15:40',
    waitingArea: 'A203-未通过-15:40',
    goodSstation1: 'A203-未通过-15:40',
    offBoard1: 'A203-未通过-15:40',
    installEquipment: 'A203-未通过-15:40',
    unloading: 'A203-未通过-15:40',
    offBoard2: 'A203-未通过-15:40',
    goodSstation2: 'A203-未通过-15:40',
    extract: 'A203-未通过-15:40',
  },
  {
    id: 4,
    fightNo: 'CA1001',
    containerNo: 'DOU2424U2',
    goodsNo: '56888829',
    dwon1: 'Y',
    return: 'Y',
    receipt: 'A203-未通过-15:40',
    securityCheck: 'A203-未通过-15:40',
    tally: 'A203-未通过-15:40',
    dwon2: 'A203-未通过-15:40',
    waitingArea: 'A203-未通过-15:40',
    goodSstation1: 'A203-未通过-15:40',
    offBoard1: 'A203-未通过-15:40',
    installEquipment: 'A203-未通过-15:40',
    unloading: 'A203-未通过-15:40',
    offBoard2: 'A203-未通过-15:40',
    goodSstation2: 'A203-未通过-15:40',
    extract: 'A203-未通过-15:40',
  },
]
const search = val => {
  ElMessage.success(`搜索成功：${val}`)
}
const clear = () => {
  ElMessage.success(`清除`)
}

const router = useRouter()
const route = useRoute()
const cellClickHandler = (row, column, cell, event) => {
  switch (column.property) {
    case 'goodsNo':
      router.push({
        path: `${route.path.split('/').slice(0, -1).join('/')}/goods`,
        query: {
          goodsNo: row.goodsNo,
        },
      })
      break
    default:
      break
  }
}
</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;
    }
  }
  &-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: 10px;
      &-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 !important;
    }
    .scoreColumn2 {
      background: #d6e6f3 !important;
    }
  }
}
</style>
