<template>
    <lj-win-common title="列设置" ref="baseWin">
        <slot name="header_sub" slot="header_sub"></slot>
        <div slot="body">
            <lj-grid :table-data="columns" :columns="columnProperties" :height="gridHeight" editing/>
        </div>
        <template slot="footer">
            <mu-button large color="primary" @click="saveSetting" style="width:100%">保存</mu-button>
        </template>
    </lj-win-common>
</template>

<script>
    import LjWinCommon from "components/lj-win-common";
    import LjGrid from "components/lj-grid";

    export default {
        name: "grid-view-setting",
        components: {LjGrid, LjWinCommon},
        data() {
            return {
                empid: 0,
                apiName: "",
                columns: [],
                gridHeight: 400,
                columnProperties: [
                    {
                        property: "order_arrow",
                        label: "顺序",
                        width: 150,
                        slot: this.orderSlotRender
                    },
                    {property: "label", label: "表头名称"},
                    {property: "property", label: "字段"},
                    {property: "invisible", label: "不可见", width: 90, type: "selection", editable: true},
                    {property: "fixed", label: "固定列", width: 90, type: "selection", editable: true}
                ]
            }
        },
        created() {
            let pageParams = $lj.getPageParam();
            this.columns = pageParams.columns;
            this.apiName = pageParams.apiName;
            let userInfo = $lj.getStorage('userInfo');
            this.empid = userInfo.empid;
        },
        mounted() {
            this.gridHeight = this.$refs.baseWin.contentStyle.minHeight.replace("px", "");
        },
        methods: {
            saveSetting() {
                let requestBody = {
                    token: $lj.getStorage("token"),
                    empid: this.empid,
                    dwname: 'L1APP',
                    itemname: this.apiName,
                    itemvalue: JSON.stringify(this.columns),
                    ifcompress: 1
                };
                $lj.postLJRequest(
                    "SetSysUserFileString", requestBody,
                    function (ret) {
                        if (!ret.ErrMsg) {
                            $lj.toast("保存成功", 2000);
                            $lj.sendEvent("grid_style_updated", {
                                dwname: requestBody.dwname,
                                itemname: requestBody.itemname
                            });
                            api.closeWin();
                        }
                    }
                );
            },
            orderSlotRender(h, {row, column, rowIndex}) {
                let self = this;
                return h('div', [
                    h('mu-button', {
                            attrs: {icon: true, disabled: rowIndex === 0},
                            style: {float: "left", margin: 0},
                            on: {
                                click: function () {
                                    if (rowIndex <= 0) {
                                        return;
                                    }
                                    let tmp = self.columns[rowIndex - 1];
                                    let tmpOrder = tmp.order;
                                    tmp.order = self.columns[rowIndex].order;
                                    self.columns[rowIndex].order = tmpOrder;
                                    self.$set(self.columns, rowIndex - 1, self.columns[rowIndex]);
                                    self.$set(self.columns, rowIndex, tmp);
                                }
                            }
                        },
                        [h('i', {class: ["iconfont", "icon-up"]})]
                    ),
                    h('mu-button', {
                            attrs: {icon: true, disabled: rowIndex === self.columns.length - 1},
                            style: {float: "right", margin: 0},
                            on: {
                                click: function () {
                                    if (rowIndex >= self.columns.length - 1) {
                                        return;
                                    }
                                    let tmp = self.columns[rowIndex + 1];
                                    let tmpOrder = tmp.order;
                                    tmp.order = self.columns[rowIndex].order;
                                    self.columns[rowIndex].order = tmpOrder;
                                    self.$set(self.columns, rowIndex + 1, self.columns[rowIndex]);
                                    self.$set(self.columns, rowIndex, tmp);
                                }
                            }
                        },
                        [h('i', {class: ["iconfont", "icon-down"]})]
                    )
                ])
            }
        }
    }
</script>

<style scoped>

</style>