<template>
    <div>
      <div class="leftSider fl">
        <el-tree
          class="filter-tree"
          :data="treeData"
          :props="defaultProps"
          default-expand-all
          :highlight-current="true"
          :filter-node-method="filterNode"
          ref="tree2">
        </el-tree>
      </div>
      <div class="rightSider fl" style="position: relative;">
        <div>
          <el-form ref="form" :model="form"  label-width="200px;">
            <el-form-item label="导入方式">
              <el-select v-model="form.method" placeholder="请选择导入方式">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="匹配的关键字段">
              <el-select v-model="form.match" placeholder="请选择">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="模型视图">
              <el-select v-model="form.scene" placeholder="请选择">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <p style="position: absolute;left: 375px;top: 84px;">关键字段用来排重的判断及与其他数据的关联</p>
          <div style="position: absolute;left: 375px;top: 132px;height: 36px">
            <el-button  @click="" class="goback fl">导出模版</el-button>
            <p class="fl" style="line-height: 36px;height: 36px;margin-left: 10px">若默认的模板不符合您的要求，您也可进行模型视图配置</p>
          </div>
        </div>
        <div class="uploadExcel">
         <el-upload
            class="upload-demo"
            drag
            action="https://jsonplaceholder.typicode.com/posts/"
            multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip" style="margin-left: 20px">支持20MB以内的csv文件,整个文件不超过1万行、200列</div>
          </el-upload>
        </div>
      </div>
    </div>
</template>
<script>
  export default {
    data(){
      return {
       treeData: [{
          id: 1,
          label: '一级 1',
          children: [{
            id: 4,
            label: '二级 1-1',
            children: [{
              id: 9,
              label: '三级 1-1-1'
            }, {
              id: 10,
              label: '三级 1-1-2'
            }]
          }]
        }, {
          id: 2,
          label: '一级 2',
          children: [{
            id: 5,
            label: '二级 2-1'
          }, {
            id: 6,
            label: '二级 2-2'
          }]
        }, {
          id: 3,
          label: '一级 3',
          children: [{
            id: 7,
            label: '二级 3-1'
          }, {
            id: 8,
            label: '二级 3-2'
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        form: {
          method: '',
          match: '',
          scene: ''
        }
      };
    },
    created(){
   
    },
    methods: {
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      }
    },  
    components: {
      
    },
  };
</script>
<style scoped>
  .leftSider{
    width: 304px;
    padding:16px;
    background: #fff;
    min-height: 414px;
  }
  .rightSider{
    width: calc(100% - 320px);
    background: #fff;
    margin-left:16px;
    padding:16px;
  }
  .el-select{
    width: 200px;
  }
  .uploadExcel{
    margin-left: 110px;
  }
</style>
