<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="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="绑定项目"
        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="设备名称"
        width="250"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="mcType"
        label="设备型号"
        width="150"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="mcTypeUseScope"
        label="机型"
        width="120"
        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="150"
        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="150"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="activationTime"
        label="激活时间"
        width="150"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="reMark"
        label="备注"
        width="150"
        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 './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>
