<template>
    <el-dialog v-model="visible" title="Shipping address" width="1200" 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" 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-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" placeholder="请输入脚本标题" clearable />
                        </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>
                    </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>
                </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>
                        <span class="fs-12 color-888">AI仿写免费次数200000/200000</span>
                    </section>
                    <section class="mt-20">
                        <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 class="flex round-6 listbox mb-20">
                            <div class="font-bold flex-center a px-10">
                                画面时间轴
                            </div>
                            <div class="flex-1 hidden">
                                <SeTable :data-list="form.list" border :total="form.list.length"
                                    :default-page-size="100" :show-pagination="false">
                                    <el-table-column label="画面时间点 (秒)" align="center" width="200">
                                        <template #default="{ row, $index }">
                                            <el-form-item :prop="`list.${$index}.content1`"
                                                :rules="{ required: true, message: '此项必填', trigger: 'blur' }"
                                                label-position="top">
                                                <el-input v-model="row.content1" type="textarea" :rows="5"
                                                    placeholder="例如：0~3s" class="inputborder" style="resize: none;" />
                                            </el-form-item>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="台词/对白" align="center" width="300">
                                        <template #default="{ row, $index }">
                                            <el-form-item :prop="`list.${$index}.content2`"
                                                :rules="{ required: true, message: '此项必填', trigger: 'blur' }"
                                                label-position="top">
                                                <el-input v-model="row.content2" type="textarea" :rows="5"
                                                    placeholder="请输入台词或口播文本" class="inputborder"
                                                    style="resize: none;" />
                                            </el-form-item>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="画面镜头" align="center" width="300">
                                        <template #default="{ row, $index }">
                                            <el-form-item :prop="`list.${$index}.content3`"
                                                :rules="{ required: true, message: '此项必填', trigger: 'blur' }"
                                                label-position="top">
                                                <el-input v-model="row.content3" type="textarea" :rows="2"
                                                    placeholder="描写画面特写/分镜镜头" class="inputborder"
                                                    style="resize: none;" />
                                                <el-upload class="avatar-uploader w-60 h-60 mt-4 flex-center round-4"
                                                    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                                                    :show-file-list="false">
                                                    <img v-if="row.content5" :src="row.content5" class="avatar" />
                                                    <span v-else>+</span>
                                                </el-upload>
                                            </el-form-item>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="画面注意事项" align="center" width="200">
                                        <template #default="{ row, $index }">
                                            <el-form-item :prop="`list.${$index}.content4`"
                                                :rules="{ required: true, message: '此项必填', trigger: 'blur' }"
                                                label-position="top">
                                                <el-input v-model="row.content4" type="textarea" :rows="5"
                                                    placeholder="灯光、道具或动作注意项" class="inputborder"
                                                    style="resize: none;" />
                                            </el-form-item>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="操作" width="100" align="center" fixed="right">
                                        <template #default="{ $index }">
                                            <el-button type="danger" size="small"
                                                @click="removeRow($index)">删除</el-button>
                                            <br>
                                            <el-button type="primary" size="small" @click="addRow($index)">新增</el-button>
                                        </template>
                                    </el-table-column>
                                </SeTable>
                            </div>
                        </div>
                        <el-form-item label="视频格式" prop="name">
                            <el-select v-model="form.name" placeholder="请选择" clearable>
                                <el-option v-for="item in scriptOptions" :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>
                                <el-option v-for="item in scriptOptions" :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" placeholder="请输入字幕类型，如：内嵌字幕/挂载字幕/无字幕" :maxlength="10" />
                        </el-form-item>
                        <el-form-item label="视频画质" prop="name">
                            <el-select v-model="form.name" placeholder="请选择" clearable>
                                <el-option v-for="item in scriptOptions" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="BGM" prop="name">
                            <el-input v-model="form.name" placeholder="请输入BGM信息/背景音乐名称" :maxlength="20" />
                        </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">
                        <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>
                        <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>
                        <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">发布</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,
    list: [
        { content1: '', content2: '', content3: '', content4: '', content5: '' }
    ]
})
const formRef = ref<any>(null)


// 表格内容
const removeRow = (index: number) => {
    if (form.list.length > 1) {
        form.list.splice(index, 1);
    } else {
        alert('至少保留一行');
    }
};
const addRow = (index: number) => {
    const newRow = {
        content1: '',
        content2: '',
        content3: '',
        content4: '',
        content5: ''
    };
    form.list.splice(index + 1, 0, newRow);
}




// 模版信息
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; // 关闭弹窗
};
const props = { multiple: true }
// 下拉数据
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: '日用百货',
            },
        ],
    },
])
</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));
    }
}

.listbox {
    border: 1px solid rgba(var(--main-color), .5);

    .a {
        writing-mode: vertical-rl;
        background-color: rgba(var(--main-color), .1);
    }

    :deep(.inputborder) {
        .el-textarea__inner {
            box-shadow: none;
            resize: none !important;
        }
    }

    .avatar-uploader {
        box-shadow: 0 0 0 1px rgba(var(--main-color), .5);
        background-color: rgba(var(--main-color), .05);
    }

    .w20 {
        width: 20%;
    }
}
</style>
<style>
.el-dialog {
    border-radius: 10px;
    padding: 0 !important;
}

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