<template>
  <div class="use_box">
    <Modal
      :scrollable="false"
      v-model="showUse"
      title="使用活动"
      @on-cancel="cancel"
      :loading="true"
      width="70%"
    >
      <Steps style="padding: 40px;" :current="currentStep">
        <Step :title="isModify ? '修改零售公司' : '选择零售公司'" content></Step>
        <Step :title="isModify ? '修改店铺' : '选择店铺'" content></Step>
      </Steps>
      <useActivityStepTwo :schedule="schedule" :isModify="isModify" v-if="currentStep == 0"></useActivityStepTwo>
      <useActivityStepThree :schedule="schedule" :isModify="isModify" v-if="currentStep == 1"></useActivityStepThree>
      <div slot="footer">
        <Button
          v-if="currentStep !== 0"
          type="primary"
          shape="circle"
          :loading="modal_loading"
          @click="back"
        >上一步</Button>
        <Button
          v-if="currentStep !== 1"
          type="primary"
          shape="circle"
          :loading="modal_loading"
          @click="next"
        >下一步</Button>
        <Button
          v-if="currentStep == 1"
          type="primary"
          shape="circle"
          :loading="modal_loading"
          @click="finish"
        >完成</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import useActivityStepOne from "./useActivityStepOne";
import useActivityStepTwo from "./useActivityStepTwo";
import useActivityStepThree from "./useActivityStepThree";
import useActivityStepFoure from "./useActivityStepFoure";
import ActivityManager from "../../services/ActivityManager/ActivityManager";
import store from "../../store/index";
import { formatDate } from "../../utils/Common";
export default {
  name: "useTable",
  components: {
    useActivityStepOne,
    useActivityStepTwo,
    useActivityStepThree,
    useActivityStepFoure
  },
  data() {
    return {
      currentStep: -1,
      modal_loading: false,
      showUse: false
    };
  },
  props: {
    id: String,
    schedule: Object,
    show: Boolean,
    isModify: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    show() {
      this.showUse = this.show;
      this.currentStep = 0;
    },
    schedule() {
      store.getters.useData.scheduleId = this.schedule.id;
    }
  },
  mounted() {},
  methods: {
    cancel() {
      this.currentStep = 0;
      if (!this.isModify) {
        store.commit("RSET_useData");
      }
      this.$emit("doShow", false);
      this.modal_loading = false;
      this.showUse = false;
      this.currentStep = 0;
    },
    next() {
      let data = store.getters.useData;
      console.log("data1", data);
      if (this.currentStep === 0) {
        if (!data.company || data.company.length === 0) {
          this.$Message.error("请至少选择1家公司");
          return;
        }
      }
      if (this.currentStep === 2) {
        if (!data.stores || data.stores.length === 1) {
          this.$Message.error("请至少选择1家店铺");
          return;
        }
      }
      if (typeof data.beginTime == "object") {
        data.beginTime = formatDate(data.beginTime);
      }
      if (typeof data.endTime == "object") {
        data.endTime = formatDate(data.endTime);
      }
      console.log("data", data);
      store.commit("SET_useData", data);
      this.currentStep = this.currentStep + 1;
    },
    back() {
      this.currentStep = this.currentStep - 1;
    },
    finish() {
      let that = this;
      this.modal_loading = true;
      that.$emit("doShow", false);
    }
  }
};
</script>

<style></style>
