<template>
  <!-- 投放计划 -->
  <div>
    <div class="drawer-item">
      <div class="drawer-item-title">投放计划</div>
      <div class="drawer-item-con">
        <el-form>
          <!-- 每个广告组预算 -->
          <el-form-item label="每个广告组预算">
            <el-radio-group v-model="dayBudget" @change="budgetChange">
              <el-radio-button
                v-for="item in globleEnums.dayBudget"
                :key="item.sort"
                :label="item.name"
                >{{ item.name }}</el-radio-button
              >
            </el-radio-group>
            <el-form-item
              v-if="dayBudget == '统一预算'"
              label="日预算"
              style="margin-top: 15px"
            >
              <el-input
                placeholder="不低于300"
                style="width: 200px"
                v-model="putinBaseInfo.budget"
                @change="testInput"
              ></el-input>
              <span>元</span>
            </el-form-item>
          </el-form-item>

          <!-- 计划数量/组 -->
          <el-form-item label="计划数量/组">
            <el-input style="width: 200px"></el-input>
          </el-form-item>

          <!-- 创意数量/计划 -->
          <el-form-item label="计划数量/计划">
            <el-input disabled value="1" style="width: 200px"></el-input>
          </el-form-item>

          <!-- 竞价策略 -->
          <el-form-item label="竞价策略">
            <el-radio-group v-model="putinBaseInfo.smartBidType">
              <el-radio-button
                v-for="item in globleEnums.putinMethod"
                :key="item.value"
                :label="item.value"
                >{{ item.name }}</el-radio-button
              >
            </el-radio-group>
          </el-form-item>

          <!-- 每个广告计划预算 -->
          <el-form-item label="每个广告计划预算">
            <span>{{ globleEnums.adBudget[0].name }}</span>
            <el-input
              v-model="putinBaseInfo.planBudget"
              :placeholder="globleEnums.adBudget[0].tips"
              @blur="handleBlur"
              style="width: 200px"
            ></el-input>
            <span>元</span>
          </el-form-item>

          <!-- 投放日期时间 -->
          <el-form-item label="投放时间">
            <el-radio-group v-model="putinDateRange" @change="selectDate">
              <el-radio-button
                v-for="item in globleEnums.putinDateRange"
                :key="item.value"
                :label="item.model"
                >{{ item.name }}</el-radio-button
              >
            </el-radio-group>
            <!-- 日期选择 -->
            <div v-if="putinDateRange == 'dateRange'">
              <el-date-picker
                v-model="dataDate"
                type="daterange"
                unlink-panels
                range-separator="-"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions"
                @blur="confirmDate"
              >
              </el-date-picker>
            </div>
          </el-form-item>

          <!-- 投放时段 -->
          <el-form-item label="投放时段">
            <el-radio-group v-model="scheduleTime" @change="scheduleTimeChange">
              <el-radio-button
                v-for="(item, index) in globleEnums.putinTimeRange"
                :key="index"
                :label="item.name"
                >{{ item.name }}</el-radio-button
              >
            </el-radio-group>
            <!-- 指定时段 -->
            <div v-if="scheduleTime == '投放时间段'">
              <el-radio-group v-model="putinBaseInfo.scheduleTime">
                <el-radio
                  v-for="item in globleEnums.selectTimeRangeInput"
                  :key="item.value"
                  :label="item.value"
                  >{{ item.label }}</el-radio
                >
              </el-radio-group>
            </div>
          </el-form-item>

          <!-- 优化目标 -->
          <el-form-item label="优化目标">
            <el-radio-group
              v-model="putinBaseInfo.optimizeGoal"
              @change="optimizeTargetChange"
              ><el-radio-button
                v-for="item in globleEnums.optimizeGoal"
                :key="item.value"
                :label="item.value"
                >{{ item.name }}</el-radio-button
              ></el-radio-group
            >
          </el-form-item>
          <div v-if="putinBaseInfo.optimizeGoal == 1">
            <!-- 转化目标 -->
            <el-form-item label="转化目标">
              <el-select
                v-model="testPutinBaseInfo.changeTarget"
                @change="testChange"
              >
                <el-option
                  v-for="(item, index) in changeTarget"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- 付费方式 -->
            <el-form-item :label="bidMethod.name">
              <el-radio-group v-model="putinBaseInfo.pricing"
                ><el-radio :label="bidMethod.value">{{
                  bidMethod.desc
                }}</el-radio></el-radio-group
              >
            </el-form-item>
            <!-- 目标转化出价 -->
            <el-form-item label="目标转化出价">
              <el-input
                v-model="testPutinBaseInfo.targetChangeBid"
                placeholder="请输入出价"
                style="width: 200px"
              ></el-input>
            </el-form-item>
          </div>
          <div v-if="putinBaseInfo.optimizeGoal == 2">
            <!-- 出价方式 -->
            <el-form-item :label="bidMethod.name"
              ><el-radio-group v-model="putinBaseInfo.pricing"
                ><el-radio :label="bidMethod.value">{{
                  bidMethod.desc
                }}</el-radio></el-radio-group
              >
            </el-form-item>
            <!-- 点击出价 -->
            <el-form-item label="点击出价">
              <el-input
                v-model="testPutinBaseInfo.targetChangeBid"
                placeholder="请输入出价"
                style="width: 200px"
              ></el-input>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    /* 公共参数 */
    globleEnums: {
      type: Object,
      default() {
        return {};
      },
    },
    /* 投放基础信息 */
    putinBaseInfo: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      testPutinBaseInfo: {
        advertiseBudget: 0, // 广告预算
        bid: 0, // 竞价策略
        palnBudget: 0, // 每个广告计划预算
        putinTime: 0, // 投放时间
        putinTimer: 0, // 投放时段
        optimizeTarget: 1, // 优化目标
        changeTarget: 0, // 改变目标
        payMethod: ["点击计费", "按展示计费(oCPM)"],
        targetChangeBid: "", // 目标转化出价
      },
      /* 假数据测试 */
      changeTarget: [
        { label: "行为数", value: 0 },
        { label: "非行为数", value: 1 },
      ], // 改变目标

      /**********************/
      dataDate: "", // 得到的是一个数组 起始时间-结束月份
      pickerOptions: {}, // 便捷操作时间对象->最近x天
      dayBudget: "不限",
      bidMethod: {
        field: "putinBaseInfo.pricing",
        name: "出价方式",
        sort: 2,
        value: "OCPM",
        desc: "按展示计(oCPM)",
      }, // 优化目标的子集 - 出价方式 -初始化
      putinDateRange: "{{today}}", // 投放时间选择 默认长期投放
      scheduleTime: "全天", // 投放时段选择
    };
  },

  created() {
    /* 默认起始时间为今天 */
    this.putinBaseInfo.startTime = this.getTime();
  },

  mounted() {
    /* 时间对象 */
    this.dataDate = [this.getTime(1), this.getTime(0)];
    this.pickerOptions = this.$store.state.pickerOptions; // 从仓库中取出要用的公共数据
    /****************/
  },

  updated() {},

  methods: {
    testChange() {},

    /* 时间获取 */
    getTime(n = 0) {
      /* 这里的n就是你要从今天往前推几天 */
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate() - n;
      let hour = date.getHours();
      let minute = date.getMinutes();
      let second = date.getSeconds();
      if (day < 10) {
        return year + "-" + month + "-0" + day;
      } else {
        return year + "-" + month + "-" + day;
      }
    },

    // 测试
    testInput() {
      this.putinBaseInfo.budget = parseFloat(this.putinBaseInfo.budget);
      console.log(111, this.putinBaseInfo.budget);
    },

    /* 广告组预算处理 */
    budgetChange() {
      if (this.dayBudget == "不限") {
        this.putinBaseInfo.budget = 0;
      }
    },

    /* 每个广告预算 */
    handleBlur() {
      this.putinBaseInfo.planBudget = parseInt(this.putinBaseInfo.planBudget);
    },

    /* 当切换优化目标时 */
    optimizeTargetChange(value) {
      console.log("优化目标转化", value);
      if (value == 1) {
        this.bidMethod = this.globleEnums.optimizeGoal[1].children;
      } else if (value == 2) {
        this.bidMethod = this.globleEnums.optimizeGoal[0].children;
      }
      /* 改变putinBaseInfo.pricing */
      this.putinBaseInfo.pricing = this.bidMethod.value;
      console.log("1222", this.putinBaseInfo.pricing, this.bidMethod);
    },

    /* 投放日期形式改变 */
    selectDate() {
      if (this.putinDateRange == "{{today}}") {
        this.putinBaseInfo.startTime = this.getTime();
        this.putinBaseInfo.endTime = "";
      } else if (this.putinDateRange == "dateRange") {
        this.confirmDate();
      }
    },

    /* 选择投放日期 */
    confirmDate() {
      this.putinBaseInfo.startTime = this.dataDate[0];
      this.putinBaseInfo.endTime = this.dataDate[1];
    },

    /* 选择投放时段 */
    scheduleTimeChange() {
      this.globleEnums.putinTimeRange.forEach((item) => {
        if (item.name == "全天") {
          this.putinBaseInfo.scheduleTime = item.value;
        }
      });
    },
  },
};
</script>

<style scoped>
</style>
