<template>
  <div class="setting-container">
    <!-- <HtPerSideBar></HtPerSideBar> -->
    <div class="setting-container_right">
      <!-- @tab-click="$baseEventBus.$emit('tabs-click')" -->
      <el-tabs>
        <el-tab-pane label="常用语">
          <common-words></common-words>
        </el-tab-pane>
        <el-tab-pane label="常用联系人" lazy>
          <top-contacts></top-contacts>
        </el-tab-pane>
        <el-tab-pane label="任务代理" lazy>
          <delegate-setting></delegate-setting>
        </el-tab-pane>
        <el-tab-pane label="领导秘书" lazy>
          <leading-secretary></leading-secretary>
        </el-tab-pane>
        <el-tab-pane label="签章管理" lazy>
          <signature-manage></signature-manage>
        </el-tab-pane>

        <!-- TODO: 个人布局 -->
        <!-- <el-tab-pane label="个人布局" lazy>
        <personal-layout></personal-layout>
      </el-tab-pane> -->
      </el-tabs>
    </div>
  </div>
</template>

<script>
  const CommonWords = () => import('./CommonWords')
  const TopContacts = () => import('./TopContacts')
  // const PersonalLayout = () => import('./PersonalLayout')
  const DelegateSetting = () => import('./DelegateSetting')
  const LeadingSecretary = () => import('./LeadingSecretary')
  const SignatureManage = () => import('./SignatureManage')

  export default {
    name: 'Setting',
    components: {
      CommonWords,

      TopContacts,
      // PersonalLayout,
      DelegateSetting,
      LeadingSecretary,
      SignatureManage,
    },
  }
</script>

<style lang="scss" scoped>
  .setting-container {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
    height: calc(100% - 0px);
    //
    &_right {
      border-radius: 12px 12px 12px 12px;
      background: $base-color-white !important;
      width: 100%;
      height: 100%;
      padding: 0 24px;
    }
    ::v-deep .el-tabs__header {
      // padding-top: 10px;
      padding-bottom: 2px;
      margin-bottom: 0;
      .el-tabs__item {
        outline: none;
      }
      .el-tabs__nav-wrap {
        padding: 0 20px;
      }
      .el-tabs__nav-wrap::after {
        height: 0px;
      }
    }
    ::v-deep .el-tabs__content {
      border-top: 1px solid #e6e6e6;
    }
  }
  ::v-deep .el-switch__core {
    width: 36px !important;
    height: 18px;
    &::after {
      width: 14px;
      height: 14px;
      left: 2px;
    }
  }
  ::v-deep .el-switch.is-checked .el-switch__core {
    &::after {
      margin-left: -15px !important;
    }
  }
</style>
