<template>
  <div class='fqsq'>
    <div class="fqsq-header">
      <ul>
        <li @click="operation(index)" 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 :icon-class="item.icon" />
          <span class="iconName">{{ item.name }}</span>
        </li>
      </ul>
    </div>
    <el-tabs v-model="activeName">
      <el-tab-pane :label="item.name" :name="index + 1 + ''" v-for="(item, index) in tabList" :key="index">
      </el-tab-pane>
    </el-tabs>
    <component :is="editItem" />
  </div>
</template>
<script>

export default {
  /**注册组件*/
  components: {},
  data () {
    return {
      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',
      tabList: [
        {
          name: '受理申请',
        },
        {
          name: '材料信息',
        },
        {
          name: '审批意见',
        },
        {
          name: '宗地基本信息',
        },
        {
          name: '权利信息',
        },
      ],
      editItem: ''
    };
  },
  watch: {
    activeName: {
      handler (newName, oldName) {
        let itemObj = { '1': 'slxx', '2': 'clxx' }
        this.editItem = this.loadView(itemObj[newName])
      },
      immediate: true
    }
  },
  methods: {
    operation (index) {
      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: 1.5em;
    height: 1.5em;
}
/deep/.el-tabs__nav-wrap {
  padding: 5px 0 0 15px;
}

/deep/.el-tabs__nav-wrap::after {
  height: 1px;
}
.iconName{
  line-height: 30px;
}
.fqsq {
  width: 100%;
  height: 100%;
  padding: 0 10%;
  box-sizing: border-box;
  background-color: #ffffff;

  &-header {
    @include flex;
    width: 100%;
    height: 64px;
    background-color: #10CCB8;
    color: #ffffff;
    justify-content: space-between;
    padding-left: 15px;

    ul {
      @include flex;

      li {
        @include flex-center;
        cursor: pointer;
        flex-direction: column;
        margin-right: 15px;
      }
    }
  }
}
</style>