<!-- 功能：功能描述; 作者：LZJ; 时间：2022年10月18日 11:57:30-->
<template>
    <div id="ToolTest" class="pd20">
        <el-tabs type="border-card" class="mtb20">
            <el-tab-pane v-for="(value,key,index) in toolObj" :key="index" :label="`${key}`">
                <div class="waterfall">
                    <div v-for="(cvalue,ckey,cindex) in value" :key="cindex" class="left">
                        <pre v-if="key.includes('.js')&&key!=='floatTools.js'" class="language-js" v-html="toJs(` // ${cvalue.name} \n ${ckey}{ }`,cvalue.example)" />
                        <pre v-else class="language-js" v-html="toJs(` // ${cvalue.name} \n ${ckey}`,cvalue.example)" />
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import Prism from 'prismjs';
import 'prismjs/themes/prism.css';
import { cutLocationHref } from '@/tool/func.js';
export default {
    // 组件名称
    name: 'ToolTest',
    // 局部注册的组件
    components: {},
    // 组件参数 接收来自父组件的数据
    props: {},
    // 组件状态值
    data() {
        return {
            toolObj: {
                'func.js': {
                    'arraySort(name)': { name: '根据数组对象的某个key值排序', example: `const arr = [{ a: 1, b: 2 },{ a: 4, b: 3 },
              { a: 3, b: 3 },{ a: 2, b: 3 }];\n\narr.sort(arraySort('a')))
// console结果：
// [{ a: 1, b: 2 }, { a: 2, b: 3 }, { a: 3, b: 3 },],{ a: 4, b: 3 }]` },
                    "brightenKeyword(color = '#303133', keyword = '')": { name: '文字变色', example: `const a = '123';
const str = brightenKeyword('#1677ff', a);`
                    },
                    'cutLocationHref()': { name: '当前地址栏所有参数转化为键值对对象格式', example: `//例如当前的location.href为：
//'https://abc/page?clientNewId=1000066608&workStatus=4
 cutLocationHref() //{clientNewId: '1000066608', workStatus: '4'}` },
                    'deepClone(target)': { name: '定义一个深拷贝函数  接收目标target参数', example: `//深拷贝，两种用法
 //1.页面先引入,在使用：
    import { deepClone } from '@/tool/func.js'; 
    const tempData = deepClone(object)

 //2.写在commonFuncMixin.js文件，全局直接使用，无需import引入
    const tempData = deepClone(object)
   ` },

                    'isEmpty(val)': { name: '判断val为空', example: `const arr = ['', [], {}, null, 'null', undefined, 'undefined',
               0, 1, -1, true, false];
 arr.forEach(item => {
    console.log(isEmpty(item));
 });\n//console结果：\n//true,true,true,true,true,true,true,false,false,false,false,false` },
                    'hexToRGBA(_color, _opacity)': { name: '把hex颜色值转化为rgba色值', example: `hexToRGBA('#1677FF', 1)   // rgba(22,119,255,1)\n hexToRGBA('#c5c944', 0.64)// rgba(197,201,68,0.64)` },
                    "join(arr, symbol = ',')": { name: "根据传入symbol联合,不传默认是','", example: `const arr = [1, 1, '1', '1', 0, 0, '0', '0', undefined, undefined]\n\njoin(arr)//console结果：1,1,1,1,0,0,0,0,,\njoin(arr,'*')//console结果：1*1*1*1*0*0*0*0**` },
                    'notEmpty(val)': { name: '判断val不为空', example: `const arr = ['', [], {}, null, 'null', undefined, 'undefined',
               0, 1, -1, true, false];
 arr.forEach(item => {
    console.log(notEmpty(item));
 });\n//console结果：\n//false,false,false,false,false,false,false,true,true,true,true,true,` },
                    'reduceSome(arr, key)': { name: '根据数组对象的某个key值去重', example: `const arr = [{ a: 1, b: 2 }, { a: 1, b: 3 }];\n\nreduceSome(arr,'a')\n//console结果：[{ a: 1, b: 2 }]` },
                    'reduceSomeBySet(arr)': { name: '对数组内容进行去重', example: `const arr = [1, 1, '1', '1', 0, 0, '0', '0', undefined, undefined,
            null, null, NaN, NaN];\n\nreduceSomeBySet(arr)\n//console结果：[1, '1', 0, '0', undefined, null, NaN]` },
                    'split(str)': { name: '根据逗号分隔', example: `split('我是一段长长的文字,wsydccdwz')\n//console结果：['我是一段长长的文字', 'wsydccdwz']` },
                    'strToHexCharCode(str)': { name: 'string转向hex编码', example: `strToHexCharCode('衣1e')\n// console结果：'0x88633165'` },
                    'toFormData(obj)': { name: 'Json强转为Form类型', example: `const data = toFormData({ 'name': 'BeJson', 'url': 'http://a.com'});
 console.log(data.getAll('name')) //['BeJson'];
 console.log(data.get('url'))//http://a.com` },
                    'toInt(val, defaultValue)': { name: '强转int型,传入defaultValue可以把非int型的转为默认值', example: `toInt('') //-1,
 toInt('123')//123
 toInt('123', 2)//123
 toInt('123', '我')//123
 toInt('我')//-1
 toInt('我', 33)//33` },
                    'trimParams(params)': { name: '去除对象里面字符串参数两侧空格', example: `trimParams(' abcde ')\n // console结果：'abcde'` }
                },
                'floatTools.js': {
                    '0.1.add(0.2)': { name: '加法函数,示例' },
                    '0.2.sub(0.1)': { name: '减法函数,示例' },
                    '0.2.mul(0.1)': { name: '乘法函数，用来得到精确的乘法结果,示例' },
                    '0.2.div(0.1)': { name: '除法函数，示例' }
                },
                'validate.js': {
                    'cardId(code)': { name: '判断身份证号码', example: `cardId('420333194708248787') //true\n cardId('423333333323450') //false` },
                    'validateName(name)': { name: '判断姓名是否正确(2-4字中文)', example: `const arr = ['abc', '123', '名', '姓名', 'na明me',
              '姓和名'，'四字姓名', '五个字姓名',];
 arr.forEach(item => {
    console.log(validateName(item));
 });\n//console结果：false,false,false,true,false,true,true,false` },
                    'isEmail(s)': { name: '校验email格式', example: `const arr = ['abc', 'abc@.com', '12345@360.com', 'a@b.cn', '1c@a.bcde'];
 arr.forEach(item => {
    console.log(isEmail(item));
 });\n//console结果：false,false,true,true,false` },
                    'isMobile(s)': { name: '校验1开头、第二位是3-9的11位手机号码', example: `isMobile('123456789')// false\n isMobile('13322224444')// true\n isMobile('abcdefghijkl')// false` },
                    'isURL(s)': { name: '校验URL地址是否是http[s]://开头', example: `const arr = ['http', 'https', 'http://', 'https://', 'http:/'];
 arr.forEach(item => {
    console.log(isURL(item));
 });\n//console结果：false,false,true,true,false` },
                    'validateNull(val)': { name: '判断是否为空(number和boolean类型都不为空)', example: `const arr = ['', [], {}, null, 'null', undefined, 'undefined',
               0, 1, -1, true, false];
 arr.forEach(item => {
    console.log(validateNull(item));
 });\n//console结果：\n//true,true,true,true,true,true,true,false,false,false,false,false` },
                    'validateLowerCase(str)': { name: '判断全小写字母', example: `const arr = ['a', 'A',Aa', 1, '1a', '字'];
 arr.forEach(item => {
    console.log(validateLowerCase(item));
 });\n//console结果：true,false,false,false,false,false` },
                    'validateUpperCase(str)': { name: '判断全大写字母', example: `const arr = ['a', 'A',Aa', 1, '1a', '字'];
 arr.forEach(item => {
    console.log(validateLowerCase(item));
 });\n//console结果：false,true,false,false,false,false` },
                    'validateAlphabets(str)': { name: '大小写字母', example: `const arr = ['a', 'A',Aa', 1, '1a', '字'];
 arr.forEach(item => {
    console.log(validateLowerCase(item));
 });\n//console结果：false,false,true,false,false,false` },
                    'validateNumWord(num)': { name: '判断是否为小数(number类型)', example: `const arr = [1.33, '1.33', 0, 'a', '一'];
 arr.forEach(item => {
    console.log(validateNumWord(item));
 });\n//console结果：true,false,false,false,false` }
                },
                '自定义指令': {
                    'v-preventReClick': { name: '防止按钮一定时间内重复点击，不传值默认是2s', example: `<el-button v-preventReClick type="danger">按钮</el-button>` },
                    'v-permission': { name: '权限的自定义指令', example: `<el-button v-permission="'home/permission'" type="danger">
     按钮权限测试2
 </el-button>` }
                }
            }
        };
    },
    // 侦听器
    watch: {},
    created() {

    },
    mounted() {
        console.log(
            cutLocationHref('https://uatfh.funzg.net/fhronsapp/addfollowrecord?clientNewId=1000066608&workStatus=4')
        );
    },
    methods: {
        toHtml(str, example) {
            return Prism.highlight(example ? `${str}\n\n 示例：\n ${example}` : str, Prism.languages.html, 'html');
        },
        toJs(str, example) {
            return Prism.highlight(example ? `${str}\n\n 示例：\n ${example}` : str, Prism.languages.js, 'js');
        }
    }
};
</script>

<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<style scoped lang='less'>
#ToolTest{
    .left{
        width: 100%;
    }
    .right{
        flex: 1;
    }
    .waterfall{
        column-count: 3;
        column-gap: 20px;
    }
}
</style>
