<script name="leaveDialog" setup>
import { watch } from 'vue'
import { useRouter } from 'vue-router'
const
  props = defineProps({
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    initData: {
      type: Array,
      default: () => {
        return [
          {
            name: '配置单位流程',
            remark: '用于项目审核，请先配置单位默认流程。',
            path: 'systemManage/unitSet/flowPathConfiguration'
          },
          // {
          //   name: '配置财政编码',
          //   remark: '用于生成项目唯一编码。',
          //   path: 'unitSet/fiscalCodeSet'
          // },
          {
            name: '配置印章编码',
            remark: '用于电子签章。',
            path: 'systemManage/unitSet/fiscalCodeSet'
          }]
      }
    }

  }),
  router = useRouter(),
  emits = defineEmits(['close']),
  getUrlParams = (url) => {
    // 通过 ? 分割获取后面的参数字符串
    const urlStr = url?.split('?')[1] || ''
    if (!urlStr) {
      return {}
    }
    // 创建空对象存储参数
    const obj = {}
    // 再通过 & 将每一个参数单独分割出来
    const paramsArr = urlStr.split('&')
    for (let i = 0, len = paramsArr.length; i < len; i++) {
    // 再通过 = 将每一个参数分割为 key:value 的形式
      const arr = paramsArr[i].split('=')
      obj[arr[0]] = arr[1]
    }
    return obj
  },
  view = (path) => {
    const routeUrl = router.resolve({
      path: `/systemManage/${path}`,
      query: getUrlParams(path)
    })
    window.open(routeUrl.href, '_blank')
  }
watch(
  () => props.visible,
  async val => {
    if (val) {
      console.log(val)
    }
  }
)
</script>

<template>
  <el-dialog
    :model-value="visible"
    title="初始化引导"
    width="600px"
    destroy-on-close
    @close="emits('close')"
  >
    <div>
      <el-alert
        title="为保证正常申报项目，请完成以下配置工作："
        :closable="false"
        type="info"
        show-icon
        class="primary-alert"
      />
    </div>
    <div class="p-16">
      <el-steps
        direction="vertical"
        :space="100"
        :active="-1"
      >
        <el-step
          v-for="(item, index) in initData.filter(i=>i.name!=='配置财政编码')"
          :key="index"
          :title="item.name"
          :status="item.isFinish?'success':'wait'"
        >
          <template #description>
            <p>{{ item.remark }}</p>
            <el-button link type="primary" @click="view(item.path)">前往配置</el-button>
          </template>
        </el-step>
      </el-steps>
    </div>
  </el-dialog>
</template>

