var devcomponent_en = {


	template:`
		<div>
			<div style="display: flex;margin-top: 10px; flex-wrap: wrap; align-items: center;">
				<el-radio-group v-model="radio1" @change="radio_change" style="display: inline-flex; flex-direction: row; flex-wrap: nowrap;">
				<el-radio-button label="1">Well</el-radio-button>
				<el-radio-button label="2">Equipment</el-radio-button>
				</el-radio-group>
				<!-- Well tab filter box, placed in the same row as the tab -->
				<div v-if="radio1=='1'" style="display: flex; margin-left: 20px; align-items: center;">
					<el-input v-model="input" placeholder="Enter well name" clearable style="width: 200px;"></el-input>
					<el-button style="margin-left: 5px;" id ="bt_serach" plain type="primary" icon="el-icon-search" @click="getWell(input)">Search</el-button>
					<el-button style="margin-left: 5px;" id ="bt_add" plain type="primary" icon="el-icon-circle-plus-outline" @click="add_dev_manage_dialog()">Add</el-button>
				</div>
				<!-- Equipment tab time filter box, in the same row as the tab -->
				<div v-if="radio1=='2'" style="display: flex; margin-left: 20px; align-items: center; flex-wrap: wrap;">
					<el-date-picker
						v-model="devSearchForm.in_time_start"
						type="date"
						placeholder="Start in-hole time"
						value-format="yyyy-MM-dd"
						:picker-options="startTimeOptions"
						style="width: 160px;">
					</el-date-picker>
					<el-date-picker
						v-model="devSearchForm.in_time_end"
						type="date"
						placeholder="End in-hole time"
						value-format="yyyy-MM-dd"
						:picker-options="endTimeOptions"
						style="width: 160px; margin-left: 5px;">
					</el-date-picker>
			
				</div>

				<!-- Equipment tab filter box, in the same row as the tab -->
				<div v-if="radio1=='2'" style="display: flex; align-items: center; margin-top: 10px; flex-wrap: wrap; white-space: nowrap;">
					<el-select v-model="devSearchForm.wellnameList" placeholder="Enter well name" filterable clearable multiple collapse-tags style="width: 240px; max-width: 380px; margin-left: 0px;">
						<el-option v-for="item in devWellnameOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
					<el-select v-model="devSearchForm.sid" placeholder="Enter Instrument Serial No." filterable clearable multiple collapse-tags style="width: 180px; max-width: 320px; margin-left: 5px;">
						<el-option v-for="item in devSidOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
					<el-select v-model="devSearchForm.iid" placeholder="Enter Instrument Series No." filterable clearable multiple collapse-tags style="width: 180px; max-width: 320px; margin-left: 5px;">
						<el-option v-for="item in devIidOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
					<el-select v-model="devSearchForm.engineerList" placeholder="Enter Engineer" filterable clearable multiple collapse-tags style="width: 200px; max-width: 320px; margin-left: 5px;">
						<el-option v-for="item in devEngineerOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
					<el-button style="margin-left: 5px;" plain type="primary" icon="el-icon-search" @click="getDevList()">Search</el-button>
					<el-button style="margin-left: 5px;" plain type="primary" icon="el-icon-document-checked" @click="exportSeirDetail()">Exp Inst</el-button>
					<el-button style="margin-left: 5px;" plain type="primary" icon="el-icon-document-checked" @click="exportWellDetail()">Exp Well</el-button>
				</div>
			</div>
			<div class="span" v-if='radio1=="1"' style="height: calc(100vh - 200px); overflow-x: auto;">
				<el-table
				    :data="tableData"
				    style="width: 100%;font-size:14px"
				    height="100%"
					:cell-style="{background:'#304156'}"
					border
					>
				    <el-table-column
				      prop="wellNameSource"
				      label="Well Name"
				      :width="150"
					  :show-overflow-tooltip="true">
				    </el-table-column>
				    <el-table-column
				      prop="welltime"
				      label="Well Creation Time"
				     :width="170">
				    </el-table-column>
				    
				    <el-table-column
				      prop="welloperator"
				      label="Operating User"
				      :width="150"
					  :show-overflow-tooltip="true">
				    </el-table-column>
					<el-table-column
					  prop="upload_user"
					  label="Upload User"
					  :width="150"
					  :show-overflow-tooltip="true">
					</el-table-column>
					<el-table-column
					      label="Actions"
					      width="120">
					      <template slot-scope="scope">
							  <el-button @click="show_pdf(scope.row)" type="text" size="medium">Details</el-button>
							<el-button @click="export_pdf(scope.row)" type="text" size="medium">Export</el-button>
						  </template>
					    </el-table-column>
				  </el-table>
			</div>
			<div class="block" v-if='radio1=="1"'>
			    <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 class="span" v-if='radio1=="2"' style="height: calc(100vh - 250px); overflow-x: auto;">
					<el-table
						:data="devListTableData"
						style="width: 100%;font-size:14px"
						height="100%"
						:cell-style="{background:'#304156'}"
						border
					>
				    <el-table-column
				      prop="instrument_name"
				      label="Instrument Name"
				      :width="150"
					  :show-overflow-tooltip="true">
				    </el-table-column>
				    <el-table-column
				      prop="sid"
				      label="Instrument Series No."
				     :width="200">
				    </el-table-column>
				    
				    <el-table-column
				      prop="iid"
				      label="Instrument Serial No."
				      :width="200"
					  :show-overflow-tooltip="true">
				    </el-table-column>
					<el-table-column
					  prop="wellname"
					  label="Well Name"
					  :width="150"
					  :show-overflow-tooltip="true">
					</el-table-column>
					<el-table-column
					      prop="in_time"
					      label="In-hole Time"
					      width="160">
					    </el-table-column>
					<el-table-column
					      prop="out_time"
					      label="Out-of-hole Time"
					      width="160">
					    </el-table-column>
					<el-table-column
					      prop="engineer"
					      label="Engineer"
					      width="120">
					    </el-table-column>
					<el-table-column
					      prop="duration_current"
					      label="Current Time(h)"
					      width="120">
					    </el-table-column>
					<el-table-column
					      prop="duration_total"
					      label="Total Time(h)"
					      width="120">
					    </el-table-column>
					<el-table-column
					      prop="location"
					      label="Location"
					      width="150"
						  :show-overflow-tooltip="true">
					    </el-table-column>
				  </el-table>
			</div>
			<div class="block" v-if='radio1=="2"' style="margin-top: 5px; margin-bottom: 5px;">
			    <span class="demonstration" style="background-color: #ECF5FF;"></span>
			    <el-pagination
			      @size-change="handleDevSizeChange"
			      @current-change="handleDevCurrentChange"
			      :current-page="devCurrentPage"
			      :page-sizes="[50,100, 200, 300]"
			      :page-size="devPagesize"
			      layout="total, sizes, prev, pager, next, jumper"
			      :total="devRecordTotal" style="background-color: #ECF5FF;">
			    </el-pagination>
			  </div>
			  
			<el-dialog
			 title="Equipment Asset Information"
			 :visible.sync="pdf_visible"
			 :lock-scroll ="false"
			 :append-to-body="true"
			 width="93%">
				<el-table
				    :data="dev_tableData"
				    style="width: 100%;font-size:14px"
				    :height="tHeight1"
					:cell-style="{background:'#304156'}"
					border
					>
					<el-table-column
					  prop="wellname"
					  label="Well Name"
					  :width="150"
					  :show-overflow-tooltip="true">
					</el-table-column>
					<el-table-column
					  prop="sid"
					  label="Serial Number"
					  :width="100"
					  :show-overflow-tooltip="true">
					</el-table-column>
					<el-table-column
					  prop="iid"
					  label="ID"
					  :width="100">
					</el-table-column>
				    <el-table-column
				      prop="ver"
				      label="Version"
				      :width="100"
					  :show-overflow-tooltip="true">
				    </el-table-column>
					<el-table-column
					  prop="p_date"
					  label="Production Date"
					  :width="100">
					</el-table-column>
				    <el-table-column
				      prop="cal_date"
				      label="Calibration Date"
				     :width="100">
				    </el-table-column>
					
					<el-table-column
					  prop="total_wt"
					  label="Total Production Hours"
					     :width="100">
					</el-table-column>
					
					<el-table-column
					  prop="cur_wt"
					  label="Current Session Hours"
					 :width="100">
					</el-table-column>
					
					<!--
					<el-table-column
					  prop="repair_cnt"
					  label="Maintenance Count"
					 :width="100">
					</el-table-column>
					-->
					
					<el-table-column
					  prop="region"
					  label="Region"
					 :width="100">
					</el-table-column>
					
					<el-table-column
					  prop="location"
					  label="Location"
					 :width="100"
					 :show-overflow-tooltip="true">
					</el-table-column>
					
					<el-table-column
					  prop="responsible"
					  label="Responsible Person"
					 :width="100"
					 :show-overflow-tooltip="true">
					</el-table-column>
				    
					<el-table-column
					      label="Actions"
					      width="100">
					      <template slot-scope="scope">
							  <el-button v-if="scope.row.flag" @click="update_dev_m_dialog(scope.row)" type="text" size="medium">Edit</el-button>
							  <el-button v-if="scope.row.flag" @click="remove_dev_m(scope.row)" type="text" size="medium">Delete</el-button>
							</template>
					    </el-table-column>
				  </el-table>
			</el-dialog>
			
			<el-dialog
			 title="Equipment Information"
			 :visible.sync="add_visible"
			 :lock-scroll ="false"
			 width="45%">
			 <el-form ref="bform" :model="form" :rules="rules" label-width="100px" :inline="false" class="demo-form-inline" size="medium">
				  
				  <el-row :gutter="10">
					  <el-col :span="12">
						  <el-form-item label="Well Name"  prop="wellname">
						  <el-select v-model="form.wellname" filterable placeholder="Select well name">
						      <el-option
						        v-for="item in wellnames"
						        :key="item.value"
						        :label="item.label"
						        :value="item.value">
						      </el-option>
						    </el-select>
						  </el-form-item>
					  </el-col>
					  <el-col :span="12">
							  <el-form-item label="Serial Number" prop="sid">
							  <el-input v-model="form.sid" ></el-input>
							  </el-form-item>
					  </el-col>
				  </el-row>
				  
				  <el-row :gutter="10">
					  <el-col :span="12">
						  <el-form-item label="ID" prop="iid">
						  <el-input v-model="form.iid" ></el-input>
						  </el-form-item>
					  </el-col>
					  <el-col :span="12">
						  <el-form-item label="Version" prop="ver">
						  <el-input v-model="form.ver" ></el-input>
						  </el-form-item>
					  </el-col>
				  </el-row>
							  
				  <el-row :gutter="10">
					  <el-col :span="12">
						  <el-form-item label="Production Date" prop="p_date">
							  <el-date-picker
								v-if="if_show_bt"
								key="2"
								style="width: 200px;"
								 v-model="form.p_date"
								 type="date"
								 placeholder="Select date"
								value-format="yyyy-MM-dd">
							   </el-date-picker>
							   <el-date-picker
								v-if="if_show_et"
								key="2"
								style="width: 200px;"
								 v-model="form.p_date"
								 type="date"
								 placeholder="Select date"
								 format="MM-dd-yyyy"
								value-format="yyyy-MM-dd">
							    </el-date-picker>
						  </el-form-item>
					  </el-col>
					  <el-col :span="12">
					    <el-form-item label="Calibration Date" prop="cal_date">
					  	  <el-date-picker
						  v-if="if_show_bt"
					  		key="2"
					  		style="width: 200px;"
					  		 v-model="form.cal_date"
					  		 type="date"
					  		 placeholder="Select date"
					  		value-format="yyyy-MM-dd">
					  	   </el-date-picker>
						   <el-date-picker
								v-if="if_show_et"
								key="2"
								style="width: 200px;"
								 v-model="form.cal_date"
								 type="date"
								 placeholder="Select date"
								 format="MM-dd-yyyy"
								value-format="yyyy-MM-dd">
						    </el-date-picker>
					    </el-form-item>
					  </el-row>
							  
				  <el-row :gutter="10">
						  <el-col :span="12">
							  <el-form-item label="Total Production Hours" prop="total_wt">
								<el-input v-model="form.total_wt" ></el-input>
							  </el-form-item>
						  </el-col>
						  <el-col :span="12">
						    <el-form-item label="Current Session Hours" prop="cur_wt">
						  	<el-input v-model="form.cur_wt" ></el-input>
						    </el-form-item>
						  </el-col>
				  </el-row>
				  
				  <el-row :gutter="10">
					  <el-col :span="12">
						  <el-form-item label="Location" prop="location">
							<el-input v-model="form.location" ></el-input>
						  </el-form-item>
					  </el-col>
					  <el-col :span="12">
					    <el-form-item label="Responsible Person" prop="responsible">
					  	<el-input v-model="form.responsible" ></el-input>
					    </el-form-item>
					  </el-col>
				  </el-row>
				  
				  <el-row :gutter="10">
					  <!--<el-col :span="12">
						  <el-form-item label="Maintenance Count" prop="repair_cnt">
							<el-input v-model="form.repair_cnt" ></el-input>
						  </el-form-item>
					  </el-col>
					  -->
					  <el-col :span="12">
						<el-form-item label="Region" prop="region">
						<el-input v-model="form.region" ></el-input>
						</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_dev_manage()">Confirm</el-button>
			 </span>
			</el-dialog>
			
			
			<el-dialog
			 title="Equipment Information"
			 :visible.sync="update_visible"
			 :lock-scroll ="false"
			 width="45%">
			 <el-form ref="bform" :model="form" :rules="rules" label-width="100px" :inline="false" class="demo-form-inline" size="medium">
				  
				  <el-row :gutter="10">
					  <el-col :span="12">
						  <el-form-item label="Well Name"  prop="wellname">
						  <el-select v-model="form.wellname" filterable placeholder="Select well name" disabled >
						      <el-option
						        v-for="item in wellnames"
						        :key="item.value"
						        :label="item.label"
						        :value="item.value">
						      </el-option>
						    </el-select>
						  </el-form-item>
					  </el-col>
					  <el-col :span="12">
							  <el-form-item label="Serial Number" prop="sid">
							  <el-input v-model="form.sid" ></el-input>
							  </el-form-item>
					  </el-col>
				  </el-row>
				  
				  <el-row :gutter="10">
					  <el-col :span="12">
						  <el-form-item label="ID" prop="iid">
						  <el-input v-model="form.iid" ></el-input>
						  </el-form-item>
					  </el-col>
					  <el-col :span="12">
						  <el-form-item label="Version" prop="ver">
						  <el-input v-model="form.ver" ></el-input>
						  </el-form-item>
					  </el-col>
				  </el-row>
							  
				  <el-row :gutter="10">
					  <el-col :span="12">
						  <el-form-item label="Production Date" prop="p_date">
							   <el-date-picker
									v-if="if_show_bt"
									key="2"
									style="width: 200px;"
									 v-model="form.p_date"
									 type="date"
									 placeholder="Select date"
									value-format="yyyy-MM-dd">
							    </el-date-picker>
							    <el-date-picker
									v-if="if_show_et"
									key="2"
									style="width: 200px;"
									 v-model="form.p_date"
									 type="date"
									 placeholder="Select date"
									 format="MM-dd-yyyy"
									value-format="yyyy-MM-dd">
							     </el-date-picker>
						  </el-form-item>
					  </el-col>
					  <el-col :span="12">
					    <el-form-item label="Calibration Date" prop="cal_date">
					  	 <el-date-picker
							v-if="if_show_bt"
							key="2"
							style="width: 200px;"
							 v-model="form.cal_date"
							 type="date"
							 placeholder="Select date"
							value-format="yyyy-MM-dd">
					  	  </el-date-picker>
					  	  <el-date-picker
								v-if="if_show_et"
								key="2"
								style="width: 200px;"
								 v-model="form.cal_date"
								 type="date"
								 placeholder="Select date"
								 format="MM-dd-yyyy"
								value-format="yyyy-MM-dd">
					  	   </el-date-picker>
					    </el-form-item>
					  </el-row>
							  
				  <el-row :gutter="10">
						  <el-col :span="12">
							  <el-form-item label="Total Production Hours" prop="total_wt">
								<el-input v-model="form.total_wt" ></el-input>
							  </el-form-item>
						  </el-col>
						  <el-col :span="12">
						    <el-form-item label="Current Session Hours" prop="cur_wt">
						  	<el-input v-model="form.cur_wt" ></el-input>
						    </el-form-item>
						  </el-col>
				  </el-row>
				  
				  <el-row :gutter="10">
					  <el-col :span="12">
						  <el-form-item label="Location" prop="location">
							<el-input v-model="form.location" ></el-input>
						  </el-form-item>
					  </el-col>
					  <el-col :span="12">
					    <el-form-item label="Responsible Person" prop="responsible">
					  	<el-input v-model="form.responsible" ></el-input>
					    </el-form-item>
					  </el-col>
				  </el-row>
				  
				  <el-row :gutter="10">
					  <!--<el-col :span="12">
						  <el-form-item label="Maintenance Count" prop="repair_cnt">
							<el-input v-model="form.repair_cnt" ></el-input>
						  </el-form-item>
					  </el-col>-->
					  <el-col :span="12">
						<el-form-item label="Region" prop="region">
						<el-input v-model="form.region" ></el-input>
						</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_dev_manage()">Confirm</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 {
            tHeight1: screenH * 0.5,
            tableData: [],
            input: '',
            currentPage: 1,
            pagesize: 50,
            recordTotal: 0,
            radio1: '1',

            devListTableData: [],
            devSearchForm: {
                sid: [],
                iid: [],
                wellname: '',
                wellnameList: [],
                engineerList: [],
                in_time_start: '',
                in_time_end: ''
            },
            devSidOptions: [],
            devIidOptions: [],
            devWellnameOptions: [],
            devEngineerOptions: [],

            devCurrentPage: 1,
            devPagesize: 50,
            devRecordTotal: 0,

            pdf_visible: false,
            dev_tableData: [],

            wellnames: [],

            add_visible: false,
            update_visible: false,

            form: {
                id: 0,
                wellname: '',
                sid: '',
                iid: '',
                ver: '',
                p_date: '',
                cal_date: '',
                total_wt: '',
                cur_wt: '',
                repair_cnt: '',
                region: '',
                location: '',
                responsible: ''
            },

            rules: {
                wellname: [
                    { required: true, message: 'Well name cannot be empty', trigger: 'blur' }
                ],
                sid: [
                    { required: true, message: 'Series number cannot be empty', trigger: 'blur' }
                ],
                iid: [
                    { required: true, message: 'Serial number cannot be empty', trigger: 'blur' }
                ],
            },

            if_show_bt: true,
            if_show_et: false,
            ps_info: '',

            startTimeOptions: {
                disabledDate: (time) => {
                    if (this.devSearchForm.in_time_end) {
                        return time.getTime() > new Date(this.devSearchForm.in_time_end).getTime();
                    }
                    return false;
                }
            },
            endTimeOptions: {
                disabledDate: (time) => {
                    if (this.devSearchForm.in_time_start) {
                        return time.getTime() < new Date(this.devSearchForm.in_time_start).getTime();
                    }
                    return false;
                }
            },
        }
    },
    mounted() {
        var _this = this;

        this.getQueryWellData();
        this.getWell();

        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.ps_info = response.data;
                _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);
        });

        this.getDevFilterOptions();
        this.getWell('');
    },
    methods: {
        getQueryWellData() {
            var _this = this;
            axios.post('/deescloud/getQueryWell', {
                opuser: localStorage.getItem("online_user"),
                opuser_uuid: localStorage.getItem("uuid")
            })
            .then(function (response) {
                console.log("getQueryWell response:", response.data);
                if (response.data && response.data.code === 0 && response.data.data) {
                    const data = response.data.data;
                    if (data.wellNames && Array.isArray(data.wellNames)) {
                        _this.devWellnameOptions = data.wellNames.map(name => ({
                            value: name,
                            label: name
                        }));
                    }
                    if (data.series && Array.isArray(data.series)) {
                        _this.devSidOptions = data.series.map(sid => ({
                            value: sid,
                            label: sid
                        }));
                    }
                    if (data.instruments && Array.isArray(data.instruments)) {
                        _this.devIidOptions = data.instruments.map(inst => ({
                            value: inst,
                            label: inst
                        }));
                    }
                    if (data.engineers && Array.isArray(data.engineers)) {
                        _this.devEngineerOptions = data.engineers.map(engineer => ({
                            value: engineer,
                            label: engineer
                        }));
                    }
                }
            })
            .catch(function (error) {
                console.error("getQueryWell request failed:", error);
            });
        },

        radio_change() {
            console.log(this.$data.radio1);
            if (this.$data.radio1 == '2') {
                this.getDevList();
            }
        },

        getDevList() {
            if (this.devSearchForm.in_time_start && this.devSearchForm.in_time_end) {
                if (new Date(this.devSearchForm.in_time_end) < new Date(this.devSearchForm.in_time_start)) {
                    this.$message({
                        message: "End time cannot be earlier than start time",
                        type: "warning",
                        duration: 2000
                    });
                    return;
                }
            }

            var _this = this;

            axios.post('/deescloud/get_dev_list', {
                opuser: localStorage.getItem("online_user"),
                opuser_uuid: localStorage.getItem("uuid"),
                serial: this.$data.devSearchForm.sid,
                number: this.$data.devSearchForm.iid,
                wellname: this.$data.devSearchForm.wellnameList,
                engineer: this.$data.devSearchForm.engineerList,
                in_time_start: this.$data.devSearchForm.in_time_start,
                in_time_end: this.$data.devSearchForm.in_time_end,
                index: this.$data.devCurrentPage,
                count: this.$data.devPagesize
            })
            .then(function (response) {
                console.log(response.data);
                if (response.data && response.data.data) {
                    _this.$data.devListTableData = (response.data.data || []).map(function(item) {
                        var sid = item.sid != null ? item.sid : (item.serial != null ? item.serial : '');
                        var iid = item.iid != null ? item.iid : (item.number != null ? item.number : '');
                        var durationCurrent = item.duration_current != null ? item.duration_current : (item.current_work_time != null ? item.current_work_time : '');
                        var durationTotal = item.duration_total != null ? item.duration_total : (item.total_work_time != null ? item.total_work_time : '');
                        var instrumentName = item.instrument_name != null ? item.instrument_name : (item.product_name != null ? item.product_name : '');
                        return Object.assign({}, item, {
                            sid: sid,
                            iid: iid,
                            duration_current: durationCurrent,
                            duration_total: durationTotal,
                            instrument_name: instrumentName
                        });
                    });
                    _this.$data.devRecordTotal = response.data.total || 0;
                }
            })
            .catch(function (error) {
                console.log(error);
            });
        },

        handleDevSizeChange(val) {
            this.$data.devPagesize = val;
            this.$data.devCurrentPage = 1;
            this.getDevList();
        },

        handleDevCurrentChange(val) {
            this.$data.devCurrentPage = val;
            this.getDevList();
        },

        exportSeirDetail() {
            if (this.devSearchForm.in_time_start && this.devSearchForm.in_time_end) {
                if (new Date(this.devSearchForm.in_time_end) < new Date(this.devSearchForm.in_time_start)) {
                    this.$message({
                        message: "End time cannot be earlier than start time",
                        type: "warning",
                        duration: 2000
                    });
                    return;
                }
            }

            axios.post('/deescloud/export_Seir_detail_en', {
                opuser: localStorage.getItem("online_user"),
                opuser_uuid: localStorage.getItem("uuid"),
                serial: this.devSearchForm.sid,
                number: this.devSearchForm.iid,
                wellname: this.devSearchForm.wellnameList,
                engineer: this.devSearchForm.engineerList,
                in_time_start: this.devSearchForm.in_time_start,
                in_time_end: this.devSearchForm.in_time_end,
                index: this.devCurrentPage,
                count: this.devPagesize
            })
            .then(response => {
                console.log("Export instrument detail response:", response.data);
                if (response.data && response.data.code === 1) {
                    this.$message({
                        message: response.data.msg || "Export failed",
                        type: "error",
                        duration: 2000
                    });
                    return;
                }
                if (response.data && response.data.fileId) {
                    const fileid = response.data.fileId;
                    const downUrl = 'file/' + fileid;
                    downloadUrl("Instrument Detail Data.xlsx", downUrl);
                } else {
                    this.$message({
                        message: "Export failed: File not obtained",
                        type: "error",
                        duration: 2000
                    });
                }
            })
            .catch(error => {
                console.error("Export instrument detail error:", error);
                this.$message({
                    message: "Export request failed",
                    type: "error",
                    duration: 2000
                });
            });
        },

        exportWellDetail() {
            var _this = this;
            if (this.devSearchForm.in_time_start && this.devSearchForm.in_time_end) {
                if (new Date(this.devSearchForm.in_time_end) < new Date(this.devSearchForm.in_time_start)) {
                    this.$message({
                        message: "End time cannot be earlier than start time",
                        type: "warning",
                        duration: 2000
                    });
                    return;
                }
            }

            axios.post('/deescloud/export_Well_detail_en', {
                opuser: localStorage.getItem("online_user"),
                opuser_uuid: localStorage.getItem("uuid"),
                serial: this.devSearchForm.sid,
                number: this.devSearchForm.iid,
                wellname: this.devSearchForm.wellnameList,
                engineer: this.devSearchForm.engineerList,
                in_time_start: this.devSearchForm.in_time_start,
                in_time_end: this.devSearchForm.in_time_end,
                index: this.devCurrentPage,
                count: this.devPagesize
            })
            .then(response => {
                console.log("Export well detail response:", response.data);
                if (response.data && response.data.code === 1) {
                    _this.$message({
                        message: response.data.msg || "Export failed",
                        type: "error",
                        duration: 2000
                    });
                    return;
                }
                if (response.data && response.data.fileId) {
                    const fileid = response.data.fileId;
                    const downUrl = 'file/' + fileid;
                    downloadUrl("Well Detail Data.xlsx", downUrl);
                } else {
                    _this.$message({
                        message: "Export failed: File not obtained",
                        type: "error",
                        duration: 2000
                    });
                }
            })
            .catch(error => {
                console.error("Export well detail error:", error);
                _this.$message({
                    message: "Export request failed",
                    type: "error",
                    duration: 2000
                });
            });
        },

        remove_dev_m(row) {
            var _this = this;
            var r;
            axios.post('/deescloud/remove_dev_manage', {
                opuser: localStorage.getItem("online_user"),
                opuser_uuid: localStorage.getItem("uuid"),
                data: { id: row.id }
            })
            .then(function (response) {
                console.log(response.data);
                r = response.data.r;
                if (r == 0) {
                    axios.post('/deescloud/get_dev_manage', {
                        opuser: localStorage.getItem("online_user"),
                        opuser_uuid: localStorage.getItem("uuid"),
                        wellname: row.wellname,
                    })
                    .then(function (response) {
                        console.log(response.data);
                        _this.$data.dev_tableData = response.data.data;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                    _this.$message({
                        message: "Delete successful",
                        type: "success",
                        duration: 1500
                    });
                } else {
                    _this.$message({
                        message: "Delete failed",
                        type: "error",
                        duration: 1500
                    });
                }
            })
            .catch(function (error) {
                console.log(error);
            });
        },

        update_dev_manage() {
            this.$refs['bform'].validate((valid) => {
                if (valid) {
                    var _this = this;
                    var r;
                    axios.post('/deescloud/update_dev_manage', {
                        opuser: localStorage.getItem("online_user"),
                        opuser_uuid: localStorage.getItem("uuid"),
                        data: {
                            id: _this.$data.form.id,
                            wellname: _this.$data.form.wellname,
                            sid: _this.$data.form.sid,
                            iid: _this.$data.form.iid,
                            ver: _this.$data.form.ver,
                            p_date: _this.$data.form.p_date,
                            cal_date: _this.$data.form.cal_date,
                            total_wt: _this.$data.form.total_wt,
                            cur_wt: _this.$data.form.cur_wt,
                            repair_cnt: _this.$data.form.repair_cnt,
                            region: _this.$data.form.region,
                            location: _this.$data.form.location,
                            responsible: _this.$data.form.responsible
                        }
                    })
                    .then(function (response) {
                        console.log(response.data);
                        r = response.data.r;
                        if (r == 0) {
                            axios.post('/deescloud/get_dev_manage', {
                                opuser: localStorage.getItem("online_user"),
                                opuser_uuid: localStorage.getItem("uuid"),
                                wellname: _this.$data.form.wellname,
                            })
                            .then(function (response) {
                                console.log(response.data);
                                _this.$data.dev_tableData = response.data.data;
                            })
                            .catch(function (error) {
                                console.log(error);
                            });
                            _this.$message({
                                message: "Update successful",
                                type: "success",
                                duration: 1500
                            });
                        } else {
                            _this.$message({
                                message: "Update failed",
                                type: "error",
                                duration: 1500
                            });
                        }
                        _this.$data.update_visible = false;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                }
            });
        },

        update_dev_m_dialog(row) {
            this.$data.form.id = row.id;
            console.log("wellname", row.wellname);
            this.$data.form.wellname = row.wellname;
            this.$data.form.sid = row.sid;
            this.$data.form.iid = row.iid;
            this.$data.form.ver = row.ver;

            if (this.$data.ps_info.r3 == "1") {
                this.$data.form.p_date = row.p_date;
                this.$data.form.cal_date = row.cal_date;
            } else {
                if (row.p_date && row.p_date.length >= 10) {
                    var arr = row.p_date.split("-");
                    var t = arr[2] + "-" + arr[0] + "-" + arr[1];
                    console.log(t);
                    this.$data.form.p_date = t;
                }
                if (row.cal_date && row.cal_date.length >= 10) {
                    var arr = row.cal_date.split("-");
                    var t = arr[2] + "-" + arr[0] + "-" + arr[1];
                    console.log(t);
                    this.$data.form.cal_date = t;
                }
            }

            this.$data.form.total_wt = row.total_wt;
            this.$data.form.cur_wt = row.cur_wt;
            this.$data.form.repair_cnt = row.repair_cnt;
            this.$data.form.region = row.region;
            this.$data.form.location = row.location;
            this.$data.form.responsible = row.responsible;

            this.$nextTick(() => {
                this.$refs['bform'].clearValidate()
            });
            this.$data.update_visible = true;
        },

        add_dev_manage() {
            this.$refs['bform'].validate((valid) => {
                if (valid) {
                    var _this = this;
                    var r;
                    axios.post('/deescloud/add_dev_manage', {
                        opuser: localStorage.getItem("online_user"),
                        opuser_uuid: localStorage.getItem("uuid"),
                        data: {
                            wellname: _this.$data.form.wellname,
                            sid: _this.$data.form.sid,
                            iid: _this.$data.form.iid,
                            ver: _this.$data.form.ver,
                            p_date: _this.$data.form.p_date,
                            cal_date: _this.$data.form.cal_date,
                            total_wt: _this.$data.form.total_wt,
                            cur_wt: _this.$data.form.cur_wt,
                            repair_cnt: _this.$data.form.repair_cnt,
                            region: _this.$data.form.region,
                            location: _this.$data.form.location,
                            responsible: _this.$data.form.responsible
                        }
                    })
                    .then(function (response) {
                        console.log(response.data);
                        r = response.data.r;
                        if (r == 0) {
                            _this.$message({
                                message: "Add successful",
                                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_dev_manage_dialog() {
            document.getElementById("bt_add").blur();

            this.$data.form.wellname = '';
            this.$data.form.sid = '';
            this.$data.form.iid = '';
            this.$data.form.ver = '';
            this.$data.form.p_date = '';
            this.$data.form.cal_date = '';
            this.$data.form.total_wt = '';
            this.$data.form.cur_wt = '';
            this.$data.form.repair_cnt = '';
            this.$data.form.region = '';
            this.$data.form.location = '';
            this.$data.form.responsible = '';

            var _this = this;
            axios.post('/deescloud/getWellNames', {
                opuser: localStorage.getItem("online_user"),
                opuser_uuid: localStorage.getItem("uuid"),
            })
            .then(function (response) {
                console.log(response.data);
                _this.$data.wellnames = response.data;
            })
            .catch(function (error) {
                console.log(error);
            });

            this.$nextTick(() => {
                this.$refs['bform'].clearValidate()
            });
            this.$data.add_visible = true;
        },

        export_pdf(row) {
            var _this = this;
            axios.post('deescloud/get_dev_manage_pdf_en', {
                opuser: localStorage.getItem("online_user"),
                opuser_uuid: localStorage.getItem("uuid"),
                wellname: row.wellNameSource
            })
            .then(function (response) {
                console.log(response.data);
                var fileid = response.data.fileId;
                var downUrl = 'file/' + fileid;
                downloadUrl(row.wellNameSource + "-Equipment Asset Management Report.pdf", downUrl);
            })
            .catch(function (error) {
                console.log(error);
            });
        },

        show_pdf(row) {
            let _this = this;
            axios.post('/deescloud/get_dev_manage', {
                opuser: localStorage.getItem("online_user"),
                opuser_uuid: localStorage.getItem("uuid"),
                wellname: row.wellNameSource,
            })
            .then(function (response) {
                console.log(response.data);
                _this.$data.dev_tableData = response.data.data;
                _this.$data.pdf_visible = true;
            })
            .catch(function (error) {
                console.log(error);
            });
        },

        getWell(_search_name) {
            document.getElementById("bt_serach").blur();
            this.$data.currentPage = 1;
            var _this = this;
            var objs;
            axios.post('/deescloud/get_well_dev', {
                opuser: localStorage.getItem("online_user"),
                opuser_uuid: localStorage.getItem("uuid"),
                Wellname: _search_name,
                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) {
            this.$data.pagesize = val;
            this.$data.currentPage = 1;
            var _this = this;
            var objs;
            axios.post('/deescloud/get_well_dev', {
                opuser: localStorage.getItem("online_user"),
                opuser_uuid: localStorage.getItem("uuid"),
                Wellname: this.$data.input,
                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) {
            this.$data.currentPage = val;
            var _this = this;
            var objs;
            axios.post('/deescloud/get_well_dev', {
                opuser: localStorage.getItem("online_user"),
                opuser_uuid: localStorage.getItem("uuid"),
                Wellname: this.$data.input,
                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);
            });
        },
    }
}