<template>
  <div class="apaas_detail_container">
    <div class="apass_breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/message' }">
          {{ $t("lang.message") }}
        </el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/message/directed_push' }">
          {{ $t("lang.directed_push") }}
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          新建
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="main_contaner locked_height">
      <steps
        :active-step="step"
        :done="done"
        :show-done="true"
        done-title="推送成功"
        done-sub-title="用户可通过用户中心-消息通知查收推送内容"
        class="apaas_steps"
      >
        <step
          title="选择推送服务"
          :step="0"
          :active-icon="require('@/assets/imgs/progress_ic_tuisongfw.png')"
          class="apaas_step"
        >
          <select-service
            class="apaas_step_content"
            @change="selectService"
          ></select-service>

          <div class="apaas_button apaas_step_action">
            <el-button type="defalut" @click="backToList">
              取消
            </el-button>
            <el-button type="primary" @click="step1Action">
              下一步
            </el-button>
          </div>
        </step>
        <step
          title="选择消息模板"
          :step="1"
          :active-icon="require('@/assets/imgs/progress_ic_xiaoximb.png')"
          class="apaas_step"
        >
          <select-template
            class="apaas_step_content"
            @change="selectTemplate"
          ></select-template>

          <div class="apaas_button apaas_step_action">
            <el-button type="defalut" @click="backToList">
              取消
            </el-button>
            <span>
              <el-button type="defalut" @click="step = 0">
                上一步
              </el-button>
              <el-button type="primary" @click="step2Action">
                下一步
              </el-button>
            </span>
          </div>
        </step>
        <step
          title="选择目标用户"
          :step="2"
          :active-icon="require('@/assets/imgs/progress_ic_renyuan.png')"
          class="apaas_step"
        >
          <select-users
            class="apaas_step_content"
            @change="selectTargetUser"
          ></select-users>

          <div class="apaas_button apaas_step_action">
            <el-button type="defalut" @click="backToList">
              取消
            </el-button>
            <span>
              <el-button type="defalut" @click="step = 1">
                上一步
              </el-button>
              <el-button type="primary" @click="step3Action">
                完成选择
              </el-button>
            </span>
          </div>
        </step>

        <template slot="action">
          <el-button type="primary" @click="backToList">
            返回列表
          </el-button>
        </template>
      </steps>
    </div>
  </div>
</template>

<script>
import Steps from "@/components/app-build-steps/app-build-steps";
import Step from "@/components/app-build-steps/app-build-step";
import SelectService from "@/components/message-steps/select-service";
import SelectTemplate from "@/components/message-steps/select-template";
import SelectUsers from "@/components/message-steps/select-users";

export default {
  components: {
    Steps,
    Step,
    SelectService,
    SelectTemplate,
    SelectUsers,
  },
  data() {
    return {
      step: 0,
      done: false,
      serviceIds: "",
      templateId: "",
      targetUserIds: "",
    };
  },
  created() {},
  methods: {
    selectService(values) {
      this.serviceIds = values.map((item) => item.id).join(",");
    },
    selectTemplate(value) {
      this.templateId = (value && value.id) || "";
    },
    selectTargetUser(values) {
      this.targetUserIds = values.map((item) => item.user_id).join(",");;
    },
    backToList() {
      this.$router.push("/message/directed_push");
    },
    step1Action() {
      if (this.serviceIds === "") {
        this.$message({
          message: "您尚未选择要推送的服务",
          type: "warning",
        });

        return;
      }

      this.step = 1;
    },
    step2Action() {
      if (this.templateId === "") {
        this.$message({
          message: "您尚未选择消息模板",
          type: "warning",
        });

        return;
      }

      this.step = 2;
    },
    step3Action() {
      if (this.targetUserIds === "") {
        this.$message({
          message: "您尚未选择目标用户",
          type: "warning",
        });

        return;
      }

      this.done = true;
    },
  },
};
</script>

<style scoped>
.main_contaner {
  padding: 20px;
}
</style>
