<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 v-if="action_ === 'go.h5'" 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 = [];
      if (this.type === "H5") {
        action = [
          {
            value: "go.h5",
            label: "H5网页"
          },
          {
            value: "go.pool",
            label: "商品池"
          },
          {
            value: "go.list",
            label: "商品列表"
          },
          {
            value: "go.detail",
            label: "商品详情"
          },
          {
            value: "go.channel",
            label: "首页频道Tab"
          }
        ];
      } else {
        action = [
          {
            value: "go.h5",
            label: "H5网页"
          },
          {
            value: "go.pool",
            label: "商品池"
          },
          {
            value: "go.detail",
            label: "商品详情"
          },
          {
            value: "go.list",
            label: "商品列表"
          },
          {
            value: "go.calendar",
            label: "发售日历页"
          },
          {
            value: "go.hotlist",
            label: "热卖列表页"
          },
          {
            value: "go.bargainlist",
            label: "砍价列表页"
          },
          {
            value: "go.identifyList",
            label: "鉴定服务"
          },
          {
            value: "go.channel",
            label: "首页频道Tab"
          }
        ];
      }
      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.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 ("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>