<template>
  <div class="panel-item-box">
    <div class="panel-item">
      <div class="scrollbar-controller">
        <label> <img src="../../assets/icon/icon-height.png" style="height: 16px"/>横向滚动条高度</label>
        <InputNumber :max="20" :min="6" v-model="value" style="width: 50px;" @on-change="handleChange"/>
        <!--        <Select
                  v-model="value"
                  style="width: 80px;"
                  @on-change="handleChange"
                >
                  <Option
                    v-for="item in options"
                    :key="item.value"
                    :value="item.value"
                  >
                    {{ item.label }}
                  </Option>
                </Select>-->
      </div>
    </div>
  </div>
</template>

<script>
  import { setScrollbarHeight } from '@yunque/assets/js/__utils__/domUtils';

  export default {
    name: 'PersonalCenter',

    data() {
      return {
        value: 6,
        options: []
      };
    },

    created() {
      this.setOptions();
    },

    mounted() {
      const _height = localStorage.getItem('tableScrollbarHeight')
      const height = _height ? Number(_height) : 6;
      this.value = height;
    },

    methods: {
      setOptions() {
        const list = [];
        // 滚动条高度范围[6，20]之间的整数
        for (let i = 6; i <= 20; i++) {
          list.push({
            value: i.toString(),
            label: i.toString()
          });
        }
        this.options = list;
      },

      handleChange(val) {
        localStorage.setItem('tableScrollbarHeight', val);
        setScrollbarHeight(val);
      }
    },
  };
</script>

<style lang="less" scoped>
.panel-main {
  display: flex;
  flex-direction: column;
  .panel-item {
    height: auto;
    min-height: 49px;
  }
}

.scrollbar-controller {
  margin: 0 15px  0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  label{
    display: flex;
    align-items: center;
    img{
      margin-right: 3px;
    }
  }
}
</style>
