<template>
  <div>
    <div class="fire">
      <div class="car-in">车辆详情</div>
      <div style="display: flex; justify-content: space-between">
        <div>
          车牌号：
          <span>{{ carinfo.plateNumber ? carinfo.plateNumber : '暂无' }}</span>
        </div>
        <div>
          车辆类型：
          <span style="color: rgb(239, 66, 66)">{{ carinfo.cryName ? carinfo.cryName : '暂无' }}</span>
        </div>
      </div>
      <div>
        所属单位：
        {{ carinfo.depName ? carinfo.depName : '暂无' }}
      </div>
      <div>
        联系人：
        {{ carinfo.owner ? carinfo.owner : '暂无' }}
      </div>
      <div>
        联系人电话：
        {{ carinfo.phone ? carinfo.phone : '暂无' }}
      </div>
      <div>拨打电话</div>
      <div style="display: flex; justify-content: space-between">
        <div style="display: flex; flex-direction: column; width: 120px; text-align: center">
          <span style="color: rgb(35, 130, 213); font-size: 20px">5871天</span>
          <span>安全运行天数</span>
        </div>
        <div style="display: flex; flex-direction: column; width: 120px; text-align: center">
          <span style="color: rgb(35, 130, 213); font-size: 20px">0次</span>
          <span>月使用次数</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCarInfo } from '@/api/iot'
export default {
  props: { deptIds: Object },
  data() {
    return {
      carinfo: {},
      id: '',
    }
  },
  computed: {
    carIds() {
      return this.$route.query.id
    },
  },
  watch: {
    deptIds: {
      handler(val) {
        if (val.key && val.key.indexOf('car') >= 0) {
          this.id = val.meta.id
          this.FunInfo()
        } else if (val.id) {
          this.id = val.id
          this.FunInfo()
        }
        // this.videoid = val
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    FunInfo() {
      getCarInfo(this.id || this.carIds).then((res) => {
        console.log('-------路由传参', res)
        this.carinfo = res.data
      })
    },
  },
  mounted() {
    if (this.carIds) {
      this.FunInfo()
    }
    console.log('-------路由传参', this.carIds)
  },
  // created() {
  //   this.FunInfo()
  // },
}
</script>

<style lang="less" scoped>
.fire {
  width: 350px;
  height: 223px;
  background: #fff;
  margin-top: 10px;
  padding: 8px 10px;
  font-size: 14px;
  font-family: 'Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif';
  // color: #000;
  // color: #ccc;
  line-height: 27px;
  pointer-events: all;
  .car-in {
    width: 100%;
    border-bottom: 1px solid #74bff5;
    background: #74bff5;
    color: #fff;
    padding: 0 6px;
    border-radius: 5px;
  }
}
</style>
