<template>
	<!-- 顶部导航栏 -->
	<custom-nav-bar :left="true" leftText="" @leftClick="" title="地块详情">
	</custom-nav-bar>
	<view class="item-container" :style="{ height: `${windowHeight}px` }" @touchmove.stop.prevent="() => {}">
		<u-gap height="10" bgColor="#F3F3F3"></u-gap>
		<view class="card">
			<view class="cards-title">
				<view>
					<view class="text">地块编号：{{ item.landNum }}</view>

				</view>
				<view class="title-r">
					<uni-tag :text="item.status == 0 ? '启用' : '禁用'" :circle="true"
						:type="item.status == 0 ? 'success' : 'error'" ></uni-tag>
				</view>
			</view>
			<view class="cards-content">
				<view class="txt-list">
					<view class="list1">
						<view>地块名称：{{ item.landName }}</view>
						<view>地块地址：{{ item.landAddress || "-" }}</view>
						<view>地块面积：{{ item.landArea != null ? item.landArea : "" }}</view>
						<view>土壤类型：{{ getDictName(1, item.soilType) }}</view>
						<view>水源类型：{{ getDictName(2, item.waterSourceType) }}</view>
						<view>是否分组：<text v-if="item.landConfig.enableGroup === 0">是</text>
							<text v-if="item.landConfig.enableGroup === 1">否</text>
						</view>
						<view>启用蝶阀：<text v-if="item.landConfig.enableButterflyValve === 0">启用</text>
							<text v-if="item.landConfig.enableButterflyValve === 1">禁用</text>
						</view>
						<view>启用批量控制：<text v-if="item.landConfig.enableBatchControl === 0">是</text>
							<text v-if="item.landConfig.enableBatchControl === 1">否</text>
						</view>
						<view>启用自动刷新：<text v-if="item.landConfig.enableAutoRefresh === 0">是</text>
							<text v-if="item.landConfig.enableAutoRefresh === 1">否</text>
						</view>
						<view>所属公司：<text v-if="item.companyGroup && item.companyGroup.companyFullName">
								{{item.companyGroup.companyFullName}}
							</text>
						</view>

					</view>
				</view>
			</view>
		</view>
		<view class="charge">
			<view class="flex item charge-item">
				<view style="color: #939393">负责人：</view>
				<view>{{ item.user.userName }}</view>
			</view>
			<view class="flex item charge-item">
				<view style="color: #939393">手机号码：</view>
				<view v-if="item.user && item.user.mobilePhone">{{ item.user.mobilePhone }}</view>
			</view>
			<view class="call">
				<u--text text="打电话" color="#009933" iconStyle="margin-right:5px"
					prefixIcon="../../../static/images/work/user/user-index-phone-icon.png"
					@click="onClickPhone(item.mobilePhone)"></u--text>
			</view>
		</view>
	</view>
</template>
<script>
	import plugin from "@/plugins"
	import store from "@/store"
	export default {
		data() {
			return {
				windowHeight: null,
				item: {},
				soilType: [],
				waterSourceType: [],
				paging: null,
				form: null,
				treeList: [],
				query: {
					companyId: null,
					landName: null
				},
				selectCompanyObj: {}
			}
		},
		created() {
			this.windowHeight = uni.getSystemInfoSync().windowHeight;
		},
		onLoad(options) {
			this.item = JSON.parse(decodeURIComponent(options.item));
			this.getDictList("custom_soil_type");
			this.getDictList("custom_water_source_type");
			this.getLandInfo();
		},
		methods: {
			getDictList(type) {
				store
					.dispatch("getDictList", type)
					.then(res => {
						const obj = res.data.reduce((accumulator, current) => {
							accumulator[current.dictValue] = current;
							return accumulator;
						}, {});
						if (type == "custom_soil_type") {
							this.soilType = obj
						}
						if (type == "custom_water_source_type") {
							this.waterSourceType = obj
						}
					})
					.catch(error => {
						plugin.modal.msgError(error)
					})
					.finally(() => {
						plugin.modal.closeLoading()
					})
			},
			getLandInfo() {
				store
					.dispatch("getLandInfo", this.item.id)
					.then(res => {
						if (res.data != null) {
							this.item = res.data;
						}
					})
					.catch(error => {
						plugin.modal.msgError(error)
					})
					.finally(() => {
						plugin.modal.closeLoading()
					})
			},
			getDictName(type, value) {
				const that = this;
				let text = "";
				if (value) {
					if (type == 1) {
						if (that.soilType[String(type)] && that.soilType[String(type)].dictLabel) {
							text = that.soilType[String(type)].dictLabel
						}
					}
					if (type == 2) {
						value = value.split(',');
						value.forEach(item => {
							if (text == "") {
								if (that.waterSourceType[String(item)] && that.waterSourceType[String(item)]
									.dictLabel) {
									text = that.waterSourceType[String(item)].dictLabel
								}
							} else {
								if (that.waterSourceType[String(item)] && that.waterSourceType[String(item)]
									.dictLabel) {
									text = text + "," + that.waterSourceType[String(item)].dictLabel;
								}
							}
						});
					}
				}
				return text;
			},
			onClickPhone(phone) {
				plugin.modal.confirm("是否拨打电话?").then(res => {
					//#ifdef APP-PLUS
					plus.device.dial(phone, true)
					//#endif
					//#ifdef MP-WEIXIN
					uni.makePhoneCall({
						phoneNumber: phone,
						fail: res => {
							console.log(res)
						},
						success: res => {
							console.log("success" + res)
						}
					})
					//#endif
				})
			}
		}
	}
</script>

<style lang="scss">
	.item-container {
		background: #f3f3f3;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.item {
		margin-bottom: 5px;
	}

	.info {
		background: white;
		margin: 10px 10px;
		padding: 10px;
		border-radius: 10px;
		box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.05);

		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 10px 10px;
		}

		.info-item {
			margin-left: 20px;
		}
	}

	.charge {
		background: white;
		margin: 10px 10px;
		padding: 20px 10px;
		border-radius: 10px;
		box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.05);
		position: relative;

		.charge-item {
			margin-left: 20px;
		}

		.call {
			position: absolute;
			top: 20px;
			right: 20px;
		}
	}

	.buttons {
		background: white;
		margin: 30px 20px;
		padding: 10px 0;
		border-radius: 10px;
		box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
		position: absolute;
		width: calc(100% - 40px);
		bottom: 0%;
		transition: all 0.1s;
		box-sizing: border-box;

		.row1 {
			margin-bottom: 20px;
			width: 100%;
			display: flex;
			align-items: center;

			&>view {
				width: 25%;
				white-space: nowrap;
				text-align: center;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
		}

		.row2 {
			width: 100%;
			display: flex;
			align-items: center;

			&>view {
				width: 25%;
				white-space: nowrap;
				text-align: center;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
		}
	}

	.font {
		margin-top: 5px;
		font-size: 12px;
		text-align: center;
	}
</style>