<template>
  <div class="manage-container">
    <el-table
      v-loading="listLoading"
      :data="tableData"
      stripe
      border
      style="width: 100%"
    >
      <el-table-column
        fixed
        prop="vehicleName"
        :label="$t('vehicles.clmc')"
        width="150"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="vehicleIcon"
        :label="$t('vehicles.cltb')"
        width="150"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="vehicleNumber"
        :label="$t('vehicle.cph')"
        width="150"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="projectName"
        :label="$t('staff.bdxm')"
        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="$t('maintenance.sbmc')"
        width="180"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="mcType"
        :label="$t('vehicles.sbxh')"
        width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="mcTypeUseScope"
        :label="$t('vehicles.jx')"
        width="100"
        align="center"
      >
        <template #default="{ row }">
          <span v-if="row.mcTypeUseScope == 'aotomobile'">
            {{ $t('vehicles.qc') }}
          </span>
          <span v-if="row.mcTypeUseScope == 'electromobile'">
            {{ $t('vehicles.ddc') }}
          </span>
          <span v-if="row.mcTypeUseScope == 'personal'">
            {{ $t('vehicles.gr') }}
          </span>
          <span v-if="row.mcTypeUseScope == 'pet'">
            {{ $t('vehicles.cw') }}
          </span>
          <span v-if="row.mcTypeUseScope == 'plane'">
            {{ $t('vehicles.fj') }}
          </span>
          <span v-if="row.mcTypeUseScope == 'others'">
            {{ $t('vehicles.qt') }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="equipType"
        :label="$t('dataEnquiry.sblx')"
        width="100"
        align="center"
      >
        <template #default="{ row }">
          <span v-if="row.equipType == 'WIRED'">{{ $t('vehicles.yx') }}</span>
          <span v-if="row.equipType == 'WIRELESS'">
            {{ $t('vehicles.wx') }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="sim"
        :label="$t('vehicles.smkh')"
        width="150"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="expiration"
        :label="$t('vehicles.dqsj')"
        width="180"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="activationTime"
        :label="$t('vehicles.jhsj')"
        width="180"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="reMark"
        :label="$t('alarm.bz')"
        width="120"
        align="center"
      ></el-table-column>
      <el-table-column
        fixed="right"
        :label="$t('defalult.cz')"
        width="120"
        align="center"
      >
        <template #default="{ row }">
          <el-button type="text" @click="bindProject(row)">
            {{ $t('staff.bdxm') }}
          </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>
