<template>
  <div class="tabForm">
    <div class="tabForm_header">
      <div class="table_headerBtun">
        <el-button type="primary" plain @click="headerBtn(item)" v-for="(item,index) in tabList.buttonList.split('')" :key="index">{{item | btnConversion}}</el-button>
      </div>
    </div>
    <!-- 内容 -->
    <div class="table_nav">
      <el-collapse v-model="activeNames">
        <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 8" :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">
          <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="numtab !== index">
              <img src="../../../assets/images/icon_tbtab_selected.png" alt="" class="index_headerImg" v-if="numtab == index">
              <span :class="[index == numtab ? 'span' : '']">列表名称</span>
            </p>
          </div>
          <el-form style="margin-top: 30px;" :model="queryParams" ref="queryForm" :inline="true" label-width="118px">
            <el-form-item label="岗位编码" prop="postCode" v-for="(item,index) in 2" :key="index">
              <el-input v-model="queryParams.postCode" placeholder="请输入岗位编码" clearable size="small" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            </el-form-item>
          </el-form>
          <el-divider></el-divider>
          <el-table stripe v-loading="loading" :data="postList" @selection-change="handleSelectionChange">
            <el-table-column label="序号" align="center" prop="noticeId" width="80" />
            <el-table-column :label="surlable" align="center" prop="name" />
            <el-table-column :label="surlable" align="center" sortable prop="name" />
            <el-table-column label="岗位编码" align="center" prop="postCode" />
            <el-table-column label="岗位名称" align="center" prop="postName" />
            <el-table-column label="岗位排序" align="center" prop="postSort" />
            <el-table-column label="创建时间" align="center" prop="createTime" width="160">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="可用" align="center" class-name="small-padding fixed-width">

            </el-table-column>
          </el-table>
          <div class="index_haderPagin">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage3"
              :page-size="queryParams.pageSize" layout="prev, pager, next, jumper" :total="1000">
            </el-pagination>
          </div>
        </el-collapse-item>

      </el-collapse>
    </div>

  </div>
</template>

<script>
  import {
    getTableQuery,
    getObject
  } from '@/api/system/form.js'

  export default {
    name: "index",
    data() {
      return {
        num: 0,
        loading:true,
        tabList: {},
        currentPage3: 0,
        activeNames: ['1'],
        title: '单表1',
        objParams: {
          table: 'sys_config',
          fixedData: {
            id: -1
          }
        },
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          dictName: undefined,
          dictType: undefined,
          status: undefined
        },
        labletit: '查询参数1233',
        surlable: '实际数据库表',
        postList: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        numtab: 0
      };
    },
    filters:{
      btnConversion(val) {
        switch(val){
          case 'A':
          return '新增';
          case 'M':
          return '修改';
          case 'D':
          return '删除';
          case 'Q':
          return '查询';
          case 'S':
          return '提交';
          case 'U':
          return '反提交';
          case 'I':
          return '导入';
          case 'E':
          return '导出';
        }
      }
    },
    mounted() {
      this.init()
    },
    methods: {
      handleCurrentChange() {
        
      },
      handleSizeChange() {
        
      },
      handleSelectionChange() {

      },
      handleQuery() {

      },
      headerBtn(item) {
        switch(item) {
          case 'A': {
            return
          }
          case 'M': {
            return
          }
          case 'D': {
            return
          }
          case 'Q': {
            return
          }
          case 'S': {
            return
          }
          case 'U': {
            return
          }
          case 'E': {
            return
          }
        }
      },
      init() {
        getTableQuery({
          table: 'sys_config'
        }).then(res => {
          this.tabList = res.data
          console.log(res)
        })
        getObject(this.objParams).then(res => {
          console.log(res)
        })
      },
      // tab点击
      tabSbu(index) {
        this.num = index
      },
      enditTab(index) {
        this.numtab = index
      }
    },
  };
</script>

<style lang="scss">
  .tabForm {
    .el-collapse-item__content {
      padding: 0;
    }

    .table_nav {
      .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%;
      }

      .el-collapse {
        border-top: 0;
      }

      .el-divider--horizontal {
        margin-top: 0;
      }

      .eitde {
        background-color: #fff;
        border-radius: 6px;
        padding: 23px;
        margin-bottom: 20px;
      }
    }
  }
</style>

<style scoped lang="scss">
  .tabForm {
    background-color: #eef0ff;
    height: 100%;
    padding: 20px;

    p {
      margin: 0;
    }

    // 头部
    .tabForm_header {
      background-color: #fff;
      border-radius: 6px;
      padding: 23px;
      margin-bottom: 20px;

    }

    // 内容
    .table_nav {

      // background-color: #fff;
      // border-radius: 6px;
      // padding: 23px;
      .ppl {
        display: flex;
        height: 38px;

        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;
          }
        }
      }
    }
  }

  // tab
  .index_headetab {
    display: flex;
    border-bottom: 1px solid #E5E5E5;
    height: 53px;
    // padding-top: 20px;
    padding-bottom: 10px;
    margin-bottom: 20px !important;

    span {
      width: 70px;
      text-align: center;
      line-height: 53px;
      height: 53px;
      font-size: 15px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #666;
      position: relative;
      // flex: 1;
      // border-bottom: ;
    }

    .span {
      content: '';
      display: block;
      width: 18px;
      height: 8px;
      border-radius: 3px;
      background-color: #3C8DBC;
      color: #3C8DBC !important;
      // position: absolute;
      // border-bottom: ;
    }

    .spanto {
      color: #3C8DBC;
      border-bottom: 3px solid #3C8DBC;
    }
  }
</style>
