<template>
  <div>
    <div class="cardTitle">房屋管理</div>
    <div class="search-box">
      <a-row>
        <a-col :span="20">
          <a-space size="large">
            <a-input v-model="searchForm.name" placeholder="请输入房间号" />
            <a-select style="width: 200px" v-model='searchForm.manageEstateTypeId' placeholder="请选择房屋类型" >
				<a-select-option v-for="item in options.houseType" :key="item.id" :value="item.id">{{item.name}}</a-select-option>
			</a-select>
            <a-select style="width: 200px" v-model='searchForm.isEnableLease' placeholder="请选择是否开启租赁" >
				<a-select-option v-for="item in options.isEnableLease" :key="item.id" :value="item.id">{{item.name}}</a-select-option>
			</a-select>
            <a-button type="primary" @click="getData">查 询</a-button>
            <a-button @click="reset">重 置</a-button>
          </a-space>
        </a-col>
        <a-col :span="4">
          <a-space>
            <a-button class="add-btn" @click="drawerConfig.addShow = true">添加房屋</a-button>
            <a-button @click="drawerConfig.houseType = true">房屋配置</a-button>
          </a-space>
        </a-col>
      </a-row>
    </div>
    <div class="main">
      <div style="margin-bottom: 16px">
        <!-- 批量操作 -->
        <a-select
          type="primary"
          v-model="activeAction"
          :disabled="!hasSelected"
          :loading="loading"
          style="width: 120px"
          @change="Actions"
          placeholder="请选择操作"
        >
          批量
          <a-select-option v-for="item in ActionsList" :key="item.value">
            {{ item.label }}
          </a-select-option>
        </a-select>
        <span style="margin-left: 8px">
          <template v-if="hasSelected">
            {{ `已选择 ${selectedRowKeys.length} 条` }}
          </template>
        </span>
      </div>
      <!-- 表格 -->
      <a-table
        :columns="columns"
        :data-source="tableData"
        :pagination="pagination"
        :scroll="{ x: 1400 }"
		@change="handleTableChange"
        :row-selection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
        }"
        :row-key="
          (record, index) => {
            return record.id;
          }
        "
      >
        <span slot="name" slot-scope="text, row">
          {{
            row.manageBuildingName +
            "栋/" +
            row.manageUnitName +
            "单元/" +
            row.floorLocation +
            "层-" +
            row.name +
            "室"
          }}
        </span>
        <span slot="action" slot-scope="text, row">
          <a-space>
            <a class="ant-dropdown-link" @click="edit(row)">编辑</a>
            <a class="ant-dropdown-link" @click="del([row.id])">删除</a>
          </a-space>
        </span>
        <span slot="tags" slot-scope="tag">
          <a-tag
            :color="tag === 1 ? 'volcano' : tag === 2 ? 'geekblue' : 'green'"
          >
            {{ tag === 1 ? "闲置" : tag === 2 ? "在住" : "在租" }}
          </a-tag>
        </span>
        <span slot="switch" slot-scope="switchV, row">
          <a-switch
            :checked="switchV === 1"
            @change="handleEnable(row)"
          ></a-switch>
        </span>
      </a-table>
    </div>
    <a-drawer
      title="添加房屋"
      :width="720"
      :visible="drawerConfig.addShow"
      :body-style="{ paddingBottom: '80px' }"
      @close="addClose"
    >
      <div class="drawer-content">
        基本信息
        <a-divider></a-divider>
        <vue-form ref="form" @success='addSuccess' :editId="editId"></vue-form>
      </div>
      <div class="drawer-footer">
        <a-button :style="{ marginRight: '8px' }" @click="addClose">
          关闭
        </a-button>
        <a-button type="primary" @click="addHouse"> 提交 </a-button>
      </div>
    </a-drawer>
    <!-- 房屋类型 -->
    <a-drawer
      title="房屋设置"
      :width="720"
      :visible="drawerConfig.houseType"
      :body-style="{ paddingBottom: '80px' }"
      @close="drawerConfig.houseType=false"
    >
      <div class="drawer-content">
        房屋类型
        <a-divider></a-divider>
        <!-- tags -->
        <span v-for="item in typeList" :key="item.id">
          <a-input
            v-if="item.show"
            ref="input"
            type="text"
            size="small"
            :style="{ width: '78px','padding-bottom':'3px','margin-right':'7px' }"
            v-model="item.name"
            @blur="editType(item)"
            @keyup.enter="editType(item)"
          />
          <a-tag
            v-else closable @close="delType(item.id)"
            @click="editInput(item)" >
              {{item.name}}
          </a-tag>
        </span>
        <!-- addTag -->
        <span>
          <a-input
            v-if="inputVisible"
            ref="addInput"
            type="text"
            size="small"
            :style="{ width: '78px','padding-bottom':'3px'}"
            :value="typeForm.name"
            @change="handleInputChange"
            @blur="handleInputConfirm"
            @keyup.enter="handleInputConfirm"
          />
          <a-tag v-else style="background: #fff; borderStyle: dashed;" @click="addShow">
            <a-icon type="plus" /> 新增类型
          </a-tag>
        </span>
      </div>
      <div class="drawer-footer">
        <a-button :style="{ marginRight: '8px' }" @click="drawerConfig.houseType=false">
          关闭
        </a-button>
      </div>
    </a-drawer>
  </div>
</template>

<script>
import { columns, pagination, searchForm, ActionsList } from "./depend/config";
import { houseList, houseDel, isEnableLease, estateType, estateTypeInsert, estateTypeDel, estateTypeUpdate } from "@/api/basic/estate";
import vueForm from "./depend/form.vue";
export default {
	components: {
		vueForm,
	},
	data() {
		return {
			drawerConfig: {
				addShow: false,
				houseType: false
			},
			pagination,
			searchForm,
			columns,
			ActionsList,
			inputVisible: false,
			typeForm:{
				id: null,
				name: ''
			},
			editId:null,
			activeAction: undefined,
			loading: false,
			// 选择的index
			selectedRowKeys: [],
			tableChoosed: [],
			tableData: [],
			typeList:[],
			options:{
				houseType:[],//房屋类型
				isEnableLease:[//开启租赁
					{
						id:1,
						name:'开启'
					},
					{
						id:2,
						name:'关闭'
					},
				],
			}
		};
	},
	created() {
		this.getData();
		this.getType()
	},
	methods: {
		// 获取房屋
		async getData() {
			const res = await houseList({
				pageNum: this.pagination.current,
				size: this.pagination.pageSize,
				name: this.searchForm.name,
				isEnableLease: this.searchForm.isEnableLease,
				manageEstateTypeId: this.searchForm.manageEstateTypeId,
			});
			this.tableData = res.data.rows;
			this.pagination.total = res.data.total
		},
		// 获取类型
		async getType() {
			this.typeList = []
			const res = await estateType();
			this.options.houseType = res.data
			const arr = res.data;
			arr.forEach(ele => {
				ele.show = false;
			})
			this.typeList = arr;
		},
		reset(){
			this.searchForm.name= "",
			this.searchForm.isEnableLease = undefined,
			this.searchForm.manageEstateTypeId = undefined
			this.getData()
		},
		// 调用表单组件的提交
		addHouse() {
			this.$refs.form.addSubmit()
		},
		// 新增房屋后的回调
		addSuccess(){
			this.getData()
			this.addClose()
		},
		addClose() {
			this.drawerConfig.addShow = false;
			this.editId = null;
			this.$refs.form.close()
		},
		edit(data){
			this.editId = data.id
			this.drawerConfig.addShow = true;
		},
		// 新增类型
		addShow(){
			this.inputVisible = true;
			this.$nextTick(function() {
				this.$refs.addInput.focus();
			});
		},
		// 删除
		delType(id){
			this.$confirm({
				title: "是否删除",
				icon:'delete',
				onOk:async()=>{
					let res = await estateTypeDel({manageEstateTypeIds:[id]})
					if(res.code=== 200){
						this.$message.success(res.msg);
						this.getType()
					}else{
						this.$message.error(res.msg);
						this.getType()
					}
				},
				onCancel:()=>{
					this.getType() //因为是关闭标签的回调，如果不重新获取一下就会少一个标签
				}
			})
		},
		// 打开编辑框 聚焦input
		editInput(obj,i) {
			obj.show = true;  // v-if show = true时候渲染input
			this.$nextTick(()=>{    //如果不加nextTick。这个refs.input打印为undefined，估计是页面dom还没渲染完成
				console.log(this.$refs.input[0]);//因为是V-IF所以始终都是只展示一个input，所以循环的refs.input虽然是数组但是长度为1，所以下标为0而不是传进来index
				console.log(this.$refs.input[0].focus());//打印了半天$refs.input[0].focus()都是undefined，点进去看也是一个空数组。。但是实际是一个function
				this.$refs.input[0].focus()   //直接调用方法就可以聚焦了
			})
		},
		// 离开编辑框的回调
		async editType(item){
			let res = await estateTypeUpdate({
				id: item.id,
				name: item.name
			})
			if(res.code === 200){
				this.$message.success(res.msg)
				item.show  = false
			}else{
				this.$message.error(res.msg)
			}
		},
		handleInputChange(e) {
			this.typeForm.name = e.target.value;
		},
		async handleInputConfirm() {
			if(this.typeForm.name === ''){
				this.inputVisible = false;
				return
			}
			let res = await estateTypeInsert({
				name:this.typeForm.name,
			})
			if(res.code === 200){
				this.$message.success(res.msg);
				this.inputVisible = false;
				this.typeForm.name = ''
				this.getType()
			}else{
				this.$message.error(res.msg);
			}
		},
		// 租赁
		handleEnable: async function (data) {
			const res = await isEnableLease({
				estateId: data.id,
			});
			if (res.code === 200) {
				this.$message.success(res.msg);
				this.getData();
			} else {
				this.$message.error(res.msg);
			}
		},
		handleTableChange(pagination) {
			console.log(pagination);
			const pager = { ...this.pagination };
			pager.current = pagination.current;
			pager.pageSize = pagination.pageSize;
			this.pagination = pager;
		},
		del(ids) {
			this.$confirm({
				title: "是否删除",
				icon: "delete",
				onOk: () => {
					houseDel({ estateIds: ids }).then((res) => {
						if (res.code === 200) {
							this.$message.success(res.msg);
							this.getData();
						} else {
							this.$message.error(res.msg);
						}
					});
				},
			});
		},
		Actions(data) {
			// 批量删除
			if (data === 1) {
				this.del(this.selectedRowKeys);
				this.activeAction = undefined;
			}
		},
		onSelectChange(selectedRowKeys) {
			this.selectedRowKeys = selectedRowKeys;
		},
	},
	computed: {
		// 是否选择selection
		hasSelected() {
			return this.selectedRowKeys.length > 0;
		},
	},
};
</script>

<style lang="less" scoped>
.role-card {
  line-height: 30px;
  font-size: 16px;
  cursor: pointer;
  border-bottom: 1px solid #d9d9d9;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}
/deep/.ant-tag{
  margin-bottom: 8px;
}
</style>