<template>
  <div class="uif-layout-sider" :style="wrapStyles">
    <div class="uif-layout-sider-children"><slot></slot></div>
  </div>
</template>
<script>
import {px} from '@uif/core/lib/utils/assist'
import {toInt} from '@uif/core/lib/utils/format'
export default {
  name: 'u-sider',
  props: {
    // 是否可收起
    collapsible: {
      type: Boolean,
      default: false
    },
    // 是否收起
    value: {
      type: Boolean,
      default: false
    },
    // 宽度
    width: {
      type: [Number, String],
      default: 200
    },
    // 收起宽度
    collapsedWidth: {
      type: [Number, String],
      default: 64
    }
  },
  data () {
    return {
    }
  },
  computed: {
    siderWidth () {
      if (!this.collapsible || !this.value) {
        return toInt(this.width)
      }
      return toInt(this.collapsedWidth)
    },
    wrapStyles () {
      return {
        width: px(this.siderWidth),
        minWidth: px(this.siderWidth),
        maxWidth: px(this.siderWidth),
        flex: px('0 0 ' + this.siderWidth)
      }
    }
  },
  methods: {
  },
  watch: {
    value (val) {
      this.$emit('change', val)
    }
  },
  mounted () {
  }
}
</script>
