<!-- 功能：功能描述; 作者：LZJ; 时间：2022年10月18日 12:02:19-->
<template>
    <div id="UploadFileTest" class="pd24">
        <div v-for="(item,index) in uploadEg" :key="index" class="demo-block pd24 mb24">
            <span class="ft32 fw-500 mt12">{{ item.title }}</span>
            <UploadFile :upload-props="item.prop" :default-file-list="defaultFileList" @uploadSuccess="uploadSuccess" @removeFile="removeFile" />
            <!-- <pre class="language-html" v-html="item.htmlCont" />
            <pre class="language-js" v-html="item.jsCont" /> -->
            <div class="ps-r">
                <button class="copy-button" @click="handleCopy(item.codeStrArr.join(''))">复制</button>
                <pre class="language-">
                  <code class="language-html" v-html="toHtml(`${item.codeStrArr[0]}`)" />
                      <code class="language-js" v-html="toJs(item.codeStrArr.slice(1).join(''))" />
                </pre>
            </div>
        </div>
    </div>
</template>

<script>
import { UploadFile } from '@/components';
import Prism from 'prismjs';
import 'prismjs/themes/prism.css';
export default {
    // 组件名称
    name: 'UploadFileTest',
    // 局部注册的组件
    components: {
        UploadFile
    },
    // 组件参数 接收来自父组件的数据
    props: {},
    // 组件状态值
    data() {
        return {
            // 缩略图
            picListProps: {
                acceptAttribute: '.jpg,.png', // 限制文件类型,需传入字符串类型 示例：acceptAttribute:'.PDF,.jpeg'
                fileSize: 5, // 限制文件大小,需传入数字类型
                type: 'img', // 放在腾讯云的哪个文件夹下 video img file
                subTip: '只能上传jpg/png文件，且不超过5M', // 提示文字
                limit: 999, // 文件上传的总数限制
                limitWidth: 5000, // 如果为图片，图片的宽度限制
                limitHeight: 5000, // 如果为图片，图片的高度限制
                showFileList: true, // 显示已上传文件列表
                listType: 'picture' // 文件列表类型为图片
            },
            // 不支持预览的列表形式
            fileListProps: {
                acceptAttribute: '.jpg,.png,.txt',
                fileSize: 5,
                type: 'img',
                subTip: '只能上传jpg/png/txt文件，且不超过5M',
                limit: 999,
                limitWidth: 5000,
                limitHeight: 5000,
                showFileList: true,
                listType: 'text'
            },
            picCardProps: {
                acceptAttribute: '.jpg,.png',
                fileSize: 5,
                type: 'img',
                subTip: '只能上传jpg/png文件，且不超过5M',
                limit: 999,
                limitWidth: 5000,
                limitHeight: 5000,
                listType: 'picture-card',
                multiple: true
            },
            imgProps: {
                acceptAttribute: '.jpg,.png', // 限制文件类型,需传入字符串类型 示例：acceptAttribute:'.PDF,.jpeg'
                fileSize: 5, // 限制文件大小,需传入数字类型
                type: 'img', // 放在腾讯云的哪个文件夹下 video img file
                subTip: '只能上传jpg/png文件，且不超过5M', // 提示文字
                limit: 1, // 文件上传的总数限制
                limitWidth: 5000, // 图片的宽度限制
                limitHeight: 5000 // 图片的高度限制
            },
            defaultFileList: [
                { url: 'https://frcdap-dev-1251973116.cos.ap-shanghai-fsi.myqcloud.com/fhronspc/img/1670227671997/352781669776922_.pic.jpg' }
            ]
        };
    },
    // 侦听器
    computed: {
        uploadEg() {
            return [
                {
                    title: '单张图片',
                    prop: this.imgProps,
                    codeStrArr: [`
<template>
    <div id="">
        <UploadFile :upload-props="imgProps" @uploadSuccess="uploadSuccess" @removeFile="removeFile" />
    </div>
</template>
`, `
<script>

import { UploadFile } from '@/components';
export default {
    components: { UploadFile },
    data() {
        return {
            imgProps: {
                acceptAttribute: '.jpg,.png', // 限制文件类型,需传入字符串类型 示例：acceptAttribute:'.PDF,.jpeg'
                fileSize: 5, // 限制文件大小,需传入数字类型
                type: 'img', // 放在腾讯云的哪个文件夹下 video img file
                subTip: '只能上传jpg/png文件，且不超过5M', // 提示文字
                limit: 1, // 文件上传的总数限制
                limitWidth: 5000, // 图片的宽度限制
                limitHeight: 5000 // 图片的高度限制
            }
        };
    },
    methods: {
        // 图片上传
        uploadSuccess(data) {
            console.log(data, 'uploadSuccess');
        },
        removeFile(data) {
            console.log(data, 'removeFile');
        }
    }
};
</scr`, `ipt>`]
                },
                {
                    title: '文件缩略图',
                    prop: this.picCardProps,
                    codeStrArr: [`
<template>
    <div id="">
        <UploadFile :upload-props="picCardProps" @uploadSuccess="uploadSuccess" @removeFile="removeFile" />
    </div>
</template>
`, `
<script>

import { UploadFile } from '@/components';
export default {
    components: { UploadFile },
    data() {
        return {
            picCardProps: {
                acceptAttribute: '.jpg,.png',
                fileSize: 5,
                type: 'img',
                subTip: '只能上传jpg/png文件，且不超过5M',
                limit: 999,
                limitWidth: 5000,
                limitHeight: 5000,
                listType: 'picture-card',
                multiple: true // 支持一次上传多张
            }
        };
    },
    methods: {
        // 图片上传
        uploadSuccess(data) {
            console.log(data, 'uploadSuccess');
        },
        removeFile(data) {
            console.log(data, 'removeFile');
        }
    }
};
</scr`, 'ipt>']
                },
                {
                    title: '文件列表',
                    prop: this.fileListProps,
                    codeStrArr: [`
<template>
    <div id="">
        <UploadFile :upload-props="fileListProps" @uploadSuccess="uploadSuccess" @removeFile="removeFile" />
    </div>
</template>`, `
<script>

import { UploadFile } from '@/components';
export default {
    components: { UploadFile },
    data() {
        return {
            // 不支持预览的列表形式
            fileListProps: {
                acceptAttribute: '.jpg,.png,.txt',
                fileSize: 5,
                type: 'img',
                subTip: '只能上传jpg/png/txt文件，且不超过5M',
                limit: 999,
                limitWidth: 5000,
                limitHeight: 5000,
                showFileList: true,
                listType: 'text'
            }
        };
    },
    methods: {
        // 图片上传
        uploadSuccess(data) {
            console.log(data, 'uploadSuccess');
        },
        removeFile(data) {
            console.log(data, 'removeFile');
        }
    }
};
</scr`, `ipt>`]
                },
                {
                    title: '图片列表缩略图',
                    prop: this.picListProps,
                    codeStrArr: [`
<template>
    <div id="">
        <UploadFile :upload-props="picListProps" @uploadSuccess="uploadSuccess" @removeFile="removeFile" />
    </div>
</template>`, `
<script>

import { UploadFile } from '@/components';
export default {
    components: { UploadFile },
    data() {
        return {
            // 缩略图
            picListProps: {
                acceptAttribute: '.jpg,.png', // 限制文件类型,需传入字符串类型 示例：acceptAttribute:'.PDF,.jpeg'
                fileSize: 5, // 限制文件大小,需传入数字类型
                type: 'img', // 放在腾讯云的哪个文件夹下 video img file
                subTip: '只能上传jpg/png文件，且不超过5M', // 提示文字
                limit: 999, // 文件上传的总数限制
                limitWidth: 5000, // 如果为图片，图片的宽度限制
                limitHeight: 5000, // 如果为图片，图片的高度限制
                showFileList: true, // 显示已上传文件列表
                listType: 'picture' // 文件列表类型为图片
            }
        };
    },
    methods: {
        // 图片上传
        uploadSuccess(data) {
            console.log(data, 'uploadSuccess');
        },
        removeFile(data) {
            console.log(data, 'removeFile');
        }
    }
};
</scr`, 'ipt>']
                }
            ];
        }
    },
    watch: {},
    created() {
    },
    mounted() {
    },
    methods: {
        // 图片上传
        uploadSuccess(data) {
            console.log(data, 'uploadSuccess');
        },
        removeFile(data) {
            console.log(data, 'removeFile');
        },
        toHtml(str) {
            return Prism.highlight(str, Prism.languages.html, 'html');
        },
        toJs(str) {
            return Prism.highlight(str, Prism.languages.js, 'js');
        },
        handleCopy(value) {
            this.$copyText(value)
                .then(() => {
                    this.$message('已成功复制，可直接去粘贴');
                })
                .catch(() => {
                    this.$message('复制失败');
                });
        }
    }
};
</script>

<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<style scoped lang='less'>
#UploadFileTest {
    .demo-block {
        width: 1140px;
        border: 1px solid #ebebeb;
        border-radius: 3px;
    }
}
</style>
