<template>
	<view class="content">
		<view class="jg"></view>
		<view class="tab">
			<view class="tab-item flex">
				<view class="item-name">公司名称</view>
				<input type="text" placeholder="请输入公司全称" class="item-val" v-model="organ_name">
			</view>
			<view class="tab-item flex">
				<view class="item-name">店铺名称</view>
				<input type="text" placeholder="请输入店铺名称" class="item-val" v-model="time_area">
			</view>
			<view class="tab-item flex">
				<view class="item-name">选择行业</view>
				<picker mode="selector" :range='industryList' @change="bindIndustryChange" class="item-val">
					<view :class="{'place':industry== ''}" style="text-align: left;">
						{{industry || '请选择行业'}}
					</view>
				</picker>
			</view>
		</view>
		<view class="tab">
			<view class="tab-item flex">
				<view class="item-name">联系人：</view>
				<input type="text" placeholder="请输入联系人" class="item-val" v-model="organ_name">
			</view>
			<view class="tab-item flex">
				<view class="item-name">联系手机：</view>
				<input type="text" placeholder="请输入联系手机" class="item-val" v-model="time_area">
			</view>
			<view class="tab-item flex">
				<view class="item-name">详细地址：</view>
				<input type="text" placeholder="请输入详细地址" class="item-val" v-model="time_area">
			</view>
		</view>
		<view class="tab">
			<view class="tab-item flex">
				<view class="item-name">联系人：</view>
				<input type="text" placeholder="请输入联系人" class="item-val" v-model="organ_name">
			</view>
		</view>
		<view class="sub" @click="sub">
			确认发布
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				industryList: ['美食', '酒店'], //行业列表
				industry: '', //所属行业
				level_id: 0,
				load: false,
				organ_name: '',
				addressDetail: '',
				province: '',
				province_id: '',
				city: '',
				city_id: '',
				district: '',
				district_id: '',
				time_area: '',
				doctor_level: '', //需求的医生职称
				tags: '',
				brokerage: '', //	报酬
				content: '',
				levelList: [{
					id: 1,
					name: '医师'
				}, {
					id: 2,
					name: '主治医师'
				}, {
					id: 3,
					name: '副主任医师'
				}, {
					id: 4,
					name: '主任医师'
				}]
			}
		},
		methods: {
			bindIndustryChange(e) {
				this.industry = this.industryList[e.detail.value]
			},
			//职称选择
			handleTap2(name) {
				this.$refs[name].show()
			},
			//职称选择
			handleChange2(item) {},
			//职称选择
			handleConfirm2(item) {
				let obj = this;
				obj.doctor_level = item.item.name;
				obj.level_id = item.item.id;
				console.log(obj.doctor_level, obj.level_id)
			},
			// 选中城市切换
			onCityClick({
				data
			}) {
				console.log(data)
				let obj = this
				// let address = this.addressData.address;
				obj.province = data[0];
				obj.city = data[1];
				obj.district = data[2];
				this.addressDetail = obj.province.name + ' ' + obj.city.name + ' ' + obj.district.name;
			},
			// 发布
			sub() {
				let obj = this
				if (obj.load) {
					return
				}
				if (obj.organ_name == '') {
					return obj.$api.msg('请输入机构全称')
				}
				if (obj.province == '') {
					return obj.$api.msg('请选择地址')
				}
				if (obj.city == '') {
					return obj.$api.msg('请选择地址')
				}
				if (obj.district == '') {
					return obj.$api.msg('请选择地址')
				}
				if (obj.time_area == '') {
					return obj.$api.msg('请输入服务时间')
				}
				if (obj.doctor_level == '') {
					return obj.$api.msg('请输入职称')
				}
				if (obj.brokerage == '') {
					return obj.$api.msg('请输入报酬')
				}
				if (obj.content == '') {
					return obj.$api.msg('请输入要求')
				}
				if (obj.tags == '') {
					return obj.$api.msg('请输入要求')
				}
				let tags = obj.tags.replace(/，/g, ',')
				obj.load = true
				ddsub({
					organ_name: obj.organ_name,
					province: obj.province.name,
					province_id: obj.province.code,
					city: obj.city.name,
					city_id: obj.city.code,
					district: obj.district.name,
					district_id: obj.district.code,
					time_area: obj.time_area,
					doctor_level: obj.level_id, //需求的医生职称
					tags: tags,
					brokerage: obj.brokerage, //	报酬
					content: obj.content,
				}).then(res => {
					obj.load = false
					uni.showToast({
						title: '发布成功',
						duration: 2000
					});
				}).catch(err => {
					obj.load = false
				})
			}
		}
	}
</script>

<style lang="scss">
	.place {
		color: #999;
	}

	.jg {
		height: 20rpx;
	}

	.tab {
		width: 690rpx;
		margin: auto;
		border-radius: 10px;
		background-color: #fff;
		margin-bottom: 20rpx;

		.tab-item {
			padding: 0 20rpx;
			font-size: 30rpx;
			align-items: flex-start;
			line-height: 100rpx;
			border-bottom: 1px #F0F0F0 solid;

			&:last-of-type {
				border-bottom: none;
			}

			.item-name {
				flex-shrink: 0;
				width: 220rpx;
				color: #333333;
			}

			.item-val {
				display: inline-block;
				flex-grow: 1;
				text-align: left;
				line-height: 100rpx;
				height: 100rpx;
			}
		}
	}

	.sub {
		text-align: center;
		width: 560rpx;
		line-height: 80rpx;
		background: #6786fb;
		border-radius: 40rpx;
		color: #fff;
		font-size: 30rpx;
		font-weight: 500;
		margin: 80rpx auto 0;
	}
</style>