<!-- 功能：功能描述; 作者：LZJ; 时间：2022年10月18日 15:20:15-->
<template>
    <div id="DialogTest" class="pd24">
        <div class="demo-block pd24 mb24">
            <el-button type="primary" size="small" @click="btnClick(false)">点击弹出弹框</el-button>
            <div class="ps-r">
                <button class="copy-button" @click="handleCopy(htmlStrArr.join(''))">复制</button>
                <pre class="language-">
                    <code class="language-html" v-html="toHtml(htmlStrArr[0])" />
                    <code class="language-js" v-html="toJs(htmlStrArr.slice(1).join(''))" />
                </pre>
            </div>
        </div>
        <div class="demo-block pd24">
            <el-button type="primary" size="small" @click="btnClick(true)">点击弹出表单弹框</el-button>
            <div class="ps-r">
                <button class="copy-button" @click="handleCopy(dialogHtmlArr.join(''))">复制</button>
                <pre class="language-">
                    <code class="language-html" v-html="toHtml(dialogHtmlArr[0])" />
                    <code class="language-js" v-html="toJs(dialogHtmlArr.slice(1).join(''))" />
                </pre>
            </div>
        </div>
        <el-dialog width="540px" title="新增" :visible.sync="dialogVisible" :close-on-click-modal="false" center @close="close()">
            <div v-if="formFlag">
                <CommonForm ref="commonForm" :model="formModel" @changeFormItem="changeFormItem" @submitForm="submitForm" @cancel="cancel" />
            </div>
            <div v-else>
                <div>需要注意的是内容是默认不居中的</div>
                <div slot="footer" class="flex-center mt24">
                    <el-button size="small" @click="dialogVisible = false">取 消</el-button>
                    <el-button size="small" type="primary" @click="dialogVisible = false">确 定</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { CommonForm } from '@/components';
import { getFormDataObj } from './dataSource/testPageData';
import Prism from 'prismjs';
import 'prismjs/themes/prism.css';
export default {
    // 组件名称
    name: 'DialogTest',
    // 局部注册的组件
    components: { CommonForm },
    // 组件参数 接收来自父组件的数据
    props: {},
    // 组件状态值
    data() {
        return {
            dialogVisible: false,
            formFlag: false,
            formModel: this.deepClone(getFormDataObj()),
            htmlStrArr: [`
<template>
    <div>
        <el-button type="primary" size="small" @click="btnClick()">点击弹出弹框</el-button>
        <el-dialog width="540px" title="新增" :visible.sync="dialogVisible" :close-on-click-modal="false" center @close="close()">
            <div>需要注意的是内容是默认不居中的</div>
            <div slot="footer" class="flex-center mt24">
                <el-button size="small" @click="dialogVisible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="dialogVisible = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>`, `
<script>

export default {
    data() {
        return {
            dialogVisible: false
        };
    },
    methods: {
        btnClick() {
            this.dialogVisible = true;
        },
        close() {
            this.dialogVisible = false;
        }
    }
};
</scr`, `ipt>`],
            dialogHtmlArr: [`
<template>
    <div>
        <el-button type="primary" size="small" @click="btnClick()">点击弹出表单弹框</el-button>
        <el-dialog width="540px" title="新增" :visible.sync="dialogVisible" :close-on-click-modal="false" center @close="close()">
            <CommonForm ref="commonForm" :model="formModel" @changeFormItem="changeFormItem" @submitForm="submitForm" @cancel="cancel" />
        </el-dialog>
    </div>
</template>`, `
<script>
import { CommonForm } from '@/components';
import { getFormDataObj } from '@/views/testPage/dataSource/testPageData';
export default {
    components: { CommonForm },
    data() {
        return {
            dialogVisible: false,
            formModel: this.deepClone(getFormDataObj())
        };
    },
    methods: {
        btnClick() {
            this.dialogVisible = true;
        },
        close() {
            this.dialogVisible = false;
        },
        changeFormItem(formObj) {
            this.formModel.form[formObj.prop] = formObj.val;
            console.log('this.formModel', this.formModel);
        },
        // 提交
        submitForm() {
            console.log(this.formModel.form);
            this.cancel();
        },
        // 取消
        cancel() {
            this.resetForm();
            this.close();
        },
        // 重置数据
        resetForm() {
            this.formModel = this.deepClone(getFormDataObj());
            this.$nextTick(() => {
                // 重置表单数据
                if (this.$refs && this.$refs['commonForm']) {
                    this.$refs['commonForm'].resetFormValidate();
                }
            });
        }
    }
};
</scr`, `ipt>`]
        };
    },
    // 侦听器
    watch: {},
    created() {
    },
    mounted() {
    },
    methods: {
        btnClick(flag) {
            this.dialogVisible = true;
            this.formFlag = flag;
        },
        close() {
            this.dialogVisible = false;
        },
        changeFormItem(formObj) {
            this.formModel.form[formObj.prop] = formObj.val;
            console.log('this.formModel', this.formModel);
        },
        // 提交
        submitForm() {
            console.log(this.formModel.form);
            this.cancel();
        },
        // 取消
        cancel() {
            this.resetForm();
            this.close();
        },
        // 重置数据
        resetForm() {
            this.formModel = this.deepClone(getFormDataObj());
            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'>
#DialogTest {
    .demo-block {
        width: 1140px;
        border: 1px solid #ebebeb;
        border-radius: 3px;
    }
}
</style>
