import { defineVxeComponent } from '../../ui/src/comp';
import XEUtils from 'xe-utils';
import { createEvent, renderEmptyElement } from '../../ui';
import { assembleAnchorLink, destroyAnchorLink } from './util';
export default {
    name: 'VxeAnchorLink',
    props: {
        content: [String, Number],
        title: [String, Number],
        href: String
    },
    inject: {
        $xeAnchor: {
            default: null
        },
        $xeParentAnchorLink: {
            from: '$xeAnchorLink',
            default: null
        }
    },
    provide() {
        const $xeAnchorLink = this;
        return {
            $xeAnchorLink
        };
    },
    data() {
        const xID = XEUtils.uniqueId();
        const reactData = {};
        const linkConfig = {
            id: xID,
            href: '',
            children: []
        };
        return {
            xID,
            reactData,
            linkConfig
        };
    },
    computed: Object.assign(Object.assign({}, {}), { computeIsActive() {
            const $xeAnchorLink = this;
            const props = $xeAnchorLink;
            const $xeAnchor = $xeAnchorLink.$xeAnchor;
            const { href } = props;
            if ($xeAnchor) {
                return $xeAnchor.reactData.activeHref === href;
            }
            return null;
        } }),
    watch: {
        href(val) {
            const $xeAnchorLink = this;
            const linkConfig = $xeAnchorLink.linkConfig;
            linkConfig.href = val;
        }
    },
    methods: {
        //
        // Method
        //
        dispatchEvent(type, params, evnt) {
            const $xeAnchorLink = this;
            $xeAnchorLink.$emit(type, createEvent(evnt, { $anchorLink: $xeAnchorLink }, params));
        },
        clickEvent(event) {
            const $xeAnchorLink = this;
            const props = $xeAnchorLink;
            const $xeAnchor = $xeAnchorLink.$xeAnchor;
            const { href } = props;
            if ($xeAnchor) {
                $xeAnchor.handleClickLink(event, href);
            }
        },
        //
        // Render
        //
        renderVN(h) {
            const $xeAnchorLink = this;
            const props = $xeAnchorLink;
            const slots = $xeAnchorLink.$scopedSlots;
            const { href, content, title } = props;
            const defaultSlot = slots.default;
            const subSlot = slots.sub;
            const isActive = $xeAnchorLink.computeIsActive;
            return h('div', {
                ref: 'refElem',
                class: ['vxe-anchor-link', {
                        'is--active': isActive
                    }]
            }, [
                h('a', {
                    class: 'vxe-anchor-link--item',
                    attrs: {
                        href,
                        title
                    },
                    on: {
                        click: $xeAnchorLink.clickEvent
                    }
                }, defaultSlot ? defaultSlot({}) : (XEUtils.toValueString(content))),
                subSlot
                    ? h('div', {
                        class: 'vxe-anchor-link--sub-items'
                    }, subSlot({}))
                    : renderEmptyElement($xeAnchorLink)
            ]);
        }
    },
    created() {
        const $xeAnchorLink = this;
        const props = $xeAnchorLink;
        const linkConfig = $xeAnchorLink.linkConfig;
        linkConfig.href = props.href;
    },
    mounted() {
        const $xeAnchorLink = this;
        const $xeAnchor = $xeAnchorLink.$xeAnchor;
        const $xeParentAnchorLink = $xeAnchorLink.$xeParentAnchorLink;
        const linkConfig = $xeAnchorLink.linkConfig;
        const elem = $xeAnchorLink.$refs.refElem;
        if ($xeAnchor && elem) {
            assembleAnchorLink($xeAnchor, elem, linkConfig, $xeParentAnchorLink);
        }
    },
    beforeDestroy() {
        const $xeAnchorLink = this;
        const $xeAnchor = $xeAnchorLink.$xeAnchor;
        const linkConfig = $xeAnchorLink.linkConfig;
        if ($xeAnchor) {
            destroyAnchorLink($xeAnchor, linkConfig);
        }
    },
    render(h) {
        return this.renderVN(h);
    }
};