<template>
    <div class="webcast">
        <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
            <div class="title">直播信息</div>
            <a-form-item label="直播标题">
                <a-input size="small" v-model:value="form.title" placeholder="请输入您的直播标题" />
            </a-form-item>
            <a-form-item label="直播封面" class="item-cover">
                <a-upload
                    list-type="picture"
                    @change="coverChange"
                    action="//jsonplaceholder.typicode.com/posts/"
                >
                    <div class="upload-image" v-if="!viewCover">
                        <PlusOutlined style="fontSize: 22px;" />
                    </div>
                    <div class="preview-image" v-else>
                        <img style="width: 100%" :src="previewImage" />
                    </div>
                </a-upload>
            </a-form-item>
            <a-form-item label="视频介绍" class="video-introduction">
                <a-upload
                    list-type="picture"
                    action="//jsonplaceholder.typicode.com/posts/"
                >
                    <div class="upload-image">
                        <PlaySquareOutlined style="fontSize: 22px;" />
                    </div>
                </a-upload>
                <div class="demand">
                    <p class="one-line-hide">视频要求：</p>
                    <p class="one-line-hide"> 1.上传视频时间要求为30s之内</p>
                    <p class="one-line-hide">2.支持文件大小100M</p>
                    <p class="one-line-hide">3.文件扩展名：fiv、mp4…文件扩展名：fiv、mp4…</p>
                </div>
            </a-form-item>
            <a-form-item label="开始时间">
                <a-input size="small" v-model:value="form.startTime" placeholder="请设置您的开始时间" />
            </a-form-item>
            <a-form-item label="直播时长" class="duration" v-bind="validateInfos.duration">
                <a-input size="small" v-model:value="form.duration" placeholder="请输入直播时间" />
                <span class="unit">分钟</span>
            </a-form-item>
            <a-form-item label="直播人数" v-bind="validateInfos.number">
                <a-input size="small" v-model:value="form.number" placeholder="请输入直播人数" />
            </a-form-item>
            <a-form-item label="直播简介" class="brief">
                <a-textarea v-model:value="form.brief" :autoSize="true" class="brief-textarea" :maxlength="200" placeholder="请输入您的直播简介" />
                <span class="words-number">{{ form.brief.length }}/200</span>
            </a-form-item>
            <a-form-item :wrapper-col="{ span: 4, offset: 0 }">
                <a-button @click="onSubmit">发布直播</a-button>
            </a-form-item>
        </a-form>
        <div class="modal-container">
            <a-modal
                centered
                :footer="null"
                :getContainer="modalNode"
                dialogClass="modal-dialog"
                v-model:visible="isEntitled"
                @cancel="hideNoticeModal"
            >
                <template v-slot:closeIcon>
                    <img src="@/static/images/delete.png" class="close" />
                </template>
                <div class="notice-container report" v-if="0">
                    <div class="title">您尚未获得直播资格</div>
                    <div class="title sub-title">您被 学生XXX<span class="red">举报，发生违规行为</span>,如有疑问，点击反馈</div>
                    <div class="confirm-btn">意见反馈</div>
                </div>
                <div class="notice-container" v-else>
                    <div class="title">您尚未获得直播资格</div>
                    <div class="title sub-title">上一周/月您在平台视频点击量为 <span class="red">第24名</span>，要在前 <span class="bule">20名</span> 才能获得直播资格</div>
                    <rank-list></rank-list>
                </div>
            </a-modal>
        </div>
        <nav-bottom></nav-bottom>
    </div>
</template>
<script lang="ts">
import { defineComponent, reactive, Ref, ref, toRaw } from 'vue';
import { PlaySquareOutlined, PlusOutlined } from '@ant-design/icons-vue';
import { useForm } from '@ant-design-vue/use';
import NavBottom from '@/components/NavBottom.vue';
import RankList from './RankList.vue';
import { previewCover } from '@/static/js/common';

export default defineComponent({
    name: 'ReleaseWebcast',
    components: {
        PlaySquareOutlined,
        PlusOutlined,
        NavBottom,
        RankList,
    },
    setup() {
        // 表单数据
        const form = reactive({
            title: '',
            cover: '',
            introduction: '',
            startTime: '',
            duration: '',
            number: '',
            brief: '',
        });
        /**
         * 验证直播时间
         */
        async function validateDuration (rule: object, value: number): Promise<string | void> {
            if (value < 30 || value > 120) {
                return Promise.reject('*最短30min 最长120min');
            } else {
                return Promise.resolve();
            }
        }
        /**
         * 验证直播人数
         */
        const validateNumber = async (rule: object, value: number): Promise<string | void> => {
            if (value < 1 || value > 4) {
                return Promise.reject('**最少1人，最多4人');
            } else {
                return Promise.resolve();
            }
        };
        // 验证规则
        const rules = reactive({
            duration: [
                {
                    validator: validateDuration,
                    trigger: 'change',
                },
            ],
            number: [
                {
                    validator: validateNumber,
                    trigger: 'change',
                },
            ],
        });

        // 是否显示封面预览 封面的路径
        const viewCover: Ref<boolean> = ref(false),
            previewImage: Ref<string> = ref('');

        /**
         * 封面改变触发事件
         */
        function coverChange(info: any): void {
            // console.log(info);
            // 获取预览图片
            previewCover(info.file).then(url => previewImage.value = url);
            viewCover.value = true;
            // form.cover = fileList;
        }

        const { resetFields, validate, validateInfos } = useForm(form, rules);
        /**
         * 表单提交
         */
        const onSubmit = (e: any) => {
            e.preventDefault();
            validate().then(() => {
                console.log(toRaw(form));
            }).catch((err: object) => {
                console.log('error', err);
            });
        };
        const isEntitled: Ref<boolean> = ref(true);
        /**
         * 隐藏无资格提示
         */
        function hideNoticeModal(): void {
            isEntitled.value = false;
        }
        return {
            labelCol: { span: 4 },
            wrapperCol: { span: 14 },
            modalNode: () => document.getElementsByClassName('modal-container')[0],
            validateInfos,
            resetFields,
            viewCover,
            previewImage,
            coverChange,
            form,
            onSubmit,
            isEntitled,
            hideNoticeModal,
        }
    }
})
</script>
<style lang="scss" scoped>
.webcast {
    width: 100%;
    min-width: 700px;
    background-color: #ffffff;
    padding: 46px;
    border-radius: 17px;
    position: relative;
    ::v-deep .ant-form {
        .title {
            font-size: 12px;
            font-weight: bold;
            color: #111111;
            margin-bottom: 28px;
        }
        .ant-row {
            .ant-form-item-label {
                width: 60px;
                margin: 0 30px 0 17px;
                > label {
                    font-size: 12px;
                    font-weight: 500;
                    color: #808080;
                    &::after {
                        content: '';
                    }
                }
            }
            .upload-image {
                width: 171px;
                height: 96px;
                border: 1px solid #DCDFE0;
                border-radius: 3px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 17px;
            }
            .ant-input {
                width: 171px;
                padding: 6px 11px;
                border-radius: 3px;
                border: 1px solid #DCDFE0;
                font-size: 11px;
                color: #3F3F3F;
                &::-webkit-input-placeholder{
                    font-size: 12px;
                    color: #808080;
                }
            }
            .ant-select {
                font-size: 12px;
            }
            .ant-select-dropdown {
                font-size: 12px;
            }
            .ant-form-explain {
                font-size: 10px;
                font-weight: 500;
                color: #D22D2E;
            }
            .ant-upload-list {
                display: none;
            }
            .ant-btn {
                padding: 0;
                width: 63px;
                height: 23px;
                background: #08AE98;
                border-radius: 3px;
                font-size: 10px;
                font-weight: 500;
                color: #FFFFFF;
            }
        }
        .item-cover {
            .preview-image {
                width: 171px;
                height: 96px;
            }
        }
        .video-introduction {
            .ant-form-item-control-wrapper {
                .ant-form-item-children {
                    display: flex;
                    align-items: center;
                    .demand {
                        line-height: 17px;
                        font-size: 10px;
                        font-weight: 500;
                        color: #808080;
                        width: 134px;
                        > p {
                            margin: 0;
                        }
                    }
                }
            }
        }
        .duration {
            .unit {
                margin-left: 18px;
                font-size: 12px;
                font-weight: 500;
                color: #808080;
            }
        }
        .brief {
            position: relative;
            .ant-input {
                width: 359px;
            }
            .brief-textarea {
                min-height: 85px;
                padding-bottom: 30px;
            }
            .words-number {
                position: absolute;
                right: 11px;
                bottom: -11px;
                font-size: 11px;
                font-weight: 500;
                color: #7F7F7F;
                user-select: none;
            }
        }
    }
    .modal-container {
        ::v-deep .modal-dialog {
            .close {
                width: 14px;
                height: 14px;
            }
            .ant-modal-content {
                box-sizing: border-box;
                padding: 25px 30px;
                width: 569px;
                background: #FFFFFF;
                box-shadow: 0px 4px 6px 0px rgba(102, 102, 102, 0.07);
                border-radius: 28px;
                .notice-container {
                    .title {
                        font-size: 11px;
                        font-weight: bold;
                        color: #111111;
                        margin-bottom: 16px;
                    }
                    .sub-title {
                        .red {
                            color: #D12C2D;
                        }
                        .bule {
                            color: #0DBBA3;
                        }
                    }
                    .confirm-btn {
                        display: inline-block;
                        background: #07AD97;
                        border-radius: 2px;
                        font-size: 9px;
                        font-weight: 500;
                        color: #FFFFFF;
                        text-align: center;
                        cursor: pointer;
                        user-select: none;
                        height: 22px;
                        line-height: 22px;
                        padding: 0 17px;
                    }
                }
                .report {
                    .sub-title {
                        margin-bottom: 50px;
                    }
                }
            }
        }
    }
}
</style>