<template>
  <div class="home">
      <div class="left">
          <div class="migration-type-box">
              <span>迁移类型</span>
              <el-select v-model="info.migrationType" placeholder="请选择迁移类型">
                  <el-option
                          v-for="item in info.migrationTypes"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                  />
              </el-select>
          </div>
          <el-divider />
          <div class="tabs-box">
              <el-tabs v-model="activeName" :tab-position="info.tabPosition" @tab-click="tabChange">
                  <el-tab-pane  v-for="tab in info.tabPanes" :name="tab.name">
                      <template #label>
                          <span class="custom-tabs-label">
                              <i class="awsui-iconfont" v-html="tab.icon"></i>
                              <span>{{ tab.label }}</span>
                          </span>
                      </template>
                  </el-tab-pane>
              </el-tabs>
          </div>
      </div>
      <div class="right">
          <data-migration v-if="activeName === 'dataMigration'"></data-migration>
          <data-import v-if="activeName === 'dataImport'"></data-import>
          <data-it-import v-if="activeName === 'dataItImport'"></data-it-import>
          <module-change v-if="activeName === 'moduleChange'"></module-change>
          <batch-data-import v-if="activeName === 'batchDataImport'"></batch-data-import>
          <form-import v-if="activeName === 'formImport'"></form-import>
          <performance-import v-if="activeName === 'performanceImport'"></performance-import>
          <system-import v-if="activeName === 'systemImport'"></system-import>
      </div>
  </div>
</template>

<script lang="ts">
import { defineComponent,getCurrentInstance,reactive,ref } from 'vue';
import DataMigration from '@/components/data-migration.vue';
import DataImport from '@/components/data-import.vue';
import DataItImport from '@/components/data-It-import.vue';
import ModuleChange from '@/components/module-change.vue';

import BatchDataImport from '@/components/batch-data-import.vue';
import FormImport from '@/components/form-import.vue';
import PerformanceImport from '@/components/Performance-import.vue';
import SystemImport from '@/components/system-import.vue';

export default defineComponent({
  name: 'Home',
  components: {
    DataMigration,
    DataImport,
    DataItImport,
    ModuleChange,
    BatchDataImport,
    FormImport,
    PerformanceImport,
    SystemImport
  },
  setup(){
    // const { proxy: $this } = getCurrentInstance();
    let info = reactive({
      migrationTypes: [{value:"",label:"Aris"}],
      migrationType: "",
      tabPosition: "left",
      tabPanes: [{label:"数据迁移",name:"dataMigration",icon:"&#xe751;"},{label:"流程属性数据导入",name:"dataImport",icon:"&#xe784;"},{label:"IT系统数据导入",name:"dataItImport",icon:"&#xe784;"},{label:"模型转换",name:"moduleChange",icon:"&#xe839;"},{label:"制度导入",name:"systemImport",icon:"&#xe839;"},{label:"表单导入",name:"formImport",icon:"&#xe839;"},{label:"批处理工具",name:"batchDataImport",icon:"&#xe839;"},{label:"绩效导入",name:"performanceImport",icon:"&#xe839;"}],
      flagBit: 1
    });
    const activeName = ref('dataMigration')
    const tabChange = (tabPaneName: any) => {
      // console.log(tabPaneName,activeName)
    }
    return {
      info,
      tabChange,
      activeName
    }
  }
});
</script>
<style lang="less" scoped>
    .home {
        width: 100%;
        height: 100%;
        display: flex;
        .left {
            width: 240px;
            height: 100%;
            margin-right: 5px;
            box-shadow: 5px 0 5px rgba(236,236,241,0.9);
            .migration-type-box {
                display: inline-flex;
                width: 100%;
                justify-content: space-around;
                align-items: center;
                margin-top: 20px;
                span {
                    font-size: 12px;
                    font-weight: 400;
                }
                :deep(.el-select) {
                    width: 150px;
                    height: 30px;
                    background-color: #FFFFFF;
                    border-radius: 4px;
                }
            }
            .tabs-box {
                :deep(.el-tabs--left .el-tabs__item.is-left) {
                    text-align: center;
                    width: 240px;
                    height: 50px;
                    font-size: 15px;
                    font-weight: 32;
                }
                .custom-tabs-label {
                    .awsui-iconfont {
                        margin-right: 15px;
                    }
                }
            }
        }
        .right {
            height: 100%;
            flex: 1 1 auto;
        }
    }

</style>
