<template>
  <div>
     <Input :value="productId"  @input="onUpdateProductId" placeholder="商品编码"/>
  </div>
</template>

<script>

import util from '@/libs/util'

export default {
  props: ['value'],
  data() {
    return {
      pagename: util.getUrlQueryString(this.value, 'pagename') || 'productDetail',
      productId: util.getUrlQueryString(this.value, 'productId'),
      link: util.getLink(this.value) || 'https://m.yohobuy.com/',
    }
  },
  watch: {
    value(newVal)  {
      this.pagename = util.getUrlQueryString(this.value, 'pagename') || 'productDetail';
      this.productId = util.getUrlQueryString(this.value, 'productId');
      this.link = util.getLink(this.value) || 'https://m.yohobuy.com/';
    }
  },
  methods: {
    onUpdateProductId(val) {
      this.productId = val;
      this.$emit('input', this.getUrl());
    },
    getUrl() {
      let params = new URLSearchParams();

      params.append('pagename', this.pagename);
      params.append('productId', this.productId);

      return `${this.link}?${params}`
    }
  }
}
</script>

<style>

</style>