<template>
    <!-- 关于发布弹窗 -->
    <div class="flexcenter pop-mask" v-if="popState">
        <div class="pop about-pop shadow">
            <div class="about-title">关于发布</div>
            <div class="about-tab flexacenter">
                <div class="about-tab-item flexcenter" :class="{ 'pitch': key === tab }" v-for="(value, key) in tabList"
                    :key="key" @click="cutTab(key)">
                    {{ value }}
                </div>
            </div>
            <div class="about-list flexflex">
                <div class="about-list-item" v-for="(item, index) in cutTabArray[tab]" :key="index">
                    <div v-html="item"></div>
                </div>
            </div>

            <div class="close flexcenter" @click="$emit('close')">关闭</div>
        </div>
    </div>
</template>
  
<script>
import { ref, reactive, onMounted, getCurrentInstance, watch, computed } from 'vue';

export default {
    name: 'GterFangAboutPop',
    props: ['popState', "intermediary"],

    setup(props) {
        const { proxy } = getCurrentInstance()

        const tabList = {
            person: "个人账号",
            intermediary: "中介账号",
            more: "更多说明",
        };

        let tab = ref("person"); // person intermediary more

        if (props['intermediary'] == 1) tab.value = "intermediary"
        else tab.value = "person"

        const cutTabArray = reactive({});

        // 监听 prop 变化
        watch(() => props.popState, newValue => {
            if (newValue && Object.keys(cutTabArray).length === 0) init();
        });

        const init = () => {
            proxy.$post("/tenement/pc/api/publish/about").then(res => {
                cutTabArray['person'] = res.data['person']
                cutTabArray['intermediary'] = res.data['intermediary']
                cutTabArray['more'] = res.data['more']
            });
        };

        const cutTab = tabvalue => tab.value = tabvalue;;

        return {
            tabList,
            tab,
            cutTabArray,
            init,
            cutTab,
        };
    },
};
</script>

<style lang="less" scoped>
.close {
    height: 50px;
    width: 180px;
    border: 1px solid rgba(215, 215, 215, 1);
    border-radius: 55px;
    margin: 0 auto;
    cursor: pointer;
}

.pop-mask {
    position: fixed;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.698039215686274);
    z-index: 1000;
}

.pop {
    &.about-pop {
        width: 600px;
        height: 627px;
        background: inherit;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 20px;

        .about-title {
            color: #000;
            font-size: 24px;
            font-weight: 650;
            margin: 0 auto;
            text-align: center;
            padding: 30px 0;
        }

        .about-tab {
            height: 70px;
            background-color: rgba(246, 246, 246, 1);
            justify-content: space-around;

            .about-tab-item {

                width: 120px;
                height: 40px;
                border-radius: 60px;
                font-size: 18px;
                color: #555;
                cursor: pointer;

                &.pitch {
                    background: rgba(98, 177, 255, 1);
                    font-weight: 650;
                    color: #fff;
                }
            }


        }

        .about-list {
            flex-direction: column;
            color: #555;
            font-size: 16px;
            line-height: 30px;
            padding: 0 30px 0 53px;
            height: 374px;

            .about-list-item {
                padding: 30px 0;

                position: relative;

                &::after {
                    content: "";
                    position: absolute;
                    top: 40px;
                    left: -22px;
                    width: 8px;
                    height: 8px;
                    border-radius: 50%;
                    background: rgba(80, 227, 194, 1);
                }

                &:not(:last-of-type) {
                    border-bottom: 1px dashed #ebebeb;
                }

                b {
                    color: #000;
                }
            }
        }

    }
}
</style>