<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="putinBaseInfo.landingType">
              <el-radio-button
                v-for="item in globleEnums.campaignType"
                :key="item.value"
                :label="item.value"
                >{{ item.name }}</el-radio-button
              >
            </el-radio-group>
          </el-form-item>

          <!-- 应用下载链接 应用选择 -->
          <el-form-item
            v-if="putinBaseInfo.landingType === 2"
            label="应用下载链接:"
          >
            <el-input
              style="width: 500px"
              v-model="putinBaseInfo.landUrl"
            ></el-input>

            <!-- 选择应用 -->
            <el-select
              v-model="putinBaseInfo.pkg"
              filterable
              clearable
              placeholder="请选择"
              style="width: 200px"
              @change="putinFetchAccount()"
            >
              <el-option
                v-for="item in pkgList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <!-- 落地页链接 -->
          <el-form-item
            v-if="putinBaseInfo.landingType === 5"
            label="落地页链接:"
          >
            <el-input
              class="apk-input"
              v-model="putinBaseInfo.landUrl"
            ></el-input>
          </el-form-item>

          <!-- 选择投放账户 -->
          <el-form-item label="选择投放账户">
            <tree-transfer
              :mode="mode"
              :title="title"
              :from_data="generateData"
              :to_data="toData"
              :defaultProps="{ label: 'label' }"
              @addBtn="add"
              @removeBtn="remove"
              width="80%"
              height="360px"
              filter
            >
            </tree-transfer>
          </el-form-item>

          <!-- 投放目标 -->
          <el-form-item label="投放目标">
            <el-radio-group
              v-model="testPutinBaseInfo.putinTarget"
              @change="testChange"
            >
              <el-radio-button
                v-for="item in testPutinTarget"
                :key="item.value"
                :label="item.value"
                >{{ item.label }}</el-radio-button
              >
            </el-radio-group>
          </el-form-item>

          <!-- 转化目标 -->
          <el-form-item
            label="转化目标"
            v-if="testPutinBaseInfo.putinTarget == 0"
          >
            <div class="col-start-start" style="margin-bottom: 20px">
              <template v-for="(item, index) of targetList">
                <div
                  class="row-center-start"
                  style="margin-top: 20px"
                  :key="item.id"
                >
                  <el-button
                    type="primary"
                    plain
                    ref="targetBtn"
                    @click="changeBtn(item, index)"
                  >
                    {{ item.label }}
                  </el-button>

                  <!-- 选择框 -->
                  <el-select
                    v-show="isShow"
                    ref="selectTarget"
                    v-model="targetData"
                    placeholder="请选择"
                    @visible-change="visibleChangeTarget($event)"
                    @change="changeTarget"
                    @blur="hiddenForm"
                    :class="index == indexValue ? '' : 'activeClass'"
                  >
                    <el-option
                      v-for="item in targetItemList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>

                  <div style="margin-left: 20px">{{ item.nameTag }}</div>
                </div>
              </template>
            </div>
          </el-form-item>

          <!-- 选择营销目标 -->
          <!-- <el-radio-group
              v-model="putinBaseInfo.landingType"
              @change="marketTarget"
            >
              <template v-for="(item, index) in globleEnums.campaignType">
                <el-radio
                  :label="item.value"
                  :key="index"
                  :value="marketValue"
                  >{{ item.name }}</el-radio
                >
              </template>
            </el-radio-group> -->

          <!-- 计划名称 -->
          <!-- <div>
              <span>计划名称</span>
              <el-input
                v-model="planName"
                style="width: 500px; margin-top: 20px"
                placeholder="请输入名称"
              ></el-input>
            </div> -->

          <!-- 单日运算 -->
          <!-- <div style="margin-top: 20px">
              <span>单日运算</span>
              <el-radio-group
                v-model="putinBaseInfo.budget"
                @change="marketTarget"
              >
                <template v-for="(item, index) in globleEnums.dayBudget">
                  <el-radio-button :label="item.value" :key="index"
                    >{{ item.name }}
                  </el-radio-button>
                </template>
              </el-radio-group>
            </div> -->
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { putinFetchAccount, menuSelectApps } from "@/api/report";

import treeTransfer from "el-tree-transfer"; // 引入
export default {
  props: {
    /* 接收快手公共参数 */
    globleEnums: {
      type: Object,
      default() {
        return {};
      },
    },
    /* 最后要提交的给接口的参数之一 */
    putinBaseInfo: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      marketValue: "", // 营销目标值
      planName: "", // 计划名称
      pkgList: [], // APP名称列表
      generateData: [], // 投放账户原数据 就是你穿梭框里的数据
      toData: [], // 投放账户已选中数据
      title: ["全选", "取消全选"],
      mode: "transfer", // 切换模式, 现有树形穿梭框模式transfer 和通讯录模式addressList
      /* 测试假数据 */
      testPutinBaseInfo: {
        putinTarget: 0, // 投放目标
      },
      testPutinTarget: [
        { label: "转化量", value: 0 },
        { label: "点击量", value: 1 },
        { label: "展示量", value: 2 },
      ],
      targetList: [],
    };
  },
  components: {
    treeTransfer, // 树形框引入
  },
  created() {
    this.putinFetchAccount(); // 获取投放账号列表
    this.getAPPList(); // 获取App名称列表
  },
  methods: {
    // 获取投放账号列表
    putinFetchAccount: function () {
      putinFetchAccount({
        pkg: this.putinBaseInfo.pkg,
        type: this.platformId,
      }).then((res) => {
        this.generateData = res.result.data;
        // this.materialGroupList();
      });
    },

    /* 获取APP名称列表 */
    getAPPList() {
      menuSelectApps({
        platformId: 4,
        menuCode: "creativity",
      }).then((res) => {
        this.pkgList = res.result.data;
        console.log("123aaa", this.pkgList);
      });
    },

    /* 添加投放账户 */
    add() {},

    /* 删除投放账户 */
    remove() {},

    /* 数据改变测试 */
    testChange() {
      console.log("投放目标: ", this.testPutinBaseInfo.putinTarget);
    },
  },
};
</script>

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

.drawer-item-title {
  margin-top: 15px;
  font-size: 20px;
  color: #000000;
  font-weight: 500;
}

.drawer-item-con {
  padding-left: 20px;
  box-sizing: border-box;
}

.apk-input {
  width: 700px;
}
</style>

