<template>
  <q-card flat class="visible-col-box column">
    <div class="q-px-sm f16">自定义列</div>
    <q-scroll-area :thumb-style="scrollStyle.thumbStyle" :bar-style="scrollStyle.barStyle" class="col q-pa-sm">
      <div class="visible-col row items-center" v-for="(x, i) in myAllCol" :key="i">
        <q-toggle v-model="x.visible" color="primary" @update:model-value="changeVisible(x)" />
        <div class="q-ml-md f12">{{ x.name }}</div>
      </div>
    </q-scroll-area>
  </q-card>
</template>

<script>
import { computed } from 'vue'
import useScrollModule from '@/module/scrollbar/scrollModule'
export default {
  props: {
    /**
     * @description 大小，单位为PX
     */
    modelValue: Array,

    /**
     * @description 图标名称，默认路径为“asset/svg”
     */
    allCol: Array
  },
  setup(props, context) {
    let { scrollStyle } = useScrollModule()

    const myAllCol = computed(() => {
      return props.allCol
    })
     
    const showCol = computed(() => {
      return props.modelValue
    })
    const changeVisible = (e) => {
      if (e.visible) {
        showCol.value.push(e.value)
      } else {
        showCol.value.splice(showCol.value.indexOf(e.value), 1)
      }
      context.emit('update:modelValue', showCol.value)
    }

    return { myAllCol, scrollStyle, changeVisible }
  }
}
</script>

<style>
.visible-col-box {
  width: 200px;
  height: 350px;
  padding-top: 14px;
}
.visible-col {
  border-bottom: 1px solid #f1f1f1;
  padding: 6px 0;
}
.visible-col:last-child {
  border: none;
}
</style>
