<template>
  <div class="main">
      <div class="cardTitle">小区管理</div>
	  <div class="search-box">
		<a-space size="large">
			<a-form-model layout="inline">
				<a-form-model-item label="小区名称"> 
					<a-input v-model="form.communityName" placeholder="请输入小区名称" />
				</a-form-model-item>
			</a-form-model>
			<a-button type="primary" @click="handlerSearch">查 询</a-button>
			<a-button @click="handlerReset">重 置</a-button>
		</a-space>
	  </div>
	  <!-- 表格 -->
		<div id="commonTable">
			<div style="margin-bottom: 16px">
				<a-button icon="plus" @click="hanlderAdd" type="primary" ghost>
					添加小区
				</a-button>
			</div>
		<a-table
			:scroll="{ x: 1300 }"
			:columns="columns"
			:data-source="tableData"
			:pagination="pagination"
			@change="handleTableChange"
			:row-key="
			(record, index) => {
				return index;
			}
			"
		>
			<span slot="pics" slot-scope="text,record">
				<img :src="item.url" alt="" v-for="(item, index) in record.communityImgList" :key="index">
			</span>
			<span slot="action" slot-scope="text,record">
			<a @click="detail(record)">修改</a>
			</span>
		</a-table>
		</div>
		<a-drawer :title="modelType == 1 ? '填写小区信息':'修改小区信息'" :visible="visible" @close="hanlderClose" width="512">
            <a-form-model>
                <a-form-model-item label="小区全称">
                    <a-input v-model="addForm.name" style="width: 260px" placeholder="请输入小区全称" />
                </a-form-model-item>
				<a-form-model-item label="公司名称">
                    <a-select v-model="addForm.companyId" style="width: 260px" placeholder="请选择公司">
						<a-select-option :value="item.id" v-for="(item, index) in companyData" :key="index">
							{{item.companyName}}
						</a-select-option>
					</a-select>
                </a-form-model-item>
				<a-form-model-item label="小区地址">
                    <a-select @change="cityChange1" style="width: 120px" placeholder="请选择省">
						<a-select-option :value="item.id" v-for="(item, index) in cityData" :key="index">
							{{item.name}}
						</a-select-option>
					</a-select>
					<a-select v-model="address1" @change="cityChange2" style="width: 120px;margin-left: 20px" placeholder="请选择市">
						<a-select-option :value="item.id" v-for="(item, index) in cityData2" :key="index">
							{{item.name}}
						</a-select-option>
					</a-select>
					<a-select v-model="addForm.address" style="width: 120px;margin-left: 20px" placeholder="请选择区">
						<a-select-option :value="item.id" v-for="(item, index) in cityData3" :key="index">
							{{item.name}}
						</a-select-option>
					</a-select>
                </a-form-model-item>
				<a-form-model-item>
					<a-input v-model="addForm.addressDetails" style="width: 260px" placeholder="请输入详细地址"></a-input>
				</a-form-model-item>
				<a-form-model-item label="小区正门图片">
					<imgUpload @handleChange="addFile"></imgUpload>
				</a-form-model-item>
			</a-form-model>
            <a-button @click="addConfirm" type="primary">确定</a-button>
			<a-button style="margin-left: 20px" @click="hanlderClose">取消</a-button>
        </a-drawer>
  </div>
</template>

<script>
import imgUpload from "@/components/upload/index.vue"
import {getCommunityList, getAddCommunity, getAllRequest, updateCommunity} from "@/api/manage"
import {getAllCity, getCityByParent} from "@/api/city"
export default {
	components: {
		imgUpload
	},
	data() {
		return {
			form: {
				pageNum: 1,
				size: 10,
				communityName: ''
			},
			addForm: {
				companyId: undefined,
				name: '',
				address: undefined,
				addressDetails: '',
				communityUrls: []
			},
			// 分页
			pagination: {
				current: 1,
				total: 0,
				pageSize: 10,
				showTotal: (total) => `共 ${total} 条`,
				showSizeChanger: true,
				showQuickJumper: true,
			},
			//   列
			columns: [
				{
					title: "小区名称",
					dataIndex: "name",
					width: "200",
				},
				{
					title: "公司名称",
					dataIndex: "companyName",
					width: "200",
				},
				{
					title: "小区地址",
					dataIndex: "addressName",
					width: "200",
				},
				{
					title: "公司图片",
					dataIndex: "communityImgList",
					width: "200",
					scopedSlots: { customRender: "pics" },
				},
				{
					title: "操作",
					dataIndex: "action",
					key: "action",
					width: "180",
					fixed: "right",
					scopedSlots: { customRender: "action" },
				},
			],
			//   数据
			tableData: [],
			companyData: [],
			cityData: [],
			cityData2: [],
			cityData3: [],
			address1: undefined,
			// 添加/修改小区
			modelType: 1, //1添加 2修改
			visible: false,
		};
	},
	mounted() {
		this.getApi();
		this.getData()
	},
	methods: {
		getData() {
			getCommunityList(this.form).then(res => {
				let data = res.data.rows;
				this.pagination.total = res.data.total;
				this.tableData = data
			})
		},
		getApi() {
			let obj = {pageNum: 1,size: 1000};
			getAllRequest(obj).then(res => {
				let data = res.data.rows
				this.companyData = data;
			})
			getAllCity().then(res => {
				let data = res.data;
				this.cityData = data;
			})
		},
		//分页
		handleTableChange(pagination) {
			this.form.size = pagination.pageSize;
			this.form.pageNum = pagination.current;
			this.getData();
		},
		selectionChoosed(data) {
			this.tableChoosed = data
		},
		//点击详情
		detail(record) {
			this.modelType = 2;
			this.chosenId = record.id; //小区id
			this.visible = true;
		},
		//查询
		handlerSearch() {
			this.getData()
		},
		//重置
		handlerReset() {
			this.form.communityName = '';
			this.getData()
		},
		//添加小区
		hanlderAdd() {
			this.modelType = 1;
			this.visible = true;
		},
		hanlderClose() {
			this.visible = false;
		},
		addConfirm() {
			if(this.modelType == 1) {
				getAddCommunity(this.addForm).then(() => {
					this.getData();
				})
			} else {
				let obj = Object.assign({id: this.chosenId}, this.addForm)
				updateCommunity(obj).then(() => {
					this.getData();
				})
			}
			this.visible = false;
		},
		//添加小区-输入城市
		cityChange1(val) {
			this.address1 = undefined,
			this.addForm.address = undefined,
			this.cityData3 = [],
			this.cityData2 = this.cityData[val-2].cityList
		},
		cityChange2(val) {
			this.addForm.address = undefined
			getCityByParent({parentId: val}).then(res => {
				let data = res.data;
				this.cityData3 = data;
			})
		},
		//添加小区-上传图片
		addFile(file) {
			let communityUrls = [];
			communityUrls.push(file[0].response.data);
			this.addForm.communityUrls = communityUrls;
		}
	},
};
</script>

<style lang="less">
</style>