<template>
  <el-dialog
    :visible.sync="showDialog"
    close-on-click-modal
    title="创建素材组"
    top="2vh"
    width="30%"
    center
    @closed="closeDialog"
  >
    <el-form>
      <!-- 创建素材组名称 -->
      <el-form-item label="素材组名称">
        <el-input v-model="materialGroup.createName" style="width: 200px" />
      </el-form-item>

      <el-form-item label="已选择的应用">
        <el-input v-model="pkg" style="width: 200px" :disabled="true" />
      </el-form-item>

      <!-- 确定&&取消 -->
      <el-form-item label="">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="createMaterial">确定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { getSelectApps, getCreateOrUpdate } from "@/api/cloud";

export default {
  props: {
    selectMaterial: {
      type: Array,
      required: true,
    },

    pkg: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      showDialog: true,
      materialGroup: {
        createName: "",
      },
      selectApps: [], // 选择应用
    };
  },

  created() {
    this.APIgetSelectApps(); // 获取所有的应用
  },

  methods: {
    // 创意素材组获取列表
    APIgetSelectApps() {
      const params = {
        platformId: 4,
        menuCode: "putin.apps",
        isGroup: "group",
      };
      getSelectApps(params).then((res) => {
        // console.log("创意素材组下的下拉列表", res);
        this.selectApps = res.result.data;
      });
    },

    closeDialog() {
      this.$emit("closeDialog");
    },

    createMaterial() {
      /* 判断素材组名称是否填写 */
      if (this.materialGroup.createName == "") {
        this.$message({
          message: "请填写素材组名称！",
          type: "warning",
        });
        return;
      }

      let paramsItem = [];
      this.selectMaterial.forEach((item) => {
        let obj = {
          materialId: item.local_video_id,
        };
        paramsItem.push(obj);
      });
      let params = {
        pkg: this.pkg,
        materialGroupName: this.materialGroup.createName,
        items: paramsItem,
      };
      getCreateOrUpdate({
        ...params,
      })
        .then((res) => {
          if (res.status === 200) {
            this.closeDialog();
            this.$message.success("提交成功！");
            // this.APIgetgrouplist();
          } else {
            this.$message.error("请填写素材组名并选择应用！");
          }
        })
        .catch((err) => {
          this.$message.error("网络错误，提交失败...");
          console.log(err);
        });
    },
  },
};
</script>

<style>
</style>