<template>
    <div class="common-list flex-display">
        <div class="head">
            <div class="text">
                <div class="head-wrapper" v-for="head in head_list">
                    <el-select
                            v-if="head.type == 'select'"
                            v-model="params[head.model]"
                            :placeholder="head.placeholder"
                            filterable
                            clearable
                    >
                        <el-option
                                v-for="item in head_data_map[head.list]"
                                :key="item[head.prop.value]"
                                :label="item[head.prop.text]"
                                :value="item[head.prop.value]"
                        ></el-option>
                    </el-select>
                </div>
            </div>
            <div class="action">
                <div class="action-item" v-for="action in action_list">
                    <el-button plain
                               :type="action.type || 'primary'"
                               :icon="action.icon"
                               @click="handel_action(action.click,action.params)"
                    >{{action.value}}
                    </el-button>
                </div>

            </div>
        </div>
        <div class="list">
            <el-table :data="table_data.slice((page.cur-1)*page.size,page.cur*page.size)"
                      border stripe
                      :fit="false"
                      height="100%"
            >

                <div v-for="table_item in table_list">

                    <el-table-column
                            v-if="table_item.type && table_item.type === 'bool_tag'"
                            :label="table_item.label"
                            :prop="table_item.prop"
                            :width="table_item.width || '150'"
                            show-overflow-tooltip
                    >

                        <template slot-scope="scope">
                            <el-tag :type="scope.row[table_item.prop] ? 'success': 'info'">
                                {{bool_tag(scope.row[table_item.prop])}}
                            </el-tag>
                        </template>

                    </el-table-column>


                    <el-table-column
                            v-else
                            :label="table_item.label"
                            :prop="table_item.prop"
                            width="150"
                            show-overflow-tooltip
                    />
                </div>


                <el-table-column label="操作" width="180">
                    <template slot-scope="scope">
                        <div class="headrow">
                            <el-button type="text" size="mini" @click="handel_update(scope.row[table_props.id])">编辑
                            </el-button>
                            <el-button size="mini" type="text" @click="handel_delete(scope.row[table_props.id])">删除
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="page">
            <el-pagination
                    @size-change="handle_size_change"
                    @current-change="handle_current_change"
                    layout="total, sizes, prev, pager, next, jumper"
                    :page-size="page.size"
                    :pager-count="11"
                    :total="page.total"
            ></el-pagination>
        </div>

        <el-dialog :title="dialog.title" :visible.sync="dialog.visible" center @close="handel_dialog_cancel">
            <div class="content">
                <el-form label-width="100px" :model="dialog_dto" ref="ruleForm">

                    <el-form-item
                            v-for="dialog_item in dialog_list"
                            :label="dialog_item.label"
                            :prop="dialog_item.prop"
                    >
                        <el-input v-model.trim="dialog_data[dialog_item.prop]" :placeholder="dialog_item.placeholder"/>
                    </el-form-item>

                </el-form>

            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handel_dialog_cancel">取 消</el-button>
                <el-button type="primary" @click="handel_dialog_conform">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import {mapState, mapActions} from 'vuex'

    export default {
        name: "CommonList",
        computed: {
            ...mapState({
                head_list: state => state.common_list.head_list,
                head_data_map: state => state.common_list.head_data_map,

                action_list: state => state.common_list.action_list,

                table_list: state => state.common_list.table_list,
                table_data: state => state.common_list.table_data,

                dialog_list: state => state.common_list.dialog_list,
                dialog_data: state => state.common_list.dialog_data,

                page: state => state.common_list.page,

                table_props: state => state.common_list.table_props,

            }),
        },
        data() {
            return {
                params: {},
                isUpdate: false,
                total: 0,
                pageSize: 20,
                curPage: 1,
                dialog: {
                    title: 'dialog',
                    visible: false
                },
                dialog_dto: {}
            }
        },
        mounted() {
            // this.init();
        },
        methods: {
            ...mapActions(['set_page_size', 'set_cur_page']),

            init() {

            },

            handel_action(click, params) {
                if (params) {
                    this.$emit(click, this[params]);
                } else {
                    this.$emit(click);
                }

            },


            handel_search() {
                this.$emit('handel_search', this.params);
            },
            handel_click_add() {

            },
            handel_update(id) {
                this.$emit('handel_update', id, () => {
                    this.dialog.visible = true
                });

            },
            handel_delete(id) {
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$emit('handel_search', id);
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handel_dialog_cancel() {
                this.dialog.visible = false;
            },
            handel_dialog_conform() {
                console.log(this.dialog_data)
            },
            /**
             * 处理前端分页
             * @param val
             */
            handle_size_change(val) {
                if (this.table_props.is_local_page) {
                    this.set_page_size(val)
                } else {
                    this.params.size = val;
                    this.handel_search()
                }
            },
            handle_current_change(val) {

                if (this.table_props.is_local_page) {
                    this.set_cur_page(val)
                } else {
                    this.params.cur = val;
                    this.handel_search()
                }
            },
            file_uploader(params) {
                this.$emit('handel_upload', params);
            },
            file_verified(params) {
                let file_name = params.name;
                let ext = file_name.substr(file_name.lastIndexOf('.') + 1, file_name.length - 1);
                return ext === 'xls' || ext === 'xlsx';
            },
            bool_tag(item) {
                return item ? "是" : "否"
            },
            load(tree, treeNode, resolve) {
                console.log(tree)
            }
        }
    }
</script>

<style lang="less" scoped>
    .common-list {

        .head {
            .text {
                padding: 4px;
                .head-wrapper {
                    display: inline-block;
                }
            }
            .action {
                display: flex;
                justify-content: flex-start;
                .action-item {
                    margin-right: 8px;
                }
            }
        }
    }
</style>
