<template>
  <div>
    <Form>
      <FormItem>
        <div>
          <label>业务线：</label>
          <i-radio-group v-model.sync="lob_">
            <i-radio label="new">新品</i-radio>
            <i-radio label="used">二手</i-radio>
          </i-radio-group>
        </div>
      </FormItem>
      <FormItem>
        <Select v-model="action_" :disabled="isSelectAction">
          <Option v-for="item in actionList" :value="item.value" :label="item.label"></Option>
        </Select>
      </FormItem>

      <FormItem>
        <h5-url key="go.h5" v-if="action_ === 'go.h5'" v-model="url_"></h5-url>
        <h5-url key="go.shuichannel" v-if="action_ === 'go.shuichannel'" v-model="url_"></h5-url>
        <pool-url v-else-if="action_ === 'go.pool'" v-model="url_"></pool-url>
        <detail-url v-else-if="action_ === 'go.detail'" v-model="url_"></detail-url>
        <list-url v-else-if="action_ === 'go.list'" v-model="url_"></list-url>
        <calendar-url v-else-if="action_ === 'go.calendar'" v-model="url_"></calendar-url>
        <hotlist-url v-else-if="action_ === 'go.hotlist'" v-model="url_"></hotlist-url>
        <tab-url v-else-if="action_ === 'go.channel'" v-model="url_"></tab-url>
      </FormItem>
    </Form>
  </div>
</template>

<script>
import h5 from './banner-h5';
import pool from './banner-pool';
import detail from './banner-detail';
import list from './banner-list';
import calendar from './banner-calendar';
import tab from './tab-editor-new';
import hotlist from './banner-hotlist';
import util from '@/libs/util';

export default {
  props: ['value', 'type', 'isSelectAction'],

  data() {
    // console.log('this.value');
    // console.log(this.value);
    return {
      url_: this.value.url ? this.value.url : '',
      action_: this.value.action ? this.value.action : 'go.h5',
      islogin: this.value.islogin,
      headerid: this.value.headerid,
      actionList: this.initAction(),
      lob_: this.getLob() || 'new'
    };
  },
  methods: {
    initAction() {
      let action = [
          {
            value: 'go.h5',
            label: 'H5网页'
          },
          {
            value: 'go.pool',
            label: '商品池'
          },
          {
            value: 'go.list',
            label: '商品列表'
          },
          {
            value: 'go.detail',
            label: '商品详情'
          },
          {
            value: 'go.channel',
            label: '首页频道Tab'
          },
          {
            // go.subchannel  go.shuichannel(新)
            value: 'go.shuichannel',
            label: '二级频道跳转'
          }
        ];
      if (this.type !== 'H5') {
        action = action.concat([
          {
            value: 'go.calendar',
            label: '发售日历页'
          },
          {
            value: 'go.hotlist',
            label: '热卖列表页'
          },
          {
            value: 'go.bargainlist',
            label: '砍价列表页'
          },
          {
            value: 'go.identifyList',
            label: '鉴定服务'
          },
        ]);
      }
      return action;
    },
    getLob() {
      // console.log('getLob(url)' + this.value.url);
      let params = util.qsParse(this.value.url);
      // console.log('getLob()');
      // console.log(params);
      return params.business || 'new';
    },
    updateStatus() {
      // console.log('=updateStatus=this.url==');
      // console.log(this.url_);
      // console.log(this.lob_);
      const data = { url: this.url_, action: this.action_ };

      if (this.islogin) {
        data.islogin = this.islogin;
      }


      if (this.headerid) {
        data.headerid = this.headerid;
      }
      this.$emit('input', data);
    }
  },
  watch: {
    url_(newVal) {
      // console.log('url_(newVal)')
      let host = util.getLink(newVal)
      // console.log(host)

      let params = util.qsParse(newVal);
      // console.log(params)
      params.business = this.lob_;
      let queryStr = util.qsStringify(params);
      // console.log(queryStr)
      this.url_ = host+'?' + queryStr;
      this.updateStatus();
    },
    action_(newVal) {
      if (newVal === 'go.detail') {
        this.url_ = 'https://m.yohobuy.com/?pagename=productDetail';
      } else if (newVal === 'go.pool') {
        this.url_ = 'https://m.yohobuy.com/?pagename=productList';
      } else if (newVal === 'go.list') {
        this.url_ = '';
      } else if (newVal === 'go.h5') {
        this.url_ = '';
      } else if (newVal === 'go.shuichannel') {
        this.url_ = '';
      }else if (newVal === 'go.calendar') {
        this.url_ = 'https://m.yohobuy.com/?pagename=saleCalendar';
      } else if (newVal === 'go.hotlist') {
        this.url_ = 'https://m.yohobuy.com/?pagename=hotSale';
      } else if (newVal === 'go.bargainlist') {
        // 砍价列表
        this.url_ = 'https://m.yohobuy.com/';
      } else if (newVal === 'go.identifyList') {
        this.url_ = 'https://m.yohobuy.com/?pagename=identifyList';
      } else if (newVal === 'go.channel') {
        this.url_ = 'https://m.yohobuy.com/?pagename=home';
      }

      this.updateStatus();
    },
    lob_(newVal) {
      let host = util.getLink(this.value.url)
      let params = util.qsParse(this.value.url);
      params.business = newVal;
      let queryStr = util.qsStringify(params);
      this.url_ = host + '?' + queryStr;
      // this.updateStatus();
    }
  },
  components: {
    h5Url: h5,
    poolUrl: pool,
    detailUrl: detail,
    listUrl: list,
    calendarUrl: calendar,
    hotlistUrl: hotlist,
    tabUrl: tab
  }
};
</script>

<style>
</style>