<template>
  <div
    class="dev-main-item"
    :data-ref="itemObj.ref"
    :data-type="itemObj.type"
    :style="{ width: (100 / 24 * itemObj.options.span).toFixed(5) + '%'}"
    @click.stop="itemClick(itemObj)"
  >
    {{ itemObj.options.labelName }}

    <template v-if="itemObj.options.isIndeterminate == true">
      <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
    </template>

    <template v-if="itemObj.options.type == 'checkbox'">
      <el-checkbox-group
        v-model="check"
        :min="itemObj.options.min * 1"
        :max="itemObj.options.max * 1"
        :disabled="itemObj.options.disabled"
        @change="handleCheckedCitiesChange"
      >
        <el-checkbox
          v-for="item in data"
          :key="item"
          :label="item"
          :name="itemObj.options.name"
          :border="itemObj.options.border"
        >
          {{ item }}
        </el-checkbox>
      </el-checkbox-group>
    </template>

    <template v-else-if="itemObj.options.type == 'button'">
      <el-checkbox-group
        v-model="check"
        :min="itemObj.options.min * 1"
        :max="itemObj.options.max * 1"
        :size="itemObj.options.size"
        :disabled="itemObj.options.disabled"
        :text-color="itemObj.options.textColor"
        :fill="itemObj.options.fill"
      >
        <el-checkbox-button
          v-for="item in data"
          :key="item"
          :label="item"
          :name="itemObj.options.name"
        >
          {{ item }}
        </el-checkbox-button>
      </el-checkbox-group>
    </template>

  </div>
</template>

<script>
import ApDevItemBase from './base/ApDevItemBase'

const arr = ['复选框A', '复选框B', '复选框C']
export default {
  name: 'ApDevCheckbox',
  extends: ApDevItemBase,
  data() {
    return {
      data: arr,
      check: ['复选框A', '复选框B'], // 默认勾选
      isIndeterminate: true, // 默认全选样式
      checkAll: false // 是否全选
    }
  },
  created() {
    // 默认参数
    this.defaultOptions = {
      span: 12,
      type: 'checkbox',
      size: 'medium',
      textColor: '#ffffff',
      fill: '#409EFF'
    }
  },
  methods: {
    handleCheckAllChange(val) {
      this.check = val ? arr : []
      this.isIndeterminate = false
    },
    handleCheckedCitiesChange(value) {
      const checkedCount = value.length
      this.checkAll = checkedCount === this.data.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.data.length
    }
  }
}
</script>

<style scoped>

</style>
