<template>
    <div class="test-common">
        <common-list
                :table_data="table_data"
                @handel_search="handel_search"
                @handel_delete="handel_delete"
                @handel_update="handel_update"
                @handel_upload="handel_upload"
        >
        </common-list>
    </div>
</template>

<script>
    import miniApi from '@/api/mini_test'
    import CommonList from '@/components/CommonList'
    import {mapActions} from 'vuex'

    export default {
        name: "TestCommon",
        data() {
            return {
                head_list: [
                    {
                        model: 'gameId',
                        placeholder: '请选择游戏',
                        list: 'gameList',
                        prop: {
                            value: 'gameId',
                            text: 'gameName'
                        }
                    }
                ],
                action_list: [
                    {
                        type: 'primary',
                        icon: 'el-icon-search',
                        value: '搜索',
                        click: 'handel_search',
                        params: 'params'
                    },

                    {
                        type: 'success',
                        icon: 'el-icon-circle-plus-outline',
                        value: '导入',
                        upload: true
                    },
                ],
                table_props: {},
                table_list: [
                    {label: '类型', prop: 'className'},
                    {label: '题型', prop: 'typeName'},
                    {label: '问题', prop: 'questionName'},
                    {label: '选项', prop: 'optionName'},
                    {label: '分数', prop: 'optionScope'},
                    {label: '轮播图', prop: 'carousel', type: 'bool_tag'},
                    {label: '猜你喜欢', prop: 'like', type: 'bool_tag'},
                    {label: '推荐', prop: 'recommend', type: 'bool_tag'},
                ],
                table_data: [],
                dialog_list: [{label: 'id', prop: 'id', placeholder: '请输入id'}],
                dialog_data: {}
            }
        },
        components: {
            CommonList
        },
        mounted() {
            this.init();
        },
        methods: {
            ...mapActions([
                'set_head_list',
                'set_table_list',
                'set_head_data_map',
                'set_table_data',
                'set_action_list',
                'set_dialog_list',
                'set_dialog_data',
            ]),
            init() {
                this.set_head_list(this.head_list);

                this.set_action_list(this.action_list);

                this.set_table_list(this.table_list);

                this.handel_search();


            },
            get_head_data() {

            },
            handel_search(params) {
                let that = this;
                miniApi.list(params).then(res => {
                    res[0].hasChildren = true;
                    that.convert_tree(res);
                    this.set_table_data(res);
                })

            },

            convert_tree(list) {
                list.forEach(f => {
                    if (f.question || f.option) {
                        f.children = f.question || f.option;
                        this.convert_tree(f.question || f.option)
                    }
                })
            },

            handel_delete(id) {
                console.log(id)
            },
            handel_update(id, callback) {
                let dto = {id: id};
                this.set_dialog_list(this.dialog_list);
                this.set_dialog_data(dto);
                callback()
            },
            handel_upload(params) {
                let formData = new FormData();
                // 向 formData 对象中添加文件
                formData.append('file', params.file);
                miniApi.upload_excel(formData).then(res => {
                    console.log(res);
                })
            }

        }
    }
</script>

<style lang="less" scoped>
    .test-common {
        height: 100%;
    }
</style>
