<template>
    <div class="generate">
        <div v-if="type_.type2 == 'Sketchboard'||type_.type2 == 'Printboard'"  class="generate_checkbox">
            <div>
                <label>
                    <input
                        type="checkbox"
                        v-model="checkbox[0].type"
                        @click="setKeyword(0)"
                    />
                    <span>Image Only</span>
                </label>
            </div>
            <div>
                <label>
                    <input
                        type="checkbox"
                        v-model="checkbox[1].type"
                        @click="setKeyword(1)"
                    />
                    <span>Text Only</span>
                </label>
            </div>
            <div>
                <label>
                    <input
                        type="checkbox"
                        v-model="checkbox[2].type"
                        @click="setKeyword(2)"
                    />
                    <span>Text-Image</span>
                </label>
            </div>
        </div>
        <div v-else class="input_box">
            <input
                class="search_input"
                placeholder="Promopt input"
                v-model="searchPictureName"
                @keydown.enter="getLibraryList()"
            />
            <div class="generage_btn started_btn">Generate</div>
        </div>
        <div v-if="type_.type2 == 'Sketchboard'||type_.type2 == 'Printboard'" class="generage_img">
            <div class="upload_item">
                <div
                    class="upload_file_item"
                    v-for="(file, index) in sketchboardList"
                    :key="file"
					@click.stop="setSketchboardItem(file)"
					:class="[file?.checked?'active':'',checkboxImage? 'forbidden':'']"
                >
                    <div
                        class="upload_file_item_content"
                        v-show="file?.status === 'uploading'"
                    >
                        <a-spin :indicator="indicator" tip="Uploading..." />
                    </div>
                    <div
                        class="upload_file_item_content"
                        v-show="file?.status === 'done'"
                    >
                        <img :src="file?.imgUrl" class="upload_img" />
                        <div class="operate_file_block">
                            <div class="select_img_type">
                                <div
                                    class="select_category"
                                    @click.stop="showFileCategory(file)"
                                >
                                    {{ getSketchLabel(file.category) }}
                                    <div
                                        :class="[
                                            'icon',
                                            'iconfont',
                                            'icon-xiala',
                                            file.categoryShow
                                                ? 'icon_rotate'
                                                : '',
                                        ]"
                                    ></div>
                                </div>
                                <div
                                    class="category_list"
                                    v-show="file.categoryShow"
                                >
                                    <div
                                        :class="[
                                            'category_item',
                                            file.category == cate.value
                                                ? 'select_category_item'
                                                : '',
                                        ]"
                                        v-for="(
                                            cate, index
                                        ) in sketchCatecoryList"
                                        :key="index"
                                        @click.stop="selectFileCategory(file, cate)"
                                    >
                                        {{ cate.label }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div
                            class="delete_file_block"
                            @click="deleteFile(index)"
                        >
                            <span class="icon iconfont icon-shanchu"></span>
                        </div>
                    </div>
                </div>
                <div
                    class="upload_file_item upload_component"
                    v-show="sketchboardList.length != 8"
                >
                    <a-upload
                        :action="uploadUrl + '/api/element/upload'"
                        list-type="picture-card"
                        :data="{
                            ...upload,
                        }"
						:disabled="checkbox[1].type"
                        :headers="{ Authorization: token }"
                        v-model:file-list="sketchboardList"
                        :before-upload="beforeUpload"
                        multiple
                        :maxCount="8 - sketchboardList.length"
                        accept=".jpg,.png,.jpeg,.bmp"
                        @change="(file) => fileUploadChange(file)"
                    >
                        <div
                            class="upload_tip_block"
                            v-show="sketchboardList.length != 8"
                        >
                            <i class="fi fi-br-upload"></i>
                            <!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
                        </div>
                    </a-upload>
                </div>
            </div>
        </div>
        <div v-else class="generage_img">
            <div
                class="generage_img_item"
                v-for="(item, index) in fileList"
                :key="item.imgUrl"
                @click="generageAdd(item)"
                :class="{ active: item?.checked }"
            >
                <img v-lazy="item.imgUrl" alt="" />
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { LoadingOutlined } from "@ant-design/icons-vue";
import { message, Upload } from "ant-design-vue";
import { defineComponent, computed, h, ref, nextTick } from "vue";
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import GO from "@/tool/GO";
import { getCookie } from "@/tool/cookie";
import { getUploadUrl } from "@/tool/util";
export default defineComponent({
    props: ["msg"],
    setup() {
        // console.log(prop.msg);
        let checkbox = ref([
            {
                name: "image",
                type: false,
            },
            {
                name: "text",
                type: true,
            },
            {
                name: "text-image",
                type: false,
            },
        ]);
		let checkboxImage = ref()
        let imgList = ref([]);
        let selectImgList: any = ref([]);
        let selectImgListIds: any = ref([]);
        let isShowLoading: any = ref(false);
        let selectCode: any = ref("");
        let currentPage: any = ref(1);
        let searchPictureName = ref("");
        let pageSize = ref(20);
        let total = ref(0);
        let searcMaterialhName: any = ref(""); //搜索名字
        let designType: any = ref(null);
        let store = useStore();
        let fileList: any = ref([
            {
                imgUrl: "https://illlustrations.co/static/32913fde3ee589609d98f16c51fcffa6/ee604/day8-printer.png",
                id_: 1,
            },
            {
                imgUrl: "https://illlustrations.co/static/3edf742257c1d1460eb2e2f998a1df96/ee604/day4-polariod.png",
                id_: 2,
            },
            {
                imgUrl: "https://illlustrations.co/static/475732e63175f7dc3bf93c84af8b3d11/ee604/day6-open-vault.png",
                id_: 3,
            },
            {
                imgUrl: "https://illlustrations.co/static/ca430674ef56f1a3a91f705670fd8512/ee604/day17-walkie-talkie.png",
                id_: 4,
            },
        ]);
		let sketchboardList:any = ref([])
		let collectionElementid = ref()
		let level2Type = ref('')
        return {
            imgList,
            selectImgList,
            selectImgListIds,
            isShowLoading,
            selectCode,
            currentPage,
            searchPictureName,
            pageSize,
            total,
            searcMaterialhName,
            designType,
            checkbox,
            store,
            fileList,
			sketchboardList,
			collectionElementid,
			level2Type,
			checkboxImage,
        };
    },
    data(prop) {
        return {
            indicator: h(LoadingOutlined, {
                style: {
                    fontSize: "2.4rem",
                },
                spin: true,
            }),
            upload: {
                isPin: 0,
                level1Type: prop.msg,
                timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
            },
            token: "",
            uploadUrl: "",
            moodboarList: computed(() => {
                return useStore().state.UploadFilesModule.moodboard;
            }),
            type_: {
                type1: "generate",
                type2: prop.msg,
            },
            sketchCatecoryList: [
                {
                    value: "Outwear",
                    label: "Outwear",
                },
                {
                    value: "Blouse",
                    label: "Blouse",
                },
                {
                    value: "Dress",
                    label: "Dress",
                },
                {
                    value: "Trousers",
                    label: "Trousers",
                },
                {
                    value: "Skirt",
                    label: "Skirt",
                },
            ],
			
        };
    },
    mounted() {
        // this.fileList.forEach((item,index)=>{
        // 	item.checked = true
        // 	item.type_ = 'generate'
        // 	item.id_ = GO.id++
        // })
        // this.store.commit("addGenerateFils", this.fileList);
        this.token = getCookie("token") || "";
        this.uploadUrl = getUploadUrl();
		console.log(getUploadUrl());
		
    },
    computed: {
        getSketchLabel(value: any) {
            return (value: any) => {
                let lable = "";
                for (let item of this.sketchCatecoryList) {
                    if (item.value === value) {
                        lable = item.label;
                        break;
                    }
                }
                return lable;
            };
        },
    },
    methods: {
        generageAdd(data: any) {
            data.type_ = this.type_;
            this.store.commit("addGenerateMaterialFils", data);
        },
        beforeUpload(file: any) {
            const isJpgOrPng =
                file.type === "image/jpeg" ||
                file.type === "image/png" ||
                file.type === "image/jpg" ||
                file.type === "image/bmp";
            if (!isJpgOrPng) {
                message.error("You can only upload Image file!");
            }
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                message.error("Image must smaller than 5MB!");
            }
            return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
        },
        setKeyword(num: any) {
            this.checkbox.forEach((v: any) => {
                v.type = false;
            });
			
			nextTick().then(()=>{
				this.checkbox[num].type = true
			})
			this.$emit('generateCheckbox',this.checkbox[0].type)
			this.checkboxImage = this.checkbox[1].type
			if(this.checkboxImage){
				this.sketchboardList.forEach((v:any)=>{
					v.checked = false
				})
			}
        },
        getLibraryList() {
            // let data = {
            //     level1Type: this.selectCode,
            //     level2Type: this.designType,
            //     page: this.currentPage,
            //     pictureName: this.searchPictureName,
            //     size: this.pageSize,
            // };
            // this.isShowLoading = true;
            // Https.axiosPost(Https.httpUrls.queryLibraryPage, data)
            //     .then((rv: any) => {
            //         this.imgList = rv.content;
            //         this.total = rv.total;
            //         this.isShowLoading = false;
            //     })
            //     .catch((res) => {
            //         this.isShowLoading = false;
            //     });
        },
        fileUploadChange(data: any) {
			console.log(data);
			
            let file = data.file;
            if (file.status === "done") {
                let res = JSON.parse(file.xhr.response);
                file.id = res.data.id;
                file.imgUrl = res.data.url;
                file.resData = res.data;
                file.type_ = "upload";
                file.id_ = GO.id++;
                file.category = "Outwear";
                let fileList = this.sketchboardList.filter(
                    (v: any) => v.status === "done"
                );
                let arr = this.store.state.UploadFilesModule.sketchboard;
                if (arr.length >= 8) {
                    message.error("You can select up to 8 images");
                } else {
                    // this.store.commit("setSketchboardFile", fileList);
					this.sketchboardList = fileList
                    // this.store.commit("clearMoodTemplateId");
                }
            } else if (file.status === "error") {
                let index = -1;
                this.sketchboardList.forEach((ele: any, index1: any) => {
                    if (file.uid === ele.uid) {
                        index = index1;
                    }
                });
                if (index > -1) {
                    this.sketchboardList.splice(index, 1);
                }
                message.error(file.name + "upload failed");
            }
        },
        showFileCategory(file: any) {
            file.categoryShow = true;
            document.addEventListener("click", this.hiddenFileCategory);
        },
        selectFileCategory(file: any, cate: any) {
            file.category = cate.value;
			file.categoryShow = false
            // this.store.commit("setSketchboardFile", this.sketchboardList);
        },
        hiddenFileCategory() {
            for (let item of this.sketchboardList) {
                item.categoryShow = false;
            }
            document.removeEventListener("click", this.hiddenFileCategory);
        },

		setSketchboardItem(item:any){
			if(this.checkboxImage){
				return
			}
			if(item.checked){
				item.checked = false
			}else{
				this.sketchboardList.forEach((v:any)=>{
					if(v.checked){
						v.checked = false
					}
				})
				item.checked = true
			}
			this.collectionElementid = item.id
			this.level2Type = item.category
		},
        deleteFile(item: any) {
            if (item.type_ == "generate" || item.type_ == "material") {
                this.store.commit("addGenerateMaterialFils", item);
            } else {
                this.sketchboardList =
                    this.store.state.UploadFilesModule.moodboardFiles;
                let moodboard;
                this.store.state.UploadFilesModule.moodboardFiles.forEach(
                    (items: any, index: Number) => {
                        if (items.id_ == item.id_) {
                            moodboard = index;
                        }
                    }
                );
                this.sketchboardList.splice(moodboard, 1);
                this.store.commit("setSketchboardFile", this.sketchboardList);
            }
            this.store.commit("clearMoodTemplateId");
        },
        closeModal() {
            // this.myMaterialModalShow = false
            this.searchPictureName = "";
            this.designType = null;
            this.selectImgList = [];
            this.selectImgListIds = [];
            this.imgList = [];
            this.currentPage = 1;
            this.pageSize = 10;
            this.total = 0;
        },
    },
});
</script>
<style lang="less">
.generate {
    height: 30rem;
    overflow-x: hidden;
    border-right: 1px solid #e5e5e5;
    &.generate::-webkit-scrollbar {
        display: none;
    }

    .generate_checkbox,
    .generage_input {
        display: flex;
        align-items: center;
        position: sticky;
        top: 0;
        background: #fff;
        padding-top: 2.5rem;
        padding-bottom: 2rem;
        z-index: 2;
    }
    .generate_checkbox {
        div {
            margin-right: 4rem;
            label {
                display: flex;
                cursor: pointer;
                input {
                    margin-right: 0.5rem;
                    padding-left: 1.5rem;
                }
                span {
                    font-size: 12px;
                    font-weight: 500;
                }
            }
        }
    }
    .generage_input {
    }
    .generage_img {
        display: flex;
        flex-wrap: wrap;
        .generage_img_item {
            cursor: pointer;
            margin: 0 2rem 2rem 0;
            &.active {
					opacity: 0.5;
					// border: 2px solid;
					border-radius: 1rem;
					img {
						transform: scale(0.9);
					}
				}
            img {
                width: 10rem;
                height: 10rem;
            }
        }
        .upload_item {
            .upload_file_item {
				&.active {
					opacity: 0.5;
					// border: 2px solid;
					border-radius: 1rem;
					transform: scale(0.9);
					img {
					}
				}
				&.forbidden{
					cursor:not-allowed;
					img{
						cursor:not-allowed;
					}
				}
                .upload_file_item_content {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    height: 100%;
                    position: relative;
                    cursor: pointer;
                    .upload_img {
                        display: block;
                        max-height: 100%;
                        max-width: 100%;
                    }

                    .delete_file_block {
                        display: none;
                        width: 3.2rem;
                        height: 3.2rem;
                        background: rgba(0, 0, 0, 0.6);
                        border-radius: 0.4rem;
                        position: absolute;
                        top: 0.9rem;
                        right: 0.9rem;
                        text-align: center;
                        line-height: 3.2rem;
                        left: auto;
                        .icon-shanchu {
                            font-size: 1.6rem;
                            color: #fff;
                        }
                    }

                    &:hover .delete_file_block {
                        display: block;
                    }

                    .operate_file_block {
                        width: 100%;
                        height: 3rem;
                        font-size: 1.6rem;
                        color: #ffffff;
                        position: absolute;
                        left: 0;
                        bottom: 0;

                        .select_img_type {
                            height: 100%;
                            line-height: 3rem;
                            text-align: center;
                            background: rgba(0, 0, 0, 0.6);
                            position: relative;

                            .select_category {
                                display: flex;
                                align-items: center;
                                justify-content: center;

                                .icon-xiala {
                                    margin-left: 0.8rem;
                                }
                            }

                            .icon_rotate {
                                -moz-transform: rotate(180deg);
                                -webkit-transform: rotate(180deg);
                                transform: rotate(180deg);
                                animation-direction: 0.5s;
                            }

                            .category_list {
                                position: absolute;
                                width: 100%;
                                cursor: pointer;
                                position: absolute;
                                // top: 3.1rem;
                                margin-top: 0.2rem;
                                left: 0;
                                background: rgba(0, 0, 0, 0.4);
                                border: 1px solid #343579;
                                border-radius: 0.8rem;
                                // overflow: hidden;
                                z-index: 2;
                                height: 9rem;
                                overflow-x: hidden;
                                &.category_list::-webkit-scrollbar {
                                    display: none;
                                }

                                .category_item {
                                    text-align: left;
                                    font-size: 1.4rem;
                                    padding: 1rem 1.9rem;
                                    line-height: 1.6rem;

                                    &.select_category_item {
                                        background: linear-gradient(
                                            160deg,
                                            #ac2a3b,
                                            #292161
                                        );
                                    }

                                    &:hover {
                                        background: linear-gradient(
                                            160deg,
                                            #ac2a3b,
                                            #292161
                                        );
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
.my_material_modal {
    border-radius: 2rem;
    .ant-modal-close {
        width: 3.6rem;
        height: 3.6rem;
        position: absolute;
        top: -1.8rem;
        right: -1.8rem;
    }

    .ant-modal-header {
        display: none;
    }

    .ant-modal-body {
        background: #f2f3fb;
        height: 80vh;
        min-height: 72rem;
        overflow-y: hidden;
        padding: 0;
    }

    .my_material_header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 6.6rem;
        background: #f7f7f7;
        padding: 0 3.4rem 0 3.1rem;

        .my_material_title {
            font-size: 1.8rem;
            color: #030303;
            font-weight: 500;
        }

        .my_material_header_right {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .content_search_block {
                margin-right: 5rem;
                display: flex;

                .search_input {
                    width: 30rem;
                    padding-left: 1.5rem;
                    height: 4rem;
                    line-height: 3.8rem;
                    background: #ffffff;
                    border: 0.1rem solid #f1f1f1;
                    font-size: 1.6rem;
                    font-weight: 400;

                    &::placeholder {
                        color: #c2c2c2;
                    }
                }

                .search_icon_block {
                    width: 6rem;
                    height: 4rem;
                    line-height: 4rem;
                    text-align: center;
                    background: #343579;
                    cursor: pointer;

                    .icon-sousuo {
                        font-size: 2rem;
                        color: #ffffff;
                    }
                }
            }

            .icon_close {
                color: rgba(174, 178, 183, 1);
                font-size: 2.4rem;
                cursor: pointer;
            }
        }
    }

    .my_material_content {
        padding: 0 3rem 3.5rem 3rem;
        height: calc(100% - 6.6rem);
        position: relative;

        .material_content_top {
            padding: 1.3rem 0 2.1rem;
            height: 7rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-sizing: border-box;

            .material_content_top_title {
                font-size: 20px;
                color: #030303;
            }

            .material_content_top_right {
                display: flex;
                align-items: center;

                .select_block {
                    background: #ffffff;
                    color: #1a1a1a !important;
                    margin-right: 2.3rem;

                    .icon-xiala {
                        color: #1a1a1a !important;
                    }
                }

                .check_all_block {
                    display: flex;
                    align-items: center;
                    font-size: 1.6rem;
                    color: #64686d;
                    cursor: pointer;

                    &.check_all {
                        color: #1a1a1a;
                    }

                    .check_block {
                        width: 2.4rem;
                        height: 2.4rem;
                        background: #ebecf4;
                        border: 0.1rem solid #64686d;
                        padding: 0.3rem;
                        margin-right: 0.7rem;

                        .check_block_body {
                            width: 100%;
                            height: 100%;
                            background: #343579;
                        }
                    }
                }
            }
        }

        .material_content_body {
            width: 100%;
            height: calc(100% - 19rem);
            overflow-y: auto;
            position: relative;

            .content_img_item {
                display: inline-block;
                vertical-align: top;
                padding: 0 1.4rem;
                margin-bottom: 2.8rem;

                .content_img_item_block {
                    border: 0.1rem solid transparent;
                    width: 16.5rem;
                    height: 16.5rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: relative;
                    cursor: pointer;

                    &.select_item_img {
                        border-color: #343579;
                    }

                    .print_content_img {
                        width: 100%;
                        height: 100%;
                    }

                    .content_img {
                        max-width: 100%;
                        max-height: 100%;
                    }
                }
                .content_img_name {
                    width: 16.5rem;
                    height: 3.5rem;
                    line-height: 3.5rem;
                    white-space: nowrap;
                    text-align: center;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    font-size: 1.4rem;
                    color: #030303;
                }
            }
        }

        .no_data_block {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 99;

            &.loading_block {
                background: rgba(0, 0, 0, 0.2);
            }
        }

        .material_confirm {
            width: 9.8rem;
            height: 3.6rem;
            line-height: 3.6rem;
            font-size: 1.4rem;
            text-align: center;
            margin: 0 auto;
            color: #ffffff;
            background: #343579;
            cursor: pointer;
            margin-top: 2rem;
        }

        .table_pagination {
            position: absolute;
            bottom: 3.5rem;
            left: 0;
            width: 100%;
            text-align: center;
            margin-top: 5rem;
        }
    }
}
</style>
