<template>

  <div class="backinfo-container">
    <div class="headClass" style="">
      <h3>背景信息</h3>
      <el-button type="primary" v-if="showBut" :disabled="disabled" @click="ClickSave">保存</el-button>
    </div>
    <!-- <div>
      <div>拘留记录：</div>
      <div  v-for="(item,index) in jljl" :key="index">
        <el-input v-model="jljl[index]" :autosize="{ minRows: 4, maxRows: 10 }" type="textarea" placeholder="请输入背景信息"
          class="background-info-input" :disabled="disabled" /></div>
    </div> -->
    <div>
      <!-- 全部输入框 -->
      <el-form class="record" ref="ruleFormRef" :model="ruleForm" :rules="rules">
        <!-- 拘留所记录 -->
        <div class="detentionFacility">
          <div>拘留所记录：</div>
          <div>
            <div v-for="(item, i) in ruleForm.detentionCenterRecords" :key="item.id" class="detentionFacilityArr">
              <el-form-item  :prop="'detentionCenterRecords.' + i + '.str'"  :rules="rules.str">

                <el-input v-model="ruleForm.detentionCenterRecords[i].str" class="detentionFacilityInput"
                  placeholder="请输入拘留所记录" />
              </el-form-item>

              <el-button type="primary"
                v-if="ruleForm.detentionCenterRecords.length > 1 && i != ruleForm.detentionCenterRecords.length - 1"
                @click="decreaseRecord(i, '拘留所')">−</el-button>
              <el-button type="primary" @click="addRecord(i, '拘留所')"
                v-if="ruleForm.detentionCenterRecords.length - 1 == i">+</el-button>
            </div>
          </div>
        </div>
        <!-- 看守所记录 -->
        <div class="detentionFacility">
          <div>看守所记录：</div>
          <div>
            <div v-for="(item, i) in ruleForm.prison" :key="item.id" class="detentionFacilityArr">
              <el-form-item   :prop="'prison.' + i + '.str'"  :rules="rules.str">
                <el-input v-model="ruleForm.prison[i].str" 
                class="detentionFacilityInput" placeholder="请输入拘留所记录"
                @input="changeprison(ruleForm.prison[i].str)"
                />
              </el-form-item>
              <el-button type="primary" v-if="ruleForm.prison.length > 1 && i != ruleForm.prison.length - 1"
                @click="decreaseRecord(i, '看守所')">−</el-button>
              <el-button type="primary" @click="addRecord(i, '看守所')" v-if="ruleForm.prison.length - 1 == i">+</el-button>
            </div>
          </div>
        </div>
        <div class="sumbitBtnBOX">
          <el-button type="primary" @click="submitForm(ruleFormRef)" class="sumbitBtn">确认提交</el-button>
        </div>
      </el-form>
    </div>

  </div>
</template>

<script setup>
import { reactive, ref, watch, onMounted } from "vue";
import { Delete, Download } from '@element-plus/icons';
// import { tbGsxtZdryUpdate } from '@/api/zdr.js'
const props = defineProps({
  dataList: {
    type: Object,
    default: () => { },
  }, disabled: {
    type: Boolean,
    default: false
  },
  showBut: {
    type: Boolean,
    default: false
  },
})
const jljl = ref([])
const ruleFormRef = ref()
const ruleForm = reactive({
  detentionCenterRecords: [{ id: 0, str: "" }],
  prison: [{ id: 0, str: "" }],
})
// 表单校验
const rules = reactive({
  str: [
    { required: true, message: '请输入具体信息', trigger: 'blur' },
    { min: 3, max: 20, message: '请最少输入3个字,最多输入20个字', trigger: 'blur' },
  ],
})
watch(() => props.dataList, (val) => {
  if (val) {
    // qtbjxx.value = val.qtBjzl
  }
}, { deep: true })
onMounted(() => {
  console.log('组件已挂载')

})
const throwData = () => {
  return new Promise((resolve) => {
    // 基本验证：确保背景信息不为空
    if (!qtbjxx.value.trim()) {
      throw new Error('请输入群体背景信息');
    }

    resolve({
      qtbjxx: qtbjxx.value,
      fileList: fileList.value
    });
  });
}
// 增加输入记录输入框
const addRecord = (val, type) => {
  if (type == '拘留所') {
    ruleForm.detentionCenterRecords.push({ id: val })
  } else {
    ruleForm.prison.push({ id: val })
  }

}
// 减少输入记录输入框
const decreaseRecord = (val, type) => {
  if (type == '拘留所') {
    ruleForm.detentionCenterRecords.splice(val, 1)
  } else {
    ruleForm.prison.splice(val, 1)
  }

}
const changeprison=(value)=>{
  console.log(value,"jafahfahf");
  
}
//提交数据校验表单
const submitForm = async (formEl) => {
  console.log(formEl,"formElformEl");
  
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    console.log(valid,fields,"22222222");
    
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
} 
defineExpose({
  throwData
})
</script>

<style lang="scss" scoped>
@import "~@/assets/css/layout.scss";
@import "~@/assets/css/element-plus.scss";

.backinfo-container {
  padding: 10px;

}

.sumbitBtnBOX {
  position: relative;
  width: 100%;
  height: 50px;

  // background-color: saddlebrown;
  .sumbitBtn {
    position: absolute;
    right: 18px;
    bottom: 0px;
  }
}

.backinfo-container>:nth-child(2) {

  width: 100%;
  // height: 50px;
  justify-content: space-between;

  .detentionFacility {
    width: 100%;
    display: flex;
    align-items: baseline;
    box-sizing: border-box;
    padding: 20px;
    justify-content: space-between;
  }

  .detentionFacility>:nth-child(1) {
    width: 100px;
  }

  .detentionFacility>:nth-child(2) {
    width: 98%;
    display: flex;
    flex-direction: column;
  }

  .detentionFacilityArr {
    display: flex;
   
    margin-top: 20px;
    justify-content: space-between;

    .el-form-item {
      width: 93%;
      height: 100%;


    }
  }

}

.background-info-input {
  width: 100%;
  margin-bottom: 15px;
}

.file-attachment-section {
  margin-top: 15px;
}

.section-title {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid #ebeef5;
}

.file-list-container {
  max-height: 100px;
  overflow-y: auto;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background-color: #ffffff;
  margin-bottom: 10px;
}

/* 自定义滚动条样式 */
.file-list-container::-webkit-scrollbar {
  width: 6px;
}

.file-list-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.file-list-container::-webkit-scrollbar-thumb {
  background: #c0c4cc;
  border-radius: 3px;
}

.file-list-container::-webkit-scrollbar-thumb:hover {
  background: #909399;
}

.empty-file-list {
  padding: 20px;
  text-align: center;
  color: #909399;
  font-size: 12px;
}

.file-list {
  padding: 5px;
}

.file-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  margin-bottom: 2px;
  background-color: #f8f9fa;
  border-radius: 4px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.file-item:hover {
  background-color: #e6f7ff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.file-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
}

.file-name {
  flex: 1;
  font-size: 12px;
  color: #303133;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-size {
  font-size: 11px;
  color: #909399;
  min-width: 60px;
}

.file-time {
  font-size: 11px;
  color: #909399;
}

.file-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: 10px;
}

.file-actions .el-button {
  padding: 0 5px;
  margin: 0;
  color: #606266;
  transition: color 0.3s ease;
}

.file-actions .el-button:hover {
  color: #409eff;
}

.delete-btn:hover {
  color: #f56c6c !important;
}

.upload-btn-container {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.headClass {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 10px 0;
  padding-bottom: 10px;
  border-bottom: 2px solid #409eff;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.headClass::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 60px;
  height: 2px;
  background-color: #409eff;
}

h3 {
  margin: 0;
}
</style>
