<template>
  <div>
    <div style="margin: auto 20px">
      <!-- 刷新按钮 -->
      <el-button size="medium" type="primary" @click="refreshList"
        >刷新</el-button
      >
    </div>
    <div class="app-container">
      <el-table v-loading="loading" :data="connectorList">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="枪口编号" prop="pileConnectorCode" />
        <el-table-column label="状态" align="center" prop="status">
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.connector_status"
              :value="scope.row.status"
            />
          </template>
        </el-table-column>
        <el-table-column label="电桩类型" align="center" prop="type">
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.connector_type"
              :value="scope.row.type"
            />
          </template>
        </el-table-column>
        <!--<el-table-column label="充电时长" align="center" prop="type" />-->

        <el-table-column
          label="功率（kW）"
          align="center"
          prop="instantPower"
        />
        <el-table-column label="电流（A）" align="center" prop="current" />
        <el-table-column label="电压（V）" align="center" prop="voltage" />
        <el-table-column label="温度（°C）" align="center" prop="temperature" />
        <el-table-column label="SOC（%）" align="center" prop="soc" />
        <!--<el-table-column label="用户信息" align="center" prop="plantformOrderNum" />-->
        <!--<el-table-column label="订单" align="center" prop="plantformOrderNum" />-->
        <!--<el-table-column label="车牌号" align="center" prop="plantformOrderNum" />-->
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>
<script>
import { queryConnectorListByParams } from "@/api/pile/connector";

export default {
  name: "",
  dicts: ["connector_type", "connector_status"],
  // props: {
  //   stationId: {
  //     type: String,
  //     required: true
  //   }
  // },
  data() {
    return {
      // 总条数
      total: 0,
      // 遮罩层
      loading: false,
      connectorList: [],
      queryParams: {
        stationIdList: [],
        pageNum: 1,
        pageSize: 10,
      },
      stationId: this.$route.params.id,
    };
  },
  created() {
    // this.getList();
  },
  methods: {
    refreshList() {
      this.loading = true;
      setTimeout(() => {
        this.getList();
        this.loading = false;
      }, 800);
    },
    getList() {
      this.queryParams.stationIdList.push(this.stationId);
      this.loading = true;
      // console.log(this.queryParams, "充电站接口列表");
      queryConnectorListByParams(this.queryParams).then((response) => {
        this.connectorList = response.rows;
        // console.log("接口列表", this.connectorList);
        this.total = response.total;
        this.loading = false;
      });
    },
  },
};
</script>
