<template>
    <div>
        <Card dis-hover>
            <div class="page-body">
                <Form ref="queryForm" :label-width="90" label-position="left" inline>
                    <Row :gutter="16">
                        <Col span="5">
                        <FormItem :label="L('Categories') + ':'" style="width:100%">
                            <Cascader :data="data" :load-data="loadNextData" />    ---异步加载
                        </FormItem>
                        </Col>
                        <Col span="4">
                        <FormItem :label="L('Code') + ':'" style="width:100%">
                            <Input v-model="pagerequest.code" :placeholder="L('Code')"></Input>
                        </FormItem>
                        </Col>
                        <Col span="5">
                        <FormItem :label="L('ListingName') + ':'" style="width:100%">
                            <Input v-model="pagerequest.name" :placeholder="L('ListingName')"></Input>
                        </FormItem>
                        </Col>
                        <Col span="3">
                        <FormItem :label="L('IsDeleted') + ':'" style="width:100%">
                            <Select :placeholder="L('Select')" @on-change="isActiveChange">
                                <Option value="-1">{{ L('All') }}</Option>
                                <Option value="1">{{ L('Deleted') }}</Option>
                                <Option value="0">{{ L('NoDeleted') }}</Option>
                            </Select>
                        </FormItem>
                        </Col>
                        <Col span="5">
                        <FormItem :label="L('CreationTime') + ':'" style="width:100%">
                            <DatePicker v-model="creationTime" type="datetimerange" format="yyyy-MM-dd" style="width:100%"
                                placement="bottom-end" :placeholder="L('SelectDate')"></DatePicker>
                        </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Button @click="create" icon="android-add" type="primary" size="large">{{ L('Add') }}</Button>
                        <Button icon="ios-search" type="primary" size="large" @click="getpage" class="toolbar-btn">{{
                            L('Find') }}</Button>
                    </Row>
                </Form>
                <div class="margin-top-10">
                    <Table :loading="loading" :columns="columns" :no-data-text="L('NoDatas')" border :data="list">
                    </Table>
                    <Page show-sizer class-name="fengpage" :total="totalCount" class="margin-top-10" @on-change="pageChange"
                        @on-page-size-change="pagesizeChange" :page-size="pageSize" :current="currentPage"></Page>
                </div>
            </div>
        </Card>
        <create-listing v-model="createModalShow" @save-success="getpage"></create-listing>
        <edit-listing v-model="editModalShow" @save-success="getpage"></edit-listing>
    </div>
</template>

  data() {
        return {
            data: [{"label": "服装", "value": 1, "children": [],  loading: false  }, { "label": "汽车、摩托车", "value": 2, "children": [], loading: false }]
        }
    }
    loadNextData(item, callback) {
        item.loading = true;
        setTimeout(() => {
            this.$store.dispatch({ type: 'categories/getSubordinate', data: item.value })
                .then(res => { 
                    res.forEach(s => {
                        if (s.hasNext) {
                            item.children.push({ label: s.name, value: s.id, children: [], loading: false });
                        }
                        else {
                            item.children.push({ label: s.name, value: s.id });
                        }
                    }) 
                    item.loading = false;
                    console.log(JSON.stringify(item.children));
                    callback();
                })
                .catch((e) => {
                    item.loading = false;
                    console.log(e);
                })
        }, 1000);
    }

actions = {
        async getSubordinate(context: ActionContext<CategoriesState, any>, payload: any) {
            context.state.loading = true;
            let response = await Ajax.get('/api/services/app/Categories/GetSubordinate?id=' + payload.data);  
            context.state.loading = false;
            return response.data.result.items;
        }
    }