<template>
  <div>
    <a-spin v-if="loading" />
    <div v-else :class="[$style.single, { [$style.haschildren]: businesscCurrent !== 0 }]">
      <span
        v-for="(item, index) in businessTypeCateList"
        :key="index"
        :class="[index === businesscCurrent ? $style.active : '']"
        @click="ywlxCateSelected(item, index)"
      >
        {{ item.label }}
      </span>
    </div>
    <div v-for="item in businessTypeCateList" :key="item.value">
      <sd-business-type-check
        v-if="item.value !== 'all'"
        v-show="item.value === businesstypekey"
        ref="businesstypecheck"
        :ywlx-cate-item="item"
        :business-type-selected="businessTypeSelected"
        v-bind="$props"
        @addbusinesstype="addbusinesstype"
        @prepbusinesstype="prepbusinesstype"
        @radiobusinesstype="radiobusinesstype"
        v-on="$listeners"
      />
    </div>
  </div>
</template>

<script>
import WorkbenchService from '@/workbench/workbench-service'
import components from './_import-components/sd-business-type-selector-import'

export default {
  name: 'SdBusinessTypeSelector',
  components,
  props: {
    // 默认多选
    single: {
      type: Boolean,
      default: false,
    },
    // 业务类型分类不限的默认名称
    allCateName: {
      type: String,
      default: '不限',
    },
  },
  data() {
    return {
      loading: true,
      businessTypeCateList: [{ label: this.allCateName, value: 'all' }], // 业务类型分类列表
      businesstypekey: 'all',
      businesscCurrent: 0,
      businessTypeSelected: [],
    }
  },
  watch: {
    single(val) {
      // 多选变为单选时清空已选值,单选变为多选时如果已选择了给被选择的值加上复选框
      if (val) {
        this.clearbusinesstype()
      } else {
        if (this.businessTypeSelected.length > 0) {
          if (this.$refs.businesstypecheck !== undefined) {
            this.$refs.businesstypecheck.forEach((businesstypecheck) => {
              businesstypecheck.addChecked(this.businessTypeSelected)
            })
          }
        }
      }
    },
  },
  mounted() {
    // 获取所有应用+业务类型
    WorkbenchService.getAllAppYwlx().then((res) => {
      ;(res.data || []).forEach((item) => {
        this.businessTypeCateList.push({
          label: item.text,
          value: item.id,
          childs: item.children,
        })
      })
      this.loading = false
    })
  },
  methods: {
    // 多选关闭tag时调用，取消已选的复选框（提供给外部调用）
    closeTag(item) {
      this.businessTypeSelected.splice(
        this.businessTypeSelected.findIndex((it) => it.value === item.value),
        1
      )
      if (this.$refs.businesstypecheck !== undefined) {
        this.$refs.businesstypecheck.forEach((businesstypecheck) => {
          businesstypecheck.closeTag(item)
        })
      }
    },

    // 清除选中的所有业务类型（提供给外部调用）
    clearbusinesstype() {
      this.businessTypeSelected = []
      if (this.$refs.businesstypecheck !== undefined) {
        this.$refs.businesstypecheck.forEach((businesstypecheck) => {
          businesstypecheck.clearbusinesstype()
        })
      }
    },

    // 选择业务类型分类调用
    ywlxCateSelected(item, index) {
      this.businesscCurrent = index
      this.businesstypekey = item.value
      if (item.value === 'all') {
        this.businessTypeSelected = []
        this.$refs.businesstypecheck.forEach((businesstypecheck) => {
          businesstypecheck.clearbusinesstype()
        })
        this.$emit('businessTypeSelected', this.businessTypeSelected)
      }
    },

    // 业务类型多选选中时调用
    addbusinesstype(item) {
      if (this.businessTypeSelected.indexOf(item) === -1) {
        this.businessTypeSelected.push(item)
      }
      this.$emit('businessTypeSelected', this.businessTypeSelected)
    },
    // 业务类型多选取消选中调用
    prepbusinesstype(item) {
      this.businessTypeSelected.splice(
        this.businessTypeSelected.findIndex((it) => it.value === item.value),
        1
      )
      this.$emit('businessTypeSelected', this.businessTypeSelected)
    },

    // 业务类型单选选中时调用
    radiobusinesstype(item) {
      this.businessTypeSelected = [item]
      this.$emit('businessTypeSelected', this.businessTypeSelected)
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.active {
  color: $primary-color;
}
.single {
  overflow: hidden;
  > span {
    display: inline-block;
    float: left;
    padding: 0 10px;
    cursor: pointer;
  }
}
.haschildren {
  margin-bottom: 15px;
}
</style>
