<!-- 功能：表单; 作者：LZJ; 时间：2022年10月17日 11:30:21-->
<template>
    <div id="CommonFormTest" class="pt45 ps-r">
        <div class="demo-block m0a">
            <div class="pd24">
                <CommonForm ref="commonForm" :model="formModel" @changeFormItem="changeFormItem" @submitForm="submitForm" @cancel="cancel" />
            </div>
            <div class="demo-block-control border-top pointer ta-c ptb12 z-index1" :class="moreFlag?'ps-f bottom16 w1140 bgc-f5f5f5':''" @click="moreFlag=!moreFlag">
                <span class="">
                    {{ moreFlag ? '隐藏代码' : '显示代码' }}
                    <i class="more-flag-icon" :class="moreFlag ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" />
                </span>
            </div>
            <div v-if="moreFlag" class="ft16 line-height36">
                <el-tabs type="border-card" class="mtb20">
                    <el-tab-pane label="页面代码">
                        <div class="ps-r">
                            <button class="copy-button" @click="handleCopy(codeStrArr.join(''))">复制</button>
                            <pre class="language-">
                                <code class="language-html" v-html="toHtml(codeStrArr[0])" />
                                <code class="language-js" v-html="toJs(codeStrArr.slice(1).join(''))" />
                            </pre>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="数据源">
                        <div class="ps-r">
                            <button class="copy-button" @click="handleCopy(dataStr)">复制</button>
                            <pre class="language-js" v-html="toJs(dataStr)" />
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
</template>

<script>
import { commonFormEg } from './dataSource/testPageData';
import { CommonForm } from '@/components';
import Prism from 'prismjs';
import 'prismjs/themes/prism.css';
export default {
    // 组件名称
    name: 'CommonFormTest',
    // 局部注册的组件
    components: {
        CommonForm
    },
    // 组件参数 接收来自父组件的数据
    props: {},
    // 组件状态值
    data() {
        return {
            formModel: {},
            moreFlag: true,
            scriptObj: {
                created: true,
                importArr: [
                    { component: '{ CommonForm }', componentUrl: '@/components' },
                    { component: '{ commonFormEg }', componentUrl: '@/views/testPage/dataSource/testPageData', note: '数据源文件，根据自己的页面去写' }
                ],
                components: 'CommonForm',
                dataArr: [
                    { key: 'formModel', value: '{}' }
                ]
            },
            codeStrArr: [`
<template>
    <div>
        <CommonForm ref="commonForm" :model="formModel" @changeFormItem="changeFormItem" @submitForm="submitForm" @cancel="cancel" />
    </div>
</template>`, `

<script>

import { CommonForm } from '@/components';
import { commonFormEg } from '@/views/testPage/dataSource/testPageData'; // 数据源文件，根据自己的页面去写
export default {
    components: { CommonForm },
    data() {
        return {
            formModel: {}
        };
    },
    created() {
        this.formModel = commonFormEg || {};
    },
    methods: {
        // 表单（新增，编辑）
        changeFormItem(formObj) {
            console.log('formObj', formObj);
        },
        // 提交
        submitForm() {
            console.log('submitForm', this.formModel);
        },
        // 取消
        cancel() {
            this.formModel = commonFormEg || {};
            this.$nextTick(() => {
                // 重置表单数据
                if (this.$refs && this.$refs['commonForm']) {
                    this.$refs['commonForm'].resetFormValidate();
                }
            });
        }

    }
};
</sc`, 'ript>'],
            dataStr: `import { nameRule, mobileRule } from '@/tool/validate';
export const commonFormEg = {
    form: {
        cname: '',
        mobile: '',
        multi: '',
        terminalName: '',
        enterDate: '',
        selectVal: '',
        dateVal: '',
        dateRangVal: [],
        dateTimeRangeVal: []
    },
    rules: {
        cname: nameRule,
        mobile: mobileRule
    },

    formArr: [

        {
            label: '姓名',
            prop: 'cname',
            placeholder: ''
        },

        {
            label: '手机号',
            prop: 'mobile',
            type: 'inputNum',
            placeholder: '',
            maxlength: 11
        },

        {
            label: '这是两行的样式样式',
            prop: 'multi',
            placeholder: ''
        },

        {
            label: '下拉选择',
            prop: 'selectVal',
            type: 'select',
            val: '',
            options: [

                {
                    value: '选项1',
                    label: '黄金糕'
                },

                {
                    value: '选项2',
                    label: '双皮奶'
                }
            ]
        },

        {
            label: '级联选择器',
            prop: 'cascaderCont',
            type: 'cascader',
            refresh: 0,
            filterable: true,
            val: '',
            options: [

                {
                    value: 1,
                    label: '东南',
                    children: [

                        {
                            value: 2,
                            label: '上海',
                            children: [

                                {
                                    value: 3,
                                    label: '普陀'
                                },

                                {
                                    value: 4,
                                    label: '黄埔'
                                },

                                {
                                    value: 5,
                                    label: '徐汇'
                                }
                            ]
                        },

                        {
                            value: 7,
                            label: '江苏',
                            children: [

                                {
                                    value: 8,
                                    label: '南京'
                                },

                                {
                                    value: 9,
                                    label: '苏州'
                                },

                                {
                                    value: 10,
                                    label: '无锡'
                                }
                            ]
                        }
                    ]
                }
            ]
        },

        {
            label: '日期选择器',
            prop: 'dateVal',
            type: 'date',
            val: ''
        },

        {
            label: '日期范围选择器',
            prop: 'dateRangeVal',
            type: 'daterange',
            val: ''
        },

        {
            label: '时间范围选择器',
            prop: 'dateTimeRangeVal',
            type: 'datetimerange',
            val: ''
        }
    ]
};
`
        };
    },
    // 侦听器
    watch: {},
    created() {
        this.formModel = commonFormEg || {};
    },
    mounted() {
    },
    methods: {
        // 表单（新增，编辑）
        changeFormItem(formObj) {
            console.log('formObj', formObj);
        },
        // 提交
        submitForm() {
            console.log('submitForm', this.formModel);
        },
        // 取消
        cancel() {
            this.formModel = commonFormEg || {};
            this.$nextTick(() => {
                // 重置表单数据
                if (this.$refs && this.$refs['commonForm']) {
                    this.$refs['commonForm'].resetFormValidate();
                }
            });
        },
        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'>
#CommonFormTest {
    .demo-block {
        width: 1140px;
        border: 1px solid #ebebeb;
        border-radius: 3px;
        transition: .2s;
        .demo-block-control:hover {
            color:  var(--themeColor);
            background-color: #f5f5f5;
        }
    }
    .w1140 {
        width: 1140px;
    }
    .bottom16 {
        bottom: 16px;
    }
}
</style>
