<template>
  <a-popover
    v-model="visible"
    placement="left"
    :mouse-enter-delay="0.5"
    :destroy-tooltip-on-hide="true"
    @visibleChange="showGuide"
  >
    <template slot="content">
      <a-steps direction="vertical" :current="activeStep" size="small">
        <a-step>
          <template slot="title">
            <a @click="formDesign">表单设计</a>
          </template>
        </a-step>
        <a-step>
          <template slot="title">
            <a v-if="activeStep > 0" @click="flowDesign">流程设计</a>
            <span v-else>流程设计</span>
          </template>
        </a-step>
        <a-step>
          <template slot="title">
            <a v-if="activeStep > 1" @click="authCfg">权限配置</a>
            <span v-else>权限配置</span>
          </template>
        </a-step>
        <a-step>
          <template slot="title">
            <a v-if="activeStep === 3" @click="doDbSynch">同步到数据库</a>
            <span v-else>同步到数据库</span>
          </template>
        </a-step>
      </a-steps>
    </template>
    <a-icon type="sd-send" :class="$style.guideinfo" />
  </a-popover>
</template>

<script>
import ApplicationService from './application-service'
import components from './_import-components/sd-form-guide-import'

export default {
  name: 'SdFormGuide',
  components,
  props: {
    record: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      visible: false,
      activeStep: 0,
    }
  },
  methods: {
    // 引导：下一步
    showGuide(visible) {
      if (visible) {
        const formId = this.record.id
        this.getFormDesignProgress(formId, this.activeStep).then((progress) => {
          if (this.activeStep !== progress) {
            this.activeStep = progress
          }
        })
      }
    },
    // 获取表单设计的进度
    getFormDesignProgress(formId, progress) {
      let p = Promise.resolve(true)
      switch (progress) {
        // 表单设计
        case 0:
          // 获取表单信息
          p = ApplicationService.getFormDetail(this.record.id).then((res) => {
            // attrFD 有值，说明已经用设计器保存过
            if (res.data?.head?.attrFD?.theme) {
              return true
            }
          })
          break
        // 检测流程设计
        case 1:
          p = this.getFlowDef(formId).then((flows) => {
            if (flows && flows.length > 0) {
              return true
            }
          })
          break
        // 检测权限配置
        case 2:
          p = this.getAuthorityConfig(formId).then((res) => {
            if (res) {
              return true
            }
          })
          break
        default:
          p = Promise.resolve(false)
          break
      }
      return p
        .then((flag) => {
          if (flag) {
            // 检测通过，继续下一步检测
            return this.getFormDesignProgress(formId, progress + 1)
          } else {
            // 检测未通过，返回当前检测的进度
            return progress
          }
        })
        .catch(() => {
          return progress
        })
    },
    // 获取表单对应的流程设计
    getFlowDef(formId) {
      return ApplicationService.businessValue({
        appId: this.$route.query.appId,
        formId,
      }).then((res) => {
        if (res.data) {
          return JSON.parse(res.data.flow)
        }
      })
    },
    // 获取表单对应的权限配置
    getAuthorityConfig(formId) {
      return ApplicationService.queryBusinessid(formId).then((res) => {
        if (res) {
          return Number(res)
        }
      })
    },
    formDesign() {
      this.$emit('formDesign', this.record)
    },
    doDbSynch() {
      this.visible = false
      this.$emit('dbSync', this.record)
    },
    flowDesign() {
      this.$emit('flowDesign')
    },
    authCfg() {
      this.visible = false
      this.$emit('authCfg', this.record)
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.guideinfo {
  width: 18px;
  height: 22px;
  font-size: 0;
  background: url(./guide.png) no-repeat center 4px;
  background-size: contain;
}
</style>
