<template>
  <div class="carList">
    <div
      style="
        display: block !important;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        padding: 20px;
        margin-bottom: 20px;
        background-color: #fff;
      "
    >
      <div
        style="
          display: flex !important;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 15px;
        "
      >
        <h3 style="margin: 0; padding: 0; font-size: 16px">高级筛选</h3>
        <el-button type="text" @click="resetFilters">重置筛选</el-button>
      </div>

      <el-form
        :inline="true"
        :model="filterForm"
        style="display: flex !important; flex-wrap: wrap"
      >
        <!-- 日期范围筛选 -->
        <el-form-item
          label="日期范围"
          style="
            display: inline-flex !important;
            margin-right: 20px;
            margin-bottom: 18px;
          "
        >
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            @change="handleDateRangeChange"
          >
          </el-date-picker>
        </el-form-item>

        <!-- 租借类型筛选 -->
        <el-form-item
          label="租借类型"
          style="
            display: inline-flex !important;
            margin-right: 20px;
            margin-bottom: 18px;
          "
        >
          <el-select
            v-model="filterForm.mode"
            placeholder="全部"
            clearable
            @change="handleFilterChange"
          >
            <el-option label="按时租定" :value="0"></el-option>
            <el-option label="按天租定" :value="1"></el-option>
          </el-select>
        </el-form-item>

        <!-- 金额范围筛选 -->
        <el-form-item
          label="金额范围"
          style="
            display: inline-flex !important;
            margin-right: 20px;
            margin-bottom: 18px;
          "
        >
          <el-input-number
            v-model="filterForm.minAmount"
            :min="0"
            :precision="1"
            :step="10"
            placeholder="最小金额"
            @change="handleFilterChange"
          >
          </el-input-number>
          <span style="margin: 0 5px">至</span>
          <el-input-number
            v-model="filterForm.maxAmount"
            :min="0"
            :precision="1"
            :step="10"
            placeholder="最大金额"
            @change="handleFilterChange"
          >
          </el-input-number>
        </el-form-item>

        <!-- 停车场筛选 -->
        <el-form-item
          label="停车场"
          style="
            display: inline-flex !important;
            margin-right: 20px;
            margin-bottom: 18px;
          "
        >
          <el-select
            v-model="filterForm.parking_id"
            placeholder="全部停车场"
            clearable
            @change="handleFilterChange"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <!-- 搜索关键词 -->
        <el-form-item
          label="关键词"
          style="
            display: inline-flex !important;
            margin-right: 20px;
            margin-bottom: 18px;
          "
        >
          <el-input
            v-model="filterForm.keyword"
            placeholder="车牌号/用户名"
            prefix-icon="el-icon-search"
            clearable
            @input="handleFilterChange"
          >
          </el-input>
        </el-form-item>

        <!-- 订单状态筛选 -->
        <el-form-item
          label="订单状态"
          style="
            display: inline-flex !important;
            margin-right: 20px;
            margin-bottom: 18px;
          "
        >
          <el-select
            v-model="filterForm.orderStatus"
            placeholder="全部"
            clearable
            @change="handleFilterChange"
          >
            <el-option label="进行中" :value="0"></el-option>
            <el-option label="已完成" :value="1"></el-option>
            <el-option label="已取消" :value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <Table ref="table" :table_config="table_config">
      <!-- 入库图片 -->
      <template #inPicture="{ data }">
        <img :src="data.inPicture" style="width: 80%" />
      </template>
      <!-- 出库图片 -->
      <template #outPicture="{ data }">
        <img :src="data.outPicture" style="width: 80%" />
      </template>
      <!-- 编辑/删除 -->
      <template #operation="{ data }">
        <!-- @click="editParking(data.id)"  -->
        <el-button type="primary" size="small" @click="detailmember(data)"
          >评价</el-button
        >
        <el-button size="small" @click="orderPact(data)">还车</el-button>
        <!-- <el-button size="small"  @click="returnCar(data)">还车</el-button> -->
        <!-- 上传照片弹窗 -->
      </template>
    </Table>
    <!-- 评论 -->
    <orderReview ref="dialog"></orderReview>
    <!-- 归还 -->
    <orderPact ref="pact"></orderPact>
  </div>
</template>

<script>
import Form from "@/components/Form/form";
import Table from "@/components/TableData/table";
import orderReview from "./orderReview.vue";
import orderPact from "./orderPact.vue";
import CityArea from "@/components/Commons/cityArea";
import Upload from "@/components/Upload/index";
export default {
  name: "CarList",
  components: { Form, CityArea, Table, orderReview, orderPact, Upload },
  data() {
    return {
      dialogVisible: false,
      imageUrl: "",
      orderMoneys: "",
      // 筛选表单
      filterForm: {
        mode: null,
        minAmount: null,
        maxAmount: null,
        parking_id: null,
        keyword: "",
        orderStatus: null,
        startDate: null,
        endDate: null,
      },
      // 日期范围
      dateRange: null,
      // 停车场选项
      options: [],
      // 表格配置
      table_config: {
        table_headers: [
          { label: "订单号", prop: "orderId" },
          { label: "车牌号", prop: "carContent" },
          { label: "租车人", prop: "userName" },
          { label: "车位号", prop: "carNumber" },
          { label: "套餐名称", prop: "modeName" },
          { label: "停车场", prop: "parkingName" },
          {
            label: "出库图片",
            prop: "outPicture",
            type: "slot",
            slotName: "outPicture",
          },
          {
            label: "入库图片",
            prop: "inPicture",
            type: "slot",
            slotName: "inPicture",
          },
          {
            label: "模式",
            prop: "mode",
            type: "function",
            callback: (row) => {
              return row.mode === 0 ? "时租" : row.mode === 1 ? "日租" : "日租";
            },
          },
          { label: "入库时间", prop: "inTime", formatter: this.formatDateTime },
          {
            label: "出库时间",
            prop: "outTime",
            formatter: this.formatDateTime,
          },
          { label: "订单金额", prop: "orderMoney" },
          {
            label: "状态",
            prop: "orderStatus",
            type: "function",
            callback: (row) => {
              return row.orderStatus === 0
                ? "未完成"
                : row.orderStatus === 1
                ? "已完成"
                : "未完成";
            },
          },
          { label: "操作", type: "slot", slotName: "operation", width: 160 },
        ],
        axios_config: {
          url: "/FindOrderById",
          method: "POST",
        },
        requestData: {
          userId: window.localStorage.getItem("userId"),
          pageNumber: 1,
          pageSize: 10,
        },
        checkedColumn: true,
        pagination: true,
      },
      // 防止网络慢，多次点击的
      delete_id: "",
      switch_id: "",
    };
  },
  computed: {
    // 格式化日期时间
    formatDateTime() {
      return (dateTimeString) => {
        if (!dateTimeString) return ""; // 如果日期时间为空，则返回空字符串
        const date = new Date(dateTimeString); // 创建日期时间对象
        const year = date.getFullYear(); // 获取年份
        const month = ("0" + (date.getMonth() + 1)).slice(-2); // 获取月份，并补零
        const day = ("0" + date.getDate()).slice(-2); // 获取日期，并补零
        const hours = ("0" + date.getHours()).slice(-2); // 获取小时，并补零
        const minutes = ("0" + date.getMinutes()).slice(-2); // 获取分钟，并补零
        const seconds = ("0" + date.getSeconds()).slice(-2); // 获取秒钟，并补零
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; // 拼接日期时间字符串
      };
    },
  },
  created() {
    // 获取停车场选项
    this.fetchParkingOptions();
  },
  methods: {
    // 获取停车场选项
    fetchParkingOptions() {
      // 这里需要根据实际API修改
      this.$axios
        .post("/GetParkingList")
        .then((res) => {
          if (res.data.code === 200) {
            this.options = res.data.data.map((item) => {
              return {
                value: item.id,
                label: item.parkingName,
              };
            });
          }
        })
        .catch((err) => {
          console.error("获取停车场选项失败", err);
        });
    },
    // 重置筛选条件
    resetFilters() {
      this.filterForm = {
        mode: null,
        minAmount: null,
        maxAmount: null,
        parking_id: null,
        keyword: "",
        orderStatus: null,
        startDate: null,
        endDate: null,
      };
      this.dateRange = null;
      this.refreshTable();
    },
    // 处理日期范围变化
    handleDateRangeChange(val) {
      if (val) {
        this.filterForm.startDate = val[0];
        this.filterForm.endDate = val[1];
      } else {
        this.filterForm.startDate = null;
        this.filterForm.endDate = null;
      }
      this.handleFilterChange();
    },
    // 处理筛选条件变化
    handleFilterChange() {
      // 延迟一下以防止频繁请求
      clearTimeout(this.filterTimer);
      this.filterTimer = setTimeout(() => {
        this.refreshTable();
      }, 300);
    },
    // 刷新表格数据
    refreshTable() {
      // 构建查询参数
      const params = {
        ...this.table_config.requestData,
        ...this.filterForm,
      };

      // 更新表格组件的请求数据
      if (this.$refs.table) {
        this.$refs.table.loadData(params);
      }
    },
    showDialog() {
      this.dialogVisible = true;
    },
    closeDialog() {
      this.dialogVisible = false;
    },
    handleUploadSuccess(url) {
      this.imageUrl = url;
    },
    // 评论
    detailmember(data) {
      this.$refs.dialog.open(data);
    },
    // 合同
    orderPact(data) {
      if (data.orderStatus == 1 || data.inTime != null) {
        this.$message.error("订单已完成");
      } else {
        this.$refs.pact.open(data);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.carList {
  padding: 20px;
}
</style>
