<template>
<div class="price-config-container">
    <div class="title-text">轮播图配置</div>
    <a-row type="flex" class="swiper-config">
        <a-col v-for="swiper in this.swipers" :key="swiper.id" :value="swiper.id">
            <div class="swiper-div">
                <div class="img-container">
                    <img @click="updateSwiper(swiper)" class="image" v-if="swiper.imageUrl" :src="swiper.imageUrl" />
                    <div class="swiper-image-status">
                        <a-tooltip v-if="swiper.status === 'ENABLE'" placement="bottom" title="已发布">
                            <a-icon type="star" theme="filled" class="published-swiper" @click="changeSwiperStatus(swiper,false)" />
                        </a-tooltip>
                        <a-tooltip v-else placement="bottom" title="未发布">
                            <a-icon type="star" @click="changeSwiperStatus(swiper,true)" />
                        </a-tooltip>
                        <a-icon type="delete" @click="removeSwiper(swiper)" />
                    </div>
                </div>
                <div class="course-name">
                    <span>{{swiper.courseName}}</span>
                </div>
            </div>
        </a-col>

        <a-col>
            <div class="create-swiper-div" @click="displaySwiperCreator">
                <div class="tool-bar-text">
                    <a-icon type="plus" class="btn-icon" /><br>
                    创建轮播图
                </div>
            </div>
        </a-col>
    </a-row>

    <div class="title-text home-tags">首页分类标签</div>

    <a-row type="flex" class="swiper-config-hometags">
        <a-col :span="24">
            <div>
                <a-tag v-for="(tag) in this.homeTags" :key="tag.id" color="blue" closable @close="deleteHomeTag(tag)">{{tag.name}}</a-tag>
                <a-button icon="plus" @click="showHomeTagEditor" size="small">
                    添加标签
                </a-button>
            </div>
        </a-col>
    </a-row>

    <div class="title-text rec-video">首页推荐视频</div>

    <a-row type="flex" class="swiper-config">
        <a-col v-for="video in this.homeRecVideos" :key="video.id" :value="video.id">
            <div class="swiper-div">
                <div class="img-container">
                    <img class="image" v-if="video.courseLogoUrl" :src="video.courseLogoUrl" />
                    <div class="swiper-image-status">
                        <a-icon type="delete" @click="removeHomeRecVideo(video)" />
                    </div>
                </div>
                <div class="course-name">
                    <span>{{video.courseName}}</span>
                </div>
            </div>
        </a-col>

        <a-col>
            <div class="create-swiper-div" @click="openHomeVideoEditor">
                <div class="tool-bar-text">
                    <a-icon type="plus" class="btn-icon" /><br>
                    添加视频
                </div>
            </div>
        </a-col>
    </a-row>

    <template>
        <a-modal :visible="showSwiperCreator" :title="currentSwiper.courseId ? '编辑轮播图':'新建轮播图'" @ok="saveSwiper" @cancel="closeSwiperCreator" :destroyOnClose="true" centered>
            <a-form>
                <a-form-item label="编辑封面">
                    <div class="siwper-editor">
                        <a-upload name="file" :multiple="false" list-type="picture-card" :show-upload-list="false" :customRequest="uploadSwiperImg" :before-upload="beforeUpload">

                            <img v-if="currentSwiper.imageUrl" :src="currentSwiper.imageUrl" :width="200" />
                            <div v-else>
                                <a-icon :type="loading ? 'loading' : 'plus'" />
                                <div class="ant-upload-text">
                                    上传封面
                                </div>
                            </div>
                        </a-upload>
                    </div>
                </a-form-item>
                <a-form-item label="关联课程">
                    <a-select show-search placeholder="查询课程" :default-active-first-option="false" :show-arrow="false" :filter-option="false" :not-found-content="null" @search="onCourseSearch" @change="onCourseChange" v-model="currentSwiper.courseId">
                        <a-select-option v-for="course in this.courses" :key="course.id" :value="course.id">
                            {{ course.name }}
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="轮播图状态">
                    <a-radio-group name="radioGroup" v-model="currentSwiper.status" default-value="DISABLE">
                        <a-radio value="ENABLE">已发布</a-radio>
                        <a-radio value="DISABLE">未发布</a-radio>
                    </a-radio-group>
                </a-form-item>
            </a-form>
        </a-modal>
    </template>

    <template>
        <a-modal :visible="showHomeTagCreator" title="添加首页标签" @ok="saveHomeTags" @cancel="hideHomeTagEditor" :destroyOnClose="true" centered>
            <a-form>
                <a-form-item label="选择首页标签">
                    <a-select mode="multiple" v-model="tags">
                        <a-select-option v-for="(t) in this.availTags" :key="t.id" :value="t.id">
                            {{ t.name }}
                        </a-select-option>
                    </a-select>
                </a-form-item>
            </a-form>
        </a-modal>
    </template>

    <template>
        <a-modal :visible="showHomeVideoEditor" title="添加推荐视频" @ok="saveHomeRecVideos" @cancel="hideHomeVideoEditor" :destroyOnClose="true" centered>
            <a-form>
                <a-form-item label="选择推荐视频">
                    <a-select mode="multiple" v-model="selectedVideos">
                        <a-select-option v-for="(t) in this.availHomeRecVideos" :key="t.id" :value="t.id">
                            {{ t.name }}
                        </a-select-option>
                    </a-select>
                </a-form-item>
            </a-form>
        </a-modal>
    </template>

</div>
</template>

<script>
import {
    disposereq
} from "@/utils/util";
import {
    saveSwiper,
    fetchAllSwiper,
    fetchHomeTags,
    fetchAvaliHomeTags,
    addHomeTag,
    removeHomeTag,
    fetchRecVideos,
    fetchAvailRecVideos,
    addHomeRecVideos,
    removeHomeRecVideos,
    removeSwiper as deleteSwiper,
    changeSwiperStatus,
} from "@/api/biz/settings";
import {
    uploadFile
} from "@/api/biz/resource";
import {
    fetchList as fetchCourseList
} from "@/api/biz/course";
import {
    fetchList as fetchTagList
} from "@/api/biz/courseTag";

export default {
    data() {
        return {
            showHomeVideoEditor: false,
            homeRecVideos: [],
            availHomeRecVideos: [],
            selectedVideos: [],
            homeTags: [],
            tags: [],
            availTags: [],
            swipers: [],
            courses: [],
            showHomeTagCreator: false,
            showSwiperCreator: false,
            swiper: {},
            currentSwiper: {},
            loading: false,
            imageUrl: "",
            uploadFile,
            fullPageSize: 10000,
        };
    },
    created() {
        fetchCourseList({
            pageIndex: 1,
            pageSize: this.fullPageSize,
            status: "UP",
            allow: "ALL",
        }).then((resp) => {
            this.courses = resp.data;
        });
        fetchAllSwiper().then((resp) => {
            this.swipers = resp.datas;
        });
        this.fetchAllHomeTags();
        this.fetchHomeRecVideos();
    },
    beforeUpdate() {},
    methods: {
        removeHomeRecVideo(video) {
            removeHomeRecVideos(video.id).then((resp) => {
                this.fetchHomeRecVideos();
            });
        },
        saveHomeRecVideos() {
            const recVideos = [];
            this.selectedVideos.forEach((v) => {
                recVideos.push({
                    courseId: v
                });
            });
            addHomeRecVideos(recVideos).then((resp) => {
                this.fetchHomeRecVideos();
                this.showHomeVideoEditor = false;
            });
        },
        hideHomeVideoEditor() {
            this.selectedVideos = [];
            this.fetchHomeRecVideos();
            this.showHomeVideoEditor = false;
        },
        openHomeVideoEditor() {
            fetchAvailRecVideos({
                pageIndex: 1,
                pageSize: 10000
            }).then((resp) => {
                this.availHomeRecVideos = resp.data;
            });
            this.showHomeVideoEditor = true;
        },
        fetchHomeRecVideos() {
            fetchRecVideos().then((resp) => {
                this.homeRecVideos = resp.datas;
            });
        },
        deleteHomeTag(tag) {
            removeHomeTag(tag.id).then((resp) => {
                this.fetchAllHomeTags();
            });
        },
        showHomeTagEditor() {
            fetchAvaliHomeTags({
                pageIndex: 1,
                pageSize: 10000,
            }).then((resp) => {
                console.log(resp);
                this.availTags = resp.data;
            });
            this.showHomeTagCreator = true;
        },
        fetchAllHomeTags() {
            fetchHomeTags().then((resp) => {
                this.homeTags = resp.datas;
            });
        },
        saveHomeTags() {
            addHomeTag(this.tags).then((resp) => {
                this.fetchAllHomeTags();
            });
            this.tags = [];
            this.showHomeTagCreator = false;
        },
        hideHomeTagEditor() {
            this.tags = [];
            this.showHomeTagCreator = false;
        },
        updateSwiper(swiper) {
            this.currentSwiper = swiper;
            this.showSwiperCreator = true;
        },
        changeSwiperStatus(swiper, status) {
            changeSwiperStatus({
                id: swiper.id,
                status: status ? "ENABLE" : "DISABLE",
            }).then((resp) => {
                this.loadAllSwiper();
            });
        },
        loadAllSwiper() {
            fetchAllSwiper().then((resp) => {
                this.swipers = resp.datas;
            });
        },
        removeSwiper(swiper) {
            deleteSwiper(swiper.id).then((resp) => {
                this.loadAllSwiper();
            });
        },
        onCourseChange(value) {
            this.currentSwiper.courseId = value;
        },
        onCourseSearch(value) {
            const searchData = {
                pageIndex: 1,
                pageSize: this.fullPageSize,
                status: "UP",
                allow: "ALL",
            };
            if (value) {
                searchData.name = value;
            }
            fetchCourseList(searchData).then((resp) => {
                this.courses = resp.data;
            });
        },
        onSwiperStatusChange(checked) {
            this.currentSwiper.online = checked;
        },
        saveSwiper() {
            const data = {
                ...this.currentSwiper,
            };
            if (this.currentSwiper.id) {
                data.id = this.currentSwiper.id;
            }

            saveSwiper(data).then((resp) => {
                if (resp.resp_code === 200) {
                    this.loadAllSwiper();
                    this.showSwiperCreator = false;
                    this.currentSwiper = {};
                } else {
                    this.$message.error(`创建轮播图失败:${resp.resp_msg}`);
                }
            });
        },
        closeSwiperCreator() {
            this.currentSwiper = {};
            this.loadAllSwiper();
            this.showSwiperCreator = false;
        },
        displaySwiperCreator() {
            this.showSwiperCreator = true;
        },
        uploadSwiperImg(data) {
            const formData = new FormData();
            formData.append("file", data.file);
            this.loading = true;
            uploadFile(formData)
                .then((res) => {
                    if (res.data.resp_code == 200) {
                        this.currentSwiper.imageUrl = res.data.datas.url;
                    } else {
                        this.$message.error("上传封面失败");
                    }
                    this.loading = false;
                })
                .catch((err) => {
                    disposereq(this, err);
                });
        },
        beforeUpload(file) {
            const isJpgOrPng =
                file.type === "image/jpeg" || file.type === "image/png";
            if (!isJpgOrPng) {
                this.$message.info("只能上传图片");
            }
            const isLt2M = file.size / 1024 / 1024 < 10;
            if (!isLt2M) {
                this.$message.error("Image must smaller than 10MB!");
            }
            return isJpgOrPng && isLt2M;
        },
    },
};
</script>

<style>
.price-config-container {
    margin: 20px;
    background: rgb(255, 255, 255);
}

.price-config-container .home-tags {
    margin-top: 20px;
}

.price-config-container .rec-video {
    padding-top: 60px;
}

.price-config-container .title-text {
    font-size: 16px;
    font-weight: bold;
    color: #000;
}

.price-config-container .swiper-config {
    margin-top: 10px;
}

.price-config-container .swiper-config .published-swiper {
    color: #f0943c;
}

.price-config-container .swiper-config-hometags {
    padding-top: 20px;
}

.price-config-container .swiper-div {
    width: 150px;
    height: 150px;
    display: table;
    float: left;
    margin-right: 8px;
    margin-bottom: 8px;
    vertical-align: top;
    cursor: pointer;
    -webkit-transition: border-color 0.3s ease;
    transition: border-color 0.3s ease;
}

.price-config-container .swiper-div .course-name {
    padding-top: 5px;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    font-weight: bold;
    font-size: 14px;
    color: #303030;
    line-height: 20px;
    height: 60px;
}

.price-config-container .create-swiper-div {
    width: 150px;
    height: 150px;
    display: table;
    float: left;
    margin-right: 8px;
    margin-bottom: 8px;
    text-align: center;
    vertical-align: top;
    background-color: #fafafa;
    border: 1px dashed #d9d9d9;
    border-radius: 4px;
    cursor: pointer;
    -webkit-transition: border-color 0.3s ease;
    transition: border-color 0.3s ease;
}

.price-config-container .create-swiper-div:hover {
    border-color: #1890ff;
}

.price-config-container .img-container {
    width: 250px;
    height: 150px;
}

.price-config-container .image {
    width: 100%;
    height: 100%;
}

.price-config-container .tool-bar-text {
    display: table-cell;
    width: 100%;
    height: 100%;
    padding: 8px;
    text-align: center;
    vertical-align: middle;
}

.price-config-container .tool-bar-text .btn-icon {
    font-size: 20px;
}

.swiper-image-status {
    position: absolute;
    text-align: right;
    color: #fff;
    width: 100%;
    top: 0;
    z-index: 2;
    height: 24px;
    line-height: 24px;
    padding-right: 15px;
    font-size: 14px;
}
</style>
