<template>
    <Dialog v-model="visible" bg-color="#fff" width="860">
        <div class="permission-dialog bg-fff round-12 hidden">
            <div class="h-66 px-24 flex-between permission-dialog__header">
                <div class="flex-items-center">
                    <span class="w-6 h-16 round-10 bg-main mr-10"></span>
                    <span class="fs-16 font-bold color-000">视频权限检测</span>
                </div>
            </div>

            <div class="p-24">
                <section class="p-16 round-14 flex-between user-card">
                    <div class="flex-items-center minw-0">
                        <div class="w-48 h-48 round bg-main color-fff flex-center fs-24 mr-16">♙</div>
                        <div class="minw-0">
                            <div class="flex-items-center flex-wrap gap-10">
                                <span class="font-bold color-000 fs-16">邓客晨</span>
                                <el-select v-model="currentUserId" size="small" class="w-240">
                                    <el-option
                                        v-for="item in userOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                                <el-button class="round-6 color-main border-main" size="small" @click="toggleUserSelect">
                                    选择人员
                                </el-button>
                            </div>
                            <div class="fs-12 color-888 mt-4">xmsmdyc01 / 17199928737</div>
                        </div>
                    </div>
                </section>

                <section class="mt-20 p-12 round-10 flex info-panel">
                    <div class="flex-1">
                        <div class="fs-12 color-888">架构归属 (公司/部门/分组)</div>
                        <div class="font-bold color-000 mt-4">梦畅AIGC &gt; 信息流投放部 &gt; 视频号投流组</div>
                    </div>
                    <div class="w-200">
                        <div class="fs-12 color-888 mb-4">岗位角色</div>
                        <span class="inline-tag round-4 px-6 py-2 color-main font-bold">部门主管</span>
                    </div>
                    <div class="flex-1">
                        <div class="fs-12 color-888">可查观察分组</div>
                        <div class="font-bold color-000 mt-4">视频号投流组 + 摄影特组 + 剪辑一组</div>
                    </div>
                </section>

                <section class="mt-20 round-12 hidden permission-table">
                    <div class="permission-row table-head">
                        <div class="font-bold color-main">权限检测</div>
                        <div v-for="item in permissions" :key="item" class="text-center font-bold color-000">
                            {{ item }} <span class="color-green">◎</span>
                        </div>
                    </div>
                    <div v-for="row in rows" :key="row.name" class="permission-row">
                        <div class="font-bold color-000">
                            {{ row.name }}
                            <el-button class="ml-8 px-8 round-8 color-main detail-btn" size="small" @click="activeDetail = row.name">
                                明细
                            </el-button>
                        </div>
                        <div v-for="item in permissions" :key="item" class="text-center color-green fs-20">✓</div>
                    </div>
                </section>

                <div v-if="activeDetail" class="mt-12 px-12 py-8 round-8 fs-12 detail-tip">
                    当前查看：{{ activeDetail }}，该成员拥有查看、下载、复制到剪映、推送权限。
                </div>
            </div>
        </div>
    </Dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';

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

const currentUserId = ref('u1');
const activeDetail = ref('');
const userOptions = [
    { label: '梦畅AIGC / 信息流投放部 / 视频号投流组', value: 'u1' },
    { label: '梦畅AIGC / 内容中心 / 剪辑一组', value: 'u2' },
];
const permissions = ['查看', '下载', '复制到剪映', '推送'];
const rows = [
    { name: '角色权限' },
    { name: '分类权限' },
    { name: '视频权限' },
];

const toggleUserSelect = () => {
    currentUserId.value = currentUserId.value === 'u1' ? 'u2' : 'u1';
};
</script>

<style scoped lang="scss">
.permission-dialog__header {
    border-bottom: 1px solid #edf0f5;
}

.user-card {
    border: 1px solid rgba(var(--main-color), .12);
    background-color: rgba(var(--main-color), .02);
}

.inline-tag {
    background-color: rgba(var(--main-color), .08);
}

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

.info-panel {
    border: 1px solid #dfe7f2;
    background-color: #f8fbff;
}

.permission-table {
    border: 1px solid #dfe7f2;
}

.permission-row {
    display: grid;
    grid-template-columns: 180px repeat(4, 1fr);
    align-items: center;
    min-height: 52px;
    border-bottom: 1px solid #edf0f5;

    > div {
        height: 100%;
        padding: 14px 16px;
        background-color: rgba(0, 184, 122, .03);
    }

    > div:first-child {
        background-color: rgba(var(--main-color), .03);
    }

    &:last-child {
        border-bottom: none;
    }
}

.table-head {
    min-height: 40px;

    > div {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

.detail-btn {
    border: 1px solid rgba(var(--main-color), .35);
    background-color: #fff;
}

.color-green {
    color: #00b779;
}

.detail-tip {
    border: 1px solid rgba(var(--main-color), .12);
    background-color: rgba(var(--main-color), .04);
    color: #2b3750;
}
</style>
