<template>
    <a-modal 
        :visible="true" 
        :maskClosable="false" 
        :destroyOnClose="true"
        :title="title" 
        :footer="null"
        :wrapClassName="wrapClassName"
        @cancel="onClose" 
    >
        <div class="content">
            <div class="items">
                <div class="label">名称:</div>
                <div class="data">{{ positionDetail.name }}</div>
            </div>
            <div class="items">
                <div class="label">职责:</div>
                <div class="data">{{ positionDetail.duty }}</div>
            </div>
            <div class="items">
                <div class="label">id:</div>
                <div class="data">{{ positionDetail.id }}</div>
            </div>
            <div class="items">
                <div class="label">机构id:</div>
                <div class="data">{{ positionDetail.orgid }}</div>
            </div>
            <div class="items">
                <div class="label">排序:</div>
                <div class="data">{{ positionDetail.sort }}</div>
            </div>
        </div>
    </a-modal>
</template>
<script>
import { defineComponent, reactive, ref, onMounted, watch, toRefs } from 'vue';
import { message } from 'ant-design-vue';
import moment from 'moment';

const props = {
    positionDetail:{
        type:Object,
        default:{
            name:'',
            duty:'',
            id:'',
            orgid:'',
            sort:0
        }
    }
}
export default defineComponent({
    name: 'modal',
    components: {},
    props,
    setup(props, { emit }) {
        const data = reactive({
            // width: '1000px',
            title: '岗位详情',
            wrapClassName:'modal-wrap',
            positionDetail:props.positionDetail
        })
        watch(
            () => props.positionDetail,
            (val) => {
                data.positionDetail = val
            }
        )
        // 关闭请求弹窗
        const onClose = (e) => {
            emit('closeModal')
        }
        return {
            ...toRefs(data),
            //func
            onClose
        };
    },
});
</script>
<style lang="less" scoped>
.modal-wrap{
    .content{
        padding: 10px 10px 10px 20px;
        margin-top: 10px;
        .items{
            margin: 10px 0;
            display: flex;
            &:first-child{
                margin-top: 0;
            }

            .label{
                font-size: 16px;
                font-weight: 500;
                width: 60px;
            }
            .data{
                margin-left: 10px;
                font-size: 16px;
            }
        }
    }
}
</style>