<template>
 <basic-container>
    <div class="pd-b-20 border-grey-b" style="text-align: right;">
        <el-button type="primary"icon="el-icon-add" size="small" @click="addCard">新增</el-button>
    </div>

    <div >
      
        <el-row :gutter="10" v-if="projectPageList.length > 0" class="pd-t-20" style="height: calc(100vh - 250px);overflow-y: auto;" >
            <el-col :span="6" v-for="(item, index) in projectPageList" :key="item.id">
                <el-card @click.native="handleSetParameterName(item)" class="box-card h-100p bg-color clickable">
                    <div class="card-content">
                        <h3>{{ item.paramName }}</h3>
                        <p class="text-bold">{{item.paramTypeName }}</p>
                        <p class="small-text">{{ item.remarks }}</p>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <div :span="24"  class="empty-data" v-else>
            <p>暂无参数信息</p>
        </div>
       
      </div>
      
      
      <!-- 新增弹窗 -->
         <paramDetail ref="paramDetailRef" :params="parameterRow" @finshDetail="finshDetail"></paramDetail>
          <!-- 新增弹窗 -->
        <addParamDialog :visible.sync="dialogVisible" @add-parameter="addCardFinish" />
        <div  v-if="projectPageList.length > 0" class="text-align-c">
        <el-pagination
        v-if="projectPageList.length > 0"
          layout="prev, pager, next"
          class="text-align-c"
          @current-change="handleCurrentChange"
          :current-page.sync="page.currentPage"
          :total="page.total"
          :page-size="page.pageSize"
        >
        </el-pagination>
      </div>
 </basic-container>

</template>
<script>
import paramDetail from './paramDetail.vue';
import addParamDialog from './addParamDialog.vue';
import { queryParameterList } from "../../../api/paramter/parmter.js";

export default{
    components:{
        paramDetail,
        addParamDialog
    },
    data(){
        return{
            page:{
                currentPage: 1,
                pageSize: 12,
                total: 0
            },
            projectPageList:[],
            dialogVisible:false,
            parameter: {
                name: '',
                type: '',
                isProjectSpecific: false,
                remark: ''
            },
            rules: {
                name: [
                { required: true, message: '请输入参数名称', trigger: 'blur' }
                ],
                type: [
                { required: true, message: '请选择参数类型', trigger: 'change' }
                ],
                isProjectSpecific: [
                { type: 'boolean', required: true, message: '请选择是否区分项目', trigger: 'change' }
                ]
            },
            parameterRow:{}

        }
    },
    created(){
        this.getProjectPageList()
    },
    methods:{
        convertParamType(paramType) {
            if (!paramType) return '';
            return paramType.split(',').join('/');
        },
        getProjectPageList () {
            queryParameterList({
                current: this.page.currentPage,
                size: this.page.pageSize
            }).then((res) => {
                this.projectPageList = res.data.data.records;
                this.page.total = res.data.data.total;
            })
         },
        handleCurrentChange(val){
          console.log(val,'当前页');
          
            this.getProjectPageList();
        },
        delSetParameterName(item){
            console.log(item)
        },
        addCard(){
            console.log('新增')
            this.dialogVisible = true
        },
        addCardFinish(){
            
            this.getProjectPageList()
        },
        finshDetail(){
           
            
            this.getProjectPageList()
        },
        handleSetParameterName(item){
            console.log(item)
            this.parameterRow = item
            this.dialogVisible = false
            this.$refs.paramDetailRef.show(item.id)
          
        }
    }
}
</script>
<style scoped lang="scss">
.bg-color {
  background-color: #F5F7FA;
}

.clickable {
  cursor: pointer;
  height: 200px;
  margin-bottom: 20px;
}

.card-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.el-row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: -20px;
  height: calc(100vh - 300px); /* 减少高度，为分页组件留出更多空间 */
  overflow-y: auto;
}

/* 确保分页组件始终位于底部 */
.el-pagination {
  margin-top: 20px; /* 添加一些间距 */
}

.small-text {
  font-size: smaller;
  margin-top: 20px;
  flex: 1;
}

.text-bold {
  font-weight: bold;
  height: 30px;
}

.delete-icon-container {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.delete-icon {
  font-size: 18px;
  color: red;
  cursor: pointer;
}

.empty-data {
  align-items: center;
  display: flex;
  justify-content: center;
  height: calc(100vh - 380px);
}
</style>