<template>
  <div>
    <h1>Checkbox 多选框</h1>
    <p class="fbg-text">一组备选项中进行多选</p>
    <h3 class="fbg-title">基础用法</h3>
    <demo :code="baseCheckboxStr">
      <el-checkbox v-model="data" @change="handleChange" label="测试01" />
      <el-checkbox v-model="checkedValue" @change="handleChange" :true-label="2" :false-label="1" label="测试02" />
      <el-checkbox :is-checked="isChecked" @change="handleIsCheckedChange"  label="测试03" />
    </demo>

    <h3 class="fbg-title">禁用</h3>
    <demo :code="disabledCheckboxStr">
      <el-checkbox disabled v-model="data" label="测试01" />
      <el-checkbox disabled :checked="true" label="测试01" />
    </demo>
    <h3 class="fbg-title">CheckboxGroup 多选框组</h3>
    <demo :code="checkboxGroupStr">
      <el-checkbox-group v-model="checkedList" @change="handleCheckboxGroupChange">
        <el-checkbox value="1" label="测试01" />
        <span>
        <el-checkbox value="2" label="测试02" />
        </span>
      </el-checkbox-group>
    </demo>
    <h3 class="fbg-title">全选</h3>
    <demo :code="allCheckboxGroupStr">
      <el-checkbox :indeterminate="isIndeterminate" :is-checked="allChecked" @change="handleAllCheckedChange"  label="全选" />
      <div>
        <el-checkbox-group v-model="checkedItemList" @change="handleCheckboxGroupItemChange">
          <el-checkbox v-for="(item, index) in list" :key="index" :value="item.value" :label="item.label" />
        </el-checkbox-group>
      </div>
      
    </demo>
    <h3 class="fbg-title">Checkbox 属性</h3>
    <table class="fbg-table">
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>可选值</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>label</td>
          <td>标题</td>
          <td>--</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>disbaled</td>
          <td>禁用状态</td>
          <td>boolean</td>
          <td>true | false</td>
          <td>false</td>
        </tr>
        <tr>
          <td>is-checked</td>
          <td>是否选中</td>
          <td>boolean</td>
          <td>true | false</td>
          <td>false</td>
        </tr>
        <tr>
          <td>true-label</td>
          <td>选中时的值</td>
          <td>String | Number | Boolean</td>
          <td>--</td>
          <td>true</td>
        </tr>
        <tr>
          <td>false-label</td>
          <td>没有选中时的值</td>
          <td>String | Number | Boolean</td>
          <td>--</td>
          <td>false</td>
        </tr>
      </tbody>
    </table>
    <h3 class="fbg-title">Checkbox 事件</h3>
    <table class="fbg-table">
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>回调参数</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>change</td>
          <td>选中状态变化</td>
          <td>参数1: 选中状态，参数2: 选中项的value</td>
        </tr>
      </tbody>
    </table>
    <h3 class="fbg-title">CheckboxGroup 事件</h3>
    <table class="fbg-table">
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>回调参数</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>change</td>
          <td>选中状态变化</td>
          <td>参数1: 选中值（Array）</td>
        </tr>
      </tbody>
    </table>
  </div>
  </div>
</template>
<script>
import hljs from '../util/highlight';
export default {
  data() {
    return {
      data: true,
      checkedValue: 2,
      isChecked: false,
      isIndeterminate: false,
      allChecked: false,
      list: [{label: '测试1', value: 1}, {label: '测试2', value: 2},  {label: '测试3', value: 3}],
      checkedList: ['1'],
      checkedItemList: [],
      baseCheckboxStr: `
      <template>
        <el-checkbox v-model="data" @change="handleChange" label="测试01" />
        <el-checkbox v-model="checkedValue" @change="handleChange" :true-label="2" :false-label="1" label="测试02" />
        <el-checkbox :is-checked="isChecked" @change="handleIsCheckedChange"  label="测试03" />
      </template>
      <script>
        export default {
          data() {
            return {
              data: true,
              checkedValue: 2,
              isChecked: false
            }
          },
          methods: 
            handleChange(value) {
              console.log(value);
            },
            handleIsCheckedChange(value) {
              this.isChecke = value;
              console.log(\`isChecked: \$\{value\}\`);
            }
          }
        }
      <\/script>`
      ,
      disabledCheckboxStr: `
      <el-checkbox disabled v-model="data" label="测试01" />`,
      allCheckboxGroupStr:`
      <template>
        <el-checkbox :indeterminate="isIndeterminate" :is-checked="allChecked" @change="handleAllCheckedChange"  label="全选" />
        <div>
          <el-checkbox-group v-model="checkedItemList" @change="handleCheckboxGroupItemChange">
            <el-checkbox v-for="(item, index) in list" :key="index" :value="item.value" :label="item.label" />
          </el-checkbox-group>
        </div>
      </template>
      <script>
        export default {
          data() {
            return {
              isIndeterminate: false,
              allChecked: false,
              list: [{label: '测试1', value: 1}, {label: '测试2', value: 2},  {label: '测试3', value: 3}],
              checkedItemList: [],
            }
          },
          methods: {
            handleCheckboxGroupItemChange(data) {
              this.isIndeterminate = this.checkedItemList.length > 0 && this.checkedItemList.length !== this.list.length;
              this.allChecked = this.checkedItemList.length === this.list.length;
            },
            handleAllCheckedChange(value) {
              this.allChecked = value;
              if (value) {
                this.checkedItemList = this.list.map(item => item.value);
              } else {
                this.checkedItemList = [];
              }
            }
          }
        }
      <\/script>`,
      checkboxGroupStr:`
      <template>
        <el-checkbox-group v-model="checkedList" @change="handleCheckboxGroupChange">
          <el-checkbox value="1" label="测试01" />
          <el-checkbox value="2" label="测试02" />
        </el-checkbox-group>
      </template>
      <script>
        export default {
          data() {
            return {
              checkedList: []
            }
          },
          methods: {
            handleCheckboxGroupChange() {
              console.log(this.checkedList)
            }
          }
        }
      <\/script>`
    }
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
    handleIsCheckedChange(value) {
      this.isChecked = value;
      console.log(`isChecked: ${value}`);
    },
    handleCheckboxGroupChange() {
      console.log(this.checkedList, 7777)
    },
    handleCheckboxGroupItemChange(data) {
      this.isIndeterminate = this.checkedItemList.length > 0 && this.checkedItemList.length !== this.list.length;
      this.allChecked = this.checkedItemList.length > 0 && this.checkedItemList.length === this.list.length;
      
    },
    handleAllCheckedChange(value) {
      this.allChecked = value;
      if (value) {
        this.checkedItemList = this.list.map(item => item.value);
      } else {
        this.checkedItemList = [];
      }
      
    },
    handleItemChange() {

    }
  },
  mounted() {
    hljs.highlightCode();
  }
}
</script>