<!-- 功能：FHTable代码; 作者：LZJ; 时间：2022年10月14日 11:14:06-->
<template>
    <div id="FHTableCode">
        <FHTable
            ref="FHTable"
            :has-checkbox="true"
            :query-table-data="queryTableData"
            :query-params="queryParams"
            :table-props="tableProps"
            list-map-name="smSaasPlatformList"
            @handleTableList="handleTableList"
            @handleTableClick="handleTableClick"
            @handleSelectionChange="handleSelectionChange"
        />
        <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(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>
        </div>
    </div>
</template>

<script>
import { FHTable } from '@/components';
import { getFHTableProp } from './dataSource/testPageData';
import api_testPage from '@/api/api_testPage';
import { queryTableMixin } from '@/mixins';
import Prism from 'prismjs';
import 'prismjs/themes/prism.css';
export default {
    // 组件名称
    name: 'FHTableCode',
    // 局部注册的组件
    components: { FHTable },
    mixins: [queryTableMixin],
    // 组件参数 接收来自父组件的数据
    props: {},
    // 组件状态值
    data() {
        return {
            moreFlag: true,
            idArr: [],
            codeStrArr: [`
<template>
    <div>
        <FHTable
            ref="FHTable"
            :has-checkbox="true"
            :query-table-data="queryTableData"
            :query-params="queryParams"
            :table-props="tableProps"
            list-map-name="smSaasPlatformList"
            @handleTableList="handleTableList"
            @handleTableClick="handleTableClick"
            @handleSelectionChange="handleSelectionChange"
        />
    </div>
</template>`, `
<script>

import { FHTable, FilterQuery, CommonForm } from '@/components';
import { getFHTableProp, getFHFormQueryObj, getFormDataObj } from '@/views/testPage/dataSource/testPageData'; // 数据源文件，根据自己的页面去写
import api_testPage from '@/api/api_testPage'; // 接口请求
import { brightenKeyword } from '@/tool/func'; // 改变颜色的方法
import { queryTableMixin } from '@/mixins'; // 封装了table列表的公共属性以及通用方法
export default {
    components: { FHTable, FilterQuery, CommonForm },
    mixins: [queryTableMixin],
    data() {
        return {
            dialogVisible: false,
            idArr: [],
            formModel: {}
        };
    },
    // 侦听器
    watch: {
        list: {
            handler(val) {
                this.tableProps['data'] = this.deepClone(val);
            }
        }
    },
    created() {
        this.getData();
    },
    methods: {
        getData() {
            this.formItem = this.deepClone(getFHFormQueryObj());
            this.tableProps = this.deepClone(getFHTableProp());
            this.queryParams = { 'saasId': 'ff5a67337b6611e89feafa163eb3e537', 'userId': '27775e0e494447bf94a5292252262870' };
            this.tempQueryParams = this.deepClone(this.queryParams);
            this.getTableList();
            this.formModel = this.deepClone(getFormDataObj());
        },
        // 处理table表里面的点击，例如查看详情，或者删除等按钮的事件
        queryTableData(queryParams) {
            return api_testPage.queryPlatformList({ params: queryParams });
        },
        // 接口请求回来的数据
        handleTableList(list) {
            list.forEach(item => {
                const operates = [{ type: 'terminalManage', text: '终端管理' }];
                if (!item.id.includes('_')) {
                    const arr = [
                        { type: 'edit', text: '编辑' },
                        { type: 'relevance', text: '关联机构' },
                        { type: 'delete', text: '删除' }
                    ];
                    item['operates'] = operates.concat(arr);
                }
            });
            this.list = this.deepClone(list);
        },
        handleTableClick(item) {
            const row = item.row || {};
            if (item.type === 'delete') {
                // 删除
                const tempList = this.list.filter(l => l.id !== row.id);
                this.list = this.deepClone(tempList);
            } else if (item.type === 'terminalManage') {
                // 终端管理
            } else if (item.type === 'edit') {
                // 编辑
                this.formModel['form'] = row;
                this.dialogVisible = true;
            } else if (item.type === 'relevance') {
                // 关联机构
            }
        },
        handleSelectionChange(val) {
            console.log('handleSelectionChange', val);
            this.idArr = val.map(({ id }) => (id));
        },
        // 表单（新增，编辑）
        changeFormItem(formObj) {
            this.formModel.form[formObj.prop] = formObj.val;
        },
        // 新增
        addClick() {
            this.resetForm();
            this.dialogVisible = true;
        },
        // 删除
        delClick() {
            this.list = this.list.filter(l => this.idArr.every(id => l.id !== id));
        },
        // 关闭弹框
        close() {
            this.dialogVisible = false;
        },
        // 重置数据
        resetForm() {
            this.formModel = this.deepClone(getFormDataObj());
            this.$nextTick(() => {
                // 重置表单数据
                if (this.$refs && this.$refs['commonForm']) {
                    this.$refs['commonForm'].resetFormValidate();
                }
            });
        },
        // 取消
        cancel() {
            this.resetForm();
            this.close();
        },
        // 提交
        submitForm() {
            this.formModel.form['id'] = `, '`${this.list.length + 1}`;', `
            this.list = [this.formModel.form].concat(this.list);
            const tablePropArr = this.tableProps['tableProp'];
            const tempArr = tablePropArr.filter(t => t.type === 'htmlType');
            this.list.forEach(item => {
                tempArr.forEach(t => {
                    const xssProp = 'xss' + t.prop;
                    item[xssProp] = item[t.prop] ? brightenKeyword(t.color || '#1677ff', item[t.prop]) : '--';
                });
                Object.keys(item).forEach(k => { item[k] = item[k] || '--'; });
            });
            this.handleTableList(this.list);
            this.close();
        }
    }
};
</sc`, `ript>
`]
        };
    },
    // 侦听器
    watch: {
        list: {
            handler(val) {
                this.tableProps['data'] = this.deepClone(val);
            }
        }
    },
    created() {
        this.addKeepAlive('FHTableTest');
        this.getData();
    },
    mounted() {
    },
    methods: {
        getData() {
            this.tableProps = this.deepClone(getFHTableProp());
            this.queryParams = { 'saasId': 'ff5a67337b6611e89feafa163eb3e537', 'userId': '27775e0e494447bf94a5292252262870' };
            this.tempQueryParams = this.deepClone(this.queryParams);
            this.getTableList();
        },
        queryTableData(queryParams) {
            console.log('queryParams', queryParams);
            return api_testPage.queryPlatformList({ params: queryParams });
        },
        handleTableList(list) {
            list.forEach(item => {
                const operates = [
                    {
                        type: 'terminalManage',
                        text: '终端管理'
                    }
                ];
                if (!item.id.includes('_')) {
                    const arr = [
                        {
                            type: 'edit',
                            text: '编辑'
                        },
                        {
                            type: 'relevance',
                            text: '关联机构'
                        },
                        {
                            type: 'delete',
                            text: '删除'
                        }
                    ];
                    item['operates'] = operates.concat(arr);
                }
            });
            this.list = this.deepClone(list);
        },
        handleTableClick(item) {
            console.log('handleTableClick', item);
            const row = item.row || {};
            if (item.type === 'delete') {
                // 删除
                const tempList = this.list.filter(l => l.id !== row.id);
                this.list = this.deepClone(tempList);
            } else if (item.type === 'terminalManage') {
                // 终端管理
            } else if (item.type === 'edit') {
                // 编辑
            } else if (item.type === 'relevance') {
                // 关联机构
            }
        },
        handleSelectionChange(val) {
            console.log('handleSelectionChange', val);
            this.idArr = this.deepClone(val);
        },
        // 显示隐藏代码
        handleMore() {
            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>
