// 车辆信息
<template>
  <div>
    <div class="drive-info">
      <div
        class="drive-info-box"
        style="width: 95%"
        v-for="(item, index) in tableData"
        :key="index"
      >
        <div class="drive-info-left">
          <div class="content-tit">车辆照片</div>
          <div class="drive-left-img">
            <el-image v-if="item.carPhoto" :src="item.carPhoto"></el-image>
            <span v-else>无</span>
            <!-- <img :src="item.carPhoto" alt="" /> -->
          </div>
        </div>
        <div class="drive-info-right drive-info-right-3">
          <div class="drive-info-right-item">
            <div class="content-tit">车 牌 号</div>
            <div class="right-item-text">{{ item.carNumber }}</div>
          </div>
          <div class="drive-info-right-item">
            <div class="content-tit">车辆类型</div>
            <el-tag effect="plain" style="margin-left: 5px">{{
              item.carType
            }}</el-tag>
          </div>
          <div class="drive-info-right-item">
            <div class="content-tit">使用性质</div>
            <el-tag style="margin-left: 5px">{{ item.useType }}</el-tag>
          </div>
          <div class="drive-info-right-item">
            <div class="content-tit">注册日期</div>
            <div class="right-item-text">{{ item.registerDate }}</div>
          </div>
          <div class="drive-info-right-item">
            <div class="content-tit">发证日期</div>
            <div class="right-item-text">{{ item.signingTime }}</div>
          </div>
          <div class="drive-info-right-item">
            <div class="content-tit">住址</div>
            <div class="right-item-text">{{ item.address }}</div>
          </div>
          <div class="drive-info-right-item">
            <div class="content-tit">品牌型号</div>
            <div class="right-item-text">{{ item.brandType }}</div>
          </div>
          <div class="drive-info-right-item">
            <div class="content-tit">车辆识别代码</div>
            <div class="right-item-text">{{ item.carRecognitionCode }}</div>
          </div>
          <div class="drive-info-right-item">
            <div class="content-tit">发动机号码</div>
            <div class="right-item-text">{{ item.engineNumber }}</div>
          </div>
          <div class="drive-info-right-item">
            <div class="content-tit">行驶证编号</div>
            <div class="right-item-text">{{ item.driveNumber }}</div>
          </div>
          <div class="drive-info-right-item">
            <div class="content-tit">核载人数</div>
            <div class="right-item-text">{{ item.carNumber }}</div>
          </div>
          <div class="drive-info-right-item">
            <div class="content-tit">总 质 量</div>
            <el-tag effect="plain" style="margin-left: 5px">{{
              item.carNumber
            }}</el-tag>
          </div>
          <div class="drive-info-right-item">
            <div class="content-tit">整备质量</div>
            <el-tag style="margin-left: 5px">{{ item.carNumber }}</el-tag>
          </div>
          <div class="drive-info-right-item">
            <div class="content-tit">外廓尺寸</div>
            <div class="right-item-text">{{ item.carNumber }}</div>
          </div>
          <div class="drive-info-right-item">
            <div class="content-tit">驱动类型</div>
            <div class="right-item-text">{{ item.driveType }}</div>
          </div>
          <div class="drive-info-right-item">
            <div class="content-tit">检验有效期至</div>
            <div class="right-item-text">{{ item.carNumber }}</div>
          </div>
        </div>
      </div>
      <div v-if="tableData.length == 0" class="no-data-text">暂无数据</div>
    </div>
    <!--分页栏-->
    <pagination
      :total="total"
      :page.sync="page.pageNum"
      :limit.sync="page.pageSize"
      @pagination="handlePagination"
    />
  </div>
</template>
<script>
import { getPersonCarPageList } from "@/api/personnelFiles";
import Pagination from "@/components/Pagination";
export default {
  components: { Pagination },
  props: {
    personId: {
      type: [Number, String],
      default: 0,
    },
  },
  data() {
    return {
      tableData: [],
      total: 0,
      page: {
        // 搜索表单
        data: {
          personId: "",
        },
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  mounted() {
    this._getPersonCarPageList();
  },
  methods: {
    _getPersonCarPageList() {
      this.page.data.personId = this.personId;
      if (this.page.data.personId) {
        getPersonCarPageList(this.page).then((res) => {
          this.tableData = res.data.records;
          this.total = res.data.total;
        });
      }
    },
    handlePagination(item) {
      // this.page.pageNum = item.pageNum;
      // this.page.pageSize = item.limit;
      this._getPersonPassportPageList();
    },
  },
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
.drive-info-box {
  height: 242px;
}
</style>
