<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="filter-left">
        <div class="filter-item">
          房间名称:
          <el-input
            v-model="query.roomName"
            placeholder="请输入内容"
            style="width: 110px"
          ></el-input>
        </div>
        <el-button
          type="primary"
          icon="el-icon-search"
          class="search-button"
          @click="queryData()"
          >查询</el-button
        >
      </div>
      <div class="handle-button-right">
        <el-button icon="el-icon-plus" type="success" @click="addRoom()"
          >新增</el-button
        >
        <!-- <el-button icon="el-icon-delete" type="danger" @click="batchDelete"
          >删除</el-button
        > -->
      </div>
    </div>

    <el-divider></el-divider>
    <el-table
      id="out-table"
      :data="tableData"
      stripe
      border
      :header-cell-style="{ background: '#EBF1FF', color: '#606266' }"
      style="width: 100%"
    >
      <el-table-column prop="floorName" label="楼层名称"></el-table-column>
      <el-table-column prop="roomName" label="房间名称"></el-table-column>
      <el-table-column prop="creatTime" label="添加时间"></el-table-column>

      <el-table-column label="操作" width="130" fixed="right">
        <template slot-scope="scope">
          <el-button
            icon="el-icon-edit"
            style="color: #406ce5"
            @click="updateBuild(scope.$index, scope.row)"
            >修改</el-button
          >
          <el-button
            icon="el-icon-delete"
            style="color: #f27979"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="this.title_value" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <div class="jz" v-if="add">
          <strong class="strong">楼层名称:</strong>
          <el-select  style="margin-left:0px" v-model="tableData2.roomFloorUuid" placeholder="请选择" @change="select" >
            <el-option
              v-for="item in tableData2"
              :key="item.id"
              :label="item.floorName"
              :value="item.roomFloorUuid"
            >
            </el-option>
          </el-select>
        </div>
        <el-form-item label="楼层名称:" :label-width="formLabelWidth" v-if="edit">
           <el-input
            v-model="form.floorName"
            autocomplete="off"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="房间名称:" :label-width="formLabelWidth">
          <el-input
            v-model="form.roomName"
            autocomplete="off"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          @click="dialogFormVisible = false"
          style="background: #f6f6f6"
          >关 闭</el-button
        >
        <el-button type="primary" @click="add_update_build()">{{
          this.title_value
        }}</el-button>
      </div>
    </el-dialog>

    <el-pagination
      background
      @current-change="handleCurrentChange"
      :page-sizes="[5, 10, 20, 30, 40]"
      @size-change="handleSizeChange"
      :current-page="pageNo"
      :page-size="pageSize"
      layout="sizes,prev, pager, next"
      :total="totalCount"
    >
    </el-pagination>
  </div>
</template>


<script>
import api from "@/api/building/room.mage";

export default {
  name: "javascriptthree",
  data() {
    return {
      //表单弹窗
      dialogFormVisible: false,
      //表单
      form: {
        id:undefined,
        roomName: undefined,
        floorName:undefined,
        roomFloorUuid: undefined,
        roomUuid:undefined,
        pageNo: undefined,
        pageSize: undefined
      },
      //表单输入框宽度
      formLabelWidth: "120px",
      //存储列表数据
      tableData: [],
      tableData2: [],
      //存储建筑下拉列表数据
      building_Data: [],
      //存储列表总数
      totalCount: 0,
      //列表每页条目数
      pageSize: 20,
      //开始页
      pageNo: 1,
      //存储动态列
      cols: [],

      //房间名称
      roomName_value: "",
      //房间唯一编码
      roomFloorUuid_value: "",
      //form表单房间名称信息存储
      form_roomFloorUuid_value: "",
      //弹窗title
      title_value: "",
      //修改单条信息存储
      update_row: "",
      query:{
        roomName: undefined,
        pageNo: 1,
        pageSize: 20,
      },
      edit:false,
      add:false,
      roomFloorUuid:undefined
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    //重置搜索条件
    reset(){
      this.form.id = undefined;
      this.form.roomName = undefined;
      this.form.floorName = undefined;
      this.form.roomFloorUuid = undefined;
      this.form.roomUuid = undefined;
      this.form.pageNo = this.pageNo,
      this.form.pageSize = this.pageSize

      this.query.roomName = undefined
      this.query.pageNo = this.pageNo
      this.query.pageSize = this.pageSize

    },
    //初始列表
    getData() {
      api.queryRoom(this.form).then((Response) => {
        if(Response.data.pageList){
          this.tableData = Response.data.pageList
          this.reset()
        }
      });
    },
    //条件查询
    queryData(){
      api.queryRoom(this.query).then((Response) => {
        if(Response.data.pageList){
          this.tableData = Response.data.pageList
        }
      });
    },


    addRoom() {
      this.title_value = "新增";
      this.edit = false
      this.add = true
      this.tableData2 = this.tableData
      this.dialogFormVisible = true;
    },
    updateBuild(index, row) {
      this.form.id = row.id;
      this.title_value = "修改";
      this.edit = true
      this.add = false

      this.form.roomName = row.roomName;
      this.form.roomUuid = row.roomUuid;
      this.form.floorName = row.floorName;
      this.form.roomFloorUuid = row.roomFloorUuid;

      this.dialogFormVisible = true;
    },
    //新增+修改
    add_update_build() {
      if (this.title_value === "修改") {
        api.updateRoom(this.form).then((request) => {
          this.$message({
            type: "success",
            message: "修改成功!",
          });
          this.dialogFormVisible = false;
          this.reset()
          this.getData();
        });
      } else if (this.title_value === "新增") {
        api.addRoom({roomFloorUuid:this.roomFloorUuid,roomName:this.form.roomName}).then((request) => {
          this.$message({
            type: "success",
            message: "新增成功!",
          });
          this.dialogFormVisible = false;
          this.reset()
          this.getData();
        });
      }
    },
    formatJson(filterVal, data) {
      return data.map((v) =>
        filterVal.map((j) => {
          if (j === "timestamp") {
            return parseTime(v[j]);
          } else {
            return v[j];
          }
        })
      );
    },
    handleDelete(index, row) {
      this.$confirm("确定删除吗?", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          api.updateRoom(this.form).then((request) => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.reset()
            this.getData();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //改变起始页
    handleCurrentChange(val) {
      this.pageNo = val;
      this.form.pageNo = this.pageNo
      this.query.pageNo = this.pageNo
      this.getData();
    },
    //改变每条数
    handleSizeChange(val) {
      this.pageSize = val;
      this.form.pageSize = this.pageSize
      this.query.pageSize = this.pageSize
      this.getData();
    },
     select(value){
      this.roomFloorUuid = value
    }
  },
};
</script>

<style>
.el-radio {
  width: 70px;
}
.handled {
  color: #8dcf6e;
}
.unhandle {
  color: #fe5d0e;
}

</style>
