//组件
var WellHistorycomponent = {
	template:`
	<div style="height: 100%;width: 100%;">
	<div v-show="if_show0">
		<div id="" style="display: inline-block;width: 100%;margin-top: 10px;">
			<div style="float: left;display: flex;background-color: #ECF5FF;">
				<el-input v-model="input" placeholder="请输入井名" clearable style="width: 150px;"></el-input>
			</div>
			<div style="float: left;display: flex;background-color: #ECF5FF;">
				<el-date-picker
					v-if="if_show_bt==1"
					 v-model="begin_t"
					 type="datetime"
					 placeholder="开始时间"
					 format="yyyy-MM-dd HH:mm:ss"
					value-format="yyyy-MM-dd HH:mm:ss">
				</el-date-picker>
				<el-date-picker
					v-if="if_show_bt==2"
					 v-model="begin_t"
					 type="datetime"
					 placeholder="开始时间"
					 format="MM-dd-yyyy HH:mm:ss"
					value-format="yyyy-MM-dd HH:mm:ss">
				</el-date-picker>
				<el-date-picker
					v-if="if_show_bt==3"
					 v-model="begin_t"
					 type="datetime"
					 placeholder="开始时间"
					 format="dd-MM-yyyy HH:mm:ss"
					value-format="yyyy-MM-dd HH:mm:ss">
				</el-date-picker>
			</div>
			<div style="float: left;display: flex;background-color: #ECF5FF;">
				<el-date-picker
					v-if="if_show_bt==1"
					 v-model="end_t"
					 type="datetime"
					 placeholder="结束时间"
					value-format="yyyy-MM-dd HH:mm:ss">
				</el-date-picker>
				<el-date-picker
					v-if="if_show_bt==2"
					 v-model="end_t"
					 type="datetime"
					 placeholder="结束时间"
					 format="MM-dd-yyyy HH:mm:ss"
					value-format="yyyy-MM-dd HH:mm:ss">
				</el-date-picker>
				<el-date-picker
					v-if="if_show_bt==3"
					 v-model="end_t"
					 type="datetime"
					 placeholder="结束时间"
					 format="dd-MM-yyyy HH:mm:ss"
					value-format="yyyy-MM-dd HH:mm:ss">
				</el-date-picker>
			</div>
			<!-- 新增：类型筛选下拉框（多选） -->
			<div style="float: left;display: flex;background-color: #ECF5FF;">
				<el-select 
					v-model="selectedTypes" 
					multiple 
					collapse-tags
					placeholder="请选择井测试类型"
					clearable
					style="width: 220px;">
					<el-option
						v-for="item in typeOptions"
						:key="item.value"
						:label="item.label"
						:value="item.value">
					</el-option>
				</el-select>
			</div>
			<div style="float: left;margin-left: 5px;">
				<el-checkbox style="background-color: #ECF5FF;" v-model="checked" label="工程服务" border></el-checkbox>
			</div>
			<div style="float: left;margin-left: 5px;">
				<el-button id ="bt_serach" plain type="primary" icon="el-icon-search" @click="getWellEx(input)">搜索</el-button>
			</div>
		</div>
		<div class="span">
			<el-table
			    :data="tableData"
				:height="tHeight"
			    style="font-size:14px;overflow-y: auto;"
				:cell-style="{background:'#304156'}"
				border
				>
			    <el-table-column
			      prop="wellNameSource"
			      label="井名称"
			      :width="150"
				  :show-overflow-tooltip="true">
			    </el-table-column>
			    <el-table-column
			      prop="wellstate"
			      label="井状态"
			      width="60">
			    </el-table-column>
			    <el-table-column
			      prop="welltime"
			      label="建井时间"
			     :width="170">
			    </el-table-column>
			    <el-table-column
				      prop="welloperator"
				      label="操作用户"
				      :width="150"
					  :show-overflow-tooltip="true">
			    </el-table-column>
				<!-- 修改：将井测试类型列改为普通文本列，以保持与其他列样式一致 -->
				<el-table-column
				  prop="type_name"
				  label="井测试类型"
				  :width="200"
				  :show-overflow-tooltip="true">
				</el-table-column>
				<el-table-column
				      label="操作"
				      width="140">
				      <template slot-scope="scope">
					  <div style="flex: 1;display: inline-flex;">
						<div v-if="!scope.row.rt_flag">
							<svg  style="bottom: 5px;" t="1683783351758" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2560" width="8" height="8"><path d="M512 512m-469.333333 0a469.333333 469.333333 0 1 0 938.666666 0 469.333333 469.333333 0 1 0-938.666666 0Z" fill="#d81e06" p-id="2561"></path></svg>
						</div>
					  	<el-button @click="handleClick(scope.row)" type="text" size="medium">历史详情</el-button>
						<el-button @click="exportWellHis(scope.row)" type="text" size="medium">导出</el-button>
					  </div>
				    </template>
				</el-table-column>
			  </el-table>
		</div>
		
		<div class="block">
		    <span class="demonstration" style="background-color: #ECF5FF;"></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" style="background-color: #ECF5FF;">
		    </el-pagination>
		  </div>
	</div>
	<div v-show="if_show" style="text-align: center; width: 100%;;font-size: 14px;">
	  <el-tag type="warning" style="width: 100%;height: 50px;font-size: 14px;">用户没有本菜单权限!</el-tag>
	</div>
	
	<el-dialog
	  title="解码参数单位"
	  :visible.sync="dialogVisible"
	  width="30%"
	  >
	  <template>
			<div class="text item">
				<span style="margin-right: 20px;">压力</span>
				<el-radio v-model="radio1" label="1" >Mpa</el-radio>
				<el-radio v-model="radio1" label="2" >psi</el-radio>
			</div>
	  </template>
	  
	  <template>
			<div class="text item" style="margin-top: 20px;">
				<span style="margin-right: 20px;">温度</span>
				<el-radio v-model="radio2" label="1" >℃</el-radio>
				<el-radio v-model="radio2" label="2" >℉</el-radio>
			</div>
	  </template>
	  
	  <span slot="footer" class="dialog-footer">
	    <el-button @click="dialogVisible = false">取 消</el-button>
	    <el-button type="primary" @click="export_his">确 定</el-button>
	  </span>
	</el-dialog>
	
	</div>
	`,
	data(){
		// 获取当前屏幕的分辨率
		let screenW = window.screen.width;
		let screenH = window.innerHeight;
		console.log("screen width:",screenW);
		console.log("screen height:",screenH);
	  return {
		tHeight:screenH-192,
		tableData: Array(0),
		input:'',
		currentPage: 1,
		pagesize:50,
		recordTotal:0,
		date_value:[],
		begin_t:'',
		end_t:'',
		
		if_show0:false,
		if_show:false,
		
		dialogVisible:false,
		sel_wellname:'',
		radio1:'1',
		radio2:'1',
		
		if_show_bt:1,
		if_show_et:false,
		
		checked:false,
		
		// 新增：类型筛选相关
		selectedTypes: [],  // 选中的类型值数组，如 [0, 2, 5]
		typeOptions: [
			{ value: 0, label: '测斜' },
			{ value: 1, label: '近钻头' },
			{ value: 2, label: '电阻率' },
			{ value: 3, label: '探管式方位伽马' },
			{ value: 4, label: '钻铤式方位伽马' },
			{ value: 5, label: '自然伽马' },
			{ value: 6, label: '工程参数' },
			{ value: 7, label: '振动粘滑' }
		]
	  }
	},
	mounted() {
		
		if (localStorage.getItem("level")==4) {
			this.$data.if_show = true;
			return;
		}
		this.$data.if_show0= true;
		
		var _this = this;
		
		axios.post('/deescloud/get_page_setting', {
			opuser:localStorage.getItem("online_user"),
			opuser_uuid:localStorage.getItem("uuid"),
		  })
		  .then(function (response) {
				if(response.data.r3=="1"){
					_this.$data.if_show_bt=1;
					//_this.$data.if_show_et=false;
				}else if(response.data.r3=="2"){
					//_this.$data.if_show_et=true;
					_this.$data.if_show_bt=2;
				}else if(response.data.r3=="3"){
					//_this.$data.if_show_et=true;
					_this.$data.if_show_bt=3;
				}else{
					_this.$data.if_show_bt=1;
				}
		  })
		  .catch(function (error) {
		    console.log(error);
		  });
		
		// 初始化加载数据
		this.fetchData();
	},
	methods: {
		// 新增：将选中的类型数组转换为位掩码
		getTypeMask() {
			let mask = 0;
			if (this.selectedTypes && this.selectedTypes.length > 0) {
				this.selectedTypes.forEach(val => {
					mask |= (1 << val);
				});
			}
			return mask;
		},
		
		// 新增：统一的查询数据方法
		fetchData() {
			var _this = this;
			
			// 获取类型位掩码
			const typeMask = this.getTypeMask();
			
			axios.post('/deescloud/get_well_history', {
				opuser: localStorage.getItem("online_user"),
				opuser_uuid: localStorage.getItem("uuid"),
				Wellname: this.input,
				index: this.currentPage,
				count: this.pagesize,
				BeginTime: this.begin_t,
				EndTime: this.end_t,
				checked: this.checked,
				type: typeMask  // 新增：传递类型筛选参数
			})
			.then(function (response) {
				console.log(response.data);
				_this.tableData = response.data.data || [];
				_this.recordTotal = response.data.total || 0;
			})
			.catch(function (error) {
				console.log(error);
				_this.$message.error('查询失败，请稍后重试');
			});
		},
		
		export_his(){
			this.$data.dialogVisible=false;
			
			var _this = this;
			
			axios.post('deescloud/exportWellHistory',{
				opuser:localStorage.getItem("online_user"),
				opuser_uuid:localStorage.getItem("uuid"),
				id: this.$data.sel_wellname,
				if_asc:false,
				r1:this.$data.radio1,
				r2:this.$data.radio2,
			},
			).then(function (response) {
				console.log(response.data);
				var fileid = response.data.fileId;
				
				var downUrl = 'file/'+fileid;
				downloadUrl(_this.$data.sel_wellname+".csv",downUrl);
			})
			.catch(function (error) {
				console.log(error);
			});
		},
		
		exportWellHis(row){
			this.$data.sel_wellname = row.wellNameSource;
			
			this.export_his();
			//this.$data.dialogVisible=true;
		},
		  
		getWellEx(_search_name){
		  
			document.getElementById("bt_serach").blur();

			this.currentPage = 1;

			if (this.begin_t != '' && this.end_t != '' && this.begin_t > this.end_t) {
				this.$message({
					message: '结束时间必须在开始时间之后!',
					type: 'warning',
					duration: 1500
				});
				return;
			}

			// 调用统一的查询方法
			this.fetchData();
		},
		  
		handleSizeChange(val) {
			this.pagesize = val;
			this.currentPage = 1;
			
			if (this.begin_t != '' && this.end_t != '' && this.begin_t > this.end_t) {
				this.$message({
					message: '结束时间必须在开始时间之后!',
					type: 'warning',
					duration: 1500
				});
				return;
			}
			
			this.fetchData();
		},
		
		handleCurrentChange(val) {
			this.currentPage = val;
			
			if (this.begin_t != '' && this.end_t != '' && this.begin_t > this.end_t) {
				this.$message({
					message: '结束时间必须在开始时间之后!',
					type: 'warning',
					duration: 1500
				});
				return;
			}
			
			this.fetchData();
		},
		
		handleClick(row){
			var url = 'hisd.html?id='+row.wellNameSource+'&sid='+row.wellstate+'&iid='+row.welloperator;
			url = encodeURI(url);
			window.open(url, "");
		},
		
		flexColumnWidth(str, tableData, flag = 'max') {
		  // str为该列的字段名(传字符串);tableData为该表格的数据源(传变量);
		  // flag为可选值，可不传该参数,传参时可选'max'或'equal',默认为'max'
		  // flag为'max'则设置列宽适配该列中最长的内容,flag为'equal'则设置列宽适配该列中第一行内容的长度。
		  
		  let maxContext = new Array();
		  
		  str = str + ''
		  let columnContent = ''
		  if (!tableData || !tableData.length || tableData.length === 0 || tableData === undefined) {
		    return '120px'
		  }
		  if (!str || !str.length || str.length === 0 || str === undefined) {
		    return '120px'
		  }
		  if (flag === 'equal') {
		    // 获取该列中第一个不为空的数据(内容)
		    for (let i = 0; i < tableData.length; i++) {
		      if (tableData[i][str].length > 0) {
		        // console.log('该列数据[0]:', tableData[0][str])
		        columnContent = tableData[i][str]
		        break
		      }
		    }
		  } else {
		    // 获取该列中最长的数据(内容)
		    let index = 0
		    for (let i = 0; i < tableData.length; i++) {
		      if (tableData[i][str] === null) {
		        return
		      }
		      const now_temp = tableData[i][str] + ''
		      const max_temp = tableData[index][str] + ''
		      if (now_temp.length >= max_temp.length) {
		        index = i
		      }
		    }
		    columnContent = tableData[index][str]
			
			maxContext.push(columnContent);
		  }
		  // console.log('该列数据[i]:', columnContent)
		  // 以下分配的单位长度可根据实际需求进行调整
		  
		  //console.log(columnContent);
		  let max_flex_width = 0
		  
		  for (let i = 0; i < maxContext.length; i++) {
			let flexWidth = 0;
		  	for (const char of maxContext[i]) {
		  	  if ((char >= 'A' && char <= 'Z') || (char >= 'a' && char <= 'z')) {
		  	    // 如果是英文字符，为字符分配8个单位宽度
		  	    flexWidth += 8
		  	  } else if (char >= '\u4e00' && char <= '\u9fa5') {
		  	    // 如果是中文字符，为字符分配15个单位宽度
		  	    flexWidth += 15
		  	  } else {
		  	    // 其他种类字符，为字符分配8个单位宽度
		  	    flexWidth += 8
		  	  }
		  	}
			
			if (flexWidth>max_flex_width) {
				max_flex_width = flexWidth;
				console.log(maxContext[i]);
			}
		  }
		  
		  if (max_flex_width < 120) {
		    // 设置最小宽度
		    max_flex_width = 120
		  }
			if (max_flex_width > 300) {
			 // 设置最大宽度
			 max_flex_width = 300
			}
		  
		  //flexWidth = flexWidth;//20-padding
		  console.log("max_flex_width:",max_flex_width);
		  return max_flex_width + 'px'
		},
	  }
}