<template>
	<el-dialog :visible.sync="dialogVisible" width="800px" :before-close="handleCancle" top="5vh">
		<span slot="title">
			<span v-if="pageType == 'add'">发布</span>
			<span v-if="pageType == 'edit'">修改</span>
			<span v-if="pageType == 'view'">查看</span>
		</span>
		<div>
			<div class="dialog-h-content2 ">
				<el-form :inline="true" :model="formData" ref="form" :rules="dataRule" v-if="pageType != 'view'">
					<el-row>
						<el-col :span="12">
							<el-form-item label="发布渠道" prop="publishDitch">
								<el-select v-model="formData.publishDitch" placeholder="请选择" clearable>
									<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="发布范围" prop="orgId">
								<el-cascader
									class="customer_cascader"
									ref="myCascader"
									v-model="formData.orgId"
									:options="orgOptions"
									filterable
									clearable
									:props="orgOptionProps"
									:show-all-levels="false"
									@change="handleChangeAgency"
								></el-cascader>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="发布内容" prop="content">
								<el-input
									v-model="formData.content"
									type="textarea"
									:autosize="{ minRows: 6, maxRows: 20 }"
									maxlength="500"
									style="width:570px;"
									clearable
									show-word-limit
									placeholder="请输入"
								></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
				<el-form :inline="false" :model="formData" ref="form" label-width="140px" v-if="pageType == 'view'">
					<el-row>
						<el-col :span="24">
							<el-form-item label="发布渠道" prop="publishDitch"><span v-if="formData.publishDitch == 0">专属钉钉</span></el-form-item>
						</el-col>

						<el-col :span="24">
							<el-form-item label="发布范围" prop="publishRangeName">{{ formData.publishRangeName }}</el-form-item>
						</el-col>

						<el-col :span="24">
							<el-form-item label="发布内容" prop="content">{{ formData.content }}</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="发布时间" prop="content">{{ formData.publishTime }}</el-form-item>
						</el-col>
					</el-row>
				</el-form>

				<div class="div_btn" v-if="pageType != 'view'" style="text-align: center;">
					<el-button size="small" @click="handleCancle">取 消</el-button>
					<!-- <el-button size="small" @click="resetData" v-if="pageType != 'view'">重置</el-button> -->
					<el-button size="small" type="primary" @click="handleComfirm">保 存</el-button>
				</div>
			</div>
		</div>

		<span slot="footer" class="dialog-footer" v-if="pageType == 'view'">
			<el-button @click="handleCancle">关 闭</el-button>
			<!-- <el-button type="primary" @click="handleComfirm">确 定</el-button> -->
		</span>
	</el-dialog>
</template>

<script>
import { isMobile } from '@/utils/validate';
import { mapGetters } from 'vuex';
import { Loading } from 'element-ui'; // 引入Loading服务
import { requestPost, requestGet } from '@/js/dai/request';
import daiMap from '@/utils/dai-map';
import nextTick from 'dai-js/tools/nextTick';

let loading; // 加载动画
let map;
var search;
var markers;
var infoWindowList;
var geocoder; // 新建一个正逆地址解析类

export default {
	props: {
		dialogVisible: {
			type: Boolean,
			default: ''
		},
		// defaultData: {
		// 	type: Object,
		// 	default: null
		// },
		pageType: {
			type: String,
			default: ''
		},
		detailId: {
			type: String,
			default: ''
		}
		// detailData: {
		// 	type: Object,
		// 	default: null
		// },
		// disabled: {
		// 	type: Boolean,
		// 	default: false
		// }
	},

	data() {
		return {
			options: [
				{
					value: 0,
					label: '专属app'
				}
			],
			btnDisable: false,
			user: '',
			agencyId: '',
			orgOptions: [], //组织
			orgOptionProps: {
				//组织
				multiple: true,
				value: 'agencyId',
				label: 'agencyName',
				children: 'subAgencyList',
				emitPath: false,
				checkStrictly: false
			},
			formData: {
				publishDitch: '',
				publishRange: '',
				content: ''
			},
			dataRule: {
				publishDitch: [{ required: true, message: '发布渠道不能为空', trigger: 'bulr' }],
				orgId: [{ required: true, message: '发布范围不能为空', trigger: 'bulr' }],
				content: [{ required: true, message: '内容不能为空', trigger: 'bulr' }]
			},
			//地图
			loading: false,

			searchValue: '',
			searchOptions: []
		};
	},
	watch: {},
	components: {},
	created() {},
	async mounted() {
		this.user = this.$store.state.user;
		this.agencyId = this.user.agencyId;
		this.startLoading();
		this.getOrgTreeList();

		if (this.pageType != 'add') {
			this.getDetail();
		} else {
		}
		await this.endLoading();
		this.endLoading();
	},

	methods: {
		getOrgTreeList() {
			const { user } = this.$store.state;
			this.$http
				.post('/gov/org/customeragency/agencygridtree', {})
				.then(({ data: res }) => {
					if (res.code !== 0) {
						return this.$message.error(res.msg);
					} else {
						console.log('获取组织树成功', res.data);
						// let { agencyList, subAgencyList } = res.data;
						// const _arr = [{ ...agencyList, subAgencyList: [...subAgencyList] }];
						// this.orgOptions = this.deepTree(_arr);
						this.orgOptions = [];
						this.orgOptions.push(res.data);
					}
				})
				.catch(() => {
					return this.$message.error('网络错误');
				});
		},
		handleChangeAgency(val) {
			console.log('val', val);
			let obj = this.$refs['myCascader'].getCheckedNodes().map(item => {
				return { orgType: item.data.level === 'grid' ? 'grid' : 'agency', orgId: item.data.agencyId };
			});
			console.log('obj', obj);
			this.formData.rangeList = [...obj];
			// let obj = this.$refs['myCascader'].getCheckedNodes()[0].data;
			// this.formData.orgType= obj.level
			// if (obj) {
			// 	this.orgType = obj.level === 'grid' ? 'grid' : 'agency';
			// } else {
			// 	this.orgType = '';
			// }
		},
		async getDetail() {
			const url = `/message/organization/message/detail/${this.detailId}`;
			const { data, code, msg } = await requestPost(url);
			if (code === 0) {
				this.formData = { ...data };
			} else {
				this.$message.error(msg);
			}
		},

		handleComfirm() {
			this.save();
		},

		async save() {
			// this.formData.agencyId = this.agencyId;
			// this.formData.rangeList=[{
			// 	orgId:this.formData.orgId,
			// 	orgType:this.formData.orgType
			// }]

			var url = '';
			var params = {};
			url = '/message/organization/message/publish';
			params = { ...this.formData };
			const { data, code, msg } = await requestPost(url, params);
			if (code === 0) {
				this.$message.success('操作成功');

				this.handleCancle();
				// // this.resetData();
				// this.$emit('handleComfirm');
			} else if (code >= 8000) {
				this.$message.error(msg);
			}
		},
		handleCancle() {
			// this.resetData();
			this.$emit('handleClose');
		},
		resetData() {
			this.$refs.form.resetFields();
		},
		// 开启加载动画
		startLoading() {
			loading = Loading.service({
				lock: true, // 是否锁定
				text: '正在加载……', // 加载中需要显示的文字
				background: 'rgba(0,0,0,.7)' // 背景颜色
			});
		},
		// 结束加载动画
		endLoading() {
			// clearTimeout(timer);
			if (loading) {
				loading.close();
			}
		} // 地图初始化函数，本例取名为init，开发者可根据实际情况定义
	}
};
</script>

<style lang="scss" scoped>
@import '@/assets/scss/modules/management/form-main.scss';
@import '@/assets/scss/modules/management/form.scss';
// @import '@/assets/scss/modules/visual/a_customize.scss';
.div_map {
	width: 350px;
}
/deep/.el-dialog__header {
	padding: 25px 20px 10px 25px;
	font-size: 18px;
	font-family: PingFang SC;
	font-weight: normal;
	color: #333;
}
/deep/.el-dialog__body {
	padding: 30px 0px 30px 40px;
}
/deep/.el-dialog__footer {
	text-align: center;
}
/deep/.el-form {
	.el-form-item {
		position: relative;
		margin-bottom: 22px;
		.el-form-item__label {
			font-size: 14px;
			padding-left: 15px;
			text-align: left;
			// &::before {
			// 	position: absolute;
			// 	left: 0;
			// 	top: 12px;
			// 	content: '';
			// 	display: block;
			// 	width: 7px;
			// 	height: 7px;
			// 	background: #0c81fe;
			// 	border-radius: 3px;
			// }
		}
		.el-form-item__content {
			font-size: 14px;
		}
	}
}
/deep/.dialog-h-content2 {
	// max-height: calc(83vh - 90px);
	box-sizing: border-box;
	padding: 0 30px;
	overflow: auto;
}
</style>
