<template>
  <div class="eniting">
    <!-- 头部 -->
    <div class="eniting_header">
      <p class="p">表编辑</p>
      <div class="ppl">
        <p v-for="(item,index) in 6" :key="index" @click="enditTab(index)">
          <img src="../../../assets/images/icon_tbtab_normal.png" alt="" class="index_headerImg" v-if="num !== index">
          <img src="../../../assets/images/icon_tbtab_selected.png" alt="" class="index_headerImg" v-if="num == index">
          <span :class="[index == num ? 'span' : '']">列表名称</span>
        </p>
      </div>
      <el-divider></el-divider>
      <div class="table_headerBtun">
           <el-button type="primary" plain v-for="(item,index) in 7" :key="index">新增</el-button>
      </div>
    </div>
    <!-- 内容 -->
    <div class="eniting_nav">
     <el-collapse v-model="activeNames" @change="handleChange">
       <el-collapse-item :title="title" :name="index" v-for="(item,index) in 1" :key="index" class="eitde">
         <el-form :model="queryParams" ref="queryForm" :inline="true"  >
           <el-row :gutter="0">
             <el-col :span="6" v-for="(item,index) in 12" :key="index">
               <el-form-item :label="labletit" prop="dictName">
                <el-input
               v-model="queryParams.dictName"
               placeholder="请输入字典名称"
               clearable
               size="small"
               @keyup.enter.native="handleQuery"
               />
              </el-form-item>
           </el-col>
           </el-row>
         </el-form>
       </el-collapse-item>
       <!-- 扩展功能 -->
       <el-collapse-item :title="title" :name="index" v-for="(item,index) in 1" :key="index" class="eitde">
         <el-form :model="queryParams" ref="queryForm" :inline="true"  >
           <el-row :gutter="0">
             <el-col :span="12" v-for="(item,index) in 2" :key="index">
               <el-form-item :label="labletit" prop="dictName" class="textarea_et">
                <el-input
               v-model="queryParams.dictName"
               placeholder="请输入字典名称"
               clearable
               type="textarea"
               style="width: 100%; height: 100%;"
               @keyup.enter.native="handleQuery"
               />
              </el-form-item>
           </el-col>
           <el-col :span="24" v-for="(item,index) in 1" :key="index">
               <el-form-item :label="labletit" prop="dictName" class="textarea_ety">
                <el-input
               v-model="queryParams.dictName"
               placeholder="请输入字典名称"
               clearable
               type="textarea"
               style="width: 100%; height: 100%;"
               @keyup.enter.native="handleQuery"
               />
              </el-form-item>
           </el-col>
           </el-row>
         </el-form>
       </el-collapse-item>
       <!-- 服务程序 -->
       <el-collapse-item :title="title" :name="index" v-for="(item,index) in 1" :key="index" class="eitde">
         <el-form :model="queryParams" ref="queryForm" :inline="true"  >
           <el-row :gutter="0">
            <el-col :span="12" v-for="(item,index) in 8" :key="index">
                <el-form-item label="取消提交程序：" prop="dictName" class="textarea_etyju">
                 <el-input
                v-model="queryParams.dictName"
                placeholder="请输入字典名称"
                clearable
                style="width: 100%;"
                @keyup.enter.native="handleQuery"
                />
               </el-form-item>
            </el-col>
           </el-row>
         </el-form>
       </el-collapse-item>
     </el-collapse>
    </div>
  </div>
</template>

<script>
  export default {
      name: "index",
      data() {
        return {
           activeNames: ['1'],
           title:'单表1',
           // 查询参数
           queryParams: {
             pageNum: 1,
             pageSize: 10,
             dictName: undefined,
             dictType: undefined,
             status: undefined
           },
           labletit:'查询参数1233',
           num:0
        };
      },
      methods: {
        handleChange(val) {
                console.log(val);
              },
        enditTab(index){
         this.num = index
        }
      },
    };

</script>

<style  lang="scss">
  .eniting_header{
    .el-divider--horizontal{
      margin-top: 0;
    }
  }
  .eniting_nav{
    .el-collapse-item__content{
      padding-bottom: 0;
    }
    .el-collapse-item__wrap{
      border-bottom: 0;
    }
    .el-collapse-item__header{
      border-bottom: 0;
      font-size: 15px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #3C8DBC;
      line-height: 36px;
    }
    .el-form-item__content{
      width: 55%;
    }
    .textarea_et{
    width: 95%;
    .el-form-item__content{
      width: 80%;
      height: 83px;
      .el-textarea__inner{
        height: 100%;
      }
      }
    }
    .textarea_etyju{
      width: 90%;
      .el-form-item__content{
        width: 75%;
        // height: 83px;
        .el-textarea__inner{
          // height: 100%;
        }
        }
    }
    .textarea_ety{
      width: 100%;
      .el-form-item__content{
        width: 88%;
        height: 150px;
        margin-bottom: 0;
        .el-textarea__inner{
          height: 100%;
        }
        }
    }
    .el-collapse{
      border-top: 0;
    }
    .eitde{
      background-color: #fff;
      border-radius: 6px;
      padding: 23px;
      margin-bottom: 20px;
    }
  }

</style>

<style scoped lang="scss">
  .eniting{
    p{
      margin: 0;
    }
    background-color: #eef0ff;
    height: 100%;
    padding: 20px;
    .eniting_header{
       background-color: #fff;
       border-radius: 6px;
       padding: 23px;
       margin-bottom: 20px;
     .p{
        font-size: 15px;
        font-weight: bold;
        color: #3C8DBC;
        line-height: 36px;
        margin-bottom: 0;
       }
     .p::before{
       content: "";
       display: block;
       width: 18px;
       height: 8px;
       background: #3C8DBC;
       border-radius: 3px;

     }
     .ppl{
       display: flex;
       height: 54px;
       p{
         position: relative;
         width: 113px;
         height: 38px;
         img{
           position: absolute;
           top:0;
           left: 0;
           width: 100%;
           height: 100%;
           // z-index: -1;
         }
         span{
           width: 100%;
           position: absolute;
           top: 0;
           left: 0;
           // transform: translate(-50%);
           text-align: center;
           line-height: 38px;
           font-size: 15px;
           font-family: PingFang SC;
           font-weight: bold;
           color: #aaa;
         }
         .span{
           color: #3C8DBC;
         }
       }
     }
    }
    // 内容
    .eniting_nav{
      // background-color: #fff;
      // border-radius: 6px;
      // padding: 23px;
    }
  }
</style>
