<template>
  <div>
    <sd-config-provider>
      <a-modal
        v-model="visible"
        :mask-closable="false"
        width="700px"
        title="选择业务类型"
        destroy-on-close
        @afterClose="handleCancel"
        @ok="SubmitClick"
        @cancel="handleCancel"
      >
        <div :class="$style.guideWrap">
          <div :class="$style.typeLeft">
            <sd-guide-type
              ref="guidetype"
              :get-url-code="typeCode"
              :module-id="moduleId"
              :ywlx-data="ywlxData"
              @flowIdClick="flowIdClick"
            />
          </div>

          <a-card
            v-if="ywlxData && ywlxData.length"
            size="small"
            :loading="loading"
            :class="$style.typeRight"
            bordered
            title="简要说明"
          >
            {{ businessTypeDesc }}
          </a-card>
        </div>
      </a-modal>
    </sd-config-provider>
  </div>
</template>

<script>
import GuideService from './guide-service'
import components from './_import-components/sd-ywlx-guide-import'
export default {
  name: 'SdYwlxGuide',
  components,
  data() {
    return {
      visible: false,
      loading: true,
      businessTypeDesc: '', // 简要说明
      data: null, // 所有业务类型数据
      ywlxData: null,
    }
  },
  created() {
    // 需自动确定，则先获取业务类型
    if (this.autoSubmit) {
      let p
      if (this.moduleId) {
        p = GuideService.getYwlxByModuleId(this.moduleId)
      } else {
        p = GuideService.getYwlx(this.typeCode)
      }
      p.then((data) => {
        if (data) {
          this.ywlxData = data
          // 业务类型只有一个
          if (this.ywlxData.length === 1) {
            this.data = this.ywlxData[0]
            this.SubmitClick()
          } else {
            // 显示业务类型弹窗
            this.visible = true
          }
        }
      })
    } else {
      // 显示业务类型弹窗
      this.visible = true
    }
  },
  methods: {
    // 获取流程id和类型id
    flowIdClick(flowitem) {
      this.loading = false
      this.data = flowitem
      this.businessTypeDesc = flowitem.businessTypeDesc
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.guide-wrap {
  display: flex;
  height: 500px;
  .type-left {
    width: 300px;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid #e8e8e8;
    :global(.ant-menu-inline) {
      border-right: 0;
    }
  }
  .type-right {
    width: 100%;
    margin-left: $padding-lg;
    overflow: auto;
  }
}
</style>
