<template>
  <div>
    <div class="demo-title">
      基础用法
    </div>
    <div class="demo-block">
      <bxs-checkbox v-model="checkbox1">
        复选框
      </bxs-checkbox>
    </div>
    <div class="demo-title">
      自定义颜色
    </div>
    <div class="demo-block">
      <bxs-checkbox 
        v-model="checkbox2" 
        checked-color="#4b0"
        >
        自定义颜色
      </bxs-checkbox>
    </div>
    <div class="demo-title">
      自定义颜色&图标
    </div>
    <div class="demo-block">
      <bxs-checkbox v-model="checkbox3">
        自定义颜色&图标
        <bxs-icon
          slot="icon"
          slot-scope="props"
          name="close"
          size="12px"
          :style="props.checked ? icon.activeStyle : icon.normalStyle"
          />
      </bxs-checkbox>
    </div>
    <div class="demo-title">
      复选框组
    </div>
    <div class="demo-block">
      <bxs-checkbox-group v-model="result">
        <bxs-checkbox 
          v-for="(item, index) in list" 
          :key="index" 
          :name="item"
          >
          复选框 {{ item }}
        </bxs-checkbox>
      </bxs-checkbox-group>
    </div>
    <div class="demo-title">
      设置最大可选数
    </div>
    <div class="demo-block">
      <bxs-checkbox-group 
        v-model="result2" 
        :max="2"
        >
        <bxs-checkbox 
          v-for="(item, index) in list" 
          :key="index" 
          :name="item"
          >
          复选框 {{ item }}
        </bxs-checkbox>
      </bxs-checkbox-group>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      checkbox1: true,
      checkbox2: true,
      checkbox3: true,
      list: ['a', 'b', 'c'],
      result: ['a', 'b'],
      result2: [],
      icon: {
        normalStyle: {
          borderColor: '#ccc',
          backgroundColor: 'currentColor',
        },
        activeStyle: {
          borderColor: 'red',
          backgroundColor: 'red',
        },
      },
    }
  },
}
</script>
<style>
.demo-title {
  padding: 15px 15px;
  font-size: 16px;
  font-weight: bold;
}

.demo-block {
  padding: 0 15px;
  font-size: 16px;

  & .bx-checkbox {
    margin-top: 10px;
  }

  & img {
    height: 20px;
  }
}
</style>
