<!-- 功能：筛选测试; 作者：LZJ; 时间：2022年10月12日 09:19:49-->
<template>
    <div id="FilterQueryTest" class="pd20">
        <FilterQuery :model="formItem" @formItemChange="formItemChange" @searchClick="searchClick" @resetClick="resetClick" />
        <div class="mb20">
            <span class="c-f56c6c  mr20">使用场景：一般跟着table表单进行综合使用，所以真正使用的时候可直接复制增删查改的页面直接使用（formItemChange、searchClick、resetClick代码方法被封装到公共mixin里面）</span>
            <el-button type="primary" size="small" @click="$router.push('/fhtabletest')">跳转FHTable页面查看</el-button>
        </div>
        <div class="mb20">
            <span class="c-f56c6c  mr20">FilterQuery数据源：input输入框、inputNum数字输入框、select下拉选择、selectSearch下拉搜索、cascader级联选择器、时间选择、定制数据框，支持自定义拓展）</span>
        </div>
        <div class="pd20 ft18 border br8 bgc-f5f5f5 fw-500">
            <el-tabs type="border-card" class="mtb20">
                <el-tab-pane label="页面代码">
                    <div class="ps-r">
                        <button class="copy-button" @click="handleCopy(htmlStrArr.join('') + scriptStr)">复制</button>
                        <pre class="language-">
                            <code class="language-html" v-html="toHtml(htmlStrArr[0])" />
                            <code class="language-js" v-html="toJs(htmlStrArr[1] + scriptStr)" />
                        </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>
</template>

<script>
import { FilterQuery } from '@/components';
import { getFormQueryObj } from './dataSource/testPageData';
import Prism from 'prismjs';
import 'prismjs/themes/prism.css';
export default {
    // 组件名称
    name: 'FilterQueryTest',
    // 局部注册的组件
    components: {
        FilterQuery
    },
    // 组件参数 接收来自父组件的数据
    props: {},
    // 组件状态值
    data() {
        return {
            formItem: {},
            htmlStrArr: [`
<template>
    <FilterQuery :model="formItem" @formItemChange="formItemChange" @searchClick="searchClick" @resetClick="resetClick" />
</template>`, `

<script>

import { FilterQuery } from '@/components';
import { getFormQueryObj } from '@/views/testPage/dataSource/testPageData'; // 数据源文件，根据自己的页面去写
export default {
    components: { FilterQuery },
    data() {
        return {
            formItem: { }
        };
    },
    created() {
        this.getData();
    },
    methods: {
        getData() {
            this.formItem = getFormQueryObj();
        },
        formItemChange(formItemObj) {
            this.formItem.form[formItemObj.prop] = formItemObj.val;
        },
        searchClick() {
            console.log('搜索按钮点击了');
            // do something....
        },
        resetClick() {
            console.log('搜索按钮点击了');
            // do something....
        }
    }
};
</scr`],
            scriptStr: `ipt>
`,
            dataStr: `export function getFormQueryObj() {
    return {

        form: {

            inputVal: '',
            inputNumVal: '',
            selectVal: '',
            dateVal: '',
            dateRangVal: [],
            dateTimeRangeVal: [],
            minSpecial: '',
            maxSpecial: ''
        },

        filterArr: [

            {
                label: '输入框',
                prop: 'inputVal',
                val: ''
            },

            {
                label: '数字输入',
                prop: 'inputNumVal',
                type: 'inputNum',
                val: ''
            },

            {
                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: ''
            }
        ],

        moreFilterArr: [

            {
                label: '定制输入框',
                minProp: 'minSpecial',
                maxProp: 'maxSpecial',
                minPlaceholder: '请输入最小值',
                maxPlaceholder: '请输入最大值',
                type: 'specialInput',
                val: { minSpecial: '', maxSpecial: '' }
            }
        ]
    };
}
`
        };
    },
    // 侦听器
    watch: {},
    created() {
        this.getData();
    },
    mounted() {
    },
    methods: {
        getData() {
            this.formItem = getFormQueryObj();
        },
        // 查询的表单条件
        formItemChange(formItemObj) {
            // 根据prop的类型来判断是哪个搜索框的数据需要处理
            this.formItem.form[formItemObj.prop] = formItemObj.val;
            console.log('formItemObj', formItemObj);
        },
        // 搜索按钮点击
        searchClick() {
            console.log('搜索按钮点击了');
        },
        // 重置
        resetClick() {
            console.log('重置按钮点击了');
        },
        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'>

</style>
