<template>
  <a-card :bordered="false">
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-tag color="pink" v-if="buildingFloorSearchTag.name">
        {{ buildingFloorSearchTag.name }}
        <a-icon type="close" @click="onFliterClose" />
      </a-tag>
      <a-button @click="handleAdd" type="primary" icon="plus"
        >新增房间</a-button
      >
      <a-button @click="onAddBatch" type="primary" icon="tags"
        >批量新增</a-button
      >
      <a-popconfirm title="确定全部删除吗?" @confirm="delAll">
        <a-button
          :disabled="delLoading"
          :loading="delLoading"
          type="primary"
          icon="stop"
          >全部删除</a-button
        >
      </a-popconfirm>

      <a-popconfirm
        v-if="selectedRowKeys.length > 0"
        title="确定删除吗?"
        @confirm="delBatch"
      >
        <a-button
          :disabled="delLoading"
          :loading="delLoading"
          icon="stop"
          style="margin-left: 8px"
        >
          批量删除</a-button
        >
      </a-popconfirm>

      <!-- <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-button style="margin-left: 8px">
          批量操作 <a-icon type="down"
        /></a-button>
      </a-dropdown> -->
      <a-button type="primary" @click="searchQuery" icon="search"
        >查询</a-button
      >
    </div>

    <!-- table区域-begin -->
    <div>
      <a-table
        ref="table"
        size="middle"
        :scroll="{ x: true }"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
        }"
        class="j-table-force-nowrap"
        @change="handleTableChange"
      >
        <template slot="numberSlot" slot-scope="text, record">
          <div style="display: flex; align-items: center">
            <a-input v-model="record.passWord" @blur="(e) => handleNumber(e, record)" />
          </div>
        </template>
        <template slot="layoutId" slot-scope="text, record">
          {{ getLayoutName(record) }}
        </template>
        <template slot="prefix_name" slot-scope="text, record">
          {{ (record.prefix || "") + record.name }}
        </template>
        <template slot="pictureSlot" slot-scope="text, record">
          <img :src="record.cover" style="width:40px;height40px;" />
        </template>
        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>

        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>

          <a-divider type="vertical" />
          <a-popconfirm
            title="确定删除吗?"
            @confirm="() => handleDelete(record.id)"
          >
            <a>删除</a>
          </a-popconfirm>
          <a-divider type="vertical" />
          <a @click="handleImage(record)">图片</a>
        </span>
      </a-table>
    </div>
    <room-num-modal ref="modalForm" @ok="modalFormOk"></room-num-modal>
    <room-imgs @saveOk="onImgSave" ref="roomimgmodal"></room-imgs>
  </a-card>
</template>
  
<script>
import { httpAction, getAction } from "@/api/manage";
import { JeecgListMixin } from "@/mixins/JeecgListMixin";
import roomNumModal from "./roomNumModal.vue"; // todo roomLayoutForm 需要替换成房型的表单弹窗
import roomImgs from "./roomImagesForm.vue";
import { getAllLayouts } from "@/api/roomLayout";
import { delBatch, delAll } from "@/api/roomBuildingApi";
let hotelInfo = JSON.parse(localStorage.getItem("storeInfo"));
export default {
  mixins: [JeecgListMixin],
  components: {
    roomNumModal,
    roomImgs,
  },
  data() {
    return {
      delLoading: false,
      layouts: [],
      queryParam: {},
      // 分页参数
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ["10", "20", "30"],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条";
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      // 表头
      columns: [
        {
          title: "商家",
          align: "center",
          dataIndex: "hotelName",
        },
        {
          title: "楼栋",
          align: "center",
          dataIndex: "buildName",
        },
        {
          title: "楼层",
          align: "center",
          dataIndex: "floorName",
        },
        {
          title: "房型",
          align: "center",
          dataIndex: "layoutId",
          scopedSlots: { customRender: "layoutId" },
        },
        {
          title: "房号",
          align: "center",
          dataIndex: "name",
          scopedSlots: { customRender: "prefix_name" },
        },
        {
          title: "门锁密码",
          align: "center",
          dataIndex: "passWord",
          scopedSlots: { customRender: "numberSlot" },
        },
        {
          title: "操作",
          dataIndex: "action",
          align: "center",
          fixed: "right",
          width: 147,
          scopedSlots: { customRender: "action" },
        },
      ],
      url: {
        // list: 'org.jeecg.modules.business/busMarketMember/list',
        list: "/rooms/cesRooms/list",
        delete: "/rooms/cesRooms/remove",
        deleteBatch: "/rooms/cesRooms/deleteBatch",
        exportXlsUrl: "/rooms/cesRooms/exportXls",
        importExcelUrl: "rooms/cesRooms/importExcel",
      },
      buildingFloorSearchTag: {
        name: null,
      },
      dictOptions: {},
      superFieldList: [],
      selectedRowKeys: [],
      isorter: {
        column: "createTime",
        order: "desc",
      },
    };
  },
  created() {
    // this.loadData()
    getAllLayouts().then((res) => {
      if (res.code == 200) {
        this.layouts = res.result.records;
        this.loadData();
      }
    });
  },
  methods: {
    handleNumber(e, record) {
      const that = this;
      let method = "put";
      httpAction("/rooms/cesRooms/modify", record, method)
        .then((res) => {
          if (res.success) {
            that.$message.success(res.message);
          } else {
            that.$message.warning(res.message);
          }
        });
    },
    onImgSave() {
      this.loadData();
    },
    onFliterClose() {
      this.filters["buildId"] = null;
      this.filters["floorId"] = null;
      this.ipagination.current = 1;
      this.buildingFloorSearchTag.name = null;
      this.loadData();
    },
    // 搜索
    searchParam(id, name, isBuilding) {
      this.$set(this.buildingFloorSearchTag, "name", name);
      if (isBuilding) {
        this.filters["buildId"] = id;
        if (this.filters["floorId"]) {
          delete this.filters.floorId;
        }
      } else {
        this.filters["floorId"] = id;
        if (this.filters["buildId"]) {
          delete this.filters.buildId;
        }
      }
      this.loadData();
    },
    getLayoutName(row) {
      let i = this.layouts.findIndex((s) => s.id == row.layoutId);
      if (i > -1) {
        return this.layouts[i].name;
      }
      return "";
    },
    // 批量删除
    delBatch() {
      let hotelInfo = JSON.parse(localStorage.getItem("storeInfo"));
      let keys = this.selectedRowKeys;
      this.delLoading = true;
      delBatch({
        hotelId: hotelInfo.id,
        idStr: keys.toString(),
      })
        .then((res) => {
          if (res.code == 200) {
            this.selectedRowKeys = [];
            this.$message.success("删除成功");
            this.loadData();
          }
        })
        .finally((_) => {
          this.delLoading = false;
        });
    },
    // 删除所有
    delAll() {
      let hotelInfo = JSON.parse(localStorage.getItem("storeInfo"));
      this.delLoading = true;
      delAll({
        hotelId: hotelInfo.id,
      })
        .then((res) => {
          if (res.code == 200) {
            this.selectedRowKeys = [];
            this.$message.success("全部删除成功");
            this.loadData();
          }
        })
        .finally((_) => {
          this.delLoading = false;
        });
    },
    // 批量添加按钮
    onAddBatch() {
      this.$router.push("/tenant/gen/rooms");
    },
    // 全部删除
    onDelAll() {},
    // 显示图片弹窗
    handleImage(row) {
      this.$refs.roomimgmodal.setModel(row);
    },
    onSaveOk() {
      this.loadData();
    },
  },
};
</script>
<style scoped>
@import "~@assets/less/common.less";
</style>