var toolscomponent = {
  template: `
    <div>
      <!-- 搜索区域 -->
      <div style="display: flex; margin-top: 10px;">
        <el-input v-model="input" placeholder="请输入井名" clearable style="width: 20%;"></el-input>
        <el-checkbox style="background-color: #ECF5FF; margin-left: 5px;" v-model="checked" label="预警" border></el-checkbox>
        <el-button style="margin-left: 5px;" id="bt_serach" plain type="primary" icon="el-icon-search" @click="getWell(input)">搜索</el-button>
      </div>
      
      <!-- 表格区域 -->
      <div class="span">
        <el-table
          :data="tableData"
          style="width: 100%; font-size: 14px"
          :height="tHeight"
          :cell-style="{ background: '#304156' }"
          border
        >
          <el-table-column prop="wellNameSource" label="井号" :width="150" :show-overflow-tooltip="true"></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="upload_user" label="上传用户" :width="150" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column label="操作" width="240">
            <template slot-scope="scope">
              <div style="flex: 1; display: inline-flex;">
                <div v-if="!scope.row.tsw">
                  <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="show_pdf(scope.row)" type="text" size="medium">报告明细</el-button>
                <el-button @click="export_pdf(scope.row)" type="text" size="medium">导出</el-button>
                <el-button @click="export_mess_pdf(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>
      
      <!-- 仪器状态弹窗 -->
      <el-dialog
        title="仪器状态信息"
        :visible.sync="pdf_visible"
        :lock-scroll="false"
        :append-to-body="true"
        width="60%"
      >
        <div style="height: 450px; overflow: auto;">

        <div v-if="tool_warning_data.length > 0">
          <div>风险预警:</div>




         <div v-for="item in tool_warning_data" :key="item.id">
            <div style="display: flex; padding-top: 10px; align-items: center;">
              <div 
                style="width: 100%;" 
                :style="{ color: item.flag === 1 ? 'red' : 'inherit' }"
              >
                <span style="font-weight: 500;">
                  <template v-if="item.flag === 0">
                    {{ item.series_num }} {{ item.instrument_id }} | 仪器正常
                  </template>
                  
                  <template v-else>
                    {{ item.time }} | {{ item.series_num }} |
                  </template>
                </span>

                <template v-if="item.flag === 1">
                  <span style="margin-left: 6px;">
                    {{ item.err_level }} | {{ item.context }}
                  </span>
                </template>

                <el-button
                  v-if="item.series_num"
                  @click="openDetail(item)"
                  type="text"
                  size="medium"
                  style="margin-left: 12px; padding: 0 4px;"
                >
                  详情
                </el-button>
              </div>
            </div>
          </div>

          
        </div>

          <div v-if="tool_warning_data.length == 0">
            <div>本口井仪器工作正常。</div>
          </div>
          <el-divider></el-divider>
        </div>
      </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,
      pdf_visible: false,
      tool_warning_data: [],
      checked: false,
      currentWellName: '' // 新增：存储当前查看的井名
    };
  },
  mounted() {
    var _this = this;
    
    var objs;
    axios.post('/deescloud/get_well_tool', {
      opuser: localStorage.getItem("online_user"),
      opuser_uuid: localStorage.getItem("uuid"),
      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: {
    export_pdf(row) {
      var _this = this;
      
      axios.post('deescloud/get_tool_warning_pdf', {
        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 + "-仪器状态报告.pdf", downUrl);
      })
      .catch(function (error) {
        console.log(error);
      });
    },

    export_mess_pdf(row) {
      var _this = this;
      
      axios.post('deescloud/get_tool_mess_pdf', {
        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 + "-仪器报告.pdf", downUrl);
      })
      .catch(function (error) {
        console.log(error);
      });
    },

    
    show_pdf(row) {
      let _this = this;
      // 存储当前井名
      this.currentWellName = row.wellNameSource;
      
      axios.post('/deescloud/get_tool_warning', {
        opuser: localStorage.getItem("online_user"),
        opuser_uuid: localStorage.getItem("uuid"),
        wellname: row.wellNameSource
      })
      .then(function (response) {
        console.log(response.data);
        _this.$data.tool_warning_data = 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_tool', {
        opuser: localStorage.getItem("online_user"),
        opuser_uuid: localStorage.getItem("uuid"),
        Wellname: _search_name,
        if_warn: this.$data.checked,
        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;
      var _this = this;
      
      var objs;
      axios.post('/deescloud/get_well_tool', {
        opuser: localStorage.getItem("online_user"),
        opuser_uuid: localStorage.getItem("uuid"),
        Wellname: this.$data.input,
        if_warn: this.$data.checked,
        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_tool', {
        opuser: localStorage.getItem("online_user"),
        opuser_uuid: localStorage.getItem("uuid"),
        Wellname: this.$data.input,
        if_warn: this.$data.checked,
        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);
      });
    },
    
    // 新增：打开详情页方法
 // 新增：打开详情页方法
    openDetail(item) {
      // 使用当前井名和预警项ID构建详情页URL
      const wellName = this.currentWellName; // 不要预先编码
      // 使用预警ID或时间戳作为唯一标识
        
      // 构建基础URL，参数留待URLSearchParams处理
      const detailUrl = 'tool_detail.html';
      
      // 使用URLSearchParams自动处理编码
      const params = new URLSearchParams({
        well: wellName,
        id: item.opuser_uuid,
        name : item.name,
        series: item.series_num,
        instrument: item.instrument_id,
        flag:item.flag,
        content: item.content || ''
      });
      
      // 完整URL
      const fullUrl = `${detailUrl}?${params.toString()}`;
      
      // 在新标签页打开详情页
      window.open(fullUrl, '_blank');
    }
  }
};