<!-- Created by henian.xu on 2022/12/8. -->

<template>
    <div class='link-input'>
        <el-input v-model="model" />
        <div
            v-if="type!=='1'"
            class='ctrl'>
            <template  v-if="type==='2'">
                <LatLngPicker
                    v-show='false'
                    ref='latLngPicker'
                    v-model="latLngModel"
                    return-type='2'
                ></LatLngPicker>
                <el-button
                    type="primary"
                    @click='onLatLanPicker'>{{ $$t('vmf_select_coordinates', '选择坐标') }}</el-button>
                <el-button
                    type="primary"
                    @click='onGoodsAdd'>{{ $$t('vmf_select_goods', '选择商品') }}</el-button>
            </template>
        </div>
        <GoodsPicker
            :ref="`GoodsPicker`"
            :api-query="{}"
            :multiple='false'
            v-model="goods"
            @input='onGoodsPickerInput'
        />
    </div>
</template>

<script>
import Url from 'url';
import Qs from 'qs';
import GoodsPicker from './_goodsPicker.vue';

const regCommand = /^COMM:\/\/([^\s]*)/;
// COMM://couponGive/?couponCodes=27
function getSearch(path) {
    const { query } = Url.parse(path);
    if (!query) return {};
    return Qs.parse(query) || {};
}
export function getCommand(url) {
    let path = `${url}`;
    if (!path) return null;
    path = path.match(regCommand);
    if (!path || path.length < 2) return null;
    [, path] = path;
    return {
        comm: path.split('/')[0].toUpperCase(),
        options: getSearch(path),
    };
}
export default {
    name: 'LinkInput',
    components: { GoodsPicker },
    data() {
        return {
            goods: [],
        };
    },
    props: {
        /**
         * 1:普通链接
         * 2:坐标链接
         * */
        type: {
            type: String,
            default: '1',
        },
        value: {
            type: String,
            default: '',
        },
    },
    computed: {
        model: {
            get() {
                return this.value || '';
            },
            set(val) {
                this.$emit('input', val);
            },
        },
        latLngModel: {
            get() {
                const { model } = this;
                const { comm, options } = getCommand(model) || {};
                if (comm !== 'NAVIGATION') return {};
                return options || {};
            },
            set(val) {
                const query = Qs.stringify(
                    ['lat', 'lng', 'name', 'address'].reduce((pre, cur) => {
                        const value = (val || {})[cur];
                        if (value) pre[cur] = value;
                        return pre;
                    }, {}),
                );
                if (query) this.model = `COMM://navigation/?${query}`;
                else this.model = '';
            },
        },
    },
    methods: {
        onLatLanPicker() {
            const { latLngPicker } = this.$refs;
            if (!latLngPicker) return;
            latLngPicker.onPicker();
        },
        onGoodsPickerInput(val) {
            if (!val) return;
            this.model = `/goods/detail?goodsId=${val}`;
        },
        onGoodsAdd(props, ref = 'GoodsPicker') {
            let GoodsPicker_ = this.$refs[ref];
            if (!GoodsPicker_) return;
            GoodsPicker_ = GoodsPicker_[0] || GoodsPicker_;
            GoodsPicker_.open();
        },
    },
};
</script>

<style lang='scss'>
.link-input {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    > .el-input {
        flex: 1 1 1%;
    }
    > .ctrl {
        flex: 0 0 auto;
        margin-left: $margin;
    }
}
</style>
