<template>
  <div>
    <el-drawer
      direction="rtl"
      size="88%"
      :show-close="false"
      :visible.sync="ks_drawerShow"
      :before-close="handleClose"
    >
      <div class="blank-gap"></div>

      <div style="position: relative" class="row-center-center">
        <div style="width: 25%">
          <div class="back">
            <el-button type="primary" @click="handleClose">返回</el-button>
            <span style="font-size: 16px">快手平台投放</span>
          </div>

          <el-steps class="zf-steps" direction="vertical" :active="3">
            <template v-for="(item, index) of stepList">
              <el-step :title="item.title" :key="index"></el-step>
            </template>
          </el-steps>
        </div>

        <div class="drawer-list">
          <!-- 投放组 -->
          <Group :globleEnums="globleEnums" :putinBaseInfo="putinBaseInfo" />

          <div class="blank-gap"></div>

          <!-- 投放计划 -->
          <Plan :globleEnums="globleEnums" :putinBaseInfo="putinBaseInfo" />

          <div class="blank-gap"></div>

          <!-- 用户定向 -->
          <Direct
            :globleEnums="globleEnums"
            :putinBaseInfo="putinBaseInfo"
            :orientation="orientation"
          />

          <div class="blank-gap"></div>

          <!-- 广告创意 -->
          <Creative :globleEnums="globleEnums" :putinBaseInfo="putinBaseInfo" />

          <div class="blank-gap"></div>

          <el-button type="primary" style="margin: 20px 50px 0 0; float: right"
            >提交</el-button
          >
        </div>
      </div>

      <div class="blank-gap"></div>
    </el-drawer>
  </div>
</template>

<script>
/* 引入子组件 */
import Group from "./Group";
import Plan from "./Plan";
import Creative from "./Creative";
import Direct from "./Direct";

/* 引入数据 */
import { getEnums } from "@/api/cloud";

export default {
  props: {
    ks_drawerShow: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      stepList: [
        {
          title: "投放组",
        },
        {
          title: "投放计划",
        },
        {
          title: "用户定向",
        },
        {
          title: "投放范围",
        },
        {
          title: "广告创意",
        },
        {
          title: "制作创意",
        },
        {
          title: "创意分类",
        },
      ],

      putinBaseInfo: {
        id: "",
        taskName: "",
        selectAdvertisers: [], // 投放账户
        landingType: 2, // 营销目标 选择投放目的
        budgetMode: "BUDGET_MODE_INFINITE", // 广告组预算
        budget: 0, // 广告组预算(值) // 单日运算
        campaignNum: "1", // 广告组数量
        planNum: "", // 计划数量/组
        creativeNum: "1", // 创意数量/计划
        putinTarget: "0",
        landMethod: 1, // 下载
        pkg: "com.zxhl.location", // 投放目标: 选择应用
        landUrl: "",
        webUrl: "",
        deliveryRange: "DEFAULT", // 投放范围
        unionVideoType: "", // 投放形式
        smartBidType: "1",
        flowControlMode: "FLOW_CONTROL_MODE_FAST",
        planBudgetMode: "BUDGET_MODE_DAY",
        planBudget: "",
        scheduleType: "SCHEDULE_START_END", // 投放时间
        startTime: "",
        endTime: "",
        scheduleTime: "", // 选择时段
        pricing: "OCPM",
        cpaBid: "",
        deepBidType: "DEEP_BID_MIN",
        deepCpabid: "",
        optimizeGoal: 1, // 优化目标
      },

      // 用户定向
      orientation: {
        id: "",
        allowCity: "", // 城市
        allowGender: 0, // 性别(默认: 不限)
        allowAge: "", // 年龄
        interestActionMode: "RECOMMEND", // 行为兴趣(默认： 系统推荐)
        allowNetwork: "", // 网络
        allowCarrier: "", // 运营商
        selectHisPack: "", // 这个字段是用来标识你是否是使用历史定向包的
        retargetingTagsInclude: "", // 定向
        retargetingTagsExclude: "", // 排除
      },

      makeCreative: {
        id: "",
        adSource: "",
        materialGroupId: "",
        creativeComposeMethod: 2,

        verticalVideo: "",
        horizontalVideo: "",
        bigImage: "",
        smallImage: "",
        verticalBigImage: "",

        textGroup: "", // 制作创意: 添加文案

        promotionCardImg: "",
        productImageId: "", // 商品卡片图片（主图）
        productDescription: "", // 推广卡片 标题(描述)
        productSellingPoints: "", // 推广卡片 商品卖点
        enablePersonalAction: 1, // 是否使用智能优选，1为使用，0为不使用
        actionText: "",
        subTitle: "", // 制作创意: 副标题

        adComment: 0,
        advanceCreative: 0,
        isPresentedVideo: 1,
        bestCreativeDerivePlan: 1,
        brandMainPage: 1,

        creativeCategory: "", // 创意分类
        creativeFullCategory: "", // 创意分类所有id, 便于回显
        creativeTags: "", // 创意标签

        creativeMaterialMode: "STATIC_ASSEMBLE", // 默认程序化创意
        creativeShowMode: 1, // 创意展现方式， 默认优选模式

        gdtMonitorUrl: "",
        putinInventoryType: "smartInventory", // 投放位置的类型
        putinInventory: "", // 投放位置的值
        kuaishouMonitorUrl: "",

        smartInventory: 1,

        // toutiaoMonitorUrl: "https://report.zhangxinhulian.com/" // 检测链接: 点击
      },

      /* 保存公共参数 */
      globleEnums: {},
    };
  },
  components: {
    Group,
    Plan,
    Creative,
    Direct,
  },
  created() {
    this.APIGetEnums(); // 获取公共参数
  },
  methods: {
    /* 获取公共参数 */
    APIGetEnums() {
      getEnums().then((res) => {
        this.globleEnums = res.result.data.kuaishou;
      });
    },

    //退出抽屉确认
    handleClose() {
      this.$confirm("退出后不保留数据，确定退出页面？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "数据已清除!",
          });
          //关闭抽屉
          this.$emit("closeKs");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消退出，请继续填写",
          });
        });
    },
  },
};
</script>

<style>
.zf-steps {
  height: 80vh;
  padding-left: 15%;
  box-sizing: border-box;
  margin-top: 20px;
}

.drawer-list {
  flex: 1;
  height: 90vh;
  overflow-y: scroll;
}

.drawer-item {
  padding-left: 20px;
  box-sizing: border-box;
}
</style>

<style scoped>
.blank-gap {
  height: 10px;
  background-color: #f2f2f2;
  margin-top: 10px;
}

.drawer-list {
  border-left: 8px solid #f2f2f2;
}

.back {
  position: absolute;
  top: 0;
}
</style>
