<template>
  <div class="parkingList">
    <Table ref="table" :table_config="table_config">
      <!-- 查看地图 -->
      <template #coord="{ data }">
        <el-button type="success" size="small" @click="showMap(data)"
          >查看地图</el-button
        >
      </template>
      <!-- 查看车辆 -->
      <template #operation="{ data }">
        <el-button type="primary" size="small" @click="carParking(data.id)"
          >查看车辆</el-button
        >
        <!-- <el-button size="small" :loading="data.id === delete_id" @click="deleteParking(data.id)">删除</el-button> -->
      </template>
    </Table>
    <!-- 地图 -->
    <MapDialog
      :dialogVisibleMap.sync="dialogVisibleMap"
      :parkingData="parkingData"
    ></MapDialog>
  </div>
</template>

<script>
import CityArea from "@/components/Commons/cityArea";
import MapDialog from "@/components/Dialog/mapDialog";
// 封装的table组件
import Table from "@/components/TableData/table";

export default {
  name: "ParkingList",
  components: { CityArea, Map, MapDialog, Table },
  data() {
    return {
      // 表单的一些数据
      formInline: {
        area: "",
        type: "",
        enable: "",
        keyName: "",
        keyWord: "",
      },
      // 加载效果
      loading: false,
      // 地图显示
      dialogVisibleMap: false,
      // 传给地图弹窗的数据
      parkingData: {},
      // 组件的配置
      table_config: {
        table_headers: [
          { label: "停车场名称", prop: "parkingName" },
          {
            label: "类型",
            prop: "type",
            type: "function",
            // width: 80,
            callback: (row) => {
              return row.type ? "室外" : "室内";
            },
          },
          {
            label: "区域",
            prop: "area",
            type: "function",
            callback: (row) => {
              let region = row.address;
              if (region.slice(0, 2) === region.slice(2, 4)) {
                region = region.slice(2, region.length);
              }
              return region;
            },
          },
          { label: "可停放车辆", prop: "carsNumber" },
          
          {
            label: "位置",
            prop: "coord",
            type: "slot",
            slotName: "coord",
          },
          {
            label: "操作",
            prop: "operation",
            type: "slot",
            slotName: "operation",
          },
        ],
        // 请求API
        axios_config: {
          url: "/AllParking",
          method: "POST",
        },
        // 请求参数
        requestData: {
          pageNumber: 1,
          pageSize: 10,
        },
        // 是否需要勾选列，不写默认true
        checkedColumn: true,
        // 是否需要分页，不写默认true
        pagination: true,
      },
      // 优化，网络请求删除多次点击
      delete_id: '',
      switch_id: ''
    };
  },

  methods: {
    
    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.$refs.cityArea.clearCheckedNodes();
      this.search()
    },
    // 删除停车场
    deleteParking(id) {
      this.delete_id = id
      this.$confirm("是否删除该停车场", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        let result = await this.$API.parking.deleteParking(id);
        if (result.code === 200) {
          this.$refs.table.getTableData();
          this.delete_id = ''
          return this.$message({
            type: "success",
            message: "删除成功!",
          });
        } else this.delete_id = ''
      });
    },
    // 查看位置
    showMap(data) {
      this.dialogVisibleMap = true;
      this.parkingData = data;
    },
    // 编辑
    carParking(id) {
      this.$router.push({ name: "Car", query: { id } });
    },

  },
};
</script>

<style lang="scss" scoped>
.parkingList {
  padding: 20px;
  width: 100%;
  .deleteAll {
    margin-bottom: 20px;
  }
}
</style>