<template>
  <div class="manage-container">
    <el-table
      v-loading="listLoading"
      :data="tableData"
      stripe
      border
      style="width: 100%"
    >
      <el-table-column
        fixed
        prop="vehicleName"
        label="车辆名称"
        width="150"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="vehicleIcon"
        label="车辆图标"
        width="150"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="vehicleNumber"
        label="车牌号"
        width="150"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="projectName"
        label="绑定项目"
        width="150"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="imei"
        label="IMEI"
        width="180"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="deviceName"
        label="设备名称"
        width="180"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="mcType"
        label="设备型号"
        width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="mcTypeUseScope"
        label="机型"
        width="100"
        align="center"
      >
        <template #default="{ row }">
          <span v-if="row.mcTypeUseScope == 'aotomobile'">汽车</span>
          <span v-if="row.mcTypeUseScope == 'electromobile'">电动车</span>
          <span v-if="row.mcTypeUseScope == 'personal'">个人</span>
          <span v-if="row.mcTypeUseScope == 'pet'">宠物</span>
          <span v-if="row.mcTypeUseScope == 'plane'">飞机</span>
          <span v-if="row.mcTypeUseScope == 'others'">其他</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="equipType"
        label="设备类型"
        width="100"
        align="center"
      >
        <template #default="{ row }">
          <span v-if="row.equipType == 'WIRED'">有线</span>
          <span v-if="row.equipType == 'WIRELESS'">无线</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="sim"
        label="Sim卡号"
        width="150"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="expiration"
        label="到期时间"
        width="180"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="activationTime"
        label="激活时间"
        width="180"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="reMark"
        label="备注"
        width="120"
        align="center"
      ></el-table-column>
      <el-table-column fixed="right" label="操作" width="120" align="center">
        <template #default="{ row }">
          <el-button
            v-if="isBtnPerm('/tq/api/bindProject')"
            type="text"
            @click="bindProject(row)"
          >
            绑定项目
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <bind-project ref="bind"></bind-project>
  </div>
</template>

<script>
import { getDeviceList } from '@/api/vehicle';
import bindProject from '@/views/iot/vehicle/bindProject';
export default {
  components: {
    bindProject,
  },
  data() {
    return {
      tableData: [],
      lazy: true,
      listLoading: true,
      elementLoadingText: '正在加载...',
    };
  },
  methods: {
    showData() {
      this.fetchData();
    },
    async fetchData() {
      this.listLoading = true;
      const { data } = await getDeviceList();
      this.tableData = data;
      setTimeout(() => {
        this.listLoading = false;
      }, 500);
    },
    bindProject(row) {
      this.$refs['bind'].bindProduct(row);
    },
  },
};
</script>

<style lang="scss">
.vab-base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  .vab-left-base {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .vab-input-base {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-right: 20px;

      .el-input {
        margin-right: 5px;
      }
    }
  }
  .vab-left-base {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}
.el-dialog {
  .el-dialog__header {
    border-bottom: 1px solid #e3e3e3 !important;
    padding: 15px 20px;
  }

  .dialog-footer {
    text-align: right;

    .el button {
      height: 36px !important;
      min-height: 36px !important;
      line-height: 366px !important;
    }
  }
}
</style>
