<template>
  <div>
     <Form>
      <FormItem>
        <Select v-model="action_">
          <Option value="go.h5">H5网页</Option>
          <Option value="go.ufo">商品列表页</Option>
          <Option value="go.pool">商品池</Option>
        </Select>
      </FormItem>

      <FormItem>
        <h5-url v-if="action_ === 'go.h5'" v-model="url_"></h5-url>
        <ufo-url v-else-if="action_ === 'go.ufo'" v-model="url_"></ufo-url>
        <pool-url v-else-if="action_ === 'go.pool'" v-model="url_"></pool-url>
      </FormItem>
    </Form>
  </div>
</template>

<script>

import h5 from './banner-h5'
import ufo from './banner-ufo'
import pool from './banner-pool'

export default {
  props: ['value'],
  data() {
    return {
      url_: this.value.url,
      action_: this.value.action
    }
  },
  methods: {
  },
  watch: {
    url_(newVal) {
      this.$emit('input', {url: this.url_, action: this.action_})
    },
    action_(newVal) {
      if (newVal === 'go.pool') {
        this.url_ = 'https://m.yohobuy.com/?pagename=productDetail'
      } else if (newVal === 'go.ufo') {
        this.url_ = 'https://m.yohobuy.com/?pagename=productList'
      } else if (newVal === 'go.h5' ){
        this.url_ = ''
      }

      this.$emit('input', {url: this.url_, action: this.action_})
    }
  },
  components: {
    h5Url: h5,
    ufoUrl: ufo,
    poolUrl: pool
  }
}
</script>

<style>

</style>