<template>
  <div class="plan-edit">
    <!-- part1------优化目标 -->
    <div class="part-box">
      <h1>优化目标</h1>
      <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
        <!-- <a-form-item label="转化跟踪方式">
          <a-select placeholder="请选择">
            <a-select-option value="XIANSUOTONG">线索通</a-select-option>
            <a-select-option value="XIANSUOTONG_API">线索API</a-select-option>
          </a-select>
        </a-form-item>-->
        <a-form-item label="优化目标">
          <a-select placeholder="请选择" :disabled="true">
            <a-select-option v-for="(item, index) in []" :key="index"></a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="落地页">
          <a-select placeholder="请选择" v-model:value="plan.external_url" :disabled="true">
            <a-select-option v-for="(item, index) in []" :key="index"></a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="直达链接内容">
          <a-input placeholder="选填" v-model:value="plan.open_url" />
        </a-form-item>
      </a-form>
    </div>

    <!-- part2------设置投放位置 -->
    <div class="part-box">
      <h1>设置投放位置</h1>
      <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-item label="广告位置">
          <a-radio-group v-model:value="plan.inventory_catalog" :disabled="true">
            <a-radio value="SMART">系统优选广告位</a-radio>
            <a-radio value="MANUAL">首选媒体</a-radio>
            <a-radio value="SCENE">首选场景</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="投放媒体" v-show="plan.inventory_catalog === 'MANUAL'">
          <a-select
            mode="multiple"
            size="default"
            placeholder="请选择"
            v-model:value="plan.inventory_type"
            style="width: 400px"
          >
            <a-select-option
              v-for="item in optionsList.mediaList"
              :key="item.value"
            >{{ item.label }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="投放场景" v-show="plan.inventory_catalog === 'SCENE'">
          <a-select
            size="default"
            placeholder="请选择"
            v-model:value="plan.scene_inventory"
            style="width: 400px"
          >
            <a-select-option
              v-for="item in optionsList.sceneList"
              :key="item.value"
            >{{ item.label }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="搜索快投关键词">
          <a-switch v-model:checked="plan.feed_delivery_search" />
        </a-form-item>
      </a-form>
    </div>

    <!-- part3------用户定向 -->
    <div class="part-box">
      <h1>用户定向</h1>
      <a-form :label-col="labelCol" :wrapper-col="wrapperCol" style="margin-bottom: 20px">
        <a-form-item label="定向方式">
          <a-radio-group v-model:value="userTarget.directType" @change="getPackageList">
            <a-radio value="BUILD">新建定向</a-radio>
            <a-radio value="SELECT">选择已有定向包</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="选择已有定向包" v-if="userTarget.directType === 'SELECT'">
          <a-select placeholder="请选择">
            <a-select-option
              v-for="(item, index) in directList"
              :key="index"
              :value="item.audience_package_id"
            >{{ item.name }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
      <a-form
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        v-if="userTarget.directType === 'BUILD'"
      >
        <!-- 地域组件 -->
        <a-form-item label="地域">
          <!-- 组件数据接入DDD -->
          <location :checkedCity="'[]'" ref="cityCom"></location>
        </a-form-item>
        <a-form-item label="性别">
          <a-radio-group v-model:value="plan.gender">
            <a-radio-button value="NONE">不限</a-radio-button>
            <a-radio-button value="GENDER_MALE">男</a-radio-button>
            <a-radio-button value="GENDER_FEMALE">女</a-radio-button>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="年龄">
          <a-checkbox-group
            v-model:value="plan.age"
            style="width: 700px"
            @change="checkboxChange($event, 'age')"
          >
            <a-checkbox value="NONE">不限</a-checkbox>
            <a-checkbox value="AGE_BETWEEN_18_23">18-23</a-checkbox>
            <a-checkbox value="AGE_BETWEEN_24_30">24-30</a-checkbox>
            <a-checkbox value="AGE_BETWEEN_31_40">31-40</a-checkbox>
            <a-checkbox value="AGE_BETWEEN_41_49">41-49</a-checkbox>
            <a-checkbox value="AGE_ABOVE_50">50+</a-checkbox>
          </a-checkbox-group>
        </a-form-item>
        <!-- 自定义人群 -->
        <a-form-item label="自定义人群">
          <a-radio-group v-model:value="userTarget.crowdType">
            <a-radio-button value="NONE">不限</a-radio-button>
            <a-radio-button value="CUSTOM">自定义人群</a-radio-button>
          </a-radio-group>
          <!-- 组件数据待接入DDD -->
          <direction-exclusion
            ref="crowdCom"
            :compType="'crowd'"
            v-if="userTarget.crowdType === 'CUSTOM'"
          ></direction-exclusion>
        </a-form-item>
        <a-form-item label="行为兴趣">
          <a-radio-group v-model:value="plan.interest_action_mode">
            <a-radio-button value="UNLIMITED">不限</a-radio-button>
            <a-radio-button value="RECOMMEND">系统推荐</a-radio-button>
          </a-radio-group>
        </a-form-item>
        <!-- 媒体定向 -->
        <a-form-item label="媒体定向">
          <a-radio-group v-model:value="plan.superior_popularity_type">
            <a-radio-button value="NONE">不限</a-radio-button>
            <a-radio-button value="1" disabled>游戏优质媒体</a-radio-button>
            <a-radio-button value="CUSTOM">自定义</a-radio-button>
          </a-radio-group>
          <!-- 组件数据接入DDD -->
          <direction-exclusion
            ref="mediaCom"
            :compType="'media'"
            v-if="plan.superior_popularity_type === 'CUSTOM'"
          ></direction-exclusion>
        </a-form-item>
        <a-form-item label="平台">
          <a-checkbox-group
            v-model:value="plan.platform"
            @change="checkboxChange($event, 'platform')"
          >
            <a-checkbox value="NONE">不限</a-checkbox>
            <a-checkbox value="IOS">ios</a-checkbox>
            <a-checkbox value="ANDROID">Android</a-checkbox>
            <a-checkbox value="PC">pc</a-checkbox>
          </a-checkbox-group>
        </a-form-item>
        <a-form-item label="设备类型">
          <a-checkbox-group
            v-model:value="plan.device_type"
            @change="checkboxChange($event, 'device_type')"
          >
            <a-checkbox value="NONE">不限</a-checkbox>
            <a-checkbox value="MOBILE">智能手机</a-checkbox>
            <a-checkbox value="PAD">平板</a-checkbox>
          </a-checkbox-group>
        </a-form-item>
        <a-form-item label="网络">
          <a-checkbox-group v-model:value="plan.ac" @change="checkboxChange($event, 'ac')">
            <a-checkbox value="unknown">不限</a-checkbox>
            <a-checkbox value="WIFI">Wi-Fi</a-checkbox>
            <a-checkbox value="2G">2G</a-checkbox>
            <a-checkbox value="3G">3G</a-checkbox>
            <a-checkbox value="4G">4G</a-checkbox>
          </a-checkbox-group>
        </a-form-item>
        <a-form-item label="已安装用户">
          <a-radio-group v-model:value="plan.hide_if_exists">
            <a-radio-button :value="0">不限</a-radio-button>
            <a-radio-button :value="1">过滤</a-radio-button>
            <a-radio-button :value="2">定向</a-radio-button>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="过滤已转化用户">
          <a-radio-group v-model:value="plan.hide_if_converted">
            <a-radio-button value="NO_EXCLUDE">不限</a-radio-button>
            <a-radio-button value="AD">广告计划</a-radio-button>
            <a-radio-button value="CAMPAIGN">广告组</a-radio-button>
            <a-radio-button value="ADVERTISER">广告账户</a-radio-button>
            <a-radio-button value="CUSTOMER">公司账户</a-radio-button>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="过滤时间" v-if="plan.hide_if_converted === 'CUSTOMER'">
          <!-- 当过滤已转化用户类型选择"公司账户"/“APP”时可填写 -->
          <a-radio-group v-model:value="plan.converted_time_duration">
            <a-radio-button value="CUSTOMER">当天</a-radio-button>
            <a-radio-button value="SEVEN_DAY">7天</a-radio-button>
            <a-radio-button value="ONE_MONTH">1个月</a-radio-button>
            <a-radio-button value="THREE_MONTH">3个月</a-radio-button>
            <a-radio-button value="SIX_MONTH">6个月</a-radio-button>
            <a-radio-button value="TWELVE_MONTH">12个月</a-radio-button>
          </a-radio-group>
        </a-form-item>
        <!-- 文章分类 -->
        <a-form-item label="文章分类">
          <a-radio-group v-model:value="userTarget.articleType">
            <a-radio-button value="NONE">不限</a-radio-button>
            <a-radio-button value="CLASSIFY">文章分类</a-radio-button>
          </a-radio-group>
          <!-- 组件数据接入DDD -->
          <check-box
            ref="articleCom"
            :compType="1"
            :showList="[]"
            v-if="userTarget.articleType === 'CLASSIFY'"
          ></check-box>
        </a-form-item>
        <a-form-item label="运营商">
          <a-checkbox-group
            v-model:value="plan.carrier"
            @change="checkboxChange($event, 'carrier')"
          >
            <a-checkbox value="NONE">不限</a-checkbox>
            <a-checkbox value="MOBILE">移动</a-checkbox>
            <a-checkbox value="UNICOM">联通</a-checkbox>
            <a-checkbox value="TELCOM">电信</a-checkbox>
          </a-checkbox-group>
        </a-form-item>
        <a-form-item label="新用户">
          <a-checkbox-group
            v-model:value="plan.activate_type"
            style="width: 600px"
            @change="checkboxChange($event, 'activate_type')"
          >
            <a-checkbox value="NONE">不限</a-checkbox>
            <a-checkbox value="WITH_IN_A_MONTH">一个月以内</a-checkbox>
            <a-checkbox value="ONE_MONTH_2_THREE_MONTH">一个月到三个月</a-checkbox>
            <a-checkbox value="THREE_MONTH_EAILIER">三个月以上</a-checkbox>
          </a-checkbox-group>
        </a-form-item>
        <!-- 手机品牌 -->
        <a-form-item label="手机品牌">
          <a-radio-group v-model:value="userTarget.deviceBrand">
            <a-radio-button value="NONE">不限</a-radio-button>
            <a-radio-button value="BRAND">手机品牌</a-radio-button>
          </a-radio-group>
          <!-- 组件数据接入DDD -->
          <check-box
            ref="brandCom"
            :compType="2"
            :showList="[]"
            v-if="userTarget.deviceBrand === 'BRAND'"
          ></check-box>
        </a-form-item>
        <a-form-item label="手机价格">
          <a-radio-group v-model:value="userTarget.phonePrice">
            <a-radio-button value="NONE">不限</a-radio-button>
            <a-radio-button value="CUSTOM">自定义</a-radio-button>
          </a-radio-group>
          <div v-if="userTarget.phonePrice === 'CUSTOM'">
            <a-slider
              range
              :marks="phonePriceMarks"
              :max="11000"
              :min="0"
              :step="null"
              v-model:value="plan.launch_price"
              style="width: 410px"
            />
            <span
              style="position: relative; top: -54px; left: 450px"
              v-if="plan.launch_price[0] > 0 && plan.launch_price[1] < 11000"
            >{{ plan.launch_price[0] }}元~{{ plan.launch_price[1] }}元</span>
            <span
              style="position: relative; top: -54px; left: 450px"
              v-if="
                (plan.launch_price[0] === 0 &&
                  plan.launch_price[1] === 11000) ||
                plan.launch_price[0] == plan.launch_price[1]
              "
            >不限</span>
            <span
              style="position: relative; top: -54px; left: 450px"
              v-if="
                plan.launch_price[0] === 0 &&
                plan.launch_price[1] < 11000 &&
                plan.launch_price[1] !== 0
              "
            >{{ plan.launch_price[1] }}元以内</span>
            <span
              style="position: relative; top: -54px; left: 450px"
              v-if="
                plan.launch_price[0] > 0 &&
                plan.launch_price[1] === 11000 &&
                plan.launch_price[0] !== 11000
              "
            >{{ plan.launch_price[0] }}元以上</span>
          </div>
        </a-form-item>
        <!-- 职业状态 -->
        <a-form-item label="职业状态">
          <a-radio-group v-model:value="userTarget.workStatus">
            <a-radio-button value="NONE">不限</a-radio-button>
            <a-radio-button value="STATUS">职业状态</a-radio-button>
          </a-radio-group>
          <!-- 组件数据待接入DDD -->
          <check-box
            ref="workCom"
            :compType="3"
            :showList="[]"
            v-if="userTarget.workStatus === 'STATUS'"
          ></check-box>
        </a-form-item>
        <!-- 智能放量 -->
        <a-form-item label="智能放量">
          <a-switch
            v-model:checked="plan.auto_extend_enabled"
            checked-children="开"
            un-checked-children="关"
          />
          <check-box ref="extendCom" :compType="4" :showList="[]" v-if="plan.auto_extend_enabled"></check-box>
        </a-form-item>
        <p style="line-height: 40px; width: 700px; text-align: right">
          <a-button @click="saveDirectPackage">保存为定向包</a-button>
        </p>
      </a-form>
    </div>

    <!-- part4------预算与出价 -->
    <div class="part-box">
      <h1>预算与出价</h1>
      <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-item label="投放场景">
          <a-radio-group
            v-model:value="plan.smart_bid_type"
            @change="itemChange('smart_bid_type')"
            :disabled="true"
          >
            <a-radio value="SMART_BID_CUSTOM">常规投放</a-radio>
            <a-radio value="SMART_BID_CONSERVATIVE">放量投放</a-radio>
          </a-radio-group>
          <span
            style="font-size: 13px; color: gray"
            v-show="plan.smart_bid_type === 'SMART_BID_CUSTOM'"
          >控制成本,尽量消耗完预算</span>
          <span
            style="font-size: 13px; color: gray"
            v-show="plan.smart_bid_type === 'SMART_BID_CONSERVATIVE'"
          >接受成本上浮，尽量消耗更多预算</span>
          <a-checkbox
            v-if="plan.smart_bid_type === 'SMART_BID_CONSERVATIVE'"
            v-model:checked="plan.adjust_cpa"
          >通过学习期后，尝试优化转化成本</a-checkbox>
        </a-form-item>
        <a-form-item label="日预算" v-if="plan.smart_bid_type === 'SMART_BID_CONSERVATIVE'">
          <a-input addon-after="元" v-model:value="plan.budget" style="width: 140px" type="number" />
        </a-form-item>
        <a-form-item label="预算" v-if="plan.smart_bid_type === 'SMART_BID_CUSTOM'">
          <a-input addon-after="元" v-model:value="plan.budget" style="width: 220px" type="number">
            <template #addonBefore>
              <a-select v-model:value="plan.budget_mode" style="width: 90px">
                <a-select-option value="BUDGET_MODE_DAY">日预算</a-select-option>
                <a-select-option value="BUDGET_MODE_TOTAL">总预算</a-select-option>
              </a-select>
            </template>
          </a-input>
        </a-form-item>
        <a-form-item label="竞价策略" v-if="plan.smart_bid_type === 'SMART_BID_CUSTOM'">
          <a-radio-group v-model:value="plan.flow_control_mode">
            <a-radio value="FLOW_CONTROL_MODE_FAST">优先跑量</a-radio>
            <a-radio value="FLOW_CONTROL_MODE_SMOOTH">均衡投放</a-radio>
            <a-radio value="FLOW_CONTROL_MODE_BALANCE">控制成本上限</a-radio>
          </a-radio-group>
        </a-form-item>
        <!-- 预算 -->
        <a-form-item label="投放时间">
          <a-radio-group v-model:value="plan.schedule_type">
            <a-radio value="SCHEDULE_FROM_NOW">从今天起长期投放</a-radio>
            <a-radio value="SCHEDULE_START_END">设置开始和结束时间</a-radio>
          </a-radio-group>
          <a-range-picker
            v-if="plan.schedule_type === 'SCHEDULE_START_END'"
            v-model:value="range"
            :allowClear="false"
          />
        </a-form-item>
        <a-form-item label="投放时段">
          <a-radio-group v-model:value="userTarget.timeDuration">
            <a-radio value="NONE">不限</a-radio>
            <a-radio value="CUSTOM">指定时间段</a-radio>
          </a-radio-group>
          <time-schedule
            ref="timeCom"
            style="width: 800px; margin-top: 10px"
            v-if="userTarget.timeDuration === 'CUSTOM'"
          ></time-schedule>
        </a-form-item>
        <!-- 投放时段 -->
        <a-form-item label="付费方式">
          <a-radio-group v-model:value="plan.pricing">
            <a-radio value="PRICING_CPM">按展示付费(oCPM)</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="目标转化出价">
          <a-input style="width: 100px" type="number" suffix="元" v-model:value="plan.cpa_bid" />
          <span style="font-size: 13px; color: gray">出价不能大于预算</span>
        </a-form-item>
      </a-form>
    </div>

    <!-- part5------第三方检测链 -->
    <div class="part-box">
      <h1>第三方检测链</h1>
      <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-item label="展示">
          <a-input placeholder="选填" v-model:value="plan.track_url[0]" />
        </a-form-item>
        <a-form-item label="有效触点">
          <a-input placeholder="选填" v-model:value="plan.action_track_url[0]" />
        </a-form-item>
        <a-form-item label="视频播放">
          <a-input placeholder="选填" v-model:value="plan.video_play_track_url[0]" />
        </a-form-item>
        <a-form-item label="视频播完">
          <a-input placeholder="选填" v-model:value="plan.video_play_done_track_url[0]" />
        </a-form-item>
        <a-form-item label="视频有效播放">
          <a-input placeholder="选填" v-model:value="plan.video_play_effective_track_url[0]" />
        </a-form-item>
      </a-form>
    </div>

    <!-- part6------计划名称 -->
    <div class="part-box">
      <h1>计划名称</h1>
      <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-item label="计划名称">
          <a-input placeholder="选填" v-model:value="plan.name" />
        </a-form-item>
        <a-form-item label="创建数量">
          <a-input placeholder="选填" v-model:value="plan.number" />
        </a-form-item>
      </a-form>
    </div>
  </div>
  <a-button @click="cancel">取消</a-button>
  <a-button  type="primary"  @click="nextStep">下一步</a-button>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from "vue";
import { createPlan, getPackage } from "@/api";
import Bus from "@/utils/bus";
import { Moment } from "moment";
import moment from "moment";
import TimeSchedule from "../component/time-schedule.vue";
import Location from "../component/location-auto-release.vue";
import DirectionExclusion from "../component/direction-exclusion.vue";
import CheckBox from "../component/check-box.vue";
import { message } from "ant-design-vue";
import { PriceSlider, LaunchMedia, LaunchScene } from "../component/plan-data";

const PlanEdit = defineComponent({
  components: {
    TimeSchedule,
    Location,
    DirectionExclusion,
    CheckBox,
  },
  setup() {
    const cityCom: any = ref(null); // 地域组件
    const crowdCom: any = ref(null); // 人群组件
    const mediaCom: any = ref(null); // 媒体组件
    const timeCom: any = ref(null); // 时段组件
    const articleCom: any = ref(null); // 文章分类组件
    const workCom: any = ref(null); // 工作状态组件
    const brandCom: any = ref(null); // 手机品牌组件
    const extendCom: any = ref(null); // 智能放量组件
    const state = reactive({
      // 页面变量
      userTarget: {
        // 用户定向相关页面变量
        directType: "BUILD", // 新建定向包-BUILD 选择已有定向包-SELECT
        crowdType: "NONE", // 人群定向 不限-NONE 自定义-CUSTOM
        mediaTarget: "NONE", // 媒体定向 不限-NONE 自定义-CUSTOM
        articleType: "NONE", // 文章分类 不限-NONE 分类-CLASSIFY
        deviceBrand: "NONE", // 手机品牌 不限-NONE 品牌-BRAND
        workStatus: "NONE", // 职业状态 不限-NONE 状态-STATUS
        phonePrice: "NONE", // 手机价格 不限-NONE 自定义-CUNSTOM
        timeDuration: "NONE", // 投放时段 不限-NONE 指定时段-CUSTOM
      },
      plan: {
        // part1 优化目标----------------------------------------------------
        convert_type: "", // 转化跟踪方式
        external_url: undefined, // 落地页
        open_url: "", // 直达链接内容
        // part2 投放位置----------------------------------------------------
        inventory_catalog: "SMART", // 广告位置
        inventory_type: ref<any[]>([]), // 投放媒体-广告位置是首选媒体时必填 否则删除
        scene_inventory: "", // 投放场景-广告位置时首选场景时必填 否则删除
        feed_delivery_search: true, // 搜索快投关键词
        // part3 用户定向----------------------------------------------------
        district: "", // 地域类型
        city: ref<any[]>([]), // 选中的城市或区县
        gender: "NONE", // 性别
        age: ref<any[]>(["NONE"]), // 年龄
        retargeting_tags_include: ref<any[]>([]), // 定向人群
        retargeting_tags_exclude: ref<any[]>([]), //排除人群
        interest_action_mode: "UNLIMITED", // 行为兴趣
        superior_popularity_type: "NONE", // 媒体定向类型 、、 选择自定义媒体包时本字段不传
        flow_package: ref<any[]>([]), // 定向流量包
        exclude_flow_package: ref<any[]>([]), // 排除流量包
        platform: ref<any[]>(["NONE"]), // 平台-字符串数组
        device_type: ref<any[]>(["NONE"]), // 设备类型 不限不传
        ac: ref<any[]>(["unknown"]), // 网络
        hide_if_exists: 0, // 已安装用户 0-不限 1-过滤 2-定向
        hide_if_converted: "AD", // 过滤已转化用户 默认AD广告计划
        converted_time_duration: "CUSTOMER", // 过滤时间
        article_category: ref<any[]>([]), // 文章分类
        carrier: ref<any[]>(["NONE"]), // 运营商
        activate_type: ref<any[]>(["NONE"]), // 新用户
        device_brand: ref<any[]>([]), // 手机品牌
        launch_price: ref<any[]>([0, 11000]), // 手机价格-number[]
        career: ref<any[]>([]), // 职业状态-string[]
        auto_extend_enabled: false, // 智能放量
        auto_extend_targets: ref<any[]>([]), // 可开放定向
        // part4 预算与出价---------------------------------------
        smart_bid_type: "SMART_BID_CUSTOM", // 投放场景
        adjust_cpa: false, // 优化转化成本 0-false 1-true // 投放场景为常规投放时不传
        flow_control_mode: "FLOW_CONTROL_MODE_FAST", // 竞价策略
        budget_mode: "BUDGET_MODE_DAY", // 预算类型 日预算-BUDGET_MODE_DAY 总预算-BUDGET_MODE_TOTAL // 投放场景为放量投放时 固定为日预算
        budget: 0, // 预算
        schedule_type: "SCHEDULE_FROM_NOW", // 投放时间类型
        start_time: "", // 投放开始时间
        end_time: "", // 投放结束时间
        schedule_time: "", // 投放时段
        pricing: "PRICING_CPM", // 付费方式
        cpa_bid: "", // 目标转化出价
        // part5 第三方检测---------------------------------------
        track_url: ref<any[]>([]), // 展示
        action_track_url: ref<any[]>([]), // 有效触点
        video_play_track_url: ref<any[]>([]), // 视频播放
        video_play_done_track_url: ref<any[]>([]), // 视频播完
        video_play_effective_track_url: ref<any[]>([]), // 有效播放
        // part6 计划名称---------------------------------------
        name: "", // 计划名称
        number: 1, // 创建数量
      },
      range: ref<Moment[]>([]), // 投放时间选择
      phonePriceMarks: PriceSlider, //手机价格区间
      optionsList: {
        mediaList: LaunchMedia, // 投放媒体
        sceneList: LaunchScene, // 投放场景
      },
      advertiser_id: 0,
      directList: ref<any[]>([]),
    });
    return {
      ...toRefs(state),
      labelCol: { span: 3 },
      wrapperCol: { span: 8 },
      cityCom,
      crowdCom,
      mediaCom,
      timeCom,
      articleCom,
      workCom,
      brandCom,
      extendCom,
    };
  },
  mounted() {
    this.advertiser_id = Number(this.$route.query.advertiser_id);
    let time = this.getNowFormatDate();
    this.plan.name = `${this.plan.pricing}_${time}`;
    Bus.$on("stepThreeCheck", (val?: any) => {
      console.log("Step3Check");
      Bus.$emit("stepThreeBack");
      // this.beforeCommit();
    });
  },
  methods: {
    //取消
    cancel(){
      this.$router.push('/put/plan-management')
    },
    //下一步
    nextStep(){
        
      this.$router.push('/put/edit-plan/add-creative?'+`advertiser_id=${this.$route.query.advertiser_id}`)
        this.beforeCommit()
    },
    // 提交前处理数据
    beforeCommit() {
      let data: any = {};
      data = JSON.parse(JSON.stringify(this.plan));
      //  一、组件数据收集
      // 1.地域组件
      data.district = this.cityCom.backData().type;
      data.city = this.cityCom.backData().list;
      // 2.定向排除-人群组件
      data.retargeting_tags_include = this.crowdCom
        ? this.crowdCom.backData().direction
        : []; // 定向
      data.retargeting_tags_exclude = this.crowdCom
        ? this.crowdCom.backData().exclusion
        : []; // 排除
      // 3.定向排除-媒体组件
      data.flow_package = this.mediaCom
        ? this.mediaCom.backData().direction
        : []; // 定向
      data.exclude_flow_package = this.mediaCom
        ? this.mediaCom.backData().exclusion
        : []; // 排除
      // 4.checkbox-文章分类
      data.article_category = this.articleCom ? this.articleCom.backData() : [];
      // 5.checkbox-手机品牌
      data.device_brand = this.brandCom ? this.brandCom.backData() : [];
      // 6.checkbox-职业状态
      data.career = this.workCom ? this.workCom.backData() : [];
      // 7.checkbox-智能放量
      data.auto_extend_targets = this.extendCom
        ? this.extendCom.backData()
        : [];
      // 8.投放时段
      data.schedule_time = this.timeCom ? this.timeCom.backData() : [];

      // 二、数据处理
      // 1.搜索快投关键词 feed_delivery_search--true=>HAS_OPEN, false=>DISABLED
      data.feed_delivery_search = data.feed_delivery_search
        ? "HAS_OPEN"
        : "DISABLED";
      // 2.用户定向选择已有定向包时处理
      // 3.缺省代表不限的字段 ['NONE'] => [], 平台、设备类型、运营商carrier、新用户activate_type、(年龄age)、ac(unknown)
      //   3.1平台
      if (data.platform[0] === "NONE") delete data.platform;
      //   3.2设备类型device_type
      if (data.device_type[0] === "NONE") delete data.device_type;
      //   3.3运营商carrier
      if (data.carrier[0] === "NONE") delete data.carrier;
      //   3.4新用户activate_type
      if (data.activate_type[0] === "NONE") delete data.activate_type;
      //   3.5年龄 age
      if (data.age[0] === "NONE") delete data.age;
      //   3.6 ac
      if (data.ac[0] === "unknown") delete data.ac;
      // 4.当过滤已转化用户不是CUSTOMER 时 删除过滤时间
      if (data.hide_if_converted !== "CUSTOMER")
        delete data.converted_time_duration;
      // 5.用户分类为不限时 删除字段
      if (this.userTarget.articleType === "NONE") delete data.article_category;
      // 6.手机品牌为不限时 删除字段device_brand
      if (this.userTarget.deviceBrand === "NONE") delete data.device_brand;
      // 7.职位状态为不限时 删除字段career
      if (this.userTarget.workStatus === "NONE") delete data.career;
      // 8.广告位置不是首选媒体时 删除投放媒体字段 不是首选场景-删除投放场景字段
      if (data.inventory_catalog !== "MANUAL") delete data.inventory_type;
      if (data.inventory_catalog !== "SCENE") delete data.scene_inventory;
      // 9.手机价格为不限时 删除字段launch_price
      if (this.userTarget.phonePrice === "NONE") delete data.launch_price;
      // 10.智能放量开关auto_extend_enabled false=> 0 true=>1 关闭智能放量 删除开放定向字段
      data.auto_extend_enabled = this.numAndBool(data.auto_extend_enabled);
      if (!data.auto_extend_enabled) delete data.auto_extend_targets;
      // 11.投放时段-timeDuration-NONE时 删除schedule_time
      if (this.userTarget.timeDuration === "NONE") delete data.schedule_time;
      // 12.删除plan.name plan.number
      delete data.name;
      delete data.number;
      // 13.投放场景为常规投放时 删除优化转化成本 adjust_cpa 否则删除竞价策略
      if (data.smart_bid_type === "SMART_BID_CUSTOM") {
        delete data.adjust_cpa;
      } else {
        data.adjust_cpa = this.numAndBool(data.adjust_cpa);
        delete data.flow_control_mode;
      }
      // 14.当投放时间为指定时间时 range=>start_time\end_time 否则删除
      if (data.schedule_type === "SCHEDULE_START_END") {
        data.start_time = moment(this.range[0]).format("YYYY-MM-DD");
        data.end_time = moment(this.range[1]).format("YYYY-MM-DD");
      } else {
        delete data.start_time;
        delete data.end_time;
      }
      // 15.投放人群为不限时 删除 retargeting_tags_include 、 retargeting_tags_exclude
      if (this.userTarget.crowdType === "NONE") {
        delete data.retargeting_tags_include;
        delete data.retargeting_tags_exclude;
      }
      // 15.媒体定向为不限时 删除 flow_package 、 exclude_flow_package
      if (this.plan.superior_popularity_type === "NONE") {
        delete data.flow_package;
        delete data.exclude_flow_package;
      } else {
        delete data.superior_popularity_type;
      }
      // 调用接口
      console.log("data", data);
      // return;
      this.savePlan(data);
    },
    // 保存数据
    async savePlan(plan_data: any) {
      let advertiser_id = this.$route.query.advertiser_id;
      let campaign_id = this.$route.query.campaign_id;
      let param = {
        advertiser_id,
        campaign_id,
        ad_num: this.plan.number,
        is_template: 1,
        name: this.plan.name,
        ad_data: { ...plan_data },
      };
      console.log("新建计划数据", param);
      try {
        let { data } = await createPlan(param);
        console.log("请求成功");
        Bus.$emit("stepThreeBack");
      } catch (err) {
        console.log("请求失败", err.msg);
      }
    },
    // 回显之前处理数据
    beforeBackShow(planOrigin: any) {
      // 1.搜索快投关键词 feed_delivery_search--HAS_OPEN=>true, DISABLED=>false
      planOrigin.feed_delivery_search =
        planOrigin.feed_delivery_search === "HAS_OPEN" ? true : false;
      // 2.判断数据里是否有定向包id 决定userTarget.directType用户定向方式页面变量
      // 3.判断数据里是否有定向、排除人群包 决定userTarget.crowdType人群定向方式页面变量

      // 4.空数组转换成不限 [] => ['NONE'], 平台、设备类型、运营商carrier、新用户activate_type
      //   4.1平台
      planOrigin.platform = planOrigin.platform
        ? planOrigin.platform
        : ["NONE"];
      //   4.2设备类型
      planOrigin.device_type = planOrigin.device_type
        ? planOrigin.device_type
        : ["NONE"];
      //   4.3运营商
      planOrigin.carrier = planOrigin.carrier ? planOrigin.carrier : ["NONE"];
      //   4.4新用户activate_type
      planOrigin.activate_type = planOrigin.activate_type
        ? planOrigin.activate_type
        : ["NONE"];
      // 5.根据是否有article_category  字段判断页面变量文章分类
      // planOrigin.article_category= ['SOCIETY', 'ENTERTAINMENT', 'CARS']
      this.userTarget.articleType = planOrigin.article_category
        ? "CLASSIFY"
        : "NONE";
      // 6.根据否有device_brand字段判断页面变量手机品牌
      this.userTarget.deviceBrand = planOrigin.device_brand ? "BRAND" : "NONE";
      // 7.根据否有career字段判断页面变量职业状态
      this.userTarget.workStatus = planOrigin.career ? "STATUS" : "NONE";
      // 8.根据否有launch_price字段判断页面变量手机价格
      this.userTarget.phonePrice = planOrigin.launch_price ? "CUSTOM" : "NONE";
      // 9.根据auto_extend_enabled字段转化trur/false渲染
      planOrigin.auto_extend_enabled = this.numAndBool(
        planOrigin.auto_extend_enabled
      );
      // 10.根据否有schedule_time字段判断页面变量投放时段
      this.userTarget.timeDuration = planOrigin.schedule_time
        ? "CUSTOM"
        : "NONE";
      // 11.投放场景不是常规投放时 优化成本bool转num
      if (planOrigin.smart_bid_type !== "SMART_BID_CUSTOM")
        planOrigin.adjust_cpa = this.numAndBool(planOrigin.adjust_cpa);
      // 12.如果返回数据里有start_time/end_time 将这两个值赋值给range
      if (planOrigin.hasOwnProperty("")) {
        this.range = [
          moment(planOrigin.start_time, "YYYY-MM-DD"),
          moment(planOrigin.end_time, "YYYY-MM-DD"),
        ];
      }
    },
    // 获取已有定向包
    async getPackageList() {
      let param = {
        advertiser_id: this.advertiser_id,
        page: 1,
        page_size: 100,
      };
      let { data } = await getPackage(param);
      console.log("定向包数据", data);
      this.directList = data.audience_packages;
    },
    // 多选框互斥
    checkboxChange(val: any, type: any) {
      // 年龄互斥
      if (type === "age") {
        this.$nextTick(() => {
          if (this.plan.age.indexOf("NONE") == 0 && this.plan.age.length > 1) {
            this.plan.age.splice(this.plan.age.indexOf("NONE"), 1);
          } else if (this.plan.age.indexOf("NONE") > 0) {
            this.plan.age = ["NONE"];
          }
          if (this.plan.age.length === 0) this.plan.age = ["NONE"];
        });
      }
      // 平台互斥
      if (type === "platform") {
        this.$nextTick(() => {
          if (
            this.plan.platform.indexOf("NONE") == 0 &&
            this.plan.platform.length > 1
          ) {
            this.plan.platform.splice(this.plan.platform.indexOf("NONE"), 1);
          } else if (this.plan.platform.indexOf("NONE") > 0) {
            this.plan.platform = ["NONE"];
          }
          if (this.plan.platform.length === 0) this.plan.platform = ["NONE"];
        });
      }
      // 设备类型互斥
      if (type === "device_type") {
        if (
          this.plan.device_type.indexOf("NONE") == 0 &&
          this.plan.device_type.length > 1
        ) {
          this.plan.device_type.splice(
            this.plan.device_type.indexOf("NONE"),
            1
          );
        } else if (this.plan.device_type.indexOf("NONE") > 0) {
          this.plan.device_type = ["NONE"];
        }
        if (this.plan.device_type.length === 0)
          this.plan.device_type = ["NONE"];
      }
      // 网络互斥
      if (type === "ac") {
        console.log("acccc");
        if (this.plan.ac.indexOf("unknown") == 0 && this.plan.ac.length > 1) {
          this.plan.ac.splice(this.plan.ac.indexOf("unknown"), 1);
        } else if (this.plan.ac.indexOf("unknown") > 0) {
          this.plan.ac = ["unknown"];
        }
        if (this.plan.ac.length === 0) this.plan.ac = ["unknown"];
      }
      // 运营商互斥
      if (type === "carrier") {
        this.$nextTick(() => {
          if (
            this.plan.carrier.indexOf("NONE") == 0 &&
            this.plan.carrier.length > 1
          ) {
            this.plan.carrier.splice(this.plan.carrier.indexOf("NONE"), 1);
          } else if (this.plan.carrier.indexOf("NONE") > 0) {
            this.plan.carrier = ["NONE"];
          }
          if (this.plan.carrier.length === 0) this.plan.carrier = ["NONE"];
        });
      }
      // 新用户互斥
      if (type === "activate_type") {
        this.$nextTick(() => {
          if (
            this.plan.activate_type.indexOf("NONE") == 0 &&
            this.plan.activate_type.length > 1
          ) {
            this.plan.activate_type.splice(
              this.plan.activate_type.indexOf("NONE"),
              1
            );
          } else if (this.plan.activate_type.indexOf("NONE") > 0) {
            this.plan.activate_type = ["NONE"];
          }
          if (this.plan.activate_type.length === 0)
            this.plan.activate_type = ["NONE"];
        });
      }
    },
    // 选项改变时联动
    itemChange(type: any) {
      // 投放场景为放量投放 预算类型固定为日预算 清空预算
      if (
        type === "smart_bid_type" &&
        this.plan.smart_bid_type === "SMART_BID_CONSERVATIVE"
      ) {
        this.plan.budget_mode = "BUDGET_MODE_DAY";
        this.plan.budget = 0;
      }
    },
    // 用户定向保存为定向包
    saveDirectPackage() {
      console.log("保存定向包");
    },
    // 工具函数 0=>false 1=>true false=>0 true=>1
    numAndBool(val: any) {
      if (val === 0) return false;
      if (val === 1) return true;
      if (val === true) return 1;
      if (val === false) return 0;
    },
    // 工具函数 获取当前时间
    getNowFormatDate() {
      var date = new Date();
      var seperator1 = "-";
      var seperator2 = ":";
      var month: any = date.getMonth() + 1;
      var strDate: any = date.getDate();
      var strHours: any = date.getHours();
      var strMinutes: any = date.getMinutes();
      var strSeconds: any = date.getSeconds();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      if (strHours >= 0 && strHours <= 9) {
        strHours = "0" + strHours;
      }
      if (strMinutes >= 0 && strMinutes <= 9) {
        strMinutes = "0" + strMinutes;
      }
      if (strSeconds >= 0 && strSeconds <= 9) {
        strSeconds = "0" + strSeconds;
      }
      var currentdate =
        date.getFullYear() +
        seperator1 +
        month +
        seperator1 +
        strDate +
        " " +
        strHours +
        seperator2 +
        strMinutes +
        seperator2 +
        strSeconds;
      currentdate = currentdate.replace(/-/g, "_").replace(/ /g, "_");
      currentdate = currentdate.slice(5, 19);
      return currentdate;
    },
    // 互斥项切换-工具函数

  },
  // beforeUnmount() {
  //   Bus.$off("stepThreeCheck");
  // },
});

export default PlanEdit;
</script>
<style lang="scss" scoped>
.plan-edit {
  .part-box {
    min-height: 100px;
    border-bottom: 1px solid rgb(230, 230, 230);
    padding-bottom: 30px;
    h1 {
      font-weight: bold;
      height: 40px;
      line-height: 40px;
    }
  }
}
</style>
