<template>
    <div>
        <div class="bg-47 p-4 round-6 mt-20 flex-items-center gap-20">
            <el-select placeholder="Select" style="width: 100px;" class="myselect">
                <el-option v-for="item in pzOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-radio-group>
                <el-radio value="1">只看@我的</el-radio>
                <el-radio value="2">只看回复我的</el-radio>
            </el-radio-group>
        </div>
        <div class="h-400 over-y-auto">
            <div class="round-12 p-12 backitems mt-10" v-for="(item, index) in 10" :key="index">
                <div class="fs-12 flex justify-between items-center">
                    <span class="round-6 color-main px-8 py-2"
                        style="background: rgba(var(--main-color), .05);box-shadow: 0 0 0 1px rgba(var(--main-color), .1);">0分2秒54
                        至 0分3秒68</span>
                    <div class="px-10 h-24 flex-center color-000 fs-10 round-40" style="background: #eee;">
                        第一版</div>
                </div>
                <div class="mt-4 fs-12">这里有点模糊，改一下 @dy4 @lan大声道撒活动大胜靠德卡仕达四大斯柯达</div>
                <div class="bg-ef round-6 p-10 mt-10 flex flex-col gap-8">
                    <div v-for="(notice, indexn) in 2" :key="indexn" class="flex-items-center gap-20">
                        <div class="fs-12 flex-1 ellipsis">
                            <span class="fw-500">逢场作戏</span>
                            <span class="color-666 px-6">回复</span>
                            <span class="fw-500">天上人间%：</span>
                            <span class="color-333" title="已修改 @天上人间%杀很大撒大声地等哈啊哈是的">已修改
                                @天上人间%杀很大撒大声地等哈啊哈是的</span>
                        </div>
                        <div class="flex-items-center fs-12 gap-6">
                            <div class="color-blue">回复</div>
                            <span class="color-888">08-16 20:18</span>
                        </div>
                    </div>
                </div>
                <div class="flex justify-between items-center mt-10">
                    <div class="flex-items-center gap-8">
                        <div class="w-24 h-24 round bg-main hidden">
                            <img src="@/static/image/huaban.png" class="cover" width="100%" height="100%" alt="">
                        </div>
                        <span class="fw-600 color-main">逢场作戏</span>
                        <span class="color-888 fs-12">05-23 14:58</span>
                    </div>
                    <div>
                        <el-button size="small" type="primary" class="color-blue" link>回复</el-button>
                        <el-button size="small" link type="danger">删除</el-button>
                        <el-button size="small" link>标记完成</el-button>
                    </div>
                </div>
            </div>
        </div>
        <div class="round-12 p-12 backitems mt-10 bg-ef">
            <div class="fs-12 mb-10">
                <span class="round-6 color-main px-8 py-2"
                    style="background: rgba(var(--main-color), .05);box-shadow: 0 0 0 1px rgba(var(--main-color), .1);">0分2秒54
                    至 0分3秒68</span>
                <span class="ml-10 color-888">(片段批注)</span>
            </div>
            <div class="flex gap-10">
                <el-mention v-model="mention" type="textarea" :rows="2" :maxlength="100" :options="ptTabs"
                    placeholder="请输入批注信息，输入@..." />
            </div>
            <div class="flex-items-center justify-between gap-10 mt-10">
                <div class="flex-items-center gap-10">
                    <FileUpload :limit="1" :width="30" title="上传截图附件">
                        <template #trigger>
                            <span class="fs-18 lh-18 color-888">+</span>
                        </template>
                    </FileUpload>
                    <span class="fs-12 color-888">上传截图附件</span>
                </div>
                <div class="flex-items-center gap-10">
                    <el-checkbox label="同时发送通知" value="Value 1" />
                    <el-button type="primary" size="small" round>发送</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import FileUpload from '@/components/Upload/index.vue'

const mention = ref('')
const pzOptions = ref([
    { label: '全部批注', value: 0 },
    { label: '单帧批注', value: 1 },
    { label: '片段批注', value: 2 },
    { label: '字幕批注', value: 3 },
])
const ptTabs = ref([
    { label: '抖音样式', value: 0 },
    { label: '抖音橱窗', value: 1 },
    { label: '视频号样式', value: 2 },
    { label: '隐藏样式', value: 3 },
])
</script>

<style scoped lang="scss">
.bg-47 {
    background-color: #f0f4f7;
}
.bg-ef {
    background-color: #f9fcfd;
}

.color-blue {
    color: #148cfc;
    font-weight: bold;
}
.backitems {
    border: 1px solid #eee;

    &:hover {
        border-color: rgba(var(--main-color), .4);
    }
}

:deep(.myselect) {
    .el-select__wrapper {
        border-radius: 12px;
    }
}
</style>