<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">
                    <div class="flex gap-10 mb-10">
                        <div class="color-888 py-4 px-10 round-6 pointer"
                            :class="form.typeImg === 0 ? 'color-main' : ''"
                            :style="{ border: form.typeImg === 0 ? '1px solid rgba(var(--main-color), 0.5)' : '1px solid #ddd' }"
                            @click="form.typeImg = 0">
                            <div class="font-bold">发布图组</div>
                            <div class="fs-12">多张图片为一组</div>
                        </div>
                        <div class="color-888 py-4 px-10 round-6 pointer"
                            :class="form.typeImg === 1 ? 'color-main' : ''"
                            :style="{ border: form.typeImg === 1 ? '1px solid rgba(var(--main-color), 0.5)' : '1px solid #ddd' }"
                            @click="form.typeImg = 1">
                            <div class="font-bold">发布多张图片</div>
                            <div class="fs-12">每张图片单独一组</div>
                        </div>
                    </div>
                    <div v-if="form.typeImg === 0" class="mb-10">
                        <div class="flex gap-10">
                            <div class="h-30 round-4 flex-center fs-12 px-10 pointer"
                                v-for="(tab, index) in form.groupImgs" :key="index" @click="tabIndex = (index as number)"
                                :class="tabIndex === index ? 'color-main' : ''"
                                :style="{ boxShadow: tabIndex === index ? '0 0 0 1px rgba(var(--main-color), 0.5)' : 'none', backgroundColor: tabIndex === index ? '#fff' : '#eee' }">
                                分组{{ (index as number) + 1 }}
                            </div>
                            <div class="w-30 h-30 round-4 flex-center bg-eee border-ddd pointer" @click="addGroup">
                                +
                            </div>
                        </div>
                    </div>
                    <FileUpload list-type="drap"/>
                </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-input v-model="form.name" type="text" placeholder="请输入图片名称" :maxlength="20" />
                        </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.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>
                    </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'
import FileUpload from '@/components/Upload/index.vue'

const visible = defineModel<boolean>('visible', { required: true });

// 表单大类
const form = reactive<any>({
    typeImg: 0,
    imgs: [],
    groupImgs: [
        { imgs: [] },
        { imgs: [] },
    ],
    name: '',
    daterange: [],
    goodNums: 866
})
const formRef = ref<any>(null)
const tabIndex = ref(0)
const addGroup = ()=>{
    form.groupImgs.push({ imgs: [] })
}

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>