<template>
  <div class="create-plan">
    <div class="title-box-common title-box">
      <a-breadcrumb>
        <a-breadcrumb-item
          ><a href="javascript:;" @click="$router.push('/put/plan-management')"
            >计划管理</a
          ></a-breadcrumb-item
        >
        <a-breadcrumb-item>新建</a-breadcrumb-item>
      </a-breadcrumb>
      <h3>新建计划</h3>
    </div>
    <div class="padding-box-common">
      <div class="main-box">
        <div class="step-box">
          <a-steps :current="current">
            <a-step
              v-for="item in steps"
              :key="item.title"
              :title="item.title"
            />
          </a-steps>
        </div>
        <router-view v-slot="{ Component }">
          <keep-alive>
            <component :is="Component" />
          </keep-alive>
        </router-view>
        <!-- <router-view></router-view> -->
        <div class="steps-action">
          <a-button v-if="current === 0" @click="prev">取消</a-button>
          <a-button v-if="current > 0" @click="prev">上一步</a-button>
          <a-button
            v-if="current < steps.length - 1"
            type="primary"
            @click="next"
            :loading="nextLoading"
            >下一步</a-button
          >
          <a-button
            v-if="current == steps.length - 1"
            type="primary"
            @click="$message.success('Processing complete!')"
          >
            完成
          </a-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import useApp from "@/hooks/useApp";
import { defineComponent, reactive, toRefs } from "vue";
import { onBeforeRouteUpdate } from "vue-router";
import Bus from "@/utils/bus";

const PlanCreate = defineComponent({
  setup(props, context) {
    const { route, router } = useApp();
    const state = reactive({
      defaultKey: route.name,
      current: 0,
      steps: [
        { title: "选择投放账号" },
        { title: "选择广告组" },
        { title: "编辑计划" },
        { title: "添加创意" },
        { title: "上传计划" },
      ],
      routerList: [
        "account-select",
        "group-select",
        "plan-edit",
        "creativity-add",
        "plan-upload",
      ],
      nextLoading: false, // 下一步按钮loading
    });
    const changeTab = (key: string) => {
      router.replace({ name: key });
    };
    onBeforeRouteUpdate((to) => {
      state.defaultKey = to.name;
    });
    return { ...toRefs(state), changeTab };
  },
  beforeRouteLeave(to: any, from, next) {
    console.log("离开index", to);
    window.localStorage.removeItem("plan-ad-account");
    window.localStorage.removeItem("current-step");
    window.localStorage.removeItem("plan-create-campaign");
    next();
    // if (to.href.indexOf("plan-create/group-select") > -1) return next();
    // Modal.confirm({
    //   title: "确认离开当前页面吗?",
    //   icon: createVNode(ExclamationCircleOutlined),
    //   content: createVNode(
    //     "div",
    //     { style: "color:gray;" },
    //     "未保存内容将会丢失"
    //   ),
    //   onOk() {
    //     window.localStorage.removeItem("plan-ad-account");
    //     next();
    //   },
    //   onCancel() {
    //     next(false);
    //   },
    //   class: "test",
    // });
  },
  mounted() {
    if (window.localStorage.getItem("current-step"))
      this.current = Number(window.localStorage.getItem("current-step"));
    Bus.$on("stepOneBack", (val: any) => {
      // 第一步校验完成 携带account_id跳转创建广告组页面
      this.$router.push(
        "/put/plan-create/" + this.routerList[1] + "?advertiser_id=" + val
      );
      console.log("STEP1+1");
      if (this.current === 0) this.current++;
      this.setCurrent();
    });
    Bus.$on("stepTwoBack", (val: any) => {
      // 第一步校验完成 携带account_id跳转创建广告组页面
      this.$router.push(
        "/put/plan-create/" +
          this.routerList[2] +
          "?campaign_id=" +
          val.campaign_id +
          "&advertiser_id=" +
          val.advertiser_id
      );
      console.log("STEP2+1");
      if (this.current === 1) this.current++;
      this.setCurrent();
    });
    Bus.$on("stepThreeBack", (val?: any) => {
      // 第一步校验完成 携带account_id跳转创建广告组页面
      this.$router.push(
        "/put/plan-create/" + this.routerList[3] + "?plan_id=" + val
      );
      console.log("STEP3+1");
      if (this.current === 2) this.current++;
      this.setCurrent();
    });
    Bus.$on("stepFourBack", (val?: any) => {
      // 第一步校验完成 携带account_id跳转创建广告组页面
      this.$router.push(
        "/put/plan-create/" + this.routerList[4] + "?plan_id=" + val
      );
      console.log("STEP4+1");
      if (this.current === 3) this.current++;
      this.setCurrent();
    });
  },
  methods: {
    next() {
      this.nextLoading = true;
      setTimeout(() => {
        this.nextLoading = false;
      }, 100);
      console.log("出发点+1");
      if (this.current === 0) return Bus.$emit("stepOneCheck");
      if (this.current === 1) return Bus.$emit("stepTwoCheck");
      if (this.current === 2) return Bus.$emit("stepThreeCheck");
      if (this.current === 3) return Bus.$emit("stepFourCheck");
      if (this.current === 4) return Bus.$emit("stepFiveCheck");
    },
    prev() {
      if (this.current === 0) {
        this.$router.push("/put/plan-management");
        return;
      }
      console.log("减啊");
      this.current--;
      window.localStorage.setItem("current-step", String(this.current));
      // this.$router.push("/put/plan-create/" + this.routerList[this.current]);
      this.$router.go(-1);
    },
    setCurrent() {
      window.localStorage.setItem("current-step", String(this.current));
    },
  },
  // beforeUnmount() {
  //   Bus.$off("stepOneCheck");
  // },
});

export default PlanCreate;
</script>
<style lang="scss" scoped>
@import "@/assets/common-style/frame.scss";
.create-plan {
  .title-box {
    display: block;
    padding-top: 4px;
    h3 {
      margin-top: 10px;
    }
  }
  .main-box {
    background: white;
    padding: 20px;
  }
  .step-box {
    margin-bottom: 30px;
  }
  .steps-action {
    margin-top: 30px;
    border-top: 1px solid rgb(231, 230, 230);
    .ant-btn {
      margin: 10px 10px 0 0;
    }
  }
}
</style>
