<template>
  <div class="CarCard">
    <div class="content">
      <div class="images">
        <el-image
          :style="{ height: '100%', width: '100%', transform: 'rotateY(180deg)' }"
          :src="IMAGE_BASE + carInfo.carImageUrl"
          fit="contain"
        >
          <template #error>
            <div class="image-error">
              <Icon icon="ep:picture" />
            </div>
          </template>
        </el-image>
      </div>

      <div class="lines">
        <div class="line-ttl">
          <div class="ttl">{{ carName }}</div>
          <div
            @click="collectChange"
            :class="['icon', { collected: carInfo.isFocusMark || carInfo.isDangerous }]"
          ></div>
        </div>

        <div class="line-text">
          <div class="name">隧道方向：</div>
          <div class="text">{{ directionMap[carInfo.direction] }}</div>
        </div>

        <div class="line-text">
          <div class="name">进入时间：</div>
          <div class="text">{{ carInfo.inTunnelTime }}</div>
        </div>
      </div>
    </div>

    <div class="footer" v-if="carInfo.retainedMinutesTime">
      <div class="cols">
        <div class="col-x">
          <div class="icon"></div>
          <div class="text"> 留存 {{ carInfo.retainedMinutesTime }}分钟 </div>
        </div>

        <div class="col-x">
          <div class="icon"></div>
          <div class="text"> {{ carInfo.speed }}km/h </div>
        </div>

        <div class="col-x">
          <div class="icon"></div>
          <div class="text"> {{ numToStone(carInfo.carMilestone) }} </div>
        </div>
      </div>

      <div v-if="!carInfo.mook" @click="goTracker" class="def-btn">轨迹追踪</div>
    </div>

    <div class="footer" v-else>车辆已驶出隧道</div>
  </div>
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router'
import { numToStone } from '@/utils/tunnel'
import { carMark, cancelMark } from '@/api/home'
import { ROAD_DIRECTION } from '@/config/enum'
import { ASYNC_DIRECTIONS } from '@/config/dict'
import { CAR_TYPES } from '@/config/dict'

const IMAGE_BASE = import.meta.env.VITE_IMAGE_BASE

interface CarInfo {
  carId: string
  type: number
  carImageUrl?: string
  carPlate?: string
  isFocusMark?: boolean
  isDangerous?: boolean
  direction: string
  inTunnelTime?: string
  retainedMinutesTime?: number
  speed?: number
  carMilestone: string
  mook?: boolean
}

const props = defineProps<{
  carInfo: CarInfo
}>()

const carName = computed(() => {
  return `${CAR_TYPES[props.carInfo.type].name}(${props.carInfo.carPlate})`
})

const router = useRouter()

// 收藏与取消
const collectChange = async () => {
  const { carId, isFocusMark, isDangerous } = props.carInfo

  if (isDangerous) {
    return ElMessage.warning('危化品车不可取消关注！')
  }

  if (isFocusMark) {
    await cancelMark({ carId })
  } else {
    await carMark({ carId })
  }
}

// 方向
const directionMap = computed(() => {
  return Object.fromEntries(
    ASYNC_DIRECTIONS().map((item) => {
      return [item.key, item.name]
    })
  )
})

// 轨迹追踪
const goTracker = () => {
  const { carId, direction } = props.carInfo

  router.push({
    path: 'track',
    query: {
      id: carId,
      direction: ROAD_DIRECTION[direction],
      from: 'home'
    }
  })
}
</script>
<style lang="scss" scoped>
$base_url: '@/assets/images/home/';

.CarCard {
  width: 445px;
  height: 158px;
  border-radius: 4px;
  background: #0d3561;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  margin-right: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  color: #fff;
  flex-shrink: 0;
  &:last-child {
    margin-right: 0;
  }

  .content {
    display: flex;
    align-items: center;
    padding: 16px;
    .images {
      width: 74px;
      height: 74px;
      background: #eaeaea;
      position: relative;
      :deep(.image-error) {
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #666666;
      }
    }
    .lines {
      flex-grow: 1;
      margin-left: 12px;
      .line-ttl {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 4px;
        .ttl {
          font-size: 18px;
          line-height: 28px;
        }
        .icon {
          width: 21px;
          height: 20px;
          background: url($base_url + 'collect_1.png') no-repeat;
          background-size: cover;
          cursor: pointer;
          &.collected {
            background: url($base_url + 'collect_2.png') no-repeat;
            background-size: cover;
          }
        }
      }
      .line-text {
        display: flex;
        margin-bottom: 2px;
        .name {
          font-weight: normal;
          color: rgba(240, 245, 255, 0.95);
        }
      }
    }
  }

  .footer {
    height: 47px;
    background: rgba(69, 116, 182, 0.36);
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    color: rgba(240, 245, 255, 0.95);
    .cols {
      display: flex;
      flex-grow: 1;
      justify-content: space-between;
      margin-right: 57px;
      .col-x {
        display: flex;
        align-items: center;
        // font-size: 12px;
        justify-content: space-between;
        .icon {
          width: 20px;
          height: 20px;
          margin-right: 4px;
          // background: salmon;
        }
      }
      .col-x:nth-child(1) {
        .icon {
          background: url($base_url + 'remain.png') no-repeat;
          background-size: cover;
        }
      }
      .col-x:nth-child(2) {
        .icon {
          background: url($base_url + 'speed.png') no-repeat;
          background-size: cover;
        }
      }
      .col-x:nth-child(3) {
        .icon {
          background: url($base_url + 'distance.png') no-repeat;
          background-size: cover;
        }
      }
    }

    .def-btn {
      width: 72px;
      height: 26px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #1270ff;
      box-sizing: border-box;
      border: 1px solid rgba(155, 193, 255, 0.74);
    }
  }
}
</style>
