<!--以lj-dictionary作为卡片，显示为卡片列表，此组件意义主要为优化v-for循环引用lj-dictionary时的性能-->
<!--文档-->
<!--props：看代码注释-->
<!--events-->
<!--删除按钮确认通过on-delete，参数（{value, index}）-->
<!--Action类型的字段点击事件on-item-action-row-click，参数({value: itemData, index: index})-->
<template>
    <div>
        <lj-dictionary
                v-for="(item,index) in list"
                :data="item"
                :columns="currentColumns"
                :deletable="deletable"
                :editing="editing"
                @on-delete="handleItemDelete($event,index)"
                @action-row-click="handleItemActionRowClick($event,index)"/>
    </div>
</template>

<script>
    import LjDictionary from "components/lj-dictionary";

    export default {
        name: "lj-list-dictionary",
        components: {LjDictionary},
        props: {
            // 数据源
            list: {
                type: Array
            },
            // 模型字段，同lj-dictionary
            columns: {
                type: Array
            },
            // 是否显示删除按钮
            deletable: {
                type: Boolean
            },
            // 是否正在编辑状态
            editing: {
                type: Boolean
            }
        },
        created() {
            this.computeColumns();
        },
        data() {
            return {
                currentColumns: []
            }
        },
        methods: {
            computeColumns() {
                if (!this.columns) {
                    return [];
                }
                let self = this;
                this.currentColumns = [];
                this.columns.forEach((column) => {
                        if (column.selectOptions && column.selectOptions.optionsApi) {
                            let columnTemp = {};
                            for (let prop in column) {
                                if (prop === "selectOptions") {
                                    columnTemp[prop] = {};
                                    for (let optionProp in column[prop]) {
                                        if (optionProp === "optionsApi") {
                                            columnTemp[prop].options = [];
                                            let requestBody = column[prop].apiParams || {};
                                            requestBody.token = $lj.getStorage("token");
                                            $lj.postLJRequest(column[prop][optionProp], requestBody, function (ret) {
                                                if (ret) {
                                                    for (let key in ret) {
                                                        self.$set(columnTemp[prop], "options", ret[key]);
                                                        return;
                                                    }
                                                }
                                            })
                                        } else {
                                            columnTemp[prop][optionProp] = column[prop][optionProp];
                                        }
                                    }
                                } else {
                                    columnTemp[prop] = column[prop];
                                }
                            }
                            self.currentColumns.push(columnTemp)
                        } else {
                            self.currentColumns.push(column);
                        }
                    }
                );
            },
            handleItemActionRowClick(itemData, index) {
                this.$emit("on-item-action-row-click", {value: itemData, index: index});
            },
            handleItemDelete(itemData, index) {
                this.$emit("on-item-delete", {value: itemData, index: index});
            }
        }
    }
</script>

<style scoped>

</style>