<template>
  <div class='fqsq'>
    <div class="fqsq-header">
      <ul>
        <li @click="operation(index, item)" v-for="(item, index) in headerleftList.slice(0, headerleftList.length - 4)"
          :key="index">
          <svg-icon :icon-class="item.icon" />
          <span class="iconName">{{ item.name }}</span>
        </li>
      </ul>
      <ul>
        <li @click="operation(index)" v-for="(item, index) in headerleftList.slice(-4)" :key="index">
          <svg-icon class="icon" :icon-class="item.icon" />
          <span class="iconName">{{ item.name }}</span>
        </li>
      </ul>
    </div>
    <div class="tabsList">
      <div class="tabsList-left"  >
        <div class="map-drawer-click" 
              v-if='isShowdrawer'
              @click=" () => {
                this.isShowdrawer = !this.isShowdrawer;}">
              </div>
        <div class="map-drawer-expand" 
              v-else
              @click=" () => {
                  this.isShowdrawer = !this.isShowdrawer;}">
              </div>
        <ul v-if='this.isShowdrawer'>
          <p>受理单元列表(3)</p>
          <li>610100102104GB00004W00000000</li>
          <div class="xian"></div>
          <li>610100102104GB00004W00000000</li>
          <div class="xian"></div>
          <li>610100102104GB00004W00000000</li>
          <div class="xian"></div>
        </ul>
      </div>
      <div class="tabsList-right" >  
        <div class="fenpin" v-show="issplitScreen">
          <p class="splitScreen tabsList-title">材料信息</p>
          <div class="splitScreen" ></div>
        </div>
        <el-tabs v-model="activeName">
          <el-tab-pane :label="item.name" :name="index + 1 + ''" v-for="(item, index) in tabList" :key="index">
            <div class="splitScreen-con">
              <component :is="editItem" :flag="flag" :key="key" />
            </div>
          </el-tab-pane>
        </el-tabs></div>
    
    </div>

    
  </div>
</template>
<script>
import { Init } from "@/api/fqsq.js"
export default {
  /**注册组件*/
  components: {},
  data () {
    return {
      isShowdrawer: true,
      key: 0,
      flag: false,
      headerleftList: [
        {
          name: '图形定位',
          icon: 'fqsq1'
        },
        {
          name: '登记簿',
          icon: 'fqsq2'
        },
        {
          name: '证书预览',
          icon: 'fqsq3'
        },
        {
          name: '流程图',
          icon: 'fqsq4'
        },
        {
          name: '材料分屏',
          icon: 'fqsq5'
        },
        {
          name: '材料导入',
          icon: 'fqsq6'
        },
        {
          name: '打印申请书',
          icon: 'fqsq7'
        },
        {
          name: '登簿',
          icon: 'fqsq2'
        },
        {
          name: '退回',
          icon: 'fqsq8'
        },
        {
          name: '转出',
          icon: 'fqsq9'
        },
        {
          name: '退出',
          icon: ''
        }
      ],
      activeName: '1',
      tabList1: [
        {
          name: '受理申请',
        },
        {
          name: '材料信息',
        },
        {
          name: '审批意见',
        },
        {
          name: '宗地基本信息',
        },
        {
          name: '权利信息',
        },
      ],
      tabList: [],
      editItem: '',
      issplitScreen: false
    };
  },
  watch: {
    activeName: {
      handler (newName, oldName) {
        let itemObj = { '1': 'slxx', '2': 'clxx' }
        this.editItem = this.loadView(itemObj[newName])
      },
      immediate: true
    }
  },
  created () {
    this.tabList = [...this.tabList1]
    this.list()
  },
  methods: {
    list(){
      var formdata=new FormData();
//可以通过append()方法来追加数据
formdata.append("bsmSldy","bf2bbedc18dce9ff1143be9f1496da39");
      Init(formdata).then(res => {
        if (res.code === 200) {
          console.log(res,1111)
        }
      })
    },
    operation (index, item) {
      if (item.icon == 'fqsq5') {
        this.key++
        this.issplitScreen = !this.issplitScreen
        this.flag = !this.flag
        if (this.issplitScreen) {
          this.tabList.splice(1, 1)
        } else {
          this.tabList = [...this.tabList1]
        }
      }
      // if (index == 3) {
      //   window.close()
      // }
    },
    loadView (view) {
      return r => require.ensure([], () => r(require(`./components/${view}.vue`)))
    },
  },
}
</script>
<style scoped lang='scss'>
@import "~@/styles/mixin.scss";

/deep/.svg-icon {
  width: 2.5em;
  height: 2.5em;
}

/deep/.el-tabs__nav-wrap {
  padding: 5px 0 0 15px;
}

/deep/.el-tabs__nav-wrap::after {
  height: 1px;
}

.iconName {
  line-height: 24px;
  font-size: 12px;
}

.fqsq {
  width: 100%;
  height: 100%;
  padding: 0;
  box-sizing: border-box;
  background-color: #ffffff;



  .splitScreen {
    min-width: 50%;
  }

  &-header {
    @include flex;
    width: 100%;
    height: 80px;
    background-color: #10CCB8;
    color: #ffffff;
    justify-content: space-between;
    padding-left: 15px;
    position: sticky;
    top: 0;
    z-index: 100;

    ul {
      @include flex;

      li {
        @include flex-center;
        cursor: pointer;
        flex-direction: column;
        margin-right: 15px;
        box-sizing: border-box;
        width: 70px;
        margin: 0 5px;
      }

      li:hover {
        border: 1px solid #ffffff;
        border-radius: 5px;
        color: $light-blue ;


        .svg-icon {
          color: $light-blue ;
        }
      }
    }
  }
  .map-drawer-expand {
                width: 20px;
                height: 77px;
                background: url('../../../image/right.png');
                background-size: cover;
                position: absolute;
                left: 0%;
                top: 30%;
                z-index: 999;
                cursor: pointer;
            }
            .map-drawer-click {
                width: 20px;
                height: 77px;
                background: url('../../../image/left.png');
                background-size: cover;
                position: absolute;
                right: -8%;
                top: 30%;
                z-index: 999;
                cursor: pointer;
            }
            .hide {
                display: none;
            }
       
  .tabsList {
    width: 100%;
    position: sticky;
    top: 80px;
    background-color: #ffffff;
    z-index: 100;
    @include flex;
    .tabsList-left{
      border-right: 1px solid #EBEEF5;
      position: relative;

         ul{
           position: relative;
    
           .xian{
             background: #F2F2F2;
             padding: 2px;
           }
           p{
       padding: 20px;
    text-align: center;
           }
            li{
              padding: 10px;
              font-size: 14px;
               color: #606266;

            }
            li:hover{
              color: #0F93F6;
              cursor:pointer
            }
         }
    }
    .tabsList-right{
      .fenpin{
        min-width: 50%;
        border-right: 1px solid #EBEEF5;
      }
    width: 100%;
    background-color: #ffffff;
    z-index: 100;
    @include flex;
    }
  }

  .tabsList-title {
    display: block;
    line-height: 59px;
  }

  /deep/.el-tabs {
    width: 100%;
  }
}
</style>