<template>
  <div class="pageBody">
    <div class="pageTop">
      <div class="flightInfo">
        <div class="airLine">{{ airLine }}</div>
        <div class="info">
          <div class="infoBox">
            <div>起飞机场简称：深圳机场</div>
            <div>日期 ： 2021-12-24</div>
            <div>时间： 19 : 30 : 25</div>
            <div>停机位：012</div>
          </div>
          <div class="iconBox">
            <el-icon color="#ffffff" :size="22"><CaretRight /></el-icon>
          </div>
          <div class="infoBox">
            <div>特货信息/货物数：</div>
            <div>托运运单数/货物数：</div>
            <div>中转进运单/货物数：</div>
            <div>已配载集装器：</div>
            <div>货站已交接集装器：</div>
            <div>已装载集装器/运单/货物数：</div>
            <div>拉下集装器/运单/货物数：</div>
            <div>集装器数量：</div>
          </div>
          <div class="iconBox">
            <el-icon color="#ffffff" :size="22"><CaretRight /></el-icon>
          </div>
          <div class="infoBox">
            <div>降落机场简称： 南京机场</div>
            <div>日期 ： 2021-12-24</div>
            <div>时间： 22 : 25 : 25</div>
          </div>
        </div>
      </div>
      <div class="container">
        <tableTemp
          ref="domeTable"
          :tableHeader="state.tableHeader"
          :tableProperty="{ rowKey: 'ID', showSummary: true }"
          :tableData="tableData"
          @load="loadMore"
          @cellClass="test"
        ></tableTemp>
      </div>
    </div>
    <div class="tableTopBtn">
      <TBtnGroup
        v-model:flag="state.UTCFlag"
        @columnSet="columnSet"
        @downLoad="downLoad"
        @refresh="refresh"
      ></TBtnGroup>
      <Search @clear="clear" @search="search" />
    </div>
    <div class="waybillList">
      <tableTemp
        ref="domeTable"
        :tableHeader="state.waybillTableHeader"
        :tableProperty="{ showSummary: true }"
        :tableData="waybilltableData"
        @load="loadMore"
        @cellClass="test"
        @cell-click="cellClickHandler"
      ></tableTemp>
    </div>
    <tableColumnSet
      :dialogVisible="state.dialogVisible"
      :columnList="state.waybillTableHeader"
      @setColumn="setColumn"
      @closeDialog="closeDialog"
    ></tableColumnSet>
  </div>
</template>
<script setup lang="ts">
import tableTemp from '@/components/tableTemp/index.vue'
import TBtnGroup from '@/components/TBtnGroup/index.vue'
import tableColumnSet from '@/components/tableColumnSet/index.vue'
import Search from '@/components/search/index.vue'
import { CaretRight } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'

const state = reactive({
  tableHeader: [
    {
      columnLabel: '集装器编号',
      columnName: 'containerNo',
      width: '120px',
      needShow: true,
    },
    {
      columnLabel: '运单数',
      columnName: 'waybillCount',
      width: '60px',
      needShow: true,
    },
    { columnLabel: '件数', columnName: 'count', width: '60px', needShow: true },
    {
      columnLabel: '理货',
      columnName: 'lh',
      lableClass: 'nodeHeader',
      columnClassName: 'columnClassName',
      needShow: true,
    },
    {
      columnLabel: '拉下',
      columnName: 'lx',
      lableClass: 'nodeHeader',
      columnClassName: 'columnClassName',
      needShow: true,
    },
    {
      columnLabel: '待运区',
      columnName: 'dyq',
      lableClass: 'nodeHeader',
      columnClassName: 'columnClassName',
      needShow: true,
    },
    {
      columnLabel: '货站交接',
      columnName: 'hzjj',
      lableClass: 'nodeHeader',
      columnClassName: 'columnClassName',
      needShow: true,
    },
    {
      columnLabel: '机下交接',
      columnName: 'jxjj',
      lableClass: 'nodeHeader',
      columnClassName: 'columnClassName',
      needShow: true,
    },
    {
      columnLabel: '装机',
      columnName: 'zj',
      lableClass: 'nodeHeader',
      columnClassName: 'columnClassName',
      needShow: true,
    },
  ],
  waybillTableHeader: [
    {
      columnLabel: '运单号',
      columnName: 'waybillNo',
      width: '120px',
      needShow: true,
      columnClassName: 'cell-click',
    },
    { columnLabel: '运单类型', columnName: 'waybillType', needShow: true },
    { columnLabel: '集装器数量', columnName: 'jzqCount', needShow: true },
    { columnLabel: '品名', columnName: 'pm', needShow: true },
    { columnLabel: '特货信息', columnName: 'thxx', needShow: true },
    { columnLabel: '货物件数', columnName: 'hwjs', needShow: true },
    { columnLabel: '拉下件数', columnName: 'laxjs', needShow: true },
    { columnLabel: '退运件数', columnName: 'tyjs', needShow: true },
    { columnLabel: '最新节点', columnName: 'zxjd', needShow: true },
    { columnLabel: '最新位置', columnName: 'zxwz', needShow: true },
    { columnLabel: '处理结果', columnName: 'cljg', needShow: true },
    {
      columnLabel: '处理时间',
      columnName: 'clsj',
      width: '130px',
      needShow: true,
    },
    { columnLabel: '中转进航班号', columnName: 'zzhbh', needShow: true },
    {
      columnLabel: '中转航班降落时间',
      columnName: 'zzhbsj',
      width: '130px',
      needShow: true,
    },
    { columnLabel: '装载序号', columnName: 'zzxh', needShow: true },
  ],
  listLoading: true,
  UTCFlag: true,
  dialogVisible: false,
})

const waybilltableData = ref([
  {
    waybillNo: '32535234445',
    waybillType: '国际普货',
    jzqCount: '5',
    pm: '手机、充电器',
    thxx: '特',
    hwjs: '5',
    laxjs: '2',
    tyjs: '2',
    zxjd: '待运区',
    zxwz: 'A13',
    cljg: '通过',
    clsj: '2022/9/10 10:01',
    zzhbh: 'ZH5466',
    zzhbsj: '2022/9/10 16:01',
    zzxh: '3',
  },
  {
    waybillNo: '32535234445',
    jzqCount: '5',
    pm: '手机、充电器',
    thxx: '特',
    hwjs: '5',
    laxjs: '2',
    tyjs: '2',
    zxjd: '待运区',
    zxwz: 'A13',
    cljg: '通过',
    clsj: '2022/9/10 10:01',
    zzhbh: 'ZH5466',
    zzhbsj: '2022/9/10 16:01',
    zzxh: '3',
  },
  {
    waybillNo: '32535234445',
    jzqCount: '5',
    pm: '手机、充电器',
    thxx: '特',
    hwjs: '5',
    laxjs: '2',
    tyjs: '2',
    zxjd: '待运区',
    zxwz: 'A13',
    cljg: '未通过',
    clsj: '2022/9/10 10:01',
    zzhbh: 'ZH5466',
    zzhbsj: '2022/9/10 16:01',
    zzxh: '3',
  },
])

const airLine = ref('SZX - CA4120 - NKG')
const tableData = ref([
  {
    containerNo: 'DOU29800001',
    waybillCount: '5',
    count: '50',
    lh: 'C24  11:01',
    lx: 'F24  12:05',
    dyq: 'D32  11:25',
    hzjj: 'E24  11:40',
    jxjj: 'F24  12:01',
    zj: 'G32  12:25',
  },
  {
    containerNo: 'DOU29800001',
    waybillCount: '5',
    count: '50',
    lh: 'C24  11:01',
    lx: 'F24  12:05',
    dyq: 'D32  11:25',
    hzjj: 'E24  11:40',
    jxjj: 'F24  12:01',
    zj: 'G32  12:25',
  },
])

const setError = () => {
  waybilltableData.value.map(item => {
    if (item.cljg == '未通过') {
      item['rowClass'] = 'alarm'
    }
  })
}

const domeTable = ref(null)
const test = row => {
  if (row.column.property === 'score' && row.row.score > 80) {
    domeTable.value.cellClass = 'warn'
  } else {
    domeTable.value.cellClass = ''
  }
}

const loadMore = data => {
  setError()
  console.log(data)
}

//清空搜索
const clear = data => {
  console.log(data)
}

//点击搜索按钮
const search = data => {
  console.log(data)
}

//点击刷新按钮
const refresh = data => {
  console.log(data)
}

//点击下载按钮
const downLoad = data => {
  console.log(data)
}

//点击列设置按钮
const columnSet = data => {
  state.dialogVisible = true
}

const setColumn = data => {
  state.waybillTableHeader = data
  state.dialogVisible = false
}

const closeDialog = data => {
  state.dialogVisible = false
}

const router = useRouter()
const route = useRoute()
const cellClickHandler = (row, column, cell, event) => {
  switch (column.property) {
    case 'waybillNo':
      router.push({
        path: `${route.path.split('/').slice(0, -1).join('/')}/waybill`,
        query: {
          waybillNo: row.waybillNo,
        },
      })
      break
    default:
      break
  }
}
</script>
<style lang="scss" scoped>
.pageBody {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .pageTop {
    width: 100%;
    height: 345px;
    display: flex;
    .flightInfo {
      height: 100%;
      flex: 1;
      background: #410425;
      box-sizing: border-box;
      padding: 18px 32px;
      display: flex;
      flex-direction: column;
      .airLine {
        font-size: 18px;
        font-weight: bold;
        color: #ffffff;
        width: 100%;
        margin-bottom: 16px;
      }
      .info {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        justify-items: center;
        width: 100%;
        max-width: 1050px;
        flex: 1;
        .infoBox {
          width: calc(33.3% - 10px);
          background: #561638;
          padding: 10px 15px;
          box-sizing: border-box;
          font-size: 14px;
          font-weight: 400;
          color: #ffffff;
          line-height: 30px;
        }
        .iconBox {
          display: flex;
          flex-direction: column;
          width: 60px;
          justify-content: center;
          align-items: center;
        }
      }
    }
    .container {
      width: 760px;
      height: 100%;
      margin-left: 16px;
    }
  }
  .tableTopBtn {
    height: 72px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .waybillList {
    width: 100%;
    flex: 1;
  }
}
:deep.el-table .nodeHeader {
  background: #eef3d6;
}
:deep.el-table .columnClassName {
  background: #eef3d6 !important;
}
:deep.el-table .alarm {
  background: #f38080 !important;
}
</style>
