<template>
	<page-meta>
		<navigation-bar :title="this.form.id && this.form.id > 0?'编辑设备':'添加设备'"></navigation-bar>
	</page-meta>
	<view class="page_padding bot_padding">
		<view class="page_content contentboxsty font13">
			<view class="content_row">
				<view class="name font_bold">选择设备</view>
				<pickerSelect class="comView" @change="equipmentChange" :list="setMap.equipment" :id="form.eq_no" placeholder="请选择设备" />
			</view>
			<view class="content_row">
				<view class="name font_bold">设备自定义名称</view>
				<view class="comView">
					<input v-model="form.name" placeholder="请输入设备名称"/>
				</view>
			</view>
			<view class="content_row">
				<view class="name font_bold">设备编号</view>
				<view class="comView">
					<input v-model="form.code" placeholder="请输入设备编号"/>
				</view>
			</view>
			<view class="content_row">
				<view class="name font_bold">设备功率</view>
				<view class="comView">
					<input v-model="form.power" placeholder="请输入设备功率"/>
				</view>
			</view>
			<view class="content_row">
				<view class="name font_bold">设备IP</view>
				<view class="comView">
					<input v-model="form.config[0].ip" placeholder="请输入设备IP"/>
				</view>
			</view>
			<view class="content_row">
				<view class="name font_bold">端口</view>
				<view class="comView">
					<input v-model="form.config[0].port" placeholder="请输入设备端口"/>
				</view>
			</view>
			<view class="content_row">
				<view class="name font_bold">型号</view>
				<view class="flex_layout comView">
					<view class="switch" @click="form.config[0].plc_model = 'H3U'">
						<view v-if="form.config[0].plc_model=='H3U'" class="t-icon t-icon-qiyong1 contenticon"></view>
						<view v-else class="t-icon t-icon-jinyong1 contenticon"></view>
						<text class="text">H3U</text>
					</view>
					<view class="switch" @click="form.config[0].plc_model = 'H5U'">
						<view v-if="form.config[0].plc_model=='H5U'" class="t-icon t-icon-qiyong1 contenticon"></view>
						<view v-else class="t-icon t-icon-jinyong1 contenticon"></view>
						<text class="text">H5U</text>
					</view>
				</view>
			</view>
			<view class="content_row">
				<view class="name font_bold">逻辑控制器(PLC)</view>
				<pickerSelect class="comView" :list="setMap.plc" :id="form.plc_lj" placeholder="请选择设备" />
			</view>
			<view class="content_row">
				<view class="name font_bold">状态</view>
				<view class="flex_layout comView">
					<view class="switch" @click="form.active_status=true">
						<view v-if="form.active_status" class="t-icon t-icon-qiyong1 contenticon"></view>
						<view v-else class="t-icon t-icon-jinyong1 contenticon"></view>
						<text class="text">启用</text>
					</view>
					<view class="switch" @click="form.active_status=false">
						<view v-if="!form.active_status" class="t-icon t-icon-qiyong1 contenticon"></view>
						<view v-else class="t-icon t-icon-jinyong1 contenticon"></view>
						<text class="text">禁用</text>
					</view>
				</view>
			</view>
			<view class="textarea_row">
				<view class="name font_bold">设置备注</view>
				<view class="textarea">
					<textarea placeholder="请输入备注..." v-model="form.remark" cursor-spacing="180px" :auto-blur="true" placeholder-class="placeholderStyle" />
				</view>
					
			</view>
		</view>
	</view>
	<view class="bottom_but flex_layout">
		<view class="font13 but_color" @click="save">保存</view>
		<view class="font13" @click="cancel">取消</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				setMap:{
					equipment:[],
					plc:[
						{name:'汇川',value:1}
					]
				},
				
				form:{
					id:'',
					eq_no:'',
					name:'',
					code:'',
					power:'',
					remark:'',
					active_status:true,
					plc_lj:1,
					config:[
						{
							eq_type:'',
							ip:'',
							port:'',
							plc_model:'H3U'
						}
					]
				}
			}
		},
		mounted() {
			
		},
		onLoad(option) {
			this.form.id = option.id;
			if(option.id!='undefined'){
				this.getOrderInfo(option.id);
			}
		},
		onReady() {
			this.getEquipment();
		},
		methods: {
			getOrderInfo(id){
				this.$api.postFuncLoading('/device.info',{id:id}).then(res=>{
					this.form = {
						id:res.data.id,
						eq_no:res.data.eq_no,
						name:res.data.name,
						code:res.data.code,
						power:res.data.power,
						remark:res.data.remark,
						active_status:res.data.active_status,
						plc_lj:1,
						config:[
							{
								eq_type:res.data.equipment_configs[0].eq_type,
								ip:res.data.equipment_configs[0].ip,
								port:res.data.equipment_configs[0].port,
								plc_model:res.data.equipment_configs[0].plc_model
							}
						]
					}
				}).catch(err=>{
					
				})
			},
			getEquipment(){
				this.$api.request('/equipment.select',{}).then(res=>{
					res.data.forEach(item=>{
						item.name = item.eq_name;
						item.value = item.eq_no;
					})
					this.setMap['equipment'] = res.data;
				})
			},
			equipmentChange(e){
				this.form.eq_no = e.value;
				this.form.name = e.name;
			},
			save(){
				if(!(this.form.id && this.form.id>0)){
					delete this.form.id
				}
				this.$api.postFuncLoading('/equipment.add',this.form).then(res=>{
					this.parentClick();
					this.reset();
					this.$wf.toast({type:'success',text:'保存成功'});
				})
			},
			cancel(){
				this.reset();
			},
			reset(){
				this.form = {
					id:'',
					eq_no:'',
					name:'',
					code:'',
					power:'',
					remark:'',
					active_status:true,
					plc_lj:1,
					config:[
						{
							eq_type:'',
							ip:'',
							port:'',
							plc_model:'H3U'
						}
					]
				};
			},
			parentClick(){
				const pages = getCurrentPages();
				if (pages.length >= 2) {
					const prevPage = pages[pages.length - 2];
					prevPage.$vm.getList();
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.page_name{margin-bottom: 10px;}
	.page_content{padding: 0 12px 13px;}
	.content_row{display: flex;border-bottom: 1px solid #2D3A6F;height: 44px;align-items: center;
		.name{flex-basis: 110px;}
		.switch{display: flex;align-items: center;
			.contenticon{font-size: 15px;}
			.text{padding: 0 20px 0 5px;}
		}
	}
	.textarea_row{
		.name{padding: 12px 0;}
		.textarea{border-radius: 4px;background: $uni-bg-color-placeholder;padding:10px 12px;}
	}
</style>
