<template>
  <div class="AiRadio" :class="[isLine ? 'AiRadio-line' : '']">
    <div
      class="AiRadio-item"
      v-for="(item, index) in options"
      @click="onChange(index)"
      :class="[currIndex === index ? 'active' : '']"
      :key="index">
      {{ item.label }}
    </div>
  </div>
</template>

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

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

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

    data () {
      return {
        currIndex: -1,
        dictKey: ''
      }
    },

    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

        if (this.value) {
          console.log(this.value)
          this.$dict.getDict(this.dict).forEach((e, i) => {
            console.log(e)
            if (e.dictValue === this.value) {
              this.currIndex = i
            }
          })
        }
      })
    },

    methods: {
      onChange (index) {
        this.currIndex = index
        const choosed = this.options[index]
        this.$emit('name', choosed.label)
        this.$emit('input', choosed.value)
      }
    }
  }
</script>

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

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

      &:nth-of-type(3n) {
        margin-right: 0;
      }

      &.active {
        background: #4181FF;
        color: #fff;
        border-color: #4181FF;
      }
    }

    &.AiRadio-line {
      width: 100%;

      .AiRadio-item {
        width: 100%;
        margin-right: 0;
      }
    }
  }
</style>
