<template>
  <div>
     <Input :value="productListTitle" @input="onUpdateTitle" placeholder="标题"/>
     <Input :value="productPool"  @input="onUpdatePool" placeholder="商品池ID"/>
  </div>
</template>

<script>

import util from '@/libs/util'

export default {
  props: ['value'],
  data() {
    return {
      pagename: util.getUrlQueryString(this.value, 'pagename') || 'productList',
      productListTitle: util.getUrlQueryString(this.value, 'title'),
      productPool: util.getUrlQueryString(this.value, 'productPool'),
      link: util.getLink(this.value) || 'https://m.yohobuy.com/',
    }
  },
  watch: {
    value(newVal)  {
      this.pagename = util.getUrlQueryString(this.value, 'pagename') || 'productList';
      this.productListTitle = util.getUrlQueryString(this.value, 'title');
      this.productPool = util.getUrlQueryString(this.value, 'productPool');
      this.link = util.getLink(this.value) || 'https://m.yohobuy.com/';
    }
  },
  methods: {
    onUpdateTitle(val) {
      this.productListTitle = val;
      this.$emit('input', this.getUrl());
    },

    onUpdatePool(val) {
      this.productPool = val;
      this.$emit('input', this.getUrl());
    },

    getUrl() {
      let params = new URLSearchParams();

      params.append('pagename', this.pagename);
      params.append('title', this.productListTitle);
      params.append('productPool', this.productPool);

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

<style>

</style>