<template>
  <div class="listBox">
    <div class="titleBar">
      历史分析
      <div class="barSearch">
        <el-input v-model="titleName" placeholder="请输入分析名称" :suffix-icon="Search" />
      </div>
    </div>
    <div class="list"  v-infinite-scroll="load" :infinite-scroll-disabled="disabled.disabled">
      <div v-for="(item,index) in yyDataList.list " :key="index" @click="handleChange(item,index)">
        <div class=" flex align-center " :class="index==classIndex?'listItem':'listItemNotHover'">
          <el-icon class="icon" >
            <Finished />
          </el-icon>
          <div class="listItemTitle ">{{ item.fxmc }}</div>
        </div>
      </div>
    </div>
    <div class="establishBut">
      <el-button type="primary" style="width: 100%;"  @click="changeValue(value)">创建新的情报语义分析 </el-button>
    </div>
  </div>
<popupWindows v-model="showPopup"/>
</template>

<script setup>
import { ref,reactive, onMounted,onUnmounted } from 'vue'
import { Search } from '@element-plus/icons-vue'
import popupWindows from './popupWindows.vue'
import { yyfxSelectPage } from '@/api/semanticAnalysis'
import { Finished } from '@element-plus/icons-vue'
import emitter from "@/utils/eventBus.js";
const titleName = ref('')
const showPopup = ref(false)
const changeValue = (value) => {
  emitter.emit('showDetails', true)
  showPopup.value = true
}
const classIndex=ref(0)
const handleChange = (val, index) => {
  console.log(val.tqjg);

  classIndex.value=index

  emitter.emit('getlistData', val.tqjg)
  emitter.emit('showDetails', false)
}
const queryParams = reactive({
  pageCurrent: 1,
  pageSize: 10,
  fxmc: titleName.value
})
const yyDataList = reactive({
  list: [],
  total:0
})
const disabled = reactive({
  disabled: false,
  loading: false
})
const getYyfxSelectPage = () => {
  disabled.loading=true
  yyfxSelectPage(queryParams).then(res => {
    yyDataList.list = queryParams.pageCurrent==1?res.records:yyDataList.list.concat(res.records)
    yyDataList.total = res.total
  }).finally(()=>{
    disabled.loading=false
  })
}

const load = () => {
  if (yyDataList.list.length == yyDataList.total) {
    disabled.disabled = true
  } else {
    queryParams.pageCurrent++
    getYyfxSelectPage()
  }
}
onMounted(() => {
  emitter.on('getYyfxSelectPage', (res) => {
    getYyfxSelectPage()
  })
  getYyfxSelectPage()
})
onUnmounted(() => {
  emitter.off(() => {
    getYyfxSelectPage()
  })
})
</script>

<style lang="scss" scoped>
.listBox {
  width: 100%;
  color: #000;
  height: 100%;

  .titleBar {
    width: 100%;
    padding: 10px;
    text-align: center;
    font-family: 'verdana';
    font-size: 18px;
    font-weight: bold;
    background-color: #fff;

    .barSearch {
      margin: 10px 0;
    }
  }

  .list {
    max-height: calc(100% - 150px);
    overflow: auto;
    box-sizing: border-box;
    .listItemNotHover{
      color:#000;
      padding-left:10px;
      margin-bottom: 5px;
      font-size: 16px;
    }
    .listItem {
      border-left: 5px solid #0386fb;
      padding-left: 5px;
      background-color: #f2f9ff;
      margin-bottom: 5px;
      color: #0386fb;
      font-size: 16px;
    }

    .listItem,.listItemNotHover .listItemTitle {
        font-size: 14px;
        // width: calc(100% - 21px);
        white-space: nowrap;
        /* 文本不会换行，会在同一行内继续，直到遇到<br>标签为止 */
        text-overflow: ellipsis;
        /* 当文本溢出包含它的容器时，显示省略号(...)来表示被截断的文本 */
        overflow: hidden;
        /* 超出部分隐藏 */
      }
      .icon{
        font-size: 20px;
      margin-right: 5px;
    }
  }

  .establishBut {
    width: 100%;
    position: sticky;
    bottom: 0;
    padding: 10px;
  }
}

::v-deep .el-input__inner {
  background-color: #d7d7d757;
}
</style>
