<template>
    <div class="creativity-add">
        <div class="part-box" style="padding-bottom: 20px">
            <h3 class="title">添加创意</h3>
            <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-form-item label="创意方式">
                    <a-radio-group v-model:value="creativityAdd.creative_material_mode">
                        <a-radio value="STATIC_ASSEMBLE">程序化创意</a-radio>
                        <a-radio value="CUSTOM">自定义创意</a-radio>
                    </a-radio-group>
                </a-form-item>
                <a-form-item label="创意内容">
                    <creativity-content :type="creativityAdd" ref="materialCom"></creativity-content>
                </a-form-item>
                <a-form-item
                    label="创意标题"
                    v-show="creativityAdd.creative_material_mode === 'STATIC_ASSEMBLE'"
                >
                    <p
                        v-for="(item, index) in creativityAdd.title_list"
                        :key="index"
                        style="width: 700px"
                    >
                        <a-input
                            placeholder="请输入"
                            :maxlength="30"
                            v-model:value="item.title"
                            style="width: 300px; margin-right: 10px"
                        ></a-input>
                        <span v-show="index === 0">
                            <a-button
                                :disabled="creativityAdd.title_list.length === 10"
                                style="margin-right: 10px"
                                type="primary"
                                @click="addTitle"
                            >添加创意标题</a-button>
                            <span
                                style="color: gray"
                            >创意标题个数：{{ creativityAdd.title_list.length }}/10</span>
                        </span>
                        <i
                            v-show="index !== 0"
                            class="iconfont icon-shanchu"
                            style="color: gray; cursor: pointer"
                            @click="deleteTitle(index)"
                        ></i>
                    </p>
                </a-form-item>
                <a-form-item label="推广卡片">
                    <push-card ref="cardCom"></push-card>
                </a-form-item>
                <a-form-item label="来源">
                    <a-input
                        v-model:value="creativityAdd.source"
                        :maxlength="10"
                        placeholder="请输入"
                        style="width: 300px"
                    ></a-input>
                </a-form-item>
                <a-form-item label="自动生成视频素材">
                    <a-switch
                        checked-children="开"
                        un-checked-children="关"
                        v-model:checked="creativityAdd.creative_auto_generate_switch"
                    />
                </a-form-item>
                <a-form-item label="广告评论">
                    <a-switch
                        checked-children="开"
                        un-checked-children="关"
                        :disabled="true"
                        v-model:checked="creativityAdd.is_comment_disable"
                    />
                </a-form-item>
                <a-form-item label="客户端视频下载">
                    <a-switch
                        checked-children="开"
                        un-checked-children="关"
                        v-model:checked="creativityAdd.ad_download_status"
                    />
                </a-form-item>
                <a-form-item label="创意展现">
                    <a-radio-group v-model:value="creativityAdd.creative_display_mode">
                        <a-radio value="CREATIVE_DISPLAY_MODE_CTR">优选模式</a-radio>
                        <a-radio value="CREATIVE_DISPLAY_MODE_RANDOM">轮播模式</a-radio>
                    </a-radio-group>
                </a-form-item>
            </a-form>
        </div>
        <div class="part-box">
            <h3 class="title">创意分类</h3>
            <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-form-item label="创意分类">
                    <a-cascader
                        v-model:value="kind"
                        :options="[]"
                        placeholder="请选择"
                        style="width: 500px"
                    />
                </a-form-item>
                <a-form-item label="创意标签">
                    <a-input
                        addon-after="添加（回车）"
                        v-model:value="label"
                        style="width: 500px"
                        @keyup.enter="addKeyWords"
                        :maxlength="10"
                        :disabled="creativityAdd.ad_keywords.length === 20"
                    />
                    <div class="label-box">
                        <div class="title-box">
                            <h3>
                                已添加
                                <span>({{ creativityAdd.ad_keywords.length }}/20)</span>
                            </h3>
                            <a-button type="link" @click="creativityAdd.ad_keywords = []">全部清空</a-button>
                        </div>
                        <div class="label-container">
                            <p
                                class="label-item"
                                v-for="(item, index) in creativityAdd.ad_keywords"
                                :key="index"
                            >
                                <span :title="item">{{ item }}</span>
                                <i
                                    class="iconfont icon-guanbi"
                                    @click="creativityAdd.ad_keywords.splice(index, 1)"
                                ></i>
                            </p>
                        </div>
                    </div>
                </a-form-item>
            </a-form>
        </div>
        <a-button @click="goToPlanEdit">上一步</a-button>
        <a-button type="primary" @click="saveCreative">保存</a-button>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from "vue";
import { createCustomCreative } from "@/api";
import Bus from "@/utils/bus";
import { message } from "ant-design-vue";
import creativityContent from "../component/creativity-content.vue";
import PushCard from "../component/push-card.vue";

const CreativityAdd = defineComponent({
    components: { creativityContent, PushCard },
    setup() {
        const materialCom: any = ref(null);
        const cardCom: any = ref(null);
        const state = reactive({
            label: "", // 创意标签输入框
            kind: ref<any[]>([]), // 创意分类
            creativityAdd: {
                creative_material_mode: "STATIC_ASSEMBLE", // 创意方式，当值为"STATIC_ASSEMBLE"表示程序化创意，其他情况不传字段
                creatives: ref<any[]>([]), //自定义素材信息, 最多支持10个创意。首选投放位置和创意类型决定素材规格。当为程序化创意时，该字段不填数据，值为[]
                title_list: [
                    {
                        title: "", // 标题
                    },
                ], // 程序化创意时传 自定义不传
                // 卡片以下
                source: "",
                creative_display_mode: "CREATIVE_DISPLAY_MODE_CTR", // 创意展现方式
                creative_auto_generate_switch: false, // 自动生成素材0-关闭 1-开启
                is_comment_disable: true, // 广告评论0-关闭 1-开启
                ad_download_status: true, // 客户端下载视频0-关闭 1-开启
                // 创意分类
                third_industry_id: 0, // 创意分类 三级级联选择器
                ad_keywords: ref<any[]>([]), // 创意标签string[]
            },
            creativityClassify: {},
        });
        return {
            ...toRefs(state),
            labelCol: { span: 3 },
            wrapperCol: { span: 8 },
            materialCom,
            cardCom,
        };
    },
    mounted() {
        this.getClassify();
        //初始化拿到编辑列表
    },
    methods: {
        //返回上一页
        goToPlanEdit(){

            
        this.$router.push("/put/edit-plan/plan-edit?"+`advertiser_id=${this.$route.query.advertiser_id}`)
        },
        //保存配置
        saveCreative() {
            this.beforeCommit();
        },
        // 获取创意分类
        getClassify() {
            console.log("获取分类");
        },
        // 提交前数据处理
        beforeCommit() {
            let data: any = {};
            // 一、从素材组件和卡片组件获取数据
            if (this.creativityAdd.creative_material_mode === "CUSTOM") {
                // 自定义创意
                data.creative_list = this.materialCom.backData();
            }
            data.task_id = 1
            // 二、数据处理
            // 1.创意方式，当值为"STATIC_ASSEMBLE"表示程序化创意，其他情况不传字段
            // if (data.creative_material_mode === "CUSTOM")
            //   delete data.creative_material_mode;
            // 2.添加ad_data
            data.ad_data = {
                third_industry_id: this.creativityAdd.third_industry_id,
                ad_keywords: this.creativityAdd.ad_keywords,
                source: this.creativityAdd.source,
                creative_auto_generate_switch: this.creativityAdd
                    .creative_auto_generate_switch
                    ? 1
                    : 0,
                is_comment_disable: this.creativityAdd.is_comment_disable ? 0 : 1,
                ad_download_status: this.creativityAdd.ad_download_status ? 0 : 1,
                creative_display_mode: this.creativityAdd.creative_display_mode,
            };
            data.advertiser_id = 0;
            data.ad_id = 0;
            this.creatCreativity(data);
        },
        // 走创建接口
        async creatCreativity(val: any) {
            // this.creativityAdd.creative_material_mode === "CUSTOM"
            let { data } = await createCustomCreative(val);
        },
        // 渲染前数据处理
        beforeBackshow(creativityOrigin: any) {
            // 1.创意方式页面
            if (!creativityOrigin.creative_material_mode)
                creativityOrigin.creative_material_mode = "CUSTOM";
        },
        // 程序化-新增标题
        addTitle() {
            this.creativityAdd.title_list.push({ title: "" });
        },
        // 程序化-删除标题
        deleteTitle(index: any) {
            this.creativityAdd.title_list.splice(index, 1);
        },
        // 添加创意标签
        addKeyWords() {
            if (!this.label) return message.error("标签内容不能为空");
            if (this.label.length > 10)
                return message.error("标签长度不能超过10个字符");
            if (this.creativityAdd.ad_keywords.includes(this.label))
                return message.error("标签已存在");
            this.creativityAdd.ad_keywords.push(this.label);
            this.label = "";
        },
    },
    beforeUnmount() {
        Bus.$off("stepFourCheck");
    },
});

export default CreativityAdd;
</script>
<style lang="scss" scoped>
.creativity-add {
    .title {
        line-height: 30px;
        font-weight: bold;
        padding-left: 10px;
    }
    .label-box {
        width: 500px;
        height: 200px;
        border: 1px solid rgb(230, 230, 230);
        margin-top: 10px;
        .title-box {
            width: 100%;
            height: 36px;
            line-height: 36px;
            display: flex;
            justify-content: space-between;
            padding: 0 0 0 10px;
            border-bottom: 1px solid rgb(230, 230, 230);
        }
        .label-container {
            height: 163px;
            width: 100%;
            padding: 10px;
            overflow: auto;
            .label-item {
                width: 220px;
                height: 24px;
                padding: 0 4px;
                line-height: 24px;
                background: rgb(241, 241, 241);
                border: 1px solid rgb(223, 220, 220);
                float: left;
                margin-right: 10px;
                margin-bottom: 10px;
                span {
                    display: inline-block;
                    width: 180px;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    word-break: break-all;
                }
                i {
                    float: right;
                    font-size: 13px;
                    cursor: pointer;
                }
            }
        }
    }
}
</style>
