<!-- 功能：; 作者：ZXS; 时间：2022年11月15日 18:04:48-->
<template>
    <div id="TreeSelectTest" class="pd20">
        <h1>组织树内容</h1>
        <el-tabs type="border-card" class="mtb20">
            <el-tab-pane label="单选">
                <el-tabs class="mtb20">
                    <el-tab-pane label="常规单选">
                        <div class="border pd20 br8 mb20">
                            <div class="w-30">
                                <p class="mb10"> 常规单选带select框</p>
                                <CyTreeSelect v-model="value1" filterable :data="list" :filter-able="true" />
                            </div>
                            <div class="ps-r">
                                <button class="copy-button" @click="handleCopy(htmlCont(1)+jsCont(1))">复制</button>
                                <pre class="language-">
                                    <code class="language-html" v-html="toHtml(htmlCont(1))" />
                                    <code class="language-js" v-html="toJs(jsCont(1))" />
                                </pre>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="单选禁用">
                        <div class="border pd20 br8 mb20">
                            <div class="w-30">
                                <CyTreeSelect v-model="value2" filterable :data="list1" :filter-able="true" />
                            </div>
                            <div class="ps-r">
                                <button class="copy-button" @click="handleCopy(htmlCont(1)+jsCont(2))">复制</button>
                                <pre class="language-">
                                    <code class="language-html" v-html="toHtml(htmlCont(1))" />
                                    <code class="language-js" v-html="toJs(jsCont(2))" />
                                </pre>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="单选平铺">
                        <div class="border pd20 br8 mb20">
                            <div class="w-30">
                                <p class="mb10"> 常规单选平铺不带select框</p>
                                <CyTreeSelect v-model="value3" filterable :data="list" :need-select="false" />
                            </div>
                            <div class="ps-r">
                                <button class="copy-button" @click="handleCopy(htmlCont(2)+jsCont(1))">复制</button>
                                <pre class="language-">
                                    <code class="language-html" v-html="toHtml(htmlCont(2))" />
                                    <code class="language-js" v-html="toJs(jsCont(1))" />
                                </pre>
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-tab-pane>
            <el-tab-pane label="多选">
                <el-tabs class="mtb20">
                    <el-tab-pane label="多选（父子关联）">
                        <div class="border pd20 br8 mb20">
                            <div class="w-30">
                                <CyTreeSelect v-model="value4" filterable :data="list" :multiple="true" :filter-able="true" />
                            </div>
                            <div class="ps-r">
                                <button class="copy-button" @click="handleCopy(htmlCont(3)+jsCont(1))">复制</button>
                                <pre class="language-">
                                    <code class="language-html" v-html="toHtml(htmlCont(3))" />
                                    <code class="language-js" v-html="toJs(jsCont(1))" />
                                </pre>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="多选禁用（父子关联）">
                        <div class="border pd20 br8 mb20">
                            <div class="w-30">
                                <CyTreeSelect v-model="value5" filterable :data="list1" :multiple="true" :filter-able="true" />
                            </div>
                            <div class="ps-r">
                                <button class="copy-button" @click="handleCopy(htmlCont(3)+jsCont(2))">复制</button>
                                <pre class="language-">
                                    <code class="language-html" v-html="toHtml(htmlCont(3))" />
                                    <code class="language-js" v-html="toJs(jsCont(2))" />
                                </pre>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="多选（父子不关联）">
                        <div class="border pd20 br8 mb20">
                            <div class="w-30">
                                <CyTreeSelect v-model="value6" filterable :data="list" :multiple="true" :filter-able="true" :relate="true" :need-slot="true" />
                            </div>
                            <div class="ps-r">
                                <button class="copy-button" @click="handleCopy(htmlCont(4)+jsCont(1))">复制</button>
                                <pre class="language-">
                                    <code class="language-html" v-html="toHtml(htmlCont(4))" />
                                    <code class="language-js" v-html="toJs(jsCont(1))" />
                                </pre>
                            </div>
                        </div>
                    </el-tab-pane>

                    <el-tab-pane label="多选禁用（父子不关联）">
                        <div class="border pd20 br8 mb20">
                            <div class="w-30">
                                <CyTreeSelect v-model="value7" filterable :data="list1" :multiple="true" :filter-able="true" :relate="true" :need-slot="true" />
                            </div>
                            <div class="ps-r">
                                <button class="copy-button" @click="handleCopy(htmlCont(4)+jsCont(2))">复制</button>
                                <pre class="language-">
                                    <code class="language-html" v-html="toHtml(htmlCont(4))" />
                                    <code class="language-js" v-html="toJs(jsCont(2))" />
                                </pre>
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import CyTreeSelect from '@/components/componentsFile/TreeSelect';
import { treeList, treeListStr, treeList1, treeListStr1 } from './dataSource/testPageData.js';
import Prism from 'prismjs';
import 'prismjs/themes/prism.css';
export default {
    // 组件名称
    name: 'TreeSelectTest',
    // 局部注册的组件
    components: { CyTreeSelect },
    // 组件参数 接收来自父组件的数据
    props: {},
    // 组件状态值
    data() {
        return {
            list: treeList,
            list1: treeList1,
            value1: '',
            value2: '',
            value3: '',
            value4: '',
            value5: '',
            value6: '',
            value7: ''
        };
    },
    // 侦听器
    watch: {},
    created() {
    },
    mounted() {
    },
    methods: {
        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('复制失败');
                });
        },
        htmlCont(i) {
            let str = '';
            switch (i) {
                case 1: str = `<CyTreeSelect v-model="value" filterable :data="list" :filter-able="true" />`; break; // 普通单选
                case 2: str = `<CyTreeSelect v-model="value" filterable :data="list" :need-select="false" />`; break; // 普通单选不要select
                case 3: str = `<CyTreeSelect v-model="value" filterable :data="list" :filter-able="true" :multiple="true" />`; break; // 普通多选
                case 4: str = `<CyTreeSelect v-model="value" filterable :data="list" :filter-able="true" :multiple="true" :relate="true" :need-slot="true" />`; break; // 父子不相关
                default: break;
            }
            return `
<template>
    <div id="">
       ${str}
    </div>
</template>
`;
        },
        jsCont(i) {
            let str = '';
            switch (i) {
                case 1:str = treeListStr; break; // 不带禁用
                case 2:str = treeListStr1; break;// 带禁用
                default:
                    break;
            }
            return `
<script>

import CyTreeSelect from '@/components/componentsFile/TreeSelect';
export default {
    components: { CyTreeSelect },
    data() {
        return {
            value: '',
            list: ${str}
        };
    }
};
</scr` + `ipt>`;
        }
    }
};

</script>

<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<style scoped lang='less'>
    .w-30{
    width: 20%;
    }
</style>
