<template>
  <div>
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
      <el-form-item label="姓名" prop="graduateName">
        <el-input
          v-model="queryParams.graduateName"
          placeholder="请输入姓名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="手机号" prop="graduateTelphone">
        <el-input
          v-model="queryParams.graduateTelphone"
          placeholder="请输入手机号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="身份证号" prop="graduateIdCard">
        <el-input
          v-model="queryParams.graduateIdCard"
          placeholder="请输入身份证号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
        >
          搜索
        </el-button>
      </el-form-item>
    </el-form>
    <el-row>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        :header-cell-style="{ backgroundColor: '#F5F7FA' }"
        :cell-style="{ color: '#303133' }"
      >
        <el-table-column
          prop="checkOutDate"
          label="退房时间"
          :show-overflow-tooltip="true"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="roomNamePath"
          label="入住房间"
          :show-overflow-tooltip="true"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="graduateName"
          label="姓名"
          :show-overflow-tooltip="true"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="genderName"
          label="性别"
          align="center"
          width="50"
        ></el-table-column>
        <el-table-column
          prop="telephone"
          label="手机号码"
          :show-overflow-tooltip="true"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="idCard"
          label="身份证号"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop=""
          label="资格核验"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>

        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <!-- 办理完成(待释放房源) -->
            <el-button
              type="text"
              v-if="scope.row.status === '办理完成'"
              style="color: #83d098"
            >
              办理完成
            </el-button>
            <!-- 办理中(待退还保证金) -->
            <el-button type="text" v-if="scope.row.status === '办理中'">
              办理中
            </el-button>
            <!-- 待办理(3天) -->
            <el-button
              type="text"
              v-if="scope.row.status === '待办理'"
              style="color: #ee952f"
            >
              待办理
            </el-button>
            <!-- 已超期 -->
            <el-button
              type="text"
              v-if="scope.row.status === '已超期'"
              style="color: #ff2c03"
            >
              已超期
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作 " align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="handleAction(action, scope.row)"
            >
              退房办理
            </el-button>
            <!-- 释放房源 -->
            <el-button
              type="primary"
              size="mini"
              v-if="scope.row.status === '办理完成'"
              @click="handleAction(action, scope.row)"
            >
              释放房源
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-row>
  </div>
</template>

<script>
import { listCheckoutAlert } from "@/api/residence/checkout";
export default {
  name: "CommonReminder",
  props: {},
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        graduateName: "",
        graduateTelphone: "",
        graduateIdCard: "",
      },
      tableData: [],
      total: 0,
    };
  },
  created() {},
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      try {
        const response = await listCheckoutAlert(this.queryParams);
        if (response.code === 200) {
          this.tableData = response.rows;
          this.total = response.total;
        }
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    },
    handleQuery() {
      this.getList();
    },
    // 跳转办理入住
    handleAction(action, row) {},
  },
};
</script>
