<template>
  <div class="creativity-content">
    <div
      :class="{
        'program-type': contentType === 'PROGRAM',
        'common-type': true,
      }"
    >
      <p style="color: gray" v-show="contentType === 'PROGRAM'">
        图片创意个数：{{
          count.imageType1 + count.imageType2 + count.imageType3
        }}/12 视频创意个数： {{ count.videoType1 + count.videoType2 }}/10
      </p>
      <p style="color: gray" v-show="contentType === 'CUSTOM'">
        创意个数：{{ creatives.length }}/10
      </p>
      <div class="type-box">
        <div
          :class="{
            'type-item': true,
            'current-type': currentType === item.value,
          }"
          v-for="(item, index) in typeList"
          :key="index"
          @click="currentType = item.value"
        >
          <i class="iconfont icon-tupian"></i>
          <span>{{ item.label }}</span>
          <p class="count-num" v-show="count[item.value] > 0">
            {{ count[item.value] }}
          </p>
        </div>
      </div>
      <div class="material-box" v-if="contentType === 'PROGRAM'">
        <div
          class="material-container"
          v-for="(item, index) in image_list"
          :key="index"
        >
          <div
            :class="{
              'type-item': true,
              'video-type':
                item.image_mode === 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL' ||
                item.image_mode === 'CREATIVE_IMAGE_MODE_VIDEO',
              'video-type1':
                item.image_mode === 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL',
              'video-type2': item.image_mode === 'CREATIVE_IMAGE_MODE_VIDEO',
              'image-type':
                item.image_mode === 'CREATIVE_IMAGE_MODE_LARGE_VERTICAL' ||
                item.image_mode === 'CREATIVE_IMAGE_MODE_LARGE' ||
                item.image_mode === 'CREATIVE_IMAGE_MODE_SMALL',
              'image-type1':
                item.image_mode === 'CREATIVE_IMAGE_MODE_LARGE_VERTICAL',
              'image-type2': item.image_mode === 'CREATIVE_IMAGE_MODE_LARGE',
              'image-type3': item.image_mode === 'CREATIVE_IMAGE_MODE_SMALL',
            }"
            @mouseenter="item.delete_cover = true"
            @mouseleave="item.delete_cover = false"
          >
            <i
              class="iconfont icon-guanbi1"
              @click="deleteImageListItem(item, index)"
              v-show="item.delete_cover"
            ></i>
            <div
              @mouseenter="item.video_cover = true"
              @mouseleave="item.video_cover = false"
              class="video-box"
              v-if="
                item.image_mode === 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL' ||
                item.image_mode === 'CREATIVE_IMAGE_MODE_VIDEO'
              "
            >
              <video :src="item.video_url"></video>
              <i class="iconfont icon-ziyuan" v-show="item.video_url"></i>
              <div class="cover" v-show="item.video_cover">
                <a-button size="small" @click="selectMaterial(item, 'video')"
                  >视频库</a-button
                >
              </div>
            </div>
            <div
              class="image-box"
              @mouseenter="item.image_cover = true"
              @mouseleave="item.image_cover = false"
            >
              <img :src="item.image_url" alt="" />
              <div class="cover" v-show="item.image_cover">
                <p
                  style="text-align: center"
                  v-if="
                    item.image_mode === 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL' ||
                    item.image_mode === 'CREATIVE_IMAGE_MODE_VIDEO'
                  "
                >
                  <a-button
                    size="small"
                    :disabled="!item.video_url"
                    @click="madeCover(item)"
                    >生成封面</a-button
                  >
                  <a-button size="small" @click="selectMaterial(item, 'image')"
                    >图片库</a-button
                  >
                </p>
                <a-button
                  size="small"
                  v-else
                  @click="selectMaterial(item, 'image')"
                  >图片库</a-button
                >
              </div>
            </div>
          </div>
        </div>
        <div class="add-btn" @click="addMaterial">
          <i class="iconfont icon-jia1"></i>
          <span>添加</span>
        </div>
      </div>
      <div class="custom-box" v-else>
        <div class="no-pane" v-if="creatives.length === 0">
          <p>
            <i class="iconfont icon-tupian"></i> <br />
            <span>点击按钮添加创意</span> <br />
            <a-button class="add-btn" type="primary" @click="addMaterial"
              >新增创意</a-button
            >
          </p>
        </div>
        <div class="panes" v-if="creatives.length > 0">
          <a-button
            class="add-btn"
            type="primary"
            @click="addMaterial"
            :disabled="creatives.length === 10"
            >新增创意</a-button
          >
          <a-tabs
            v-model:activeKey="activeKey"
            type="editable-card"
            @edit="onEdit"
            hide-add
          >
            <a-tab-pane
              v-for="pane in creatives"
              :key="pane.key"
              :tab="`${pane.title.substring(0, 3)}${
                pane.title.length > 3 ? '...' : ''
              }`"
              :closable="pane.closable"
            >
              <div class="pane-content">
                <a-form :label-col="{ span: 3 }" :wrapper-col="{ span: 8 }">
                  <a-form-item label="创意内容">
                    <!-- 。。。。。。 -->
                    <div class="material-container">
                      <div
                        :class="{
                          'type-item': true,
                          'video-type':
                            pane.image_mode ===
                              'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL' ||
                            pane.image_mode === 'CREATIVE_IMAGE_MODE_VIDEO',
                          'video-type1':
                            pane.image_mode ===
                            'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL',
                          'video-type2':
                            pane.image_mode === 'CREATIVE_IMAGE_MODE_VIDEO',
                          'image-type':
                            pane.image_mode ===
                              'CREATIVE_IMAGE_MODE_LARGE_VERTICAL' ||
                            pane.image_mode === 'CREATIVE_IMAGE_MODE_LARGE' ||
                            pane.image_mode === 'CREATIVE_IMAGE_MODE_SMALL',
                          'image-type1':
                            pane.image_mode ===
                            'CREATIVE_IMAGE_MODE_LARGE_VERTICAL',
                          'image-type2':
                            pane.image_mode === 'CREATIVE_IMAGE_MODE_LARGE',
                          'image-type3':
                            pane.image_mode === 'CREATIVE_IMAGE_MODE_SMALL',
                        }"
                      >
                        <div
                          @mouseenter="pane.video_cover = true"
                          @mouseleave="pane.video_cover = false"
                          class="video-box"
                          v-if="
                            pane.image_mode ===
                              'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL' ||
                            pane.image_mode === 'CREATIVE_IMAGE_MODE_VIDEO'
                          "
                        >
                          <video :src="pane.video_url"></video>
                          <i
                            class="iconfont icon-ziyuan"
                            v-show="pane.video_url"
                          ></i>
                          <div class="cover" v-show="pane.video_cover">
                            <a-button
                              size="small"
                              @click="selectMaterial(pane, 'video')"
                              >视频库</a-button
                            >
                          </div>
                        </div>
                        <div
                          class="image-box"
                          @mouseenter="pane.image_cover = true"
                          @mouseleave="pane.image_cover = false"
                        >
                          <img :src="pane.image_url" alt="" />
                          <div class="cover" v-show="pane.image_cover">
                            <p
                              style="text-align: center"
                              v-if="
                                pane.image_mode ===
                                  'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL' ||
                                pane.image_mode === 'CREATIVE_IMAGE_MODE_VIDEO'
                              "
                            >
                              <a-button
                                size="small"
                                :disabled="!pane.video_url"
                                @click="madeCover(pane)"
                                >生成封面</a-button
                              >
                              <a-button
                                size="small"
                                @click="selectMaterial(pane, 'image')"
                                >图片库</a-button
                              >
                            </p>
                            <a-button
                              size="small"
                              v-else
                              @click="selectMaterial(pane, 'image')"
                              >图片库</a-button
                            >
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- 。。。。。。。。。 -->
                  </a-form-item>
                  <a-form-item label="创意标题"
                    ><a-input
                      style="width: 300px"
                      placeholder="请输入"
                      v-model:value="pane.title"
                      :maxlength="30"
                    ></a-input
                  ></a-form-item>
                </a-form>
              </div>
            </a-tab-pane>
          </a-tabs>
        </div>
      </div>
    </div>

    <!-- 选择素材库素材 -->
    <a-modal
      v-model:visible="visible"
      :title="materialType === 'video' ? '选择视频' : '选择图片'"
      @ok="handleOk"
      width="720px"
    >
      <material-select
        ref="materialCom"
        :materialType="materialType"
        v-if="visible"
      ></material-select>
    </a-modal>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref, watch } from "vue";
import {} from "@/api";
import { message } from "ant-design-vue";
import materialSelect from "./material-select.vue";
const creativityContent = defineComponent({
  props: ["type"],
  components: { materialSelect },
  setup(props) {
    const materialCom: any = ref(null);
    const state = reactive({
      visible: false, // 选择素材
      contentType: "PROGRAM", // 创意方式 PROGRAM-程序化创意 CUSTOM-自定义创意
      creatives: ref<any[]>([]), // 自定义创意渲染数组
      image_list: ref<any[]>([]), // 程序化创意渲染数组
      currentType: "videoType1", // 当前素材类型 默认竖版视频
      currentCreativity: {
        image_mode: "CREATIVE_IMAGE_MODE_SMALL",
        image_id: 0,
        video_id: 0,
        image_url: "",
        video_url: "",
        image_cover: false,
        video_cover: false,
        delete_cover: false,
      }, // 当前操作自定义模块
      currentImage: {
        image_mode: "",
        image_id: 0,
        video_id: 0,
        image_url: "",
        video_url: "",
        image_cover: false,
        video_cover: false,
        delete_cover: false,
      }, // 当前操作程序化模块
      materialType: "video", // 选取素材类型
      typeList: [
        {
          label: "竖版视频",
          value: "videoType1",
          mode: "CREATIVE_IMAGE_MODE_VIDEO_VERTICAL",
        },
        {
          label: "横板视频",
          value: "videoType2",
          mode: "CREATIVE_IMAGE_MODE_VIDEO",
        },
        {
          label: "大图竖图",
          value: "imageType1",
          mode: "CREATIVE_IMAGE_MODE_LARGE_VERTICAL",
        },
        {
          label: "大图横图",
          value: "imageType2",
          mode: "CREATIVE_IMAGE_MODE_LARGE",
        },
        {
          label: "小图",
          value: "imageType3",
          mode: "CREATIVE_IMAGE_MODE_SMALL",
        },
      ],
      count: {
        videoType1: 0, // 竖版视频
        videoType2: 0, // 横板视频
        imageType1: 0, // 大图竖图
        imageType2: 0, // 大图横图
        imageType3: 0, // 小图
      }, // 素材类型计数
      panes: [],
      activeKey: 1,
      videoModeList: [
        "CREATIVE_IMAGE_MODE_VIDEO_VERTICAL",
        "CREATIVE_IMAGE_MODE_VIDEO",
      ], // 视频类型
      imageModeList: [
        "CREATIVE_IMAGE_MODE_LARGE_VERTICAL",
        "CREATIVE_IMAGE_MODE_LARGE",
        "CREATIVE_IMAGE_MODE_SMALL",
      ], // 视频类型
    });
    watch(props.type, (newVal, oldVal) => {
      console.log("ccc", newVal, oldVal);
      // return
      let old_type =
        state.contentType === "CUSTOM" ? "CUSTOM" : "STATIC_ASSEMBLE";
      if (newVal.creative_material_mode !== old_type) {
        console.log("cccvvv");
        state.contentType =
          newVal.creative_material_mode === "CUSTOM" ? "CUSTOM" : "PROGRAM";
        state.creatives = [];
        state.image_list = [];
        state.count = {
          videoType1: 0, // 竖版视频
          videoType2: 0, // 横板视频
          imageType1: 0, // 大图竖图
          imageType2: 0, // 大图横图
          imageType3: 0, // 小图
        };
      }
    });
    return { ...toRefs(state), materialCom };
  },
  mounted() {
    this.typeChange(this.$props.type);
  },
  methods: {
    typeChange(val: any) {
      this.contentType = val === "CUSTOM" ? "CUSTOM" : "PROGRAM";
    },
    // 程序化-添加创意 -自定义
    addMaterial() {
      console.log("添加创意");
      let mode = "";
      this.typeList.forEach((item) => {
        if (item.value === this.currentType) mode = item.mode;
      });
      switch (mode) {
        case "CREATIVE_IMAGE_MODE_VIDEO_VERTICAL":
          this.count.videoType1++;
          break;
        case "CREATIVE_IMAGE_MODE_VIDEO":
          this.count.videoType2++;
          break;
        case "CREATIVE_IMAGE_MODE_LARGE_VERTICAL":
          this.count.imageType1++;
          break;
        case "CREATIVE_IMAGE_MODE_LARGE":
          this.count.imageType2++;
          break;
        case "CREATIVE_IMAGE_MODE_SMALL":
          this.count.imageType3++;
          break;
      }
      if (this.contentType === "PROGRAM") {
        console.log(this.count.videoType1);
        this.image_list.push({
          image_mode: mode,
          image_id: 0,
          video_id: 0,
          image_url: "",
          video_url: "",
          image_cover: false,
          video_cover: false,
          delete_cover: false,
        });
      } else {
        console.log("添加自定义");
        let key =
          this.creatives.length === 0
            ? 1
            : this.creatives[this.creatives.length - 1].key + 1;
        this.creatives.push({
          image_mode: mode, // 素材类型
          title: "创意" + key, // 创意标题
          image_id: 0, // 图片id（视频封面id）
          video_id: 0, // 视频id
          image_url: "",
          video_url: "",
          image_cover: false,
          video_cover: false,
          key,
        });
        this.currentCreativity = this.creatives[this.creatives.length - 1];
        this.activeKey = key;
      }
    },
    // 程序化-选取视频/封面
    selectMaterial(item: any, type: any) {
      if (this.contentType === "PROGRAM") {
        this.currentImage = item;
      } else {
        this.currentCreativity = item;
      }
      this.materialType = type;
      this.visible = true;
    },
    // 程序化-删除创意
    deleteImageListItem(item: any, index: any) {
      this.image_list.splice(index, 1);
      this.countCut(item.image_mode);
    },
    // count-cut
    countCut(mode: any) {
      switch (mode) {
        case "CREATIVE_IMAGE_MODE_VIDEO_VERTICAL":
          this.count.videoType1--;
          break;
        case "CREATIVE_IMAGE_MODE_VIDEO":
          this.count.videoType2--;
          break;
        case "CREATIVE_IMAGE_MODE_LARGE_VERTICAL":
          this.count.imageType1--;
          break;
        case "CREATIVE_IMAGE_MODE_LARGE":
          this.count.imageType2--;
          break;
        case "CREATIVE_IMAGE_MODE_SMALL":
          this.count.imageType3--;
          break;
      }
    },
    // 生成封面
    madeCover(val: any) {
      if (this.contentType === "PROGRAM") {
        this.currentImage.image_url =
          this.currentImage.video_url +
          "?x-oss-process=video/snapshot,t_0,f_jpg,m_fast";
      } else {
        this.currentCreativity.image_url =
          this.currentCreativity.video_url +
          "?x-oss-process=video/snapshot,t_0,f_jpg,m_fast";
      }
      message.success("生成封面成功");
    },
    // 自定义-标签操作
    onEdit(targetKey: string | MouseEvent, action: string) {
      if (action === "add") {
        this.addMaterial();
      } else {
        this.deleteCreativesItem(targetKey);
      }
    },
    // 自定义-删除创意
    deleteCreativesItem(val: any) {
      console.log("del", val);
      this.creatives.forEach((item, index) => {
        if (item.key === val) {
          this.creatives.splice(index, 1);
          this.countCut(item.image_mode);
        }
      });
    },
    // 确定素材选择
    handleOk() {
      // 程序化选取素材
      let data = this.materialCom.backMaterial();
      if (data.flag) {
        console.log("选中的素材", data.material);
        if (this.contentType === "PROGRAM") {
          if (this.materialType === "video") {
            this.currentImage.video_id = data.material.id;
            this.currentImage.video_url = data.material.url;
          } else {
            this.currentImage.image_id = data.material.id;
            this.currentImage.image_url = data.material.url;
          }
          console.log(this.image_list);
        } else {
          if (this.materialType === "video") {
            this.currentCreativity.video_id = data.material.id;
            this.currentCreativity.video_url = data.material.url;
          } else {
            this.currentCreativity.image_id = data.material.id;
            this.currentCreativity.image_url = data.material.url;
          }
          console.log(this.creatives);
        }
        this.visible = false;
      } else {
        return message.error("请先选择素材");
      }
    },
    // 向父组件传递数据
    backData() {
      let data = JSON.parse(JSON.stringify(this.creatives));
      let data_list: any = [];
      // 程序化创意
      if (this.contentType === "PROGRAM") {
      } else {
        // 自定义创意
        // 组建新对象数组
        if (data.length > 0) {
          data.forEach((item: any) => {
            let list_item: any = {
              image_mode: item.image_mode, // 素材类型
              title_material: { title: item.title }, // 标题
              image_materials: [{ image_info: { image_id: item.image_id } }], // 图片素材时上传 数组长度1
              video_material: {
                image_info: { image_id: item.image_id },
                video_info: { video_id: item.video_id },
              }, // 视频素材时上传
            };
            if (this.imageModeList.includes(item.image_mode)) {
              // 图片素材 删除视频
              delete list_item.video_material;
            } else {
              delete list_item.image_materials;
            }
            data_list.push(list_item);
          });
        }
      }
      return data_list;
    },
  },
});
// 要传的
// 自定义创意：creatives: [{
//   image_mode: '', // 素材类型
//   title: '', // 创意标题
//   image_id: 0, // 图片id（视频封面id）
//   video_id: 0, // 视频id
// }]
// 程序化创意：image_list:[{
//   image_mode:'', // 素材类型
//   image_id: 0, // 图片id（视频封面id）
//   video_id: 0, // 视频id
// }]
// 小图 CREATIVE_IMAGE_MODE_SMALL 横板大图 CREATIVE_IMAGE_MODE_LARGE 竖版大图 CREATIVE_IMAGE_MODE_LARGE_VERTICAL
// 竖版视频 CREATIVE_IMAGE_MODE_VIDEO_VERTICAL 横板视频 CREATIVE_IMAGE_MODE_VIDEO
// 传之前遍历删除imagr_url\video_url\video_cover\image_cover\delete_cover

// 更新
// 自定义创意
creative_list: [
  {
    image_mode: "", // 素材类型
    title_material: { title: "" }, // 标题
    image_materials: [{ image_info: { image_id: 0 } }], // 图片素材时上传 数组长度1
    video_material: {
      image_info: { image_id: 0 },
      video_info: { video_id: 0 },
    }, // 视频素材时上传
  },
];

export default creativityContent;
</script>
<style lang="scss" scoped>
.creativity-content {
  .common-type {
    width: 800px;
    min-height: 300px;
    padding: 0 10px;
  }
  .program-type {
    border: 2px solid rgb(230, 230, 230);
    border-radius: 4px;
  }
  .type-box {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .type-item {
      width: 146px;
      height: 80px;
      border: 2px solid rgb(200, 200, 200);
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      cursor: pointer;
      position: relative;
      i {
        font-size: 40px;
        color: rgb(189, 187, 187);
      }
      .count-num {
        color: white;
        position: absolute;
        top: 0;
        right: 0;
        width: 18px;
        height: 18px;
        line-height: 18px;
        text-align: center;
        background: rgb(105, 105, 255);
      }
    }
    .current-type {
      border: 2px solid rgb(83, 115, 255);
    }
  }
  .material-box,
  .pane-content {
    overflow: hidden;
    margin-top: 20px;
    padding-bottom: 10px;
    .add-btn {
      width: 100px;
      height: 100px;
      background: rgb(243, 243, 243);
      border: 2px dashed rgb(200, 200, 200);
      border-radius: 4px;
      text-align: center;
      float: left;
      cursor: pointer;
      i {
        font-size: 20px;
        color: gray;
        display: block;
        line-height: 20px;
        margin-top: 36px;
      }
      span {
        display: block;
      }
    }
    .material-container {
      width: 244px;
      height: 160px;
      // background: rgb(211, 211, 211);
      float: left;
      margin: 0 20px 20px 0;
      border: 1px dashed rgb(214, 214, 214);
      .type-item {
        cursor: pointer;
        position: relative;
        .icon-guanbi1 {
          position: absolute;
          top: -12px;
          right: 0;
          opacity: 0.7;
          z-index: 1000;
          &:hover {
            color: red;
          }
        }
        .video-box,
        .image-box {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          img,
          video {
            max-width: 100%;
            max-height: 100%;
          }
          .icon-ziyuan {
            position: absolute;
            font-size: 20px;
            z-index: 100;
          }
        }
        .cover {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          background: rgba(0, 0, 0, 0.301);
          z-index: 1000;
          p {
            line-height: 28px;
          }
          .ant-btn {
            width: 80px;
            font-size: 13px;
          }
        }
      }
      .video-type {
        padding: 0 4px;
        background: rgb(219, 219, 219);
        display: flex;
        justify-content: space-around;
        align-items: center;
        div {
          background: rgb(241, 241, 241);
        }
      }
      .video-type1 {
        height: 100%;
        div {
          width: 110px;
          height: 140px;
        }
      }
      .video-type2 {
        margin-top: 25px;
        height: 100px;
        div {
          width: 110px;
          height: 80px;
        }
      }
      .image-type {
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgb(219, 219, 219);
        .image-box {
          background: rgb(241, 241, 241);
        }
      }
      .image-type1 {
        width: 120px;
        height: 100%;
        margin: 0 auto;
        .image-box {
          width: 100px;
          height: 140px;
        }
      }
      .image-type2 {
        width: 100%;
        height: 100%;
        margin: 0 auto;
        .image-box {
          width: 224px;
          height: 140px;
        }
      }
      .image-type3 {
        width: 140px;
        height: 100px;
        margin: 30px auto;
        .image-box {
          width: 120px;
          height: 80px;
        }
      }
    }
    .material-container:nth-child(3n) {
      margin-right: 0;
    }
  }
  .custom-box {
    border: 2px solid rgb(240, 240, 240);
    margin-top: 10px;
    position: relative;
    padding-bottom: 10px;
    .no-pane {
      width: 100%;
      height: 300px;
      display: flex;
      align-items: center;
      justify-content: center;
      p {
        text-align: center;
        line-height: 40px;
        i {
          font-size: 40px;
          color: gray;
        }
        span {
          color: gray;
        }
      }
    }
    .panes {
      .add-btn {
        position: absolute;
        top: 4px;
        right: 4px;
        z-index: 100;
      }
      .pane-content {
        padding: 10px;
      }
    }
  }
}
</style>
