import {i18nRender} from '@/locales/index'

/**
 * 下载html
 * @param content
 * @param filename
 */
export function downloadHtml(content, filename) {
    let preview = `${i18nRender('functional-analysis.net.preview')}`;
    var htmlStr = '<!DOCTYPE html>\n' +
        '<html lang="en">\n' +
        '<head>\n' +
        '    <meta charset="UTF-8">\n' +
        '    <title>' + filename + '\xa0' + preview + '</title>\n' +
        '\n' +
        '    <style>\n' +
        'table.htree td {\n' +
        '  vertical-align: middle;\n' +
        '}\n' +
        '\n' +
        '.leaf-hide {\n' +
        '  visibility: hidden;\n' +
        '}\n' +
        '\n' +
        '.leaf {\n' +
        '  display: inline-block;\n' +
        '  _display: inline;\n' +
        '  vertical-align: middle;\n' +
        '  text-decoration: none;\n' +
        '  border: 1px solid #ddd;\n' +
        '  border-left: 5px solid #ddd;\n' +
        '  text-align: left;\n' +
        '  margin: 5px 0;\n' +
        '  padding: 3px 10px;\n' +
        '  width: 200px;\n' +
        '  overflow: hidden;\n' +
        '  border-radius: 8px;\n' +
        '  background: #fff;\n' +
        '}\n' +
        '\n' +
        '.leafopt {\n' +
        '  display: inline-block;\n' +
        '  _display: inline;\n' +
        '  vertical-align: middle;\n' +
        '  background-color: #fff;\n' +
        '  border: 1px solid #ddd;\n' +
        '  border-left: 5px solid #ddd;\n' +
        '  text-align: left;\n' +
        '  margin: 5px 0;\n' +
        '  padding: 3px 10px;\n' +
        '}\n' +
        '\n' +
        '.leaf p {\n' +
        '  margin: 0;\n' +
        '  font-size: 14px;\n' +
        '  line-height: 1;\n' +
        '  color: #000000;\n' +
        '  word-break: break-all;\n' +
        '  overflow: hidden;\n' +
        '  text-overflow: ellipsis;\n' +
        '  display: -webkit-box;\n' +
        '  -webkit-line-clamp: 2;\n' +
        '  -webkit-box-orient: vertical;\n' +
        '}\n' +
        '\n' +
        '.leaf small {\n' +
        '  display: block;\n' +
        '  font-size: 12px;\n' +
        '  line-height: 12px;\n' +
        '  color: #999999;\n' +
        '  word-break: break-all;\n' +
        '  overflow: hidden;\n' +
        '  text-overflow: ellipsis;\n' +
        '  display: -webkit-box;\n' +
        '  -webkit-line-clamp: 2;\n' +
        '  -webkit-box-orient: vertical;\n' +
        '}\n' +
        '\n' +
        '.leaf small:before {\n' +
        '  content: \'\\2014 \\00A0\';\n' +
        '}\n' +
        '\n' +
        '.selectOpt {\n' +
        '  background-color: #e6fffc;\n' +
        '}\n' +
        '\n' +
        'a.leaf:hover, .leaf:hover {\n' +
        '  text-decoration: none;\n' +
        '  cursor: pointer;\n' +
        '  background-color: #e6fffc;\n' +
        '}\n' +
        '\n' +
        'i {\n' +
        '  font-size: 14px;\n' +
        '  cursor: pointer;\n' +
        '}\n' +
        '\n' +
        'ul.htree {\n' +
        '  display: inline-block;\n' +
        '  _display: inline;\n' +
        '  position: relative;\n' +
        '  vertical-align: middle;\n' +
        '  border: 0;\n' +
        '  margin: 0;\n' +
        '  margin-left: -25px;\n' +
        '}\n' +
        '\n' +
        'ul.htree > li {\n' +
        '  display: block;\n' +
        '  border: 0;\n' +
        '  margin: 0;\n' +
        '  position: relative;\n' +
        '}\n' +
        '\n' +
        'ul.htree li {\n' +
        '  text-align: left;\n' +
        '  padding-left: 15px;\n' +
        '}\n' +
        '\n' +
        '.line-x,\n' +
        '.line-y {\n' +
        '  left: 0;\n' +
        '  right: auto;\n' +
        '  background-color: #ddd;\n' +
        '  position: absolute;\n' +
        '  margin: 0;\n' +
        '  padding: 0;\n' +
        '}\n' +
        '\n' +
        '.line-x {\n' +
        '  top: 50%;\n' +
        '  height: 1px;\n' +
        '  width: 15px;\n' +
        '}\n' +
        '\n' +
        '.line-y {\n' +
        '  width: 1px;\n' +
        '  bottom: 0;\n' +
        '  top: 0;\n' +
        '}\n' +
        '\n' +
        'ul.htree.reverse > li {\n' +
        '  text-align: right;\n' +
        '  padding-right: 15px;\n' +
        '  padding-left: 0px;\n' +
        '  margin-right: 15px;\n' +
        '}\n' +
        '\n' +
        'ul.htree.reverse .line-x,\n' +
        'ul.htree.reverse .line-y {\n' +
        '  right: 0;\n' +
        '  left: auto;\n' +
        '}\n' +
        '\n' +
        '.line-combine-right {\n' +
        '  color: #ddd;\n' +
        '}\n' +
        '\n' +
        '.line-combine-right > span {\n' +
        '  left: auto;\n' +
        '}\n' +
        '.line-combine-left {\n' +
        '  color: #ddd;\n' +
        '}\n' +
        '.line-combine-left > span {\n' +
        '  left: auto !important;\n' +
        '  right: auto !important;\n' +
        '  margin-left: -15px;\n' +
        '}\n' +
        '\n' +
        '.leaf.center {\n' +
        '  border-color: #409eff;\n' +
        '}\n' +
        '\n' +
        '.leaf.success {\n' +
        '  border-color: #356635;\n' +
        '}\n' +
        '\n' +
        '.leaf.left {\n' +
        '  border-color: #e6a23c;\n' +
        '}\n' +
        '\n' +
        '.leaf.right {\n' +
        '  border-color: #c84d3c;\n' +
        '}\n' +
        '\n' +
        '.leaf.target {\n' +
        '  color: #fff;\n' +
        '}\n' +
        '\n' +
        '.fmea-success {\n' +
        '  background-color: #468847;\n' +
        '}\n' +
        '\n' +
        '.fmea-warning {\n' +
        '  background-color: #f89406;\n' +
        '}\n' +
        '\n' +
        '.fmea-important {\n' +
        '  background-color: #b94a48;\n' +
        '}\n' +
        '\n' +
        '.tooltitile {\n' +
        '  display: inline-block;\n' +
        '  _display: inline;\n' +
        '}\n' +
        '\n' +
        '.tooltitile p {\n' +
        '  margin: 0;\n' +
        '  font-size: 14px;\n' +
        '  font-weight: 300;\n' +
        '  line-height: 1;\n' +
        '}\n' +
        '\n' +
        '.tooltitile small {\n' +
        '  display: block;\n' +
        '  font-size: 12px;\n' +
        '  line-height: 12px;\n' +
        '  color: #999999;\n' +
        '}\n' +
        '\n' +
        '.tooltitile small:before {\n' +
        '  content: \'\\2014 \\00A0\';\n' +
        '}\n' +
        '\n' +
        '.rightClickMenu {\n' +
        '  display: none;\n' +
        '  margin: 0;\n' +
        '  background-color: #eee;\n' +
        '  z-index: 100;\n' +
        '}\n' +
        '\n' +
        '.rightClickMenu > li > a {\n' +
        '  padding-top: 4px;\n' +
        '  padding-bottom: 4px;\n' +
        '}\n' +
        '\n' +
        '.text-center {\n' +
        '  text-align: left;\n' +
        '}' +
        '    </style>\n' +
        '</head>\n' +
        '<body>\n' +
        '<div>';
    var htmlStrEnd = '</div>\n' +
        '</body>\n' +
        '</html>';
    //content是要下载页面的html代码，filename是下载后的文件名称
    var eleLink = document.createElement('a');
    eleLink.download = filename + '.html';
    eleLink.style.display = 'none';
    // 字符内容转变成blob地址
    content = content.replaceAll('<i class="iconfont iconMinusCircle"></i>', '<span class="line-x"></span>');
    // 下载时，移除放大缩小属性
    content = content.replace('zoom:', 'z');
    content = content.replace('left:', 'l');
    content = content.replace('top:', 't');
    content = htmlStr + content + htmlStrEnd;
    var blob = new Blob([content]);
    eleLink.href = URL.createObjectURL(blob);
    // 触发点击
    document.body.appendChild(eleLink);
    eleLink.click();
    // 然后移除
    document.body.removeChild(eleLink);
};
