const compiler = require('vue-template-compiler')
const result = compiler.parseComponent(vueStr, [options])

// parseComponent 返回  template、script、style內(nèi)容，
export interface SFCDescriptor {
  template: SFCBlock | undefined;
  script: SFCBlock | undefined;
  styles: SFCBlock[];
  customBlocks: SFCBlock[];
}

const compiler = require('vue-template-compiler')
//vueStr .vue 文件內(nèi)容
const vue = compiler.parseComponent(vueStr)

//生成html部分的 ast 
let template = compiler.compile(vue.template.content, {
    preserveWhitespace: false,
    comments: true // 生成注釋信息
})

const parse = require('@babel/parser');

//生成js部分的 ast
let jsAst = parse.parse(vue.script.content, {
    allowImportExportEverywhere: true 
})

const traverse = require('@babel/traverse');
traverse.default(jsAst, {
  enter(path){ // 開始

  },
  // 支持自定義節(jié)點 比如當(dāng)節(jié)點類型 為 ExportDefaultDeclaration 時掉這個方法
  ExportDefaultDeclaration(){

  }
})

let componentInfo = {}
traverse.default(jsAst, {
  ExportDefaultDeclaration(path){
    path.node.declaration.properties.forEach(item => {
        switch (item.key.name) {
            case 'props':
                componentInfo.props = extractProps(item) // 提取 props
                break;
            case 'methods':
                componentInfo.methods = extractMethods(item)  // 提取 methods
                break
            case 'name':
                componentInfo.name = item.value.value // 獲取組件名稱
                break
            case 'model':
                componentInfo.model = extractModel(item)  // 提取 model
                break
            default:
                break;
        }
    });
  }
})

/** 
 * 多行備注
 * 用來上傳文檔信息
 */
// 單行備注
export default {
}
// 結(jié)尾注釋

// ExportDefaultDeclaration 插入如下代碼 
if (path.node.leadingComments) {
    componentInfo.desc = path.node.leadingComments.map(item => {
        if (item.type === 'CommentLine') {
            return item.value.trim()
        } else {
            return item.value.split('\n').map(item => item.replace(/[\s\*]/g, '')).filter(Boolean)
        }
    }).toString()
}

/**
 * 方法描述
 * @param {Bool} type 參數(shù)描述
 * @returns 返回值描述
 */

{
    propA: Number, // 只有類型
    propB: [String, Number], // 只有類型但是支持多種
    propC: { 
      type: String,
      required: true
    },
    propD: {
      type: Number,
      default: 100 // 帶有默認值 
    },
    propE: {
      type: Object,
      default () { // 默認值 需要函數(shù)返回
        return { message: 'hello' }
      }
    },
    propF: {
      default: function () { // 默認值 需要函數(shù)返回 和上面的 default 的 ast 節(jié)點類型是不同的
        return { message: 'hello' }
      }
      validator: function (value) { // 校驗
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
}

// 獲取Props默認值
function getDefaultVal (node) {
    if (types.isRegExpLiteral(node) || types.isBooleanLiteral(node) || types.isNumericLiteral(node) || types.isStringLiteral(node)) {
        return node.value
    } else if (types.isFunctionExpression(node) || types.isArrowFunctionExpression(node) || types.isObjectMethod(node)) {
        try {
            let code = generate.default(types.isObjectMethod(node) ? node.body : node).code
            let fun = eval(**0,${types.isObjectMethod(node) ? 'function ()' : ''} $[code]**)
            return JSON.stringify(fun())
        } catch (error) {
        }
    }
}

const extractEvents = (path) => {
    // 第一個元素是事件名稱
    const eventName = path.parent.arguments[0]; 
    let comments = path.parentPath.parent.leadingComments
    return {
        name: eventName.value,
        desc: comments ? comments.map(item => item.value.trim()).toString() : '——'
    }
}

MemberExpression (path) {
    // 判斷是不是event
    if (path.node.property.name === '$emit') {
        let event = extractEvents(path)
        !componentInfo.events && (componentInfo.events = {});
        if (componentInfo.events[event.name]) {
            componentInfo.events[event.name].desc = event.desc ? event.desc : componentInfo.events[event.name].desc
        } else {
            componentInfo.events[event.name] = event
        }
    }
}

const traverserTemplateAst = (ast, visitor = {}) => {
    function traverseArray (array, parent) {
        array.forEach(child => {
            traverseNode(child, parent);
        });
    }

    function traverseNode (node, parent) {
        visitor.enter && visitor.enter(node, parent);
        visitor[node.tag] && visitor[node.tag](node, parent);
        node.children && traverseArray(node.children, node);
        visitor.exit && visitor.exit(node, parent);
    }

    traverseNode(ast, null);
}

traverserTemplateAst(template.ast, {
    slot (node, parent) {
        !componentInfo.slots && (componentInfo.slots = {})
        // 獲取節(jié)點位置
        let index = parent.children.findIndex(item => item === node)
        let desc = '無描述', name = '-';
        if (index > 0) {
            let tag = parent.children[index - 1]
            // isComment 判斷是否是 注釋
            if (tag.isComment) {
                desc = tag.text.trim()
            }
        }
        if (node.slotName) name = node.attrsMap.name
        componentInfo.slots[name] = {
            name,
            desc
        }
    }
})