<template>
  <el-drawer
    title="设置信息"
    :visible.sync="usersVisible"
    direction="ltr"
    :before-close="handleClose"
    :class="themeColor"
    id="drawer"
  >
    <div class="padding-20">
      <el-tabs v-model="activeName" type="card" :stretch="true">
        <el-tab-pane label="设置主题" name="theme">
          <theme v-if="activeName === 'theme'" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-drawer>
</template>
<script>
import theme from '../theme'
export default {
  name: 'Drawer',
  components: {
    theme
  },
  data() {
    return {
      usersVisible: false,
      activeName: 'theme',
      themeColor: ''
    }
  },
  props: {
    value: {
      type: Boolean
    }
  },
  watch: {
    value(val) {
      this.usersVisible = val
      this.activeName = 'theme'
    },
    usersVisible(val) {
      this.$emit('input', val)
    }
  },
  mounted() {
    this.themeColor = this.$store.state.app.themeColor
  },
  methods: {
    handleClose() {
      this.usersVisible = false
      this.activeName = ''
    }
  }
}
</script>
<style lang="scss" scoped>
#drawer {
  .padding-20 {
    padding: 20px;
  }
}
</style>
<style lang="scss">
#drawer {
  #el-drawer__title {
    span {
      font-size: 14px;
      color: #333;
      font-weight: bold;
    }
  }
  :focus {
    outline: 0;
  }
}
</style>
