<template>
  <div class="selector-parent">
    <group title="list selector">
      <cell
        title="选择单个"
        @click.native="visible = true"
      >
        <div solt="value">
          {{ showName }}
        </div>
      </cell>
      <cell
        title="选择多个"
        @click.native="visible2 = true"
      >
        <div solt="value">
          {{ showName2 }}
        </div>
      </cell>
    </group>

    <!-- 单选 -->
    <SelectorList
      v-model="visible"
      title="选择单人"
      role-key="role"
      id-key="roleId"
      name-key="roleName"
      :role-list="roleList"
      :checked.sync="checked"
      :name.sync="showName"
    />

    <!-- 多选 -->
    <SelectorList
      v-model="visible2"
      title="选择多人"
      role-key="role"
      id-key="roleId"
      name-key="roleName"
      :role-list="roleList"
      :checked.sync="checked2"
      :name.sync="showName2"
      :count="4"
      @commit="commit"
    />
  </div>
</template>

<script>
import { SelectorList, Group, Cell } from '../components/_index'

export default {
  components: {
    SelectorList,
    Group,
    Cell
  },
  data () {
    return {
      visible: false,
      visible2: false,
      checked: '',
      checked2: [],
      showName: '',
      showName2: ''
    }
  },
  created () {
    this.roleList = [
      { roleId: '1', roleName: 'ABC', role: '产品经理、行政经理' },
      { roleId: 2, roleName: 'B', role: '行政经理2' },
      { roleId: 3, roleName: 'C', role: '行政经理3' },
      { roleId: 4, roleName: 'D', role: '行政经理3' },
      { roleId: 5, roleName: 'E', role: '行政经理3' },
      { roleId: 6, roleName: 'F', role: '产品经理、行政经理、网红直播博主' },
      { roleId: 7, roleName: 'G', role: '行政经理2' },
      { roleId: 8, roleName: 'H', role: '行政经理3' },
      { roleId: 9, roleName: 'I', role: '行政经理3' },
      { roleId: 10, roleName: 'J', role: '行政经理3' }
    ]
  },
  methods: {
    commit (checked, name) {
      console.log(checked, name)
    }
  }
}
</script>
