<template>
  <div class="header-config-item">
    <slot></slot>
    <!--     <Checkbox v-model="visible"
              @on-change="handleChange"
              style="margin:0;width:125px;">{{element.title}}
    </Checkbox> -->
    <div @click="handleChange"
         style="display:inline-block;margin:0;width:125px;padding-left:20px;">
      <Icon v-if="!checked"
            type="md-square-outline"
            style="color: #ccc;font-size: 18px;position: absolute;left:4px;" />
      <Icon v-if="checked"
            type="md-checkbox"
            style="color: #2d8cf0;font-size: 18px;position: absolute;left:4px;" /> {{element.title}}
    </div>
    <span class="header-config-item-toolbar">

      <i class="header-config-item-lock ivu-icon"
         :class="lockCls"
         style="font-size: 18px;"
         @click="setLocked"></i>
      <Icon v-if="!fixed"
            type="ios-move"
            size=18
            class="vuc-header-drag-icon"
            style="margin-left:8px;" />
    </span>
  </div>
</template>

<script>
export default {
  name: 'HeaderConfigItem',
  props: {
    element: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    const col = this.element
    return {
      fixed: this.isFixedCol(col),
      visible: this.isVisibleCol(col),
      checked: this.isVisibleCol(col)
    }
  },
  computed: {
    lockCls () {
      // this.fixed = this.isFixedCol(this.element)
      return this.fixed ? 'ivu-icon-ios-lock' : 'ivu-icon-ios-unlock-outline'
    }
  },
  /*  watch: {
     fixedCol() {
       this.fixed = this.fixedCol
     }
   }, */
  methods: {
    isFixedCol (col) {
      if (col.children && col.children.length > 0) {
        let isFixed = false
        for (let j = 0, len = col.children.length; j < len; j++) {
          const cNode = col.children[j]
          if (cNode.fixed) {
            isFixed = true
          } else {
            isFixed = this.isFixedCol(cNode)
          }
          if (isFixed) {
            break
          }
        }
        return isFixed
      } else {
        return col.hasOwnProperty('fixed') ? !!col.fixed : false
      }
    },
    isVisibleCol (col) {
      if (col.children && col.children.length > 0) {
        let isVisible = !col.children.length
        for (let j = 0, len = col.children.length; j < len; j++) {
          const cNode = col.children[j]
          if (cNode.visible) {
            isVisible = true
          } else {
            isVisible = this.isVisibleCol(cNode)
          }
          if (isVisible) {
            break
          }
        }
        return isVisible
      } else {
        return col.hasOwnProperty('visible') ? col.visible : true
      }
    },
    setLocked (event) {
      event.stopPropagation()
      this.fixed = !this.fixed
      this.element.fixed = this.fixed
      setTimeout(() => {
        this.$emit('on-set-locked', this.fixed)
      })
    },
    handleChange () {
      this.checked = !this.checked
      setTimeout(() => {
        this.$emit('on-set-visibled', this.checked)
      })
    }
  },
  mounted () {
    const col = this.element
    this.visible = this.isVisibleCol(col)
    this.checked = this.isVisibleCol(col)
  }
}
</script>
<style lang="less">
@import './header-config-item.less';
</style>
