var nbComponent_en = {
		template:`
		<div>
			<div style="display: flex;">
				<el-input v-model="series_id_v" placeholder="series No." clearable style="width: 15%;"  @change="input_change"></el-input>
				<el-input v-model="num_v" placeholder="serial No." clearable style="width: 15%;"  @change="input_change"></el-input>
				<el-button id ="bt_serach" plain type="primary" icon="el-icon-search" @click="get_nb()">Search</el-button>
				<el-button id ="bt_add" plain type="primary" icon="el-icon-circle-plus-outline" @click="add_nb_dialog()">Add</el-button>
				<el-button id ="bt_export" plain type="primary" icon="el-icon-document" @click="get_nb_csv()">Export</el-button>
				<el-button id ="bt_export_w" plain type="primary" icon="el-icon-document" @click="get_nb_warning_csv()">Export Alert</el-button>
				
			</div>
			<div class="span">
				<el-table
				    :data="tableData"
				    style="width: 100%;font-size:14px"
				    :height="tHeight"
					:cell-style="{background:'#fff'}"
					border
					>
				    <el-table-column
				      prop="b_id"
				      label="Battery Series No."
				      :width="150"
					  :show-overflow-tooltip="true">
				    </el-table-column>
					<el-table-column
					  prop="b_code"
					  label="Battery Serial No."
					  :width="150"
					  :show-overflow-tooltip="true">
					</el-table-column>
				    <el-table-column
				      prop="uset"
				      label="Used Time(h)"
				     :width="120">
				    </el-table-column>
				    
					<el-table-column
					      label="Operation"
					      width="80">
					      <template slot-scope="scope">
							  <el-button @click="get_nb_his(scope.row)" type="text" size="medium">Detail</el-button>
							</template>
					    </el-table-column>
				  </el-table>
			</div>
			<div class="block">
			    <span class="demonstration"></span>
			    <el-pagination
			      @size-change="handleSizeChange"
			      @current-change="handleCurrentChange"
			      :current-page="currentPage"
			      :page-sizes="[50,100, 200, 300]"
			      :page-size="pagesize"
			      layout="total, sizes, prev, pager, next, jumper"
			      :total="recordTotal">
			    </el-pagination>
			  </div>
			  
			  <el-dialog
			   title="Battery Usage Information"
			   :visible.sync="add_visible"
			   :lock-scroll ="false"
			   width="50%">
			   <el-form ref="bform" :model="form" :rules="rules" label-width="160px" :inline="false" class="demo-form-inline" size="medium">
			  	  
				  <el-row :gutter="10">
					  <el-col :span="12">
						  <el-form-item label="Wellname" >
						  <el-input v-model="form.wellname" ></el-input>
						  </el-form-item>
					  </el-col>
				  </el-row>
				  
				  <el-row :gutter="10">
					  <el-col :span="12">
						  <el-form-item label="Sub Series No." prop="series_id">
						  <el-input v-model="form.series_id" ></el-input>
						  </el-form-item>
					  </el-col>
					  <el-col :span="12">
						  <el-form-item label="Sub Serial No." prop="instrument_id">
						  <el-input v-model="form.instrument_id" ></el-input>
						  </el-form-item>
					  </el-col>
				  </el-row>
				  
				  <el-row :gutter="10">
			  		  <el-col :span="12">
			  			  <el-form-item label="Battery Series No." prop="battery_sid">
			  			  <el-input v-model="form.battery_sid" ></el-input>
			  			  </el-form-item>
			  		  </el-col>
			  		  <el-col :span="12">
			  			  <el-form-item label="Battery Serial No." prop="battery_num">
			  			  <el-input v-model="form.battery_num" ></el-input>
			  			  </el-form-item>
			  		  </el-col>
			  	  </el-row>
				  
			  	  <el-row :gutter="10">
			  	  <el-col :span="12">
			  		  <el-form-item label="Off Time" prop="end_t">
			  		  <!--<el-input v-model="form.end_t"></el-input>-->
					  <el-date-picker
						v-if="if_show_bt"
						key="2"
						style="width: 200px;"
					     v-model="form.end_t"
					     type="datetime"
					     placeholder="select date time"
						value-format="yyyy-MM-dd HH:mm:ss">
					   </el-date-picker>
					   <el-date-picker
						v-if="if_show_et"
							key="2"
							style="width: 200px;"
							  v-model="form.end_t"
							  type="datetime"
							  placeholder="select date time"
						   value-format="yyyy-MM-dd HH:mm:ss">
					    </el-date-picker>
			  		  </el-form-item>
			  	  </el-col>
				  <el-col :span="12">
					  <el-form-item label="Used Time(h)" prop="use_t">
					  <el-input-number v-model="form.use_t" :min="0" :precision="2"></el-input-number>
					  </el-form-item>
				  </el-col>
			  	  </el-row>
			  	  
			   </el-form>
			   <span slot="footer" class="dialog-footer">
			   <el-button @click="add_visible = false">Cancel</el-button>
			   <el-button id ="bt_ok" plain type="primary" @click="add_nb()">OK</el-button>
			   </span>
			  </el-dialog>
			  
			  <el-dialog
			   title="Battery Usage Information"
			   :visible.sync="update_visible"
			   :lock-scroll ="false"
			   width="50%">
			   <el-form ref="bform" :model="form" :rules="rules" label-width="160px" :inline="false" class="demo-form-inline" size="medium">
			  	  
			  				  <el-row :gutter="10">
			  					  <el-col :span="12">
			  						  <el-form-item label="Wellname" >
			  						  <el-input v-model="form.wellname" ></el-input>
			  						  </el-form-item>
			  					  </el-col>
			  				  </el-row>
			  				  
			  				  <el-row :gutter="10">
			  					  <el-col :span="12">
			  						  <el-form-item label="Sub Series No." prop="series_id">
			  						  <el-input v-model="form.series_id" ></el-input>
			  						  </el-form-item>
			  					  </el-col>
			  					  <el-col :span="12">
			  						  <el-form-item label="Sub Serial No." prop="instrument_id">
			  						  <el-input v-model="form.instrument_id" ></el-input>
			  						  </el-form-item>
			  					  </el-col>
			  				  </el-row>
			  				  
			  				  <el-row :gutter="10">
			  		  <el-col :span="12">
			  			  <el-form-item label="Battery Series No." prop="battery_sid">
			  			  <el-input v-model="form.battery_sid" :disabled="true"></el-input>
			  			  </el-form-item>
			  		  </el-col>
			  		  <el-col :span="12">
			  			  <el-form-item label="Battery Serial No." prop="battery_num">
			  			  <el-input v-model="form.battery_num" :disabled="true"></el-input>
			  			  </el-form-item>
			  		  </el-col>
			  	  </el-row>
			  				  
			  	  <el-row :gutter="10">
			  	  <el-col :span="12">
			  		  <el-form-item label="Off Time" prop="end_t">
			  		  <!--<el-input v-model="form.end_t"></el-input>-->
			  					  <el-date-picker
			  						v-if="if_show_bt"
			  						key="2"
			  						style="width: 200px;"
			  					     v-model="form.end_t"
			  					     type="datetime"
			  					     placeholder="select date time"
			  					  value-format="yyyy-MM-dd HH:mm:ss">
			  					   </el-date-picker>
								   <el-date-picker
			  					  	v-if="if_show_et"
								   			  						key="2"
								   			  						style="width: 200px;"
								      v-model="form.end_t"
								      type="datetime"
								      placeholder="select date time"
			  						  format="MM-dd-yyyy HH:mm:ss"
								   value-format="yyyy-MM-dd HH:mm:ss">
								    </el-date-picker>
			  		  </el-form-item>
			  	  </el-col>
			  				  <el-col :span="12">
			  					  <el-form-item label="Used Time(h)" prop="use_t">
			  					  <el-input-number v-model="form.use_t" :min="0" :precision="2"></el-input-number>
			  					  </el-form-item>
			  				  </el-col>
			  	  </el-row>
			  	  
			   </el-form>
			   <span slot="footer" class="dialog-footer">
			   <el-button @click="update_visible = false">Cancel</el-button>
			   <el-button id ="bt_ok" plain type="primary" @click="update_nb_his()">OK</el-button>
			   </span>
			  </el-dialog>
			  
			  
			  <el-dialog
			   title="Battery Usage Records"
			   :visible.sync="history_visible"
			   :lock-scroll ="false"
			   width="79%">
				<el-table
				    :data="his_tableData"
				    style="width: 100%;font-size:14px"
				    :height="tHeight1"
					:cell-style="{background:'#fff'}"
					border
					>
					<el-table-column
					  prop="wellname"
					  label="Wellname"
					  :width="100"
					  :show-overflow-tooltip="true">
					</el-table-column>
					<el-table-column
					  prop="sid"
					  label="Sub Series No."
					  :width="120"
					  :show-overflow-tooltip="true">
					</el-table-column>
					<el-table-column
					  prop="iid"
					  label="Sub Serial No."
					  :width="120">
					</el-table-column>
				    <el-table-column
				      prop="b_id"
				      label="Battery Series No."
				      :width="140"
					  :show-overflow-tooltip="true">
				    </el-table-column>
					<el-table-column
					  prop="b_code"
					  label="Battery Serial No."
					  :width="140">
					</el-table-column>
				    <el-table-column
				      prop="uset"
				      label="Used Time(h)"
				     :width="120">
				    </el-table-column>
					
					<el-table-column
				      prop="action"
				      label="Battery Action"
				     :width="120">
				    </el-table-column>
					
					<el-table-column
					  prop="time"
					  label="Time"
					 :width="170">
					</el-table-column>
				    
					<el-table-column
					      label="Operation"
					      width="120">
					      <template slot-scope="scope">
							  <el-button v-if="scope.row.flag==1" @click="update_b(scope.row)" type="text" size="medium">Update</el-button>
							  <el-button v-if="scope.row.flag==1" @click="remove_nb_his(scope.row)" type="text" size="medium">Delete</el-button>
							</template>
					    </el-table-column>
				  </el-table>
			</el-dialog>
		</div>
		`,
	data(){
		// 获取当前屏幕的分辨率
		let screenW = window.screen.width;
		let screenH = window.screen.height;
		console.log("screen width:",screenW);
		console.log("screen height:",screenH);
	  return {
		tHeight:screenH*0.8,
		tHeight1:screenH*0.5,
		tableData: Array(0),
		series_id_v:'',
		num_v:'',
		input:'',
		currentPage: 1,
		pagesize:50,
		recordTotal:0,
		
		add_visible:false,
		update_visible:false,
		
		form: {
			id:0,
			wellname:'',
			battery_sid:'',
			battery_num:'',
			series_id: '',
			instrument_id:'',
			begin_t:'',
			end_t:'',
			use_t:0,
		},
		
		rules: {
		    wellname: [
		        { required: true, message: 'cannot be empty', trigger: 'blur' }
		    ],
		    battery_sid: [
		        { required: true, message: 'cannot be empty', trigger: 'blur' }
		    ],
			battery_num: [
			    { required: true, message: 'cannot be empty', trigger: 'blur' }
			],
			series_id: [
			    { required: true, message: 'cannot be empty', trigger: 'blur' }
			],
			instrument_id: [
			    { required: true, message: 'cannot be empty', trigger: 'blur' }
			],
			begin_t: [
			    { required: true, message: 'cannot be empty', trigger: 'blur' }
			],
			end_t: [
			    { required: true, message: 'cannot be empty', trigger: 'blur' }
			],
		},
		history_visible:false,
		his_tableData:[],
		
		if_show_bt:true,
		if_show_et:false,
		ps_info:'',
	  }
	},
	mounted() {
		
		var _this = this;
		
		axios.post('/deescloud/get_page_setting', {
			opuser:localStorage.getItem("online_user"),
			opuser_uuid:localStorage.getItem("uuid"),
		  })
		  .then(function (response) {
				_this.$data.ps_info = response.data;
				if(response.data.r3=="1"){
					_this.$data.if_show_bt=true;
					_this.$data.if_show_et=false;
				}else{
					_this.$data.if_show_et=true;
					_this.$data.if_show_bt=false;
				}
		  })
		  .catch(function (error) {
		    console.log(error);
		  });
		
		var objs;
		axios.post('/deescloud/get_nb', {
			series_id: "",
			num: "",
		    index: this.$data.currentPage,
		    count: this.$data.pagesize
		  })
		  .then(function (response) {
		    console.log(response.data);
			objs = response.data.data;
			rcnt = response.data.total;
			_this.$data.tableData = objs;
			_this.$data.recordTotal = rcnt;
		  })
		  .catch(function (error) {
		    console.log(error);
		  });
		  
	},
	  methods: {
		get_nb_warning_csv(){
			var _this = this;
			
			axios.post('deescloud/get_nb_warning_csv_en',{
				opuser:localStorage.getItem("online_user"),
				opuser_uuid:localStorage.getItem("uuid"),
			},
			).then(function (response) {
				console.log(response.data);
				var fileid = response.data.fileId;
				
				var downUrl = 'file/'+fileid;
				downloadUrl("Battery warning record"+".csv",downUrl);
			})
			.catch(function (error) {
				console.log(error);
			});
		},
		get_nb_csv(){
			var _this = this;
			
			axios.post('deescloud/get_nb_csv_en',{
				opuser:localStorage.getItem("online_user"),
				opuser_uuid:localStorage.getItem("uuid"),
			},
			).then(function (response) {
				console.log(response.data);
				var fileid = response.data.fileId;
				
				var downUrl = 'file/'+fileid;
				downloadUrl("Battery usage records"+".csv",downUrl);
			})
			.catch(function (error) {
				console.log(error);
			});
		},
		remove_nb_his(row){
			var _this = this;
			
			var r;
			axios.post('/deescloud/remove_nb_his', {
				opuser:localStorage.getItem("online_user"),
				opuser_uuid:localStorage.getItem("uuid"),
				id: row.id,
				b_id: row.b_id,
				b_code:row.b_code,
			  })
			  .then(function (response) {
			    console.log(response.data);
				r = response.data.r;
				if (r==0){
					_this.$message({
						message: "Successfully deleted",
						type: "success",
						duration: 1500
					});
				}else{
					_this.$message({
						message: "Delete failed",
						type: "error",
						duration: 1500
					});
				}
				
				_this.get_nb_his_ex(row.b_id,row.b_code);
			  })
			  .catch(function (error) {
			    console.log(error);
			  });
		},
		update_nb_his(){
			this.$refs['bform'].validate((valid) => {
				if (valid) {
					var _this = this;
					
					var r;
					axios.post('/deescloud/update_nb_his', {
						opuser:localStorage.getItem("online_user"),
						opuser_uuid:localStorage.getItem("uuid"),
						id: _this.$data.form.id,
						wellname: _this.$data.form.wellname,
						sid: _this.$data.form.series_id,
					    iid: _this.$data.form.instrument_id,
					    b_id: _this.$data.form.battery_sid,
						b_code:_this.$data.form.battery_num,
						uset:_this.$data.form.use_t,
						action:0,
						time:_this.$data.form.end_t,
					  })
					  .then(function (response) {
					    console.log(response.data);
						r = response.data.r;
						if (r==0){
							_this.$message({
								message: "Successfully modified",
								type: "success",
								duration: 1500
							});
						}else{
							_this.$message({
								message: "Modification failed",
								type: "error",
								duration: 1500
							});
						}
						
						_this.get_nb_his_ex(_this.$data.form.battery_sid,_this.$data.form.battery_num);
						_this.$data.update_visible=false;
					  })
					  .catch(function (error) {
					    console.log(error);
					  });
				}})
		},
		update_b(row){
			this.$data.form.id=row.id;
			this.$data.form.wellname=row.wellname;
			this.$data.form.battery_sid=row.b_id;
			this.$data.form.battery_num=row.b_code;
			this.$data.form.series_id= row.sid;
			this.$data.form.instrument_id=row.iid;
			this.$data.form.begin_t='';
			console.log(row.time.length)
			
			if(this.$data.ps_info.r3=="1"){
				this.$data.form.end_t=row.time;
			}else{
				if (row.time.length>=19){
					var result = row.time.split(" ")
					var arr = result[0].split("-")
					var t = arr[2]+"-"+arr[0]+"-"+arr[1] +" " + result[1];
					console.log(t);
					this.$data.form.end_t=t;
				}
			}
			
			this.$data.form.use_t=row.uset;
			
			this.$nextTick(() => {
				this.$refs['bform'].clearValidate()
			});
			this.$data.update_visible=true;
		},
		input_change(value) {
			this.get_nb();
		},
		add_nb(){
			this.$refs['bform'].validate((valid) => {
				if (valid) {
					var _this = this;
					
					var r;
					axios.post('/deescloud/add_nb_his', {
						opuser:localStorage.getItem("online_user"),
						opuser_uuid:localStorage.getItem("uuid"),
						wellname: _this.$data.form.wellname,
						sid: _this.$data.form.series_id,
					    iid: _this.$data.form.instrument_id,
					    b_id: _this.$data.form.battery_sid,
						b_code:_this.$data.form.battery_num,
						uset:_this.$data.form.use_t,
						action:0,
						time:_this.$data.form.end_t,
					  })
					  .then(function (response) {
					    console.log(response.data);
						r = response.data.r;
						if (r==0){
							_this.$message({
								message: "Added successfully",
								type: "success",
								duration: 1500
							});
						}else{
							_this.$message({
								message: "Add failed",
								type: "error",
								duration: 1500
							});
						}
						
						_this.$data.add_visible=false;
					  })
					  .catch(function (error) {
					    console.log(error);
					  });
				}})
		},
		add_nb_dialog(){
			document.getElementById("bt_add").blur();
			
			this.$data.form.wellname='',
			this.$data.form.battery_sid='',
			this.$data.form.battery_num='',
			this.$data.form.series_id= '',
			this.$data.form.instrument_id='',
			this.$data.form.begin_t='',
			this.$data.form.end_t='',
			this.$data.form.use_t=0,
			
			this.$nextTick(() => {
				this.$refs['bform'].clearValidate()
			});
			this.$data.add_visible=true;
		},
		get_nb(){
			  
			document.getElementById("bt_serach").blur();
		  	
		  	this.$data.currentPage=1;
		  	
			var _this = this;
			
			var objs;
			axios.post('/deescloud/get_nb', {
				series_id: _this.$data.series_id_v,
				num: _this.$data.num_v,
			    index: this.$data.currentPage,
			    count: this.$data.pagesize
			  })
			  .then(function (response) {
			    console.log(response.data);
				objs = response.data.data;
				rcnt = response.data.total;
				_this.$data.tableData = objs;
				_this.$data.recordTotal = rcnt;
			  })
			  .catch(function (error) {
			    console.log(error);
			  });
			
		  },
		  
		handleSizeChange(val) {
			  //console.log(`每页 ${val} 条`);
			  this.$data.pagesize = val;
			  
			  var _this = this;
			  
			  var objs;
			  axios.post('/deescloud/get_nb', {
					series_id: _this.$data.series_id_v,
					num: _this.$data.num_v,
					index: this.$data.currentPage,
					count: this.$data.pagesize
				})
				.then(function (response) {
				  console.log(response.data);
				objs = response.data.data;
				rcnt = response.data.total;
				_this.$data.tableData = objs;
				_this.$data.recordTotal = rcnt;
				})
				.catch(function (error) {
				  console.log(error);
				});
		},
		handleCurrentChange(val) {
		  //console.log(`当前页: ${val}`);
		  this.$data.currentPage = val;
		  
		  var _this = this;
		  
		  var objs;
		  axios.post('/deescloud/get_nb', {
					series_id: _this.$data.series_id_v,
					num: _this.$data.num_v,
					index: this.$data.currentPage,
					count: this.$data.pagesize
				})
				.then(function (response) {
				  console.log(response.data);
				objs = response.data.data;
				rcnt = response.data.total;
				_this.$data.tableData = objs;
				_this.$data.recordTotal = rcnt;
				})
				.catch(function (error) {
				  console.log(error);
				});
				
		},
		
		get_nb_his_ex(b_id,b_code){
			var _this = this;
			
			var objs;
			axios.post('/deescloud/get_nb_his_en', {
				opuser:localStorage.getItem("online_user"),
				opuser_uuid:localStorage.getItem("uuid"),
					b_id: b_id,
					b_code: b_code,
				})
				.then(function (response) {
				  console.log(response.data);
					objs = response.data.data;
					_this.$data.his_tableData = objs;
				})
				.catch(function (error) {
				  console.log(error);
				});
			
		},
		
		get_nb_his(row){
			var _this = this;
			
			var objs;
			axios.post('/deescloud/get_nb_his_en', {
				opuser:localStorage.getItem("online_user"),
				opuser_uuid:localStorage.getItem("uuid"),
					b_id: row.b_id,
					b_code: row.b_code,
					index: this.$data.currentPage,
					count: this.$data.pagesize
				})
				.then(function (response) {
				  console.log(response.data);
					objs = response.data.data;
					_this.$data.his_tableData = objs;
					
					_this.$data.history_visible=true;
				})
				.catch(function (error) {
				  console.log(error);
				});
			
		},
		
	  }
	}