<template>
  <div class="AiCheckbox">
    <div
      class="AiCheckbox-item"
      v-for="(item, index) in options"
      @click="onChange(item.value)"
      :class="[choosed.indexOf(item.value) > -1 ? 'active' : '']"
      :key="index">
      {{ item.label }}
    </div>
  </div>
</template>

<script>
  export default {
    name: 'AiCheckbox',

    model: {
      event: 'input',
      prop: 'value'
    },

    props: {
      value: Array,
      placeholder: {
        default: '请选择'
      },
      list: {
        default: () => []
      },
      dict: String,
      disabled: Boolean
    },

    data () {
      return {
        dictKey: '',
        choosed: []
      }
    },

    computed: {
      options () {
        return this.dictKey ? this.$dict.getDict(this.dict).map(e => ({
          value: e.dictValue,
          label: e.dictName
        })) : this.list
      }
    },

    mounted () {
      this.$dict.load(this.dict).then(() => {
        this.dictKey = this.dict
      })
    },

    methods: {
      onChange (value) {
        if (this.choosed.indexOf(value) > -1) {
          this.choosed.splice(this.choosed.indexOf(value), 1)
        } else {
          this.choosed.push(value)
        }

        this.$emit('input', this.choosed)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .AiCheckbox {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .AiCheckbox-item {
      width: 100%;
      line-height: 1.3;
      padding: 20px 32px;
      margin-bottom: 16px;
      text-align: center;
      background: #FFFFFF;
      box-sizing: border-box;
      border-radius: 16px;
      color: #333333;
      font-size: 28px;
      border: 1px solid #CCCCCC;

      &.active {
        background: #4181FF;
        color: #fff;
        border-color: #4181FF;
      }
    }
  }
</style>
