<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="vehicleModels"-->
      <!--        label="车辆品牌"-->
      <!--        width="150"-->
      <!--        align="center"-->
      <!--      ></el-table-column>-->
      <!--      <el-table-column-->
      <!--        prop="carFrame"-->
      <!--        label="车架号"-->
      <!--        width="150"-->
      <!--        align="center"-->
      <!--      ></el-table-column>-->
      <!--      <el-table-column-->
      <!--        prop="driverName"-->
      <!--        label="司机名称"-->
      <!--        width="150"-->
      <!--        align="center"-->
      <!--      ></el-table-column>-->
      <!--      <el-table-column-->
      <!--        prop="driverPhone"-->
      <!--        label="司机电话"-->
      <!--        width="150"-->
      <!--        align="center"-->
      <!--      ></el-table-column>-->
      <!--      <el-table-column-->
      <!--        prop="enabledFlag"-->
      <!--        label="是否启用"-->
      <!--        width="150"-->
      <!--        align="center"-->
      <!--      >-->
      <!--        <template #default="{ row }">-->
      <!--          <span v-if="row.enabledFlag == 0">不启用</span>-->
      <!--          <span v-if="row.enabledFlag == 1">启用</span>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <!--      <el-table-column-->
      <!--        prop="engineNumber"-->
      <!--        label="电机发动机号"-->
      <!--        width="150"-->
      <!--        align="center"-->
      <!--      ></el-table-column>-->
      <el-table-column
        prop="projectName"
        :label="$t('staff.bdxm')"
        width="150"
        align="center"
      >
        <template #default="{ row }">
          <span v-for="(v, k) in row.projects" :key="k" style="display: block">
            {{ v.name }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="imei"
        label="IMEI"
        width="350"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="deviceName"
        :label="$t('maintenance.sbmc')"
        width="250"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="mcType"
        :label="$t('vehicles.sbxh')"
        width="150"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="mcTypeUseScope"
        :label="$t('vehicles.jx')"
        width="120"
        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="150"
        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="150"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="activationTime"
        :label="$t('vehicles.jhsj')"
        width="150"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="reMark"
        :label="$t('alarm.bz')"
        width="150"
        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 './bindProject';
export default {
  components: {
    bindProject,
  },
  data() {
    return {
      tableData: [],
      lazy: true,
      listLoading: true,
      elementLoadingText: '正在加载...',
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    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">
.el-submenu__title:hover {
  background-color: rgba(#1890ff, 0.085) !important;
  color: hsla(208, 100%, 55%, 0.95) !important;
}
.el-dialog {
  .el-dialog__header {
    background-color: #1890ff !important;
    padding: 15px 20px;
    text-align: left !important;
    .el-dialog__title {
      color: #e8f4ff !important;
    }
    .el-dialog__headerbtn .el-dialog__close {
      color: #e8f4ff !important;
    }
  }
  .el-dialog__body {
    padding: 20px !important;
    .el-form-item {
      margin-bottom: 10px !important;
      .el-input {
        width: 100% !important;
      }
      .el-select {
        width: 100% !important;
      }
      .el-cascader {
        width: 100% !important;
      }
    }
    .el-form-item:last-child {
      margin-bottom: 20px !important;
    }
  }
  .dialog-footer {
    text-align: right;
  }
}
</style>
