<template>
  <div>
    <el-dialog
      :visible.sync="visiblePushDialog"
      title="批量推送到账户"
      top="2vh"
      @close="closeStateDialog"
      width="70%"
      center
    >
      <el-form>
        <!-- 选择应用 -->
        <el-form-item label="选择应用">
          <el-select
            v-model="pushCondition.pkg"
            @change="_putinFetchAccount"
            filterable
            clearable
            placeholder="请选择"
            style="width: 200px"
          >
            <el-option
              v-for="item in pkgList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

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

        <el-form-item label="" class="footer-btn">
          <el-button @click="closeStateDialog">取消</el-button>
          <el-button type="primary" @click="comfirmPush">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

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

import treeTransfer from "el-tree-transfer"; // 引入
export default {
  components: {
    treeTransfer,
  },

  props: {
    ids: {
      type: Array,
      require: true,
    },
    pkg: {
      type: String,
      default: "com.ym.blc",
    },
  },

  data() {
    return {
      visiblePushDialog: false,
      pushCondition: {
        pkg: "",
        advertiserIds: [], // 被选中的广告主id
      },
      pkgList: [],

      mode: "transfer", // 切换模式, 现有树形穿梭框模式transfer 和通讯录模式addressList
      title: ["全选", "取消全选"],
      generateData: [], // 投放账户源数据
      toData: [], // 投放账户已选中数据
      targetList: [],
    };
  },

  created() {
    this.pushCondition.pkg = this.pkg;
  },

  methods: {
    /* 网络请求 */

    // 获取App名称配置列表
    _menuSelectApps: function () {
      menuSelectApps({
        platformId: 4,
        menuCode: "putin.apps",
      }).then((res) => {
        this.pkgList = res.result.data;
      });
    },

    /* 获取投放账户 */
    _putinFetchAccount() {
      putinFetchAccount({
        pkg: this.pushCondition.pkg,
        type: 1,
      }).then((res) => {
        this.generateData = res.result.data;
      });
    },

    // 上传素材到广告主
    _uploadToAdver() {
      const advertiserIds = this.pushCondition.advertiserIds;
      if (advertiserIds && advertiserIds.length > 0) {
        let params = {
          advertiserIds: advertiserIds.toString(),
          ids: this.ids.toString(),
        };
        uploadToAdver(params)
          .then((res) => {
            if (res.status == 200) {
              this.$message.success("素材推送成功!");
              this.closeStateDialog();
            }
          })
          .catch((err) => {
            this.$message.error("素材推送失败!");
            console.log(err);
            this.closeStateDialog();
          });
      } else {
        this.$message.warning("请您先选择广告主!");
        return;
      }
    },
    /**************************/

    /* 进入页面初始化 */
    init() {
      // 确认进入弹窗时 有没有拿到ids
      if (this.ids && this.ids.length > 0) {
        this.visiblePushDialog = true;
        this._menuSelectApps(); // 获取app 列表
        this._putinFetchAccount();
      } else {
        this.$message.warning("请您先选择素材!");
        this.$emit("closeDialog");
      }
    },

    /* 关闭弹窗 */
    closeStateDialog() {
      this.visiblePushDialog = false;
      this.toData = [];
      this.pushCondition.pkg = "";
      this.generateData = [];
      this.$emit("closeDialog");
    },

    // 监听穿梭框组件添加
    add(generateData, toData, obj) {
      // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
      // 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
      this.toData = toData; // 这里将你选定的广告主绑定到初始化数据中
      this.getAdvertiserIds();
    },

    // 监听穿梭框组件移除
    remove(generateData, toData, obj) {
      // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
      // 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
      this.toData = toData;
    },

    // 获取广告主id
    getAdvertiserIds() {
      this.toData.forEach((item) => {
        item.children.forEach((item2) => {
          this.pushCondition.advertiserIds.push(item2.id);
        });
      });
    },

    /* 确认推送 */
    comfirmPush() {
      this._uploadToAdver();
    },
  },
};
</script>

<style scoped>
.footer-btn {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>