<template>
  <div class="parkingList">
    <!-- Filter Section -->
    <el-form :inline="true" :model="formInline" class="filter-form">
      <el-form-item label="类型">
        <el-select
          v-model="formInline.type"
          placeholder="选择类型"
          @change="search"
        >
          <el-option label="室外" :value="1"></el-option>
          <el-option label="室内" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="区域">
        <el-input
          v-model="formInline.area"
          placeholder="请输入区域"
          @input="search"
        ></el-input>
      </el-form-item>
      <el-form-item label="关键字">
        <el-input
          v-model="formInline.keyWord"
          placeholder="请输入关键字"
          @input="search"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="resetForm('formInline')"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <!-- Table Component -->
    <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>
      </template>
    </Table>

    <!-- 地图弹窗 -->
    <MapDialog
      :dialogVisibleMap.sync="dialogVisibleMap"
      :parkingData="parkingData"
    ></MapDialog>
  </div>
</template>

<script>
import CityArea from "@/components/Commons/cityArea";
import MapDialog from "@/components/Dialog/mapDialog";
import Table from "@/components/TableData/table";

export default {
  name: "ParkingList",
  components: { CityArea, Map, MapDialog, Table },
  data() {
    return {
      formInline: {
        area: "", // Area filter
        type: "", // Type filter
        keyWord: "", // Keyword filter
      },
      loading: false,
      dialogVisibleMap: false,
      parkingData: {},
      table_config: {
        table_headers: [
          { label: "停车场名称", prop: "parkingName" },
          {
            label: "类型",
            prop: "type",
            type: "function",
            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",
          },
        ],
        axios_config: {
          url: "/AllParking",
          method: "POST",
        },
        requestData: {
          pageNumber: 1,
          pageSize: 10,
        },
        checkedColumn: true,
        pagination: true,
      },
      delete_id: "",
      switch_id: "",
    };
  },

  methods: {
    // 重置筛选条件
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.search();
    },

    // 执行搜索
    search() {
      const { type, area, keyWord } = this.formInline;
      const filters = {
        type: type !== "" ? type : undefined,
        area: area ? area : undefined,
        keyWord: keyWord ? keyWord : undefined,
      };
      // Update requestData with filters and reload the table
      this.$refs.table.updateRequestData(filters);
    },

    // 删除停车场
    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%;
  .filter-form {
    margin-bottom: 20px;
  }
}
</style>
