<template>
  <div class="goods">
    <div class="goods-info">
      <div class="goods-info-title">货物基本信息</div>
      <div class="goods-info-content">
        <div v-for="item in goodsInfoItems" :key="item.key" class="info-item">
          {{ item.label }}：{{ goodsInfo[item.key] }}
        </div>
      </div>
    </div>
    <div class="goods-header flex">
      <div class="goods-header-title flex-wrap">
        <div class="manageTitle">货物跟踪信息</div>
        <div class="status">正常</div>
      </div>
      <div class="goods-header-operate flex-wrap">
        <Search @clear="clear" @search="search" />
        <el-button
          class="button-sqaure"
          :icon="Download"
          color="#ac014d"
          @click="downloadHandler"
        />
        <ColumnSet
          class="button-sqaure"
          :table-columns="tableColumns"
          @checked-submit="columnChecked"
        />
      </div>
    </div>
    <div
      :style="{
        maxHeight: trackAirlines.length > 1 ? `${208 * 2 + 8}px` : '208px',
      }"
      class="goods-track"
    >
      <el-scrollbar always>
        <div class="goods-track-warpper">
          <div
            v-for="trackAirline in trackAirlines"
            :key="trackAirline.flightNO"
            class="goods-track-row"
          >
            <div
              v-for="(trackAirport, index) in trackAirline.airports"
              :key="trackAirport.airport"
              class="goods-track-box"
              :style="trackBoxStyle(trackAirline.airports, index)"
            >
              <div class="title flex-wrap">
                <span v-if="index === 0" class="title-span"
                  >航班号：{{ trackAirline.flightNO }}</span
                >
                <span class="title-span"
                  >{{ trackAirport.isDeparture ? '出港' : '进港' }}：{{
                    trackAirport.airport
                  }}</span
                >
                <span class="title-span"
                  >日期：{{ trackAirline.flightDate }}</span
                >
              </div>
              <Steps :steps="trackAirport.trackSteps" />
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
    <div class="goods-list">
      <SimpleTable
        ref="tableRef"
        :data="tableData"
        :columns="filteredColumns"
        scrollbar-always-on
        :row-class-name="rowClass"
        :cell-class-name="cellClass"
        :column-props="{ formatter }"
        @cell-click="cellClickHandler"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { Download } from '@element-plus/icons-vue'
import Search from '@/components/search/index.vue'
import Steps from '@/components/steps/index.vue'
import ColumnSet from '@/components/ColumnSet/index.vue'
import SimpleTable from '@/components/SimpleTable/index.vue'
import { useTrackData } from '../../hooks/useTrackData'
import { useTable } from '../../hooks/useTable'
import { useTableColumnSet } from '@/hooks/useTableColumnSet'
import { useTableExport } from '../../hooks/useTableExport'
import { useTableStyle } from '../../hooks/useTableStyle'
import { useTableCellClick } from '../../hooks/useTableCellClick'
import { useGoodsInfo } from './useGoodsInfo'
import { Query } from '@/api/webApi'

const props = defineProps({
  name: {
    type: String,
    required: true,
  },
})

const route = useRoute()
const { goodsNO, waybillNO } = route.query

const { goodsInfoItems, goodsInfo } = useGoodsInfo(props.name, [
  goodsNO as string,
])

interface Airline {
  C0: string // 航班号
  C1: string // 机场
  C2: string // 航班日期
  C3: number // 起飞/降落
}
const goodsAirlines = ref<Airline[]>([])
const getGoodsAirlines = async () => {
  try {
    const {
      code,
      returnData: { listValues },
      message,
    } = await Query<Airline>({
      id: DATACONTENT_ID.goodsAirline,
      dataContent: [goodsNO],
    })
    if (Number(code) !== 0) {
      throw new Error(message || '失败')
    }
    goodsAirlines.value = listValues
  } catch (error) {
    console.error(error)
  }
}
// onMounted(() => {
//   getGoodsAirlines()
// })

const trackDataContentList = computed(() =>
  goodsAirlines.value.map(({ C0, C1, C2, C3 }) => ({
    flightNO: C0,
    airport: C1,
    flightDate: C2,
    isDeparture: C3,
    dataContent: [waybillNO, goodsNO] as string[],
  }))
)
const { trackAirlines, trackBoxStyle } = useTrackData(
  props.name,
  trackDataContentList
)

const dataContent = [waybillNO, goodsNO] as string[]
const { tableColumns, tableData } = useTable(`${props.name}Flight`, dataContent)

const search = (text: string) => {
  console.log(text)
}
const clear = () => {}

const tableRef = ref<InstanceType<typeof SimpleTable> | null>(null)
const { exportToExcel } = useTableExport()
const downloadHandler = () => {
  const table = tableRef.value!.table!
  exportToExcel({ table })
}
const formatter = (row, column, cellValue, index) => {
  if (column.property === 'C7') {
    return String(cellValue ?? '').replace(' ', '\n')
  }
  return cellValue
}

const { filteredColumns, columnChecked } = useTableColumnSet(tableColumns)

const { rowClass, cellClass } = useTableStyle(`${props.name}Flight`)

const { cellClickHandler } = useTableCellClick(`${props.name}Flight`)
</script>

<style lang="scss" scoped>
.goods {
  height: 100%;
  display: flex;
  flex-direction: column;
  &-info {
    height: 144px;
    background: #410425;
    padding: 24px 30px;
    color: #ffffff;
    &-title {
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      margin-bottom: 40px;
    }
    &-content {
      display: flex;
      .info-item:not(:last-child) {
        margin-right: 100px;
      }
    }
  }
  &-header :deep {
    margin: 24px 0;
    line-height: 32px;
    .status {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #519f6b;
    }
    .el-button {
      background-color: #d5327b;
      border: none;
    }
    .button-sqaure {
      width: 30px;
      height: 30px;
      border-radius: 4px;
      font-size: 16px;
      margin-left: 24px;
      &:first-of-type {
        margin-left: 35px;
      }
    }
  }
  &-track {
    height: 0;
    flex: 1.5;
    &-row {
      height: 208px;
      display: flex;
      &:not(:last-child) {
        margin-bottom: 8px;
      }
    }
    &-box {
      background: #ffffff;
      padding: 24px 24px 12px 24px;
      &:not(:last-child) {
        margin-right: 8px;
      }
      .title {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #101116;
        margin-bottom: 10px;
        &-span:not(:last-of-type) {
          margin-right: 50px;
        }
      }
    }
  }
  .goods-list :deep {
    margin-top: 16px;
    height: 0;
    flex: 1;
    .el-table__cell {
      .cell {
        padding: 4px 8px;
      }
    }
  }
}
</style>
