<template>
  <div>
     <Input :value="title" @input="onUpdateTitle" placeholder="标题"/>
  </div>
</template>

<script>

import util from '@/libs/util';

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

    onUpdateLink(val) {
      this.link = val;
      this.$emit('input', this.getUrl());
    },
    getUrl() {
      let params = new URLSearchParams();

      params.append('pagename', this.pagename);
      params.append('title', this.title);
      return `${this.link}?${params}`;
    }
  }
}
</script>

<style>

</style>