<template>
    <div>
      <div class="leftSider fl">
        <div class="siderList">
          <p>excel导入字段</p>
          <ul>
            <li>1111111111111111111</li>
            <li>1111111111111111111</li>
            <li>1111111111111111111</li>
            <li>1111111111111111111</li>
            <li>1111111111111111111</li>
            <li>1111111111111111111</li>
            <li>1111111111111111111</li>
            <li>1111111111111111111</li>
            <li>1111111111111111111</li>
            <li>1111111111111111111</li>
            <li>1111111111111111111</li>
            <li>1111111111111111111</li>
            <li>1111111111111111111</li>
            <li>1111111111111111111</li>
            <li>1111111111111111111</li>
            <li>1111111111111111111</li>
            <li>1111111111111111111</li>
            <li>1111111111111111111</li>
            <li>1111111111111111111</li>
            <li>1111111111111111111</li>
            <li>1111111111111111111</li>
            <li>1111111111111111111</li>
            <li>1111111111111111111</li>
            <li>1111111111111111111</li>
            <li>1111111111111111111</li>
            <li>1111111111111111111</li>
            <li>1111111111111111111</li>
            <li>1111111111111111111</li>
            <li>1111111111111111111</li>
          </ul>
        </div>
      </div>
      <div class="rightSider fl" style="position: relative;">
        <div>
          <h5>已匹配字段</h5>
          <p>36</p>
        </div>
        <div>
          <h5>未匹配字段</h5>
          <p style="color: #FF3B30">{{matchNumber}}</p>
        </div>
        <em></em>
      </div>
    </div>
</template>
<script>
  export default {
    data(){
      return {
          matchNumber:0
      };
    },
    created(){
   
    },
    methods: {
      sendDisable(){
        if(this.matchNumber>0){
          this.$emit('isdisabled',true);
        }
      }
    },  
    mounted(){
      this.sendDisable();
    },
    components: {
      
    },
  };
</script>
<style scoped>
  .leftSider{
    width: 304px;
    padding:16px;
    background: #fff;
    min-height: 414px;
    border: 1px solid #E6E6EB;
  }
  .siderList{
    border: 1px solid #E6E6EB;
    height: 400px;
  }
  .siderList p{
    height: 36px;
    background: #E6E6EB;
    line-height: 36px;
    text-align: center;
    font-size: 14px;
    color: #5E6D82
  }
  .siderList ul{
    padding-left: 5px;
    font-size: 16px;
    color: #5E6D82;
    height: 362px;
    overflow-x: hidden;
  }
   .siderList ul li{
     margin-bottom: 2px;
   }
  .rightSider{
    width: calc(100% - 320px);
    background: #fff;
    margin-left:16px;
    padding:16px;
    display: flex;
    justify-content: space-around;
    height: 434px;
  }
  .rightSider div{
    flex-grow: 1;
  }
  .rightSider div h5{
    font-size: 18px;
    color: #5E6D82;
    text-align: center;
    margin-top: 145px;
  }
  .rightSider div p{
    font-size: 48px;
    color: #333333;
    text-align: center;
    margin-top: 32px;
  }
  .rightSider em{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1px;
    height: 160px;
    margin-top: -80px;
    background: #E6E6EB; 
  }
</style>
