<!-- 功能：通用css; 作者：LZJ; 时间：2022年10月12日 09:53:22-->
<template>
    <div id="GlobalCss" class="pd20">
        <h1>global.css内容</h1>
        <el-tabs type="border-card" class="mtb20">
            <el-tab-pane label="flex布局">
                <code>
                    <div v-for="(fItem,fIndex) in flexRadios" :key="fIndex" class="mb12">
                        <p>{{ fItem.title }}：</p>
                        <el-radio-group v-model="flexRadio" class="mb12" @change="handleRadioChange(fItem,'flex')">
                            <el-radio v-for="(rItem,rIndex) in fItem.arr" :key="rIndex" :label="rItem" border>{{ rItem }}</el-radio>
                        </el-radio-group>
                    </div>
                    <div class="mb8 c-e6a23c" @click="handleCopy(flexRadio)">点击复制代码：{{ flexRadio }}</div>
                    <div :class="currentFlexRadioObj.applyTo !== 'item' ? flexRadio : 'flex'" class="f-box pd12 border br8 over-scroll">
                        <div v-for="(item,index) in flexConut" :key="index" class="flex-item-box bgc-theme-30 br8" :class="currentFlexRadioObj.applyTo === 'item' ? `${currentFlexRadioObj.arr[index]} flex-center` : ''">
                            {{ currentFlexRadioObj.applyTo === 'item' ?currentFlexRadioObj.arr[index]:'' }}
                        </div>
                    </div>
                </code>
            </el-tab-pane>
            <el-tab-pane label="盒子模型">
                <code>
                    <div class="flex-between">
                        <div>
                            <el-collapse v-model="boxName" accordion>
                                <el-collapse-item v-for="(bItem,bIndex) in boxRadios" :key="bIndex" :title="bItem.title" :name="bItem.type">
                                    <div v-for="(rItem,rIndex) in bItem.arr" :key="rIndex" class="">
                                        <p>{{ rItem.title }}</p>
                                        <div v-if="rItem.needRadio">
                                            <el-radio-group v-model="boxRadio" class="mb12" @change="handleRadioChange(bItem,'box')">
                                                <el-radio v-for="(aItem,aIndex) in rItem.arr" :key="aIndex" border :label="aItem">{{ aItem }}</el-radio>
                                            </el-radio-group>
                                        </div>
                                        <div v-else>
                                            <div v-for="(aItem,aIndex) in rItem.arr" :key="aIndex" class="border tag-box inline-block ta-c" @click="handleBoxCopyText(aItem)">{{ aItem }}</div>
                                        </div>
                                    </div>
                                </el-collapse-item>
                            </el-collapse>
                        </div>
                        <div>
                            <div class="mb8 c-e6a23c" @click="handleCopy(boxRadio || boxCopyText)">点击复制代码：{{ boxRadio || boxCopyText }}</div>
                            <div class="box-model border-box over-hidden" :class="[boxClass,boxName==='margin'?'bgc-theme':'bgc-theme-10']">
                                <div class="padding-box full-height border-box" :class="[pdClass,boxName==='padding'?'bgc-theme':'bgc-f2f6fc']">
                                    <div class="content-box flex-center full-height" :class="boxName === 'br' ? 'bgc-theme-10' : 'bgc-fff'">content</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </code>
            </el-tab-pane>
            <el-tab-pane label="字体样式">
                <code>
                    <div class="flex-between">
                        <div class="font-left">
                            <div v-for="(bItem,bIndex) in fontRadios" :key="bIndex" class="mb12">
                                <p>{{ bItem.title }}：</p>
                                <el-radio-group v-model="fontRadio" class="mb12" @change="handleRadioChange(bItem,'font')">
                                    <el-radio v-for="(rItem,rIndex) in bItem.arr" :key="rIndex" :label="rItem" border>{{ rItem }}</el-radio>
                                </el-radio-group>
                            </div>
                        </div>
                        <div class="font-right">
                            <div class="mb8 c-e6a23c" @click="handleCopy(fontRadio)">点击复制代码：{{ fontRadio }}</div>
                            <div class="font-box-model border">
                                <p :class="fontRadio">文字示例</p>
                                <p :class="fontRadio">文字示例</p>
                            </div>
                        </div>
                    </div>
                </code>
            </el-tab-pane>
            <el-tab-pane label="定位">
                <code>
                    <div class="flex-between">
                        <div>
                            <div v-for="(bItem,bIndex) in psRadios" :key="bIndex" class="mb12">
                                <p>{{ bItem.title }}：</p>
                                <el-radio-group v-model="psRadio" class="mb12" @change="handleRadioChange(bItem,'ps')">
                                    <el-radio v-for="(rItem,rIndex) in bItem.arr" :key="rIndex" :label="rItem" border>{{ rItem }}</el-radio>
                                </el-radio-group>
                            </div>
                        </div>
                        <div>
                            <div class="mb8 c-e6a23c" @click="handleCopy(psRadio)">点击复制代码：{{ psRadio }}</div>
                            <div class="sticky-box border  line-height24" :class="currentPsRadioObj.applyTo !== 'item'?'':'ps-r'">
                                <p>尝试滚动页面。</p>
                                <div class="bgc-theme c-fff" :class="[psRadio,currentPsRadioObj.applyTo !== 'item'?'':'ps-a']">我是粘性定位!</div>
                                <div class="pb-2000">
                                    <p>滚动</p>
                                    <p>来回滚动</p>
                                    <p>滚动</p>
                                    <p>来回滚动</p>
                                    <p>滚动</p>
                                    <p>来回滚动</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </code>
            </el-tab-pane>
            <el-tab-pane label="文字省略">
                <div>
                    <p class="mb12">我是没有省略的文字我是没有省略的文字我是没有省略的文字我是没有省略的文字</p>
                </div>
                <div>
                    <div v-for="(item,index) in ellipsis" :key="index">
                        <p class="text-width mb8" :class="item.value">{{ item.label }}</p>
                        <p class="pd20 ft18 border br8 bgc-f5f5f5 fw-500 mb24" @click="handleCopy(item.value)">
                            <code>{{ item.value }}</code>
                        </p>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="Tooltip 文字提示">
                <div>
                    <p class="mb12">Tooltip 文字提示：超长文字显示...，悬停有气泡展示全部内容。</p>
                    <p class="mb12">基础用法：</p>
                </div>
                <div class="line-height24">
                    <p>例一：</p>
                    <TooltipOver class="text-width border" :content="`${toolStr}`" />
                    <pre class="language-html" v-html="toHtml(`<TooltipOver class='text-width' :content='${toolStr}' />`)" />
                    <p>例二：</p>
                    <TooltipOver class="text-width border" :content="`${classToolStr}`" class-name="c-f56c6c" />
                    <pre class="language-html" v-html="toHtml(`<TooltipOver class='text-width' :content='${classToolStr}' class-name='c-f56c6c' />`)" />
                    <p>例三：</p>
                    <TooltipOver class="text-width border" :content="`${toolStr}`" :xss-content="`${xssToolStr}`" :is-html="true" />
                    <pre
                        class="language-html"
                        v-html="toHtml(`<TooltipOver class='text-width' :content='${toolStr}'
                    :xss-content='${xssToolStr}' :is-html='true' />`)"
                    />
                </div>
            </el-tab-pane>
        </el-tabs></div>

</template>
<script>
import Prism from 'prismjs';
import 'prismjs/themes/prism.css';
import { flexRadios, boxRadios, fontRadios, psRadios, ellipsis } from './dataSource/testPageData.js';
import { TooltipOver } from '@/components/index';
export default {
    // 组件名称
    name: 'GlobalCss',
    // 局部注册的组件
    components: {
        TooltipOver
    },
    // 组件参数 接收来自父组件的数据
    props: {},
    // 组件状态值
    data() {
        return {
            ellipsis,
            flexRadios,
            flexRadio: '',
            boxRadios,
            boxRadio: '',
            fontRadios,
            fontRadio: '',
            psRadios,
            psRadio: '',
            currentFlexRadioObj: { applyTo: 'father', type: 'single' },
            currentBoxRadioObj: {},
            currentFontRadioObj: {},
            currentPsRadioObj: {},
            boxName: 'margin',
            boxCopyText: '',
            toolStr: '我是一行使用TooltipOver组件的省略的文字我是一行使用TooltipOver组件的省略的文字',
            classToolStr: '我是一行有className的省略的文字我是一行使用TooltipOver组件的省略的文字',
            xssToolStr: '我是一行<span class="c-f56c6c">xssContent</span>省略的文字我是一行省略的文字我是一行省略的文字'
        };
    },
    computed: {
        flexConut() {
            if (this.currentFlexRadioObj.type === 'single') {
                return 4;
            } else if (this.currentFlexRadioObj.type === 'cutom') {
                return this.currentFlexRadioObj.arr.length;
            }
            return 12;
        },
        pdClass() {
            if (this.boxName === 'margin' || this.boxName === 'padding') {
                return `pd20 bold-border mtb20 mlr20`;
            }
            return `${this.boxRadio} border-width`;
        },
        boxClass() {
            if (this.boxName === 'margin' || this.boxName === 'padding') {
                return 'dashed-line';
            } else if (this.boxName === 'br') {
                return `${this.boxRadio}`;
            }
            return '';
        }
    },
    // 侦听器
    watch: {},
    created() {

    },
    mounted() {
        Prism.highlightAll();
    },
    methods: {
        handleRadioChange(item, str) {
            if (str === 'flex') {
                this.currentFlexRadioObj = item;
            } else if (str === 'box') {
                this.currentBoxRadioObj = item;
            } else if (str === 'font') {
                this.currentFontRadioObj = item;
            } else if (str === 'ps') {
                this.currentPsRadioObj = item;
            }
        },
        handleCopy(value) {
            this.$copyText(value)
                .then(() => {
                    this.$message('已成功复制，可直接去粘贴');
                })
                .catch(() => {
                    this.$message('复制失败');
                });
        },
        handleBoxCopyText(item) {
            this.boxCopyText = item;
        },
        toHtml(str) {
            return Prism.highlight(str, Prism.languages.html, 'html');
        },
        toJs(str) {
            return Prism.highlight(str, Prism.languages.js, 'js');
        }
    }
};
</script>

<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<style scoped lang='less'>
#GlobalCss {
    .f-box {
        height: 200px;
        .flex-item-box {
            width: 194px;
            height: 36px;
            margin: 10px;
        }
    }
    .dashed-line {
        border: 1px dashed #303133;
    }

    .border-width {
        border-width: 3px;
    }

    .box-model {
        .padding-box {
            width: 350px;
            height: 350px;
            .content-box {
            }
        }
    }
    .bold-border {
        border: 2px solid #303133;
    }
    .tag-box {
        min-width: 80px;
        height: 26px;
    }
    .font-left{
        width: calc(100% - 350px);
    }
    .font-right{
        position: fixed;
        right: 3%;
    }
    .font-box-model{
        width: 350px;
    }
    .sticky-box{
        width: 350px;
        height: 350px;
        overflow: auto;
        .pb-2000{
            padding-bottom:2000px;
        }
    }
    .text-width {
        width: 200px;
    }
}
</style>
