<template>
  <div>
    <checklist
      v-model="checklist001"
      title="default checklist"
      label-position="left"
      :options="commonList"
      @on-change="change"
    />
    <checklist
      v-model="checklist002"
      title="preselect China and Japan"
      :options="commonList"
      @on-change="change"
    />

    <checklist
      v-model="checklist003"
      title="set max=2"
      :options="commonList"
      :max="2"
      @on-change="change"
    />

    <checklist
      v-model="checklist004"
      title="set required=false and no min-error will show"
      :options="commonList"
      :max="2"
      :required="false"
      @on-change="change"
    />

    <checklist
      v-model="checklist005Value"
      title="set random order"
      random-order
      :options="checklist005"
      @on-change="change"
    />

    <checklist
      v-model="objectListValue"
      title="Option Array with key and value(key must be string)"
      :options="objectList"
      @on-change="change"
    />

    <checklist
      v-model="asyncListValue"
      title="Async list"
      :max="3"
      :options="asyncList"
      @on-change="change"
    />

    <divider>Reference</divider>
    <group title="See also">
      <cell
        title="Checker"
        value="with which you can custom any style"
        is-link
        link="/component/checker"
      />
    </group>
  </div>
</template>
<script>
import { Group, Checklist, Cell, Divider } from '../components/_index'

export default {
  components: {
    Group,
    Checklist,
    Cell,
    Divider
  },
  data() {
    return {
      commonList: ['China', 'Japan', 'America'],
      checklist001: [],
      checklist002: ['China', 'Japan'],
      checklist003: ['China', 'Japan'],
      checklist004: [],
      checklist005: ['01', '02', '03'],
      checklist005Value: [],
      objectList: [{ key: '1', value: '001 value' }, { key: '2', value: '002 value' }, { key: '3', value: '003 value' }],
      objectListValue: ['1', '2'],
      asyncList: [],
      asyncListValue: []
    }
  },
  mounted() {
    setTimeout(() => {
      this.asyncList = ['A', 'B', 'C', 'D']
    }, 3000)
  },
  methods: {
    change(val) {
      console.log('change', val)
    }
  }
}
</script>
