<template>
  <el-dialog
    title="效果预览"
    :visible.sync="visible"
    width="60%"
    append-to-body
  >
    <div class="title-container">
            <span>样品信息</span>
    </div>
    <div class="preview-container">
      <!-- 样品信息区域 -->
        
      <div class="sample-info">
       <div class="info-grid">
         <div class="info-row" v-for="(item,index) in ypList" :key="item.id">
          <el-select  v-model="selectedValues[index]" placeholder="请选择" class="info-select" clearable   @change="handleSelectChange(index, $event)">
            <el-option  v-for="(item1,index1) in item.info" :label="item1.name" :value="item1.id" :key="item1.id"></el-option>
          </el-select>
        </div>
       </div>

      </div>

      <!-- 技术指标区域 -->
      <div class="tech-specs">
           <div class="title-container">
                    <span>技术指标</span>
            </div>
        <div class="tech-content" v-for="item in jsList" :key="item.id" >
          <div class="tech-item" >
            <div class="tech-label" >筛选结果</div>
            <div class="tech-val">{{ item.symbol+item.name }}</div>
          </div>

          <div class="tech-item-list"  v-for="item1 in item.group" :key="item1.id" style="margin-bottom: 20px;">
            <div class="tech-item-1">
                <div  class="tech-label">表单名称</div>
                <div class="tech-val">{{ item1.privateName }}</div>
            </div>
             <div class="tech-item-1" >
                <div class="tech-label">回显位置</div>
                <div  class="tech-val">{{ item1.elementNames }}</div>
            </div>
           
          </div>

        
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {effectPreview } from "@/api/ruleManage/fileRule.js";
export default {
  name: 'PreviewResult',
  props: {
    ypList: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  data() {
    return {
      visible: false,
      jsList:[],
      selectedValues: [],
      preViewLoad:false,
    }
  },
  created() {
    // 在组件创建时初始化 selectedValues
    this.initializeSelectedValues();
  },
  methods: {
      show() {
        this.visible = true
         this.initializeSelectedValues();
          this.jsList = [];
          
      },
       initializeSelectedValues() {
          // 根据 ypList 的长度初始化 selectedValues
           this.selectedValues = new Array(this.ypList.length).fill('');
       
          
        },
         handleSelectChange(index, value) {
          this.selectedValues[index] = value;
            const ids = this.selectedValues.filter(val => val !== '').join(',');
            
            
            if (ids !== '') {
              this.getPreviewData(ids);
            }else{
              this.jsList = [];
            }


         
        },
        getPreviewData(ids){
          this.preViewLoad = true;
            effectPreview({
              ids: ids
            
            }).then((res) => {
                  this.preViewLoad = false;
              if (res.data.code === 200) {
                this.jsList = res.data.data;
            
              
               
                

              } else {
                  this.preViewLoad = false;
                this.jsList = [];
                this.$message.error(res.data.msg);
              }
            });
         },
   },


    watch: {
    // 如果 ypList 是异步加载的，您可以在这里监听它的变化并更新 selectedValues
    ypList(newVal) {
    
      if (newVal.length !== this.selectedValues.length) {
        this.initializeSelectedValues();
      }
    }
  
  }
}
</script>

<style lang="scss" scoped>
.title-container{
    color:  rgba(130, 130, 130, 1);
    margin-bottom: 10px;
    font-weight: bold;
    background: rgb(240, 240, 240);
 
    padding: 10px 20px;
    border-radius: 5px;

}
.preview-container {
 

  .sample-info {
    padding: 20px;
    
    .info-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr); // 每行3列
      gap: 20px; // 设置间距
      width: 100%;
    }

    .info-row {
      display: flex;
      align-items: center;

      .info-select {
        width: 100%; // 让select填满容器
        max-width: 300px; // 限制最大宽度
      }
    }
  }
  .info-row {
    display: flex;
    align-items: center;
    margin-bottom: 1px;


    .label {
      width: 80px;
      color: #606266;
    }

    .info-select {
      width: 300px
    }
  }

  .tech-specs {
    padding: 20px;
    max-height: 500px;
    overflow-y: auto;
  
    .tech-title {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 20px;
      color: #303133;
    }
     .tech-label {
        
          color:rgba(130, 130, 130, 1);
        }
        .tech-val{
            color: black;
            font-family: SourceHanSansSC;
        }
    .tech-content {
      .tech-item {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        justify-content: space-between;
        border: 1px solid rgb(187, 187, 187);
        border-radius: 5px;
        padding: 10px;

   

        .tech-input {
          width: 300px;

          ::v-deep .el-input-group__append {
            background-color: #f5f7fa;
            color: #909399;
            min-width: 120px;
          }
        }
      }
      .tech-item-list{
        display: flex;
        flex-direction: column;
        margin-top: 10px;
        background-color: #f5f7fa;
         border: 1px solid rgb(187, 187, 187);
        border-radius: 5px;
        padding: 8px;
        max-height: 300px;
        overflow-y: auto;
        .tech-item-1 {
          display: flex;
          justify-content: space-between;
         align-items: center;
         line-height: 30px;
        
        

        
        }
      }
    }
  }
}
</style>