<!--
 * @Author: your name
 * @Date: 2022-01-26 10:52:10
 * @LastEditTime: 2022-02-17 10:11:35
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /test/hello-world/src/components/PipeColor.vue
-->
<template>
  <div>
    <div class="pipePressure"  :style="{ pointerEvents: dynamicPointerEvents }">
      <div class="container" id="div1">
          <div class="searchbar1">
              <form> 
                <table>
                <li v-for="data in newDatalist" :key="data.id" @click="goPage(data)">
                    {{data.pipeName}}
                </li>
                </table> 
              </form>
          </div>
      </div>
      <div class="input-group">
        <input class="input-field" type="text" v-model="inputText" placeholder="请输入管道名称...">
        <button class="close"  @click="handleClick">&times;</button>
      </div>
    </div>
  </div>
</template>

<script> 
import {
  getPipeForSelect
} from "@/api/bigWindow/getDevice";
export default {
  data(){
    return{
      downIcon: true,
      inputText:"",
      datalist:[],	//原始数据
      newDatalist:[],
      rowsToShow: 3, // 默认显示的行数
      maxRows: 6, // 最多显示的行数
      dynamicPointerEvents: 'none',
      }
    },
    created(){
      this.fetchData();
    },
    methods: {
      fetchData(){
        getPipeForSelect().then((res) => {
          if (res.data){
            this.datalist = res.data
          }
        })
      },
       goPage:function(data){
        var path = data.path.replaceAll("[[","").replaceAll("]]","").replaceAll("],["," ");
        var id = data.pipeId;
        let arrArea = path.split(" ")
        let centerLength = null;
        if (arrArea.length % 2 == 0) {
          centerLength = arrArea.length / 2;
        } else {
          centerLength = (arrArea.length + 1) /2;
        }
        if (centerLength != null) {
        this.$emit('transmit', arrArea[centerLength],id)
        } else {
          alert("数据异常")
        }
      },
      handleClick(){
        this.newDatalist=[];
        this.inputText = "";
        this.$emit('closeMediumPressureLine');
      }
    },
    watch:{//监听输入框的变化
          inputText:function(newText){
              this.dynamicPointerEvents = newText ? 'auto' : 'none';

              if(newText.length>0){
                  this.newDatalist.splice(0,this.newDatalist.length);//清空之前数组
                  for(let value of this.datalist){
                      if(value.pipeName.indexOf(newText)>-1){// 可以直接用indexOf(属性)
                          this.newDatalist.push(value);//一定要加this
                      }
                  }
              }else{
                  this.newDatalist=[];//输入框为空,等于原始数据
              }
          }
      },
};
</script>

<style lang="scss" scoped>

.pipePressure {
  width: 210px;
  height: auto;
  position: fixed;
  color: rgb(205, 219, 228);
  left: 660px;
  bottom: 50px;
  padding: 5px;
} 
form {
    position: relative;
    width: 300px;
    margin: 0 auto;
}
input {
    width: 100%;
    height: 42px;
    padding-left: 13px;
} 
.pipePressure input {
    border: 2px solid #7BA7AB;
    border-radius: 5px;
    background: #f9f0da1f;
    color: #9E9C9C;
}
li{
    text-align: left;
    width:100%;
    background: #f9f0da0c;
    list-style: none;
}
        
.container {
    height: 150px;
    overflow-y: auto;
    overflow-x: hidden;
    display:flex;
    flex-direction: column-reverse;
}

.input-group {
  position: relative;
  display: inline-block;
  pointer-events: auto;
}

.input-field {
  padding-right: 40px; /* Make space for the button */
  width: 200px; /* Adjust width as needed */
}

.close {
  font-size: 18px;
  font-weight: bold;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: 0.5;
  float: right;
  margin-left: 10px;
  cursor: pointer;

  position: absolute;
  top: 0;
  right: 0;
  height: 100%; /* Match height with input */
  width: 40px; /* Adjust width as needed */
}
 
.close:hover {
  opacity: 1;
}

</style>