<template>
    <el-dialog v-model="visible" title="Shipping address" width="1000" modal-class="xxxxx" align-center
        :before-close="handleClose">
        <template #title>
            <div class="fs-18 font-bold py-10 pl-20">视频上传</div>
        </template>
        <div class="h-700 over-auto px-20 pb-20">
            <el-form ref="formRef" :model="form" label-width="100">
                <el-card shadow="hover">
                    <el-upload class="upload-demo" drag
                        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple>
                        <span>⬆️</span>
                        <br>
                        <span>上传文件/文件夹，可拖拽至此上传 directory</span>
                    </el-upload>
                    <el-form-item label="旋转视频" prop="name">
                        <el-radio-group>
                            <el-radio :value="1">不旋转</el-radio>
                            <el-radio :value="2">顺时针旋转90°</el-radio>
                            <el-radio :value="3">逆时针旋转90°</el-radio>
                            <el-radio :value="4">旋转180°</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-card>
                <el-card shadow="hover" class="mt-10">
                    <section class="flex justify-between">
                        <div class="flex-items-center">
                            <div class="w-36 h-36 round-6 bg-000"></div>
                            <div class="ml-10">
                                <div class="fs-16 font-bold">视频信息</div>
                                <div class="fs-12 color-888">填写视频分区、分类、关联项及命名设置</div>
                            </div>
                        </div>
                        <div class="flex-items-center gap-10">
                            <el-select v-model="mouldType" placeholder="选择预设模板" style="width: 200px" clearable>
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                            <el-button type="primary">+ 存为预设模板</el-button>
                        </div>
                    </section>
                    <section class="mt-20">
                        <div class="title mb-20">基础信息</div>
                        <el-form-item label="视频分区" prop="name">
                            <el-radio-group v-model="form.name">
                                <el-radio :value="1">成片</el-radio>
                                <el-radio :value="2">素材</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="视频分类" prop="name">
                            <el-cascader v-model="form.name" :options="videoOptions" placeholder="请选择视频分类" clearable
                                class="w-full" />
                        </el-form-item>
                        <el-form-item label="视频名称" prop="name">
                            <el-radio-group v-model="form.name">
                                <el-radio :value="1">使用文件名</el-radio>
                                <el-radio :value="2">自定义</el-radio>
                                <el-radio :value="2">前缀+文件名</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="关联任务" prop="name">
                            <el-select v-model="form.name" placeholder="请选择关联任务" clearable>
                                <el-option v-for="item in taskOptions" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="关联脚本" prop="name">
                            <el-select v-model="form.name" placeholder="请选择关联脚本" clearable>
                                <template #header>
                                    <div class="flex justify-between">
                                        <span class="font-bold color-888">任务关联脚本</span>
                                        <el-button type="primary" link>从脚本库选择</el-button>
                                    </div>
                                </template>
                                <el-option v-for="item in scriptOptions" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </section>
                    <section class="mt-20">
                        <div class="title mb-20">标签信息</div>
                        <el-form-item label="公共标签" prop="name">
                            <el-cascader v-model="form.name" :options="tagComOptions" placeholder="请选择公共标签" clearable
                                class="w-full" :props="props" />
                        </el-form-item>
                        <el-form-item label="个人标签" prop="name">
                            <el-cascader v-model="form.name" :options="tagSelfOptions" placeholder="请选择个人标签" clearable
                                class="w-full" :props="props" />
                        </el-form-item>
                    </section>
                    <section class="mt-20">
                        <div class="title mb-20">时间设置 <span class="fs-12 color-888 fw-500 ml-10">剪辑时间、授权有效期</span>
                        </div>
                        <el-form-item label="剪辑时间" prop="name">
                            <el-date-picker v-model="form.name" type="date" placeholder="请选择剪辑时间" />
                        </el-form-item>
                        <el-form-item label="授权有效期" prop="name">
                            <el-date-picker v-model="form.daterange" type="daterange" placeholder="请选择授权有效期" />
                        </el-form-item>
                    </section>
                    <section class="mt-20">
                        <div class="title mb-20">其他信息 <span class="fs-12 color-888 fw-500 ml-10">补充说明</span></div>
                        <el-form-item label="视频说明" prop="name">
                            <el-input v-model="form.name" :rows="2" type="textarea" placeholder="请输入视频说明" />
                        </el-form-item>
                        <el-form-item label="抖音数据" prop="name">
                            <el-input-number v-model="form.goodNums" :min="0" :max="9999999" :controls="false"
                                :precision="0" align="left" class="w-full" />
                        </el-form-item>
                    </section>
                </el-card>
                <el-card shadow="hover" class="mt-10">
                    <section class="flex justify-between">
                        <div class="flex-items-center">
                            <div class="w-36 h-36 round-6 bg-000"></div>
                            <div class="ml-10">
                                <div class="fs-16 font-bold">权限设置</div>
                                <div class="fs-12 color-888">设置查看权限（默认公开）、定时权限变更和消息提醒。</div>
                            </div>
                        </div>
                        <div class="flex-items-center gap-10">
                            <el-select v-model="mouldType" placeholder="选择预设模板" style="width: 200px" clearable>
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                            <el-button type="primary">+ 存为预设模板</el-button>
                        </div>
                    </section>
                    <section class="mt-20">
                        <div class="title mb-20">基础信息</div>
                        <el-form-item label="视频查看权限" prop="name">
                            <div>
                                <el-radio-group v-model="form.name">
                                    <el-radio :value="1">公开（默认）</el-radio>
                                    <el-radio :value="2">团队成员</el-radio>
                                    <el-radio :value="3">小组成员</el-radio>
                                    <el-radio :value="4">公共资源</el-radio>
                                    <el-radio :value="5">指定范围</el-radio>
                                </el-radio-group>
                                <div class="fs-12 color-888">控制视频上传后哪些人可以查看该视频。</div>
                            </div>
                        </el-form-item>
                        <div class="flex">
                            <div class="flex-1">
                                <el-form-item label="指定团队" prop="name">
                                    <el-select v-model="form.name" placeholder="请选择" clearable>
                                        <el-option v-for="item in taskOptions" :key="item.value" :label="item.label"
                                            :value="item.value" />
                                    </el-select>
                                </el-form-item>
                            </div>
                            <div class="flex-1">
                                <el-form-item label="指定小组" prop="name">
                                    <el-select v-model="form.name" placeholder="请选择" clearable>
                                        <el-option v-for="item in taskOptions" :key="item.value" :label="item.label"
                                            :value="item.value" />
                                    </el-select>
                                </el-form-item>
                            </div>
                            <div class="flex-1">
                                <el-form-item label="指定人员" prop="name">
                                    <el-select v-model="form.name" placeholder="请选择" clearable>
                                        <el-option v-for="item in taskOptions" :key="item.value" :label="item.label"
                                            :value="item.value" />
                                    </el-select>
                                </el-form-item>
                            </div>
                        </div>
                    </section>
                    <section class="mt-20">
                        <div class="title mb-20">定期权限<span class="fs-12 color-888 fw-500 ml-10">可选，到期后自动修改查看权限</span>
                        </div>
                        <el-form-item label="修改日期" prop="name">
                            <el-date-picker v-model="form.name" type="date" placeholder="请选择修改日期" />
                            <span class="fs-12 color-888 ml-10">将在所选日期 00:00 自动修改视频查看权限</span>
                        </el-form-item>
                    </section>
                    <section class="mt-20">
                        <div class="title mb-20">消息提醒</div>
                        <el-form-item label="接收人" prop="name">
                            <el-select v-model="form.name" placeholder="请选择接收人" clearable>
                                <el-option v-for="item in taskOptions" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="消息内容" prop="name">
                            <el-input v-model="form.name" :rows="2" type="textarea" placeholder="请输入消息内容" />
                        </el-form-item>
                    </section>
                </el-card>
            </el-form>
        </div>
        <template #footer>
            <div class="px-20 pb-10 pt-10" style="border-top: 1px solid #eee;">
                <el-button @click="handleConfirm">发布后，相同配置继续上传</el-button>
                <el-button type="primary" @click="handleConfirm" plain>视频上传完毕，自动发布</el-button>
                <el-button type="primary" @click="handleConfirm">发布</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
const visible = defineModel<boolean>('visible', { required: true });

// 表单大类
const form = reactive<any>({
    name: '',
    daterange: [],
    goodNums: 866
})
const formRef = ref<any>(null)
const videoOptions = ref([
    {
        value: '1',
        label: '爆款素材',
        children: [
            {
                value: '1-1',
                label: '服饰内衣',
            },
            {
                value: '1-2',
                label: '美妆护肤',
            },
            {
                value: '1-3',
                label: '日用百货',
            },
        ],
    },
])
const taskOptions = ref([
    { label: '生成一布短剧', value: '1' },
    { label: '电商产品图片模版', value: '2' }
])
const scriptOptions = ref([
    { label: '脚本-汽车图片', value: '1' },
    { label: '脚本-电商产品', value: '2' }
])
const tagComOptions = ref([
    {
        value: '1',
        label: '爆款素材',
        children: [
            {
                value: '1-1',
                label: '服饰内衣',
            },
            {
                value: '1-2',
                label: '美妆护肤',
            },
            {
                value: '1-3',
                label: '日用百货',
            },
        ],
    },
])
const tagSelfOptions = ref([
    {
        value: '1',
        label: '爆款素材',
        children: [
            {
                value: '1-1',
                label: '服饰内衣',
            },
            {
                value: '1-2',
                label: '美妆护肤',
            },
            {
                value: '1-3',
                label: '日用百货',
            },
        ],
    },
])
const props = { multiple: true }

// 模版信息
const mouldType = ref('')
const options = ref([
    { label: '电商成片', value: 1 },
    { label: '混剪二创视频', value: 2 },
])



// 弹窗的取消和确定
const handleClose = (done: () => void) => {
    if (!formRef.value) return;
    formRef.value.resetFields();
    done();
};
const handleConfirm = () => {
    visible.value = false; // 关闭弹窗
};
</script>

<style lang="scss" scoped>
.title {
    position: relative;
    padding-left: 10px;
    font-weight: bold;

    &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 4px;
        height: 14px;
        width: 4px;
        border-radius: 10px;
        background-color: rgb(var(--main-color));
    }
}
</style>
<style>
.el-dialog {
    border-radius: 10px;
    padding: 0 !important;
}

.el-dialog__footer {
    padding: 0 !important;
}
</style>