<template>
  <div :class="$style.guidetype">
    <a-menu mode="inline" theme="light" :selected-keys="[selectedKeys]">
      <template v-for="item in typeData">
        <a-menu-item :key="item.id" :title="item.businessTypeName" @click="typeClick(item)">
          <a-icon type="sd-list" />
          {{ item.businessTypeName }}
        </a-menu-item>
      </template>
    </a-menu>
    <a-empty v-if="empty"> </a-empty>
    <a-spin :spinning="spinning" :class="$style.spin" />
  </div>
</template>

<script>
import GuideService from './guide-service'
import components from './_import-components/sd-guide-type-import'
export default {
  name: 'SdGuideType',
  components,
  props: {
    getUrlCode: {
      type: String,
      default: '',
    },
    moduleId: {
      type: String,
      default: '',
    },
    ywlxData: {
      type: Array,
      default: null,
    },
  },
  data() {
    return {
      typeData: [], // 业务类型数据
      spinning: true,
      selectedKeys: 0,
      empty: false, // 无数据
      code: '',
    }
  },
  created() {
    const typeId = this.$route?.query?.typeid
    let p
    if (!this.ywlxData) {
      if (this.moduleId) {
        p = GuideService.getYwlxByModuleId(this.moduleId)
      } else {
        p = GuideService.getYwlx(this.getUrlCode)
      }
    } else {
      p = Promise.resolve(this.ywlxData)
    }
    p.then((data) => {
      if (data) {
        this.spinning = false
        this.showType(data, typeId)
      }
    })
  },
  methods: {
    typeClick(item) {
      this.selectedKeys = item.id
      this.$emit('flowIdClick', item)
    },
    showType(data, selectedKeys) {
      this.typeData = data
      if (this.typeData.length < 1) {
        this.empty = true
      } else {
        this.empty = false
        // 加载业务类型 默认点击第一条获取模板
        // 链接没传typeid，就没有selectedKeys，直接选取第一条类型，有的话就选取对应的类型
        if (selectedKeys) {
          this.selectedKeys = parseInt(selectedKeys)
          data.forEach((item, index) => {
            if (parseInt(item.id) === this.selectedKeys) {
              this.$emit('flowIdClick', item)
            }
          })
        } else {
          this.selectedKeys = data[0].id
          this.$emit('flowIdClick', data[0])
        }
      }
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
$color-black: rgba(0, 0, 0, 0.85);
.spin {
  width: 100%;
  line-height: 30;
}
.guidetype {
  .title {
    padding: 0 $padding-lg;
    margin-bottom: 35px;
    font-size: $font-size-lg;
    font-weight: 500;
    color: $color-black;
    span:last-child {
      margin-left: 134px;
    }
  }
  .guide-tab {
    :global(.ant-tabs-left-content) {
      padding: 0;
    }
    :global(.ant-tabs-tab) {
      text-align: left;
    }
    :global(.ant-tabs-tab-active) {
      background: rgba($color: $primary-color, $alpha: 0.1);
    }
    :global(.ant-tabs-left-bar) {
      width: 100%;
    }
  }
}
</style>
