<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-button type="primary" @click='getData()'>查 询</a-button>
                <a-button @click='reset()'>重 置</a-button>
              </a-space>
            </a-col>
            <a-col :span='4'>
              <a-button class="add-btn"  @click="addBuilding">添加楼栋</a-button>
            </a-col>
          </a-row>
        </div>
        <commonTable
          :columns="columns"
          :tableData="tableData"
          :ActionsList="ActionsList"
          @handleTableChange="handleTableChange"
          @Actions="Actions"
          @selectionChoosed="selectionChoosed"
        >
          <template v-slot:actionBox="data">
            <a-space size="small">
              <a class="ant-dropdown-link" @click='detail(data.data.id)'>详情</a>
              <a class="ant-dropdown-link" @click='del([data.data.id])'>删除</a>
            </a-space>
          </template>
        </commonTable>
		<curd-form :show='drawerConfig.show' :type="drawerConfig.type" @close='close' :editId='editId'></curd-form>
      </div>
</template>

<script>
import { columns,pagination,searchForm,ActionsList} from "./depend/config"
import { buildingList,buildingDel } from "@/api/basic/estate"
import curdForm from './depend/form.vue'
export default {
	components: {
		curdForm
	},
	data() {
		return {
			pagination,
			columns,
			searchForm,
			ActionsList,
			drawerConfig:{
				type:1,
				show:false,
			},
			tableChoosed: [],
			//   数据
			tableData: [],
			editId:undefined,
		};
	},
	created() {
		this.getData()
	},
	methods: {
		async getData() {
			const res = await buildingList(
				{
					pageNum:this.pagination.current,
					size:this.pagination.pageSize,
					name:this.searchForm.name
				}
			)
			this.tableData = res.data.rows
			this.pagination.total = res.data.total
		},
		addBuilding(){
			this.drawerConfig.show = true
			this.drawerConfig.type = 1
		},
		close(){
			this.drawerConfig.show = false
			this.drawerConfig.type = 1;
			this.editId = null
			this.getData()
		},
		detail(data){
			this.drawerConfig.show = true;
			this.drawerConfig.type = 3;
			this.editId = data
		},
		reset(){
			this.searchForm.name =''
			this.getData()
		},
		handleTableChange(pagination) {
			const pager = { ...this.pagination };
			pager.current = pagination.current;
			pager.pageSize = pagination.pageSize;
			this.pagination = pager;
			this.getData()
		},
		del(ids) {
			this.$confirm({
				title: "是否删除",
				icon: "delete",
				onOk: ()=>{
					buildingDel({buildingIds:ids}).then(res=>{
						if(res.code === 200){
							this.$message.success(res.msg)
							this.getData()
						}else{
							this.$message.error(res.msg)
						}
					})
				},
			});
		},
		Actions(data) {
			let ids =[]
			for(const item of this.tableChoosed){
				ids.push(item.id)
			}
			// 批量删除
			if(data===1){
				this.del(ids)
			}
		},
		selectionChoosed(data) {
			console.log(data);
			this.tableChoosed = data;
		},
	},
};
</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;
}
</style>