<template>
  <el-dialog :title="openTitle" :visible.sync="visible" @close="handleClose"  @open="open"  v-dialogDrag
    custom-class="common-dialog over-dialog dig-cascade" :close-on-click-modal="false" append-to-body >
    <el-form :model="paramForm"  :disable="openType==='view' "  ref="formRef"
       label-position="left"  label-width="110px" size="small" >
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="级联层数"    >
             <el-select v-model="paramForm.tissue"
               placeholder="请选择" clearable filterable>
               <el-option
                      v-for="item in list"
                      :key="item.orgId"
                      :label="item.organizationName"
                      :value="item.orgId" >
               </el-option>
             </el-select>
          </el-form-item>
          <el-form-item label="一级字段"    >
             <el-select v-model="paramForm.tissue"
               placeholder="请选择" clearable filterable>
               <el-option
                      v-for="item in list"
                      :key="item.orgId"
                      :label="item.organizationName"
                      :value="item.orgId" >
               </el-option>
             </el-select>
          </el-form-item>
        </el-col>
        <!-- 第二列 -->
        <el-col :span="8">
          <el-form-item label="级联名称"    >
             <el-select v-model="paramForm.tissue"
               placeholder="请选择" clearable filterable>
               <el-option
                      v-for="item in list"
                      :key="item.orgId"
                      :label="item.organizationName"
                      :value="item.orgId" >
               </el-option>
             </el-select>
          </el-form-item>
          <el-form-item label="二级字段"    >
             <el-select v-model="paramForm.tissue"
               placeholder="请选择" clearable filterable>
               <el-option
                      v-for="item in list"
                      :key="item.orgId"
                      :label="item.organizationName"
                      :value="item.orgId" >
               </el-option>
             </el-select>
          </el-form-item>
        </el-col>
        <!-- 第三列 -->
        <el-col :span="8">
          <el-form-item label="状态"    >
             <el-select v-model="paramForm.tissue"
               placeholder="请选择" clearable filterable>
               <el-option
                      v-for="item in list"
                      :key="item.orgId"
                      :label="item.organizationName"
                      :value="item.orgId" >
               </el-option>
             </el-select>
          </el-form-item>
          <el-form-item label="三层字段"    >
             <el-select v-model="paramForm.tissue"
               placeholder="请选择" clearable filterable>
               <el-option
                      v-for="item in list"
                      :key="item.orgId"
                      :label="item.organizationName"
                      :value="item.orgId" >
               </el-option>
             </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div v-show="openType !=='edit'"  class="container">
      <div class="btns">
        <div>
          <el-button  type="primary"  size="small" >获取主数据明细</el-button>
          <el-button  type="primary"  size="small" >维护分组</el-button>
          <el-button  type="primary"  size="small" >导入分组明细</el-button>
        </div>
      </div>
      <div class="table-wrap">
        <div class="box">
          <div class="title">一层字段</div>
          <div class="search-wrap">
            <el-input v-model="paramForm.date"  @keyup.enter.native="handleQuery"
                 size="small"     placeholder="请输入" />
            <el-button @click="handleQuery"  type="warning" icon="el-icon-search" size="small" >查询</el-button>
          </div>
          <el-table :data="tableData" ref="tableRef"
              highlight-current-row
              size="mini" stripe border height="100%" >

            <el-table-column type="selection"  width="30"  >
            </el-table-column>
            <el-table-column type="index" label="序号" width="50"  show-overflow-tooltip>
            </el-table-column>

            <el-table-column  v-for="(item, index) in colunms" :key="index"
                :prop="item.prop"
                :label="item.label"
                :fixed="item.fixed"
                :min-width="item.width"
                :show-overflow-tooltip="item.tooltip"
                >
            </el-table-column>

            <el-table-column label="操作" min-width="80"  >
              <template  slot-scope="scope">
                <el-button @click="handleEdit" type="text" >编辑</el-button>
                <el-button  type="text" >重置</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="box">
          <div class="title">二层字段</div>
          <div class="search-wrap">
            <el-input v-model="paramForm.date"  @keyup.enter.native="handleQuery"
                 size="small"     placeholder="请输入" />
            <el-button @click="handleQuery"  type="warning" icon="el-icon-search" size="small" >查询</el-button>
          </div>
          <el-table :data="tableData" ref="tableRef"
              highlight-current-row
              size="mini" stripe border height="100%" >

            <el-table-column type="selection"  width="30"  >
            </el-table-column>
            <el-table-column type="index" label="序号" width="50"  show-overflow-tooltip>
            </el-table-column>

            <el-table-column  v-for="(item, index) in colunms" :key="index"
                :prop="item.prop"
                :label="item.label"
                :fixed="item.fixed"
                :min-width="item.width"
                :show-overflow-tooltip="item.tooltip"
                >
            </el-table-column>

            <el-table-column label="操作" min-width="80"  >
              <template  slot-scope="scope">
                <el-button @click="handleEdit" type="text" >编辑</el-button>
                <el-button  type="text" >重置</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="box">
          <div class="title">三层字段</div>
          <div class="search-wrap">
            <el-input v-model="paramForm.date"  @keyup.enter.native="handleQuery"
                 size="small"     placeholder="请输入" />
            <el-button @click="handleQuery"  type="warning" icon="el-icon-search" size="small" >查询</el-button>
          </div>
          <el-table :data="tableData" ref="tableRef"
              highlight-current-row
              size="mini" stripe border height="100%" >

            <el-table-column type="selection"  width="30"  >
            </el-table-column>
            <el-table-column type="index" label="序号" width="50"  show-overflow-tooltip>
            </el-table-column>

            <el-table-column  v-for="(item, index) in colunms" :key="index"
                :prop="item.prop"
                :label="item.label"
                :fixed="item.fixed"
                :min-width="item.width"
                :show-overflow-tooltip="item.tooltip"
                >
            </el-table-column>

            <el-table-column label="操作" min-width="80"  >
              <template  slot-scope="scope">
                <el-button @click="handleEdit" type="text" >编辑</el-button>
                <el-button  type="text" >重置</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

    </div>

    <div v-show="openType=='edit'" style="margin-bottom: 0;text-align: center" >
      <el-button @click="submitForm" type="warning">保存</el-button>
      <el-button @click="visible = false " type="info"  plain>取消</el-button>
    </div>
  </el-dialog>
</template>

<script>

  export default {
    name: "dig-cascade",
    created(){

    },
    mounted () {
      for(let i=0; i<5; i++){
        this.tableData.push({template: 123})
      }
    },

    methods: {
      handleQuery(){

      },
      submitForm() {

        this.$refs['formRef'].validate((valid) => {
          if (!valid) { return; }

          let param = JSON.parse(JSON.stringify(this.paramForm));


        });

      },
      open(){


      },
      //关闭弹窗
      handleClose() {

        Object.keys(this.paramForm).forEach(key => this.paramForm[key] = '' );
        this.visible = false;
      },

    },
    data() {

      return {
        visible: false,
        openTitle: '',
        openType: '',

        paramForm: {
          cName: '',
          contactNumber: '',
          qq: '',
          files: [],
        },

        tableData: [],



        colunms: [//表格列
          { prop: '', label: '值', width: 80, fixed: false, tooltip: true},
          { prop: '', label: '配置状态', width: 80, fixed: false, tooltip: true},
          { prop: '', label: '组别', width: 80, fixed: false, tooltip: true},

        ],
        list: [],

      }
    },


  }
</script>

<style type="text/css"  lang="scss">
@mixin flex-column{
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.over-dialog.dig-cascade{

  .container{
    border-top: 1px solid #ddd;
    flex: 1;
    @include flex-column;
    
    .btns{
      padding: 10px 0;
      display: flex;
      justify-content: flex-end;
    }
    .table-wrap{
      flex: 1;
      display: flex;
      overflow: hidden;
      .box {
        flex: 1;
        @include flex-column;
        background-color: #F5F5F5;
        border-radius: 2px;
        padding: 5px;

        &:nth-child(2){
          margin: 0 10px;
        }
        .title{
          font-size: 16px;
          padding: 5px 0;
          text-align: center;
          font-weight: bold;
        }
        .search-wrap{
          display: flex;
          margin-bottom: 5px;
          .el-input {
            flex: 1;
            margin-right: 10px;
          }
        }
      }
    }
    .el-table .el-table__empty-block{
      min-height: unset;
    }
  }
}
</style>
