import dayjs from 'dayjs';
import { ToYuan, ThousandCont } from "oak-domain/lib/utils/money";
export default OakComponent({
    entity: 'accountOper',
    isList: true,
    projection: {
        id: 1,
        type: 1,
        avail: 1,
        availPlus: 1,
        $$createAt$$: 1,
    },
    properties: {
        accountId: '',
    },
    data: {
        month: new Date(),
        monthStr: '',
        type: 'both',
        chooseMonth: false,
        chooseType: false,
        pickerStart: dayjs().subtract(10, 'y').startOf('m').format('YYYY-MM-DD'),
        pickerEnd: dayjs().startOf('m').format('YYYY-MM-DD'),
    },
    filters: [
        {
            filter() {
                const { accountId } = this.props;
                return {
                    accountId,
                };
            }
        }
    ],
    formData({ data }) {
        const pagi = this.getPagination();
        const hasMore = !!pagi?.more;
        return {
            hasMore,
            accountOpers: data.map((oper) => {
                const { $$createAt$$, type, availPlus, avail } = oper;
                const num = Math.abs(availPlus);
                const plus = ThousandCont(ToYuan(num), 2);
                const sign = availPlus > 0 ? '+' : '-';
                const time = dayjs($$createAt$$).format('YYYY-MM-DD HH:mm');
                const symbol = this.t(`accountOper:v.type.${type}`)[0];
                const bgColor = this.features.style.getColor('accountOper', 'type', type);
                return {
                    value: `${sign}${plus}`,
                    time,
                    type: this.t(`accountOper:v.type.${type}`),
                    symbol,
                    avail: ThousandCont(ToYuan(avail), 2),
                    bgColor,
                };
            }),
        };
    },
    lifetimes: {
        ready() {
            this.setTypeFilter();
        }
    },
    methods: {
        loadMoreMp() {
            return this.loadMore();
        },
        setType(type) {
            this.setState({
                type,
            }, () => this.setTypeFilter());
        },
        setTypeFilter() {
            const { type } = this.state;
            switch (type) {
                case 'in': {
                    this.addNamedFilter({
                        '#name': 'type',
                        filter: {
                            availPlus: {
                                $gt: 0,
                            },
                        }
                    }, true);
                    break;
                }
                case 'out': {
                    this.addNamedFilter({
                        '#name': 'type',
                        filter: {
                            availPlus: {
                                $lt: 0,
                            },
                        }
                    }, true);
                    break;
                }
                case 'both':
                default: {
                    this.addNamedFilter({
                        '#name': 'type',
                        filter: {
                            availPlus: {
                                $ne: 0,
                            },
                        }
                    }, true);
                    break;
                }
            }
        },
        setMonth(month) {
            if (month) {
                const m = dayjs(month);
                const begin = m.startOf('month').valueOf();
                const end = m.endOf('month').valueOf();
                this.setState({
                    monthStr: m.format('YYYY-MM'),
                    month,
                }, () => this.addNamedFilter({
                    '#name': 'month',
                    filter: {
                        $$createAt$$: {
                            $between: [begin, end],
                        }
                    }
                }, true));
            }
            else {
                this.setState({
                    monthStr: '',
                    month: undefined,
                }, () => this.removeNamedFilter({
                    '#name': 'month',
                    filter: {}
                }, true));
            }
        },
        setChooseMonth(chooseMonth) {
            this.setState({ chooseMonth });
        },
        setChooseType(chooseType) {
            this.setState({ chooseType });
        },
        setMonthMp(e) {
            const { value } = e.detail;
            const month = dayjs(value).valueOf();
            this.setMonth(month);
        },
        openChooseTypeMp() {
            this.setState({
                chooseType: true,
            });
        },
        closeChooseTypeMp() {
            this.setState({
                chooseType: false,
            });
        },
        setTypeMp({ detail }) {
            const { key, } = detail;
            this.setState({
                type: key,
            }, () => this.setTypeFilter());
            this.closeChooseTypeMp();
        }
    }
});