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

<script>

import util from '@/libs/util'

export default {
  props: ['value'],
  data() {
    const qsObj = util.qsParse(this.value);

    delete qsObj.title
    return {
      title: util.getUrlQueryString(this.value, 'title'),
      link: util.getLink(this.value) + (util.isObjectEmpty(qsObj) ? '': '?' + util.qsStringify(qsObj)),
      qsObj
    };
  },
  watch: {
    value(newVal)  {
      console.log('newVal:', newVal);
      this.updateValue(newVal);
    }
  },
  methods: {
    onUpdateTitle(val) {
      this.title = val;
      this.$emit('input', this.getUrl());
    },

    onUpdateLink(val) {
      const qsObj = util.qsParse(val);
      this.link = val;
      this.qsObj = qsObj;

      console.log('link=>', this.link)

      this.$emit('input', this.getUrl());
    },
    getUrl() {
      return `${util.getLink(this.link)}?title=${this.title}${ util.isObjectEmpty(this.qsObj) ? '': '&' + util.qsStringify(this.qsObj)}`;
    },

    updateValue(url) {
      console.log('updatevalue=>', url);
      const qsObj = util.qsParse(url);

      this.title = qsObj.title || '';

      delete qsObj.title;

      this.link = util.getLink(url) + (util.isObjectEmpty(qsObj) ? '': '?' + util.qsStringify(qsObj));

      this.qsObj = qsObj;
    }
  }
}
</script>

<style>

</style>