<template>
  <div>
    <a-spin v-if="loading" :class="$style.checkboxspin" />
    <div v-else>
      <div v-if="singleMode" :class="$style.single">
        <span
          v-for="(item, index) in businessType"
          :key="index"
          :class="[$parent.businessTypeSelected.indexOf(item) >= 0 ? $style.active : '']"
          @click="ywlxSelected(item)"
        >
          {{ item.label }}
        </span>
      </div>
      <a-checkbox-group v-if="!singleMode" v-model="businessArr" :class="$style.checkbox">
        <a-checkbox
          v-for="allItem in businessType"
          :key="allItem.value"
          class="titles"
          :label="allItem.label"
          :value="allItem"
          @change="businessChange"
        >
          {{ allItem.label }}
        </a-checkbox>
      </a-checkbox-group>
    </div>
  </div>
</template>

<script>
import components from './_import-components/sd-business-type-check-import'
export default {
  name: 'SdBusinessTypeCheck',
  components,
  props: {
    // 业务类型分类对象
    ywlxCateItem: {
      type: Object,
      default: () => {
        return {}
      },
    },
    // 单选还是多选
    single: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      loading: true,
      businessArr: [],
      businessType: [],
    }
  },
  computed: {
    singleMode() {
      return this.single
    },
  },
  mounted() {
    this.getBusinessTypes(this.ywlxCateItem)
  },
  methods: {
    // 获取分类的业务类型列表
    getBusinessTypes(cate) {
      this.loading = true
      if (cate.value === 'all') {
        this.businessArr = []
        this.businessType = []
        this.loading = false
      }
      if (cate.value !== 'all' && cate.childs) {
        this.businessType = []
        cate.childs.forEach((item) => {
          this.businessType.push({
            label: item.text,
            value: item.id,
          })
        })
        this.loading = false
      }
    },
    ywlxSelected(item) {
      this.$emit('radiobusinesstype', item)
    },
    businessChange(e) {
      if (e.target.checked) {
        this.$emit('addbusinesstype', e.target.value)
      } else {
        this.$emit('prepbusinesstype', e.target.value)
      }
    },
    // 关闭业务类型tag时取消复选框
    closeTag(item) {
      const tags = this.businessArr.filter((tag) => tag.value !== item.value)
      this.businessArr = tags
    },
    // 选择了不限时清空已选项
    clearbusinesstype() {
      this.businessArr = []
    },
    // 单选变多选加复选框
    addChecked(arrSelected) {
      if (this.businessType.findIndex((item) => item.value === arrSelected[0].value) !== -1) {
        this.businessArr.push(arrSelected[0])
      }
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.checkbox {
  margin-bottom: 16px;
  :global(.ant-checkbox-wrapper) {
    margin: 0 8px 0 0;
  }
}
.checkboxspin {
  width: 100%;
}
.active {
  color: $primary-color;
}
.single {
  overflow: hidden;
  > span {
    display: inline-block;
    float: left;
    padding: 0 10px;
    cursor: pointer;
  }
}
</style>
