<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select
        placeholder="请选择楼盘"
        class="filter-item"
        v-model="listQuery.propertiesForSaleId"
        clearable
        filterable
      >
        <el-option
          v-for="item in buildingOptions"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>

      <el-select class="filter-item" v-model="listQuery.type" clearable>
        <el-option label="住房" value="0"></el-option>
        <el-option label="车位" value="1"></el-option>
        <!-- <el-option label="商铺" value="2"></el-option> -->
      </el-select>

      <el-input
        v-model="listQuery.roomNumber"
        placeholder="请输入房号"
        class="filter-item"
        clearable
      ></el-input>
      <el-input
        v-model="listQuery.building"
        placeholder="请输入楼栋"
        class="filter-item"
        clearable
      ></el-input>
      <el-input
        v-model="listQuery.houseType"
        placeholder="请输入户型"
        class="filter-item"
        clearable
      ></el-input>
      <!-- <el-select class="filter-item" v-model="listQuery.status" clearable>
        <el-option label="在售" value="SALE"></el-option>
        <el-option label="已售" value="SOLD"></el-option>
        <el-option label="下架" value="OFF_SHELF"></el-option>
      </el-select> -->

      <el-button
        class="filter-item"
        type="primary"
        @click="handleSearch"
        icon="el-icon-search"
        >搜索</el-button
      >
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
    >
      <el-table-column label="楼盘" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.propertiesForSaleName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="类型" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.type | typeFilter }}</span>
        </template>
      </el-table-column>

      <el-table-column label="楼栋" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.building }}</span>
        </template>
      </el-table-column>

      <el-table-column label="楼层" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.floor }}</span>
        </template>
      </el-table-column>

      <el-table-column label="房号/车位号" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.roomNumber }}</span>
        </template>
      </el-table-column>

      <el-table-column label="户型" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.houseType }}</span>
        </template>
      </el-table-column>

      <el-table-column label="面积" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.area }}</span>
        </template>
      </el-table-column>

      <el-table-column label="价格" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.price }}</span>
        </template>
      </el-table-column>

      <el-table-column label="销售价格" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.salePrice }}</span>
        </template>
      </el-table-column>

      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.status | statusFilter }}</span>
        </template>
      </el-table-column>

      <el-table-column label="用户类型" align="center">
        <template slot-scope="scope">
          <span>{{
            scope.row.status === "SOLD"
              ? scope.row.idCard
                ? "安置用户"
                : "普通用户"
              : "--"
          }}</span>
        </template>
      </el-table-column>

      <el-table-column label="用户姓名" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>

      <el-table-column label="身份证号" align="center" width="95">
        <template slot-scope="scope">
          <span>{{ scope.row.idCard }}</span>
        </template>
      </el-table-column>

      <!-- <el-table-column label="购房总价" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.price}}</span>
        </template>
      </el-table-column> -->

      <!-- <el-table-column label="楼盘id" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.propertiesForSaleId }}</span>
        </template>
      </el-table-column> -->
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { list } from "@/api/housingTicket";
import Pagination from "@/components/Pagination/index";
import { list as buildingList } from "@/api/building";

export default {
  components: { Pagination },

  filters: {
    typeFilter(type) {
      const typeMap = {
        0: "住房",
        1: "车位",
        2: "商铺",
      };
      return typeMap[type];
    },
    statusFilter(status) {
      const statusMap = {
        SALE: "在售",
        SOLD: "已售",
        OFF_SHELF: "下架",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      total: 0,
      list: [],
      listQuery: {
        current: 1,
        size: 10,
        status: "SOLD",
      },
      listLoading: false,
      downloadLoading: false,
      dialogBind: false,
      form: {},
      textMap: {
        update: "修改",
        create: "创建",
      },
      dialogStatus: "",
      buildingOptions: [],
    };
  },
  created() {
    this.getList();
    this.getBuildings();
  },
  methods: {
    getList() {
      list(this.listQuery).then((res) => {
        this.list = res.d.records;
        this.total = res.d.total;
      });
    },
    getBuildings() {
      buildingList({ current: 1, size: 99999 }).then((res) => {
        this.buildingOptions = res.d.records;
      });
    },
    handleSearch() {
      this.listQuery.current = 1;
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
.el-input {
  width: 200px;
  margin-right: 10px;
}
.el-select {
  margin-right: 10px;
}
</style>
