<template>
    <van-popup v-model:show="show" position="left" :style="{ width: '65%', height: '100%' }">
        <div class="list" :style="{ 'padding-top': contentHeight + 'px' }">
            <div class="container" v-for="(item, index) in dataList" :key="index" @click="handleChoose(item,index)">
                <div class="list-item">
                    <img class="left-logo" src="../../../static/image/organization-logo.png">
                    <span>{{ item.organName }}</span>
                    <!-- <van-icon name="arrow-down" size="20" /> -->
                    <van-icon name="success" size="25" color="#2879FE" v-if="active == index" />
                </div>
                <!-- <div class="children">
                    <div class="list-item">
                        <div class="left-logo"></div>
                        <span>贵阳日报</span>
                        <van-icon name="arrow-up" size="20" />
                    </div>
                    <div class="list-item">
                        <div class="left-logo"></div>
                        <span>摄影部</span>
                        <van-icon name="arrow-up" size="20" />
                    </div>
                    <div class="list-item">
                        <div class="left-logo"></div>
                        <span class="active">新媒体运营中心</span>
                        <van-icon name="success" size="25" color="#2879FE" />
                    </div>
                    <div class="list-item">
                        <div class="left-logo"></div>
                        <span>技术部</span>
                        <van-icon name="arrow-up" size="20" />
                    </div>
                </div> -->
            </div>
        </div>
    </van-popup>
</template>
<script setup>
import { selectOrganizeList } from '@/api/prefecture'
import useUserStore from '@/store/user'
import index from '../index.vue';

const contentHeight = ref(50)
onLoad(() => {
    xma.xh.getMenuButtonBoundingClientRect({
      success(res) {
        contentHeight.value = (res.top + res.bottom) / 2 + 25;
      },
    });
})

const show = ref(false)
const userStore = useUserStore()
const emits = defineEmits(["confirm"])

const active = ref(0)
const dataList = ref([])
const getList = async () => {
    const data = {
        userId: userStore.userinfo.user.id,
        sysCode: import.meta.env.VITE_APP_SYSTEM_CODE,
        moduleCode: 'practice-mediaCatalog'
    }
    const res = await selectOrganizeList(data)
    dataList.value = res.data
    emits('confirm', dataList.value[0])
}

getList()

const handleChoose = (item, index) => {
    active.value = index
    emits('confirm', item)
    close()
}

const open = () => {
    show.value = true
}
const close = () => {
    show.value = false
}
defineExpose({
    open,
    close
})
</script>

<style lang="scss" scoped>
.list {
    padding: 0px 10px 50px;

    .list-item {
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 10px 0;
        border-bottom: 1px solid #f2F2F2;

        .left-logo {
            width: 25px;
            height: 25px;
        }

        .active {
            color: #2879FE;
        }

        span {
            font-size: 15px;
            color: #232524;
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}
</style>