<!-- 功能：底层table; 作者：LZJ; 时间：2022年10月12日 15:27:06-->
<template>
    <div id="CommonTableTest" class="pd20">
        <div class="common-table-box">
            <h1 class="ptb20">没有封装接口请求的CommonTable</h1>
            <div class="c-f mb20">CommonTable只是单纯的封装了table列表的绘制方式</div>
            <CommonTable v-loading="loading" :table-obj="tableObj" @handleTableClick="handleTableClick" @handleSortChange="handleSortChange" />
            <div v-if="tableObj.data && tableObj.data.length" class="ta-r mt24">
                <CommonPagination :page-size="limit" :total="total" :current-page="currentPage" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" />
            </div>
            <div class="code-display-box mb32 mt40 ps-r border-top">
                <span class="code-display pointer ft12" @click="handleMore">
                    {{ 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">
                <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>
    </div>
</template>

<script>
import { CommonTable, CommonPagination } from '@/components';
import { pagination, batchApplyModeType } from '@/constant';
import { getTableObj } from './dataSource/testPageData';
import { brightenKeyword } from '@/tool/func';
import Prism from 'prismjs';
import 'prismjs/themes/prism.css';
export default {
    // 组件名称
    name: 'CommonTableTest',
    // 局部注册的组件
    components: {
        CommonTable,
        CommonPagination
    },
    // 组件参数 接收来自父组件的数据
    props: {},
    // 组件状态值
    data() {
        return {
            loading: false,
            tableObj: {},
            offset: pagination.pageOffset,
            limit: pagination.pageSize,
            total: pagination.total,
            currentPage: pagination.currentPage,
            moreFlag: true,
            htmlStrArr: [`
<template>
    <div>
        <CommonTable v-loading="loading" :table-obj="tableObj" @handleTableClick="handleTableClick" @handleSortChange="handleSortChange" />
        <div v-if="tableObj.data && tableObj.data.length" class="ta-r mt24">
            <CommonPagination :page-size="limit" :total="total" :current-page="currentPage" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" />
        </div>
    </div>
</template>`, `

<script>

import { CommonTable, CommonPagination } from '@/components';
import { pagination, batchApplyModeType } from '@/constant';
import { getTableObj } from '@/views/testPage/dataSource/testPageData'; // 数据源文件，根据自己的页面去写
import { brightenKeyword } from '@/tool/func'; // func工具类
export default {
    components: { CommonTable, CommonPagination },
    data() {
        return {
            loading: false,
            tableObj: {},
            offset: pagination.pageOffset,
            limit: pagination.pageSize,
            total: pagination.total,
            currentPage: pagination.currentPage
        };
    },
    created() {
        this.getData();
    },
    methods: {
        getData() {
            this.tableObj = getTableObj();
            this.getTableList();
        },
        // 处理table表里面的点击，例如查看详情，或者删除等按钮的事件
        handleTableClick(val) {
            if (val.type === 'details') {
                this.$router.push({ path: '/testpage/addtest' });
            } else if (val.type === 'delete') {
                const index = this.tableObj['data'].findIndex(item => item.type === 'delete');
                this.tableObj['data'].splice(index, 1);
            }
        },
        // 接口请求回来的数据
        getTableList() {
            // 模拟的假数据
            this.tableObj['data'] = [
                {
                    nickName: '思捷',
                    clientNewId: 1,
                    batchApplyMode: '1',
                    agentUserName: '刘开开',
                    dataSourceName: 'weChat',
                    enterTime: '2021-08-05 16:55:55',
                    operate: [{ text: '查看详情', type: 'details' }, { text: '删除', type: 'delete' }]
                },
                {
                    nickName: '思捷2',
                    clientNewId: 1,
                    batchApplyMode: '1',
                    agentUserName: '刘开开2',
                    dataSourceName: 'QQ',
                    enterTime: '2021-08-03 16:55:55',
                    operate: [{ text: '查看详情', type: 'details' }, { text: '删除', type: 'delete' }]
                }
            ];
            this.tableObj['data'].forEach(item => {
                const batchApplyMode = batchApplyModeType[item.batchApplyMode] || '--';
                const oldNickname = item['agentUserName'] || '';
                const oldNicknameStr = oldNickname.length ? brightenKeyword('#1677ff', oldNickname) : '';
                item['batchApplyMode'] = `, 'oldNickname.length ? `${batchApplyMode}/${oldNickname}` : `${batchApplyMode}`;', `
                item['xssbatchApplyMode'] = `, 'oldNickname.length ? `${batchApplyMode}/${oldNicknameStr}` : `${batchApplyMode}`;', `
            });
            this.total = 1;
        },
        handleSizeChange(val) {
            this.limit = val;
            this.offset = 0;
            this.getTableList();
        },
        handleCurrentChange(val) {
            this.offset = (val - 1) * this.limit;
            this.currentPage = val;
            this.getTableList();
        },
        // 排序
        handleSortChange(sortObj) {
            const { column, prop, order } = sortObj;
            // 这里可以把排序的规则传入给后端，后端进行排序，处理好数据源返回给前端，下面例子是前端写的排序规则
            if (order === 'descending') {
                this.tableObj['data'] = this.tableObj['data'].sort((a, b) => this.getForSort(b[prop], a[prop], prop));
            } else {
                this.tableObj['data'] = this.tableObj['data'].sort((a, b) => this.getForSort(a[prop], b[prop], prop));
            }
        },
        getForSort(stra, strb, coprop) {
            if (typeof stra === typeof strb && typeof strb === 'string') {
                // 汉字排序
                return stra.localeCompare(strb);
            }
            // 数字排序
            return stra - strb;
        }
    }
};
</sc`, `ript>
`]
        };
    },
    // 侦听器
    watch: {},
    created() {
        this.getData();
    },
    mounted() { },
    methods: {
        getData() {
            this.tableObj = getTableObj();
            this.getTableList();
        },
        // 处理table表里面的点击，例如查看详情，或者删除等按钮的事件
        handleTableClick(val) {
            if (val.type === 'details') {
                this.$router.push({ path: '/testpage/addtest' });
            } else if (val.type === 'delete') {
                const index = this.tableObj['data'].findIndex(item => item.type === 'delete');
                this.tableObj['data'].splice(index, 1);
            }
        },
        // 接口请求回来的数据
        getTableList() {
            // 模拟的假数据
            this.tableObj['data'] = [
                {
                    nickName: '思捷',
                    clientNewId: 1,
                    batchApplyMode: '1',
                    agentUserName: '刘开开',
                    dataSourceName: '微信',
                    enterTime: '2021-08-05 16:55:55',
                    operate: [
                        { text: '查看详情', type: 'details' },
                        { text: '删除', type: 'delete' }
                    ]
                },
                {
                    nickName: '思捷2',
                    clientNewId: 1,
                    batchApplyMode: '1',
                    agentUserName: '刘开开2',
                    dataSourceName: 'QQ',
                    enterTime: '2021-08-03 16:55:55',
                    operate: [
                        { text: '查看详情', type: 'details' },
                        { text: '删除', type: 'delete' }
                    ]
                }
            ];
            this.tableObj['data'].forEach(item => {
                const batchApplyMode = batchApplyModeType[item.batchApplyMode] || '--';
                const oldNickname = item['agentUserName'] || '';
                const oldNicknameStr = oldNickname.length ? brightenKeyword('#1677ff', oldNickname) : '';
                item['batchApplyMode'] = oldNickname.length ? `${batchApplyMode}/${oldNickname}` : `${batchApplyMode}`;
                item['xssbatchApplyMode'] = oldNickname.length ? `${batchApplyMode}/${oldNicknameStr}` : `${batchApplyMode}`;
            });
            this.total = 1;
        },
        handleSizeChange(val) {
            this.limit = val;
            this.offset = 0;
            this.getTableList();
        },
        handleCurrentChange(val) {
            this.offset = (val - 1) * this.limit;
            this.currentPage = val;
            this.getTableList();
        },
        // 排序
        handleSortChange(sortObj) {
            const { column, prop, order } = sortObj;
            // 这里可以把排序的规则传入给后端，后端进行排序，处理好数据源返回给前端，下面例子是前端写的排序规则
            if (order === 'descending') {
                this.tableObj['data'] = this.tableObj['data'].sort((a, b) => this.getForSort(b[prop], a[prop], prop));
            } else {
                this.tableObj['data'] = this.tableObj['data'].sort((a, b) => this.getForSort(a[prop], b[prop], prop));
            }
            console.log('column, prop, order', column, prop, order);
        },
        getForSort(stra, strb, coprop) {
            if (typeof stra === typeof strb && typeof strb === 'string') {
                // 汉字排序
                return stra.localeCompare(strb);
            }
            // 数字排序
            return stra - strb;
        },
        handleMore(type) {
            this.moreFlag = !this.moreFlag;
        },
        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>
