<template>
    <a-modal :visible="true" :width="width" :maskClosable="false" :destroyOnClose="true" centered :title="title"
        :footer="null" wrapClassName="modal-wrap" @cancel="onClose">
        <div class="action-content">
            <div class="top-header">
                <div class="img-container">
                    <img :src="baseInfo?.url || './static/img/default-dr3.jpg'" alt="">
                </div>
                <div class="res-title">
                    <div class="title">{{ baseInfo.servicename }}</div>
                    <div class="describle">描述：{{ baseInfo.description }}</div>
                    <div class="small-mark">
                        <div class="update-time">更新时间：{{ baseInfo.updatedate }}</div>
                        <div class="service-type">服务类型：组件工具</div>
                    </div>
                    <div class="look">
                        <a :href="[`./mapview.html?onlineIde_${baseInfo.servicealiasname}`]" target="_blank"
                            rel="noopener noreferrer">浏览</a>
                    </div>
                </div>
            </div>
            <div class="base-info info-item">
                <div class="info-title">基本信息</div>
                <div class="form-box">
                    <a-row>
                        <a-col :span="3" class="form-item-title form-title">真实地址</a-col>
                        <a-col :span="21" class="form-item-value form-title">{{ baseInfo.zsdz }}</a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="12">
                            <a-row>
                                <a-col :span="6" class="form-item-title form-title" style="border-top: none;">资源名称</a-col>
                                <a-col :span="18" class="form-item-value form-title" style="border-top: none;">{{
                                    baseInfo.servicename }}</a-col>
                            </a-row>
                        </a-col>
                        <a-col :span="12">
                            <a-row>
                                <a-col :span="6" class="form-item-title form-title"
                                    style="border-top: none;border-left: none;">资源别名</a-col>
                                <a-col :span="18" class="form-item-value form-title" style="border-top: none;">{{
                                    baseInfo.servicealiasname }}</a-col>
                            </a-row>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="3" class="form-item-title form-title" style="border-top: none;">缩略图</a-col>
                        <a-col :span="21" class="form-item-value form-title" style="border-top: none;"
                            :title="baseInfo.url">{{ baseInfo.url }}</a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="3" class="form-item-title form-title" style="border-top: none;">资源描述</a-col>
                        <a-col :span="21" class="form-item-value form-title" style="border-top: none;">{{
                            baseInfo.description }}</a-col>
                    </a-row>
                </div>
            </div>
            <!-- <div class="meta-info info-item">
                <div class="info-title">描述信息</div>
                <div class="form-box">
                    <a-row>
                        <a-col :span="12">
                            <a-row>
                                <a-col :span="6" class="form-item-title form-title">系统标签</a-col>
                                <a-col :span="18" class="form-item-value form-title">{{ metaInfo.tag }}</a-col>
                            </a-row>
                        </a-col>
                        <a-col :span="12">
                            <a-row>
                                <a-col :span="6" class="form-item-title form-title" style="border-left: none;">资源类型</a-col>
                                <a-col :span="18" class="form-item-value form-title">{{ baseInfo.servicealiasname }}</a-col>
                            </a-row>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="12">
                            <a-row>
                                <a-col :span="6" class="form-item-title form-title" style="border-top: none;">数据类型</a-col>
                                <a-col :span="18" class="form-item-value form-title" style="border-top: none;">{{
                                    metaInfo.dataType }}</a-col>
                            </a-row>
                        </a-col>
                        <a-col :span="12">
                            <a-row>
                                <a-col :span="6" class="form-item-title form-title"
                                    style="border-top: none;border-left: none;">数据范围</a-col>
                                <a-col :span="18" class="form-item-value form-title" style="border-top: none;">{{
                                    baseInfo.servicealiasname }}</a-col>
                            </a-row>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="12">
                            <a-row>
                                <a-col :span="6" class="form-item-title form-title" style="border-top: none;">更新方式</a-col>
                                <a-col :span="18" class="form-item-value form-title" style="border-top: none;">{{
                                    metaInfo.updateType }}</a-col>
                            </a-row>
                        </a-col>
                        <a-col :span="12">
                            <a-row>
                                <a-col :span="6" class="form-item-title form-title"
                                    style="border-top: none;border-left: none;">数据来源</a-col>
                                <a-col :span="18" class="form-item-value form-title" style="border-top: none;">{{
                                    metaInfo.source }}</a-col>
                            </a-row>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="12">
                            <a-row>
                                <a-col :span="6" class="form-item-title form-title" style="border-top: none;">管理部门</a-col>
                                <a-col :span="18" class="form-item-value form-title" style="border-top: none;">{{
                                    metaInfo.keepingunit }}</a-col>
                            </a-row>
                        </a-col>
                        <a-col :span="12">
                            <a-row>
                                <a-col :span="6" class="form-item-title form-title"
                                    style="border-top: none;border-left: none;">责任科室</a-col>
                                <a-col :span="18" class="form-item-value form-title" style="border-top: none;">{{
                                    metaInfo.rboffice }}</a-col>
                            </a-row>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="12">
                            <a-row>
                                <a-col :span="6" class="form-item-title form-title" style="border-top: none;">密级</a-col>
                                <a-col :span="18" class="form-item-value form-title" style="border-top: none;">{{
                                    metaInfo.secretlevel }}</a-col>
                            </a-row>
                        </a-col>
                        <a-col :span="12">
                            <a-row>
                                <a-col :span="6" class="form-item-title form-title"
                                    style="border-top: none;border-left: none;">坐标系</a-col>
                                <a-col :span="18" class="form-item-value form-title" style="border-top: none;">{{
                                    metaInfo.crs }}</a-col>
                            </a-row>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="12">
                            <a-row>
                                <a-col :span="6" class="form-item-title form-title" style="border-top: none;">EPSG
                                    code</a-col>
                                <a-col :span="18" class="form-item-value form-title" style="border-top: none;">{{
                                    metaInfo.epsgCode }}</a-col>
                            </a-row>
                        </a-col>
                        <a-col :span="12">
                            <a-row>
                                <a-col :span="6" class="form-item-title form-title"
                                    style="border-top: none;border-left: none;">运行状态</a-col>
                                <a-col :span="18" class="form-item-value form-title" style="border-top: none;">{{
                                    metaInfo.status ? '正常运行' : '停运' }}</a-col>
                            </a-row>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="12">
                            <a-row>
                                <a-col :span="6" class="form-item-title form-title"
                                    style="border-top: none;">是否为历史版本</a-col>
                                <a-col :span="18" class="form-item-value form-title" style="border-top: none;">{{
                                    Boolean(Number(metaInfo.ishistory)) ? '是' : '否' }}</a-col>
                            </a-row>
                        </a-col>
                        <a-col :span="12">
                            <a-row>
                                <a-col :span="6" class="form-item-title form-title"
                                    style="border-top: none;border-left: none;">适合申请流程</a-col>
                                <a-col :span="18" class="form-item-value form-title" style="border-top: none;">{{
                                    metaInfo.shsqlc }}</a-col>
                            </a-row>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="3" class="form-item-title form-title" style="border-top: none;">备注</a-col>
                        <a-col :span="21" class="form-item-value form-title" style="border-top: none;">{{
                            metaInfo.bz }}</a-col>
                    </a-row>

                </div>
            </div> -->
            <!-- <div class="public-set info-item">
                <div class="info-title">共享设置</div>
                <div class="form-box">
                    <a-row>
                        <a-col :span="12">
                            <a-row>
                                <a-col :span="6" class="form-item-title form-title">是否公开</a-col>
                                <a-col :span="18" class="form-item-value form-title">{{ '是' }}</a-col>
                            </a-row>
                        </a-col>
                        <a-col :span="12">
                            <a-row>
                                <a-col :span="6" class="form-item-title form-title" style="border-left: none;">是否共享</a-col>
                                <a-col :span="18" class="form-item-value form-title">{{ '是' }}</a-col>
                            </a-row>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="12">
                            <a-row>
                                <a-col :span="6" class="form-item-title form-title" style="border-top: none;">外部申请</a-col>
                                <a-col :span="18" class="form-item-value form-title" style="border-top: none;">{{
                                    '是' }}</a-col>
                            </a-row>
                        </a-col>
                        <a-col :span="12">
                            <a-row>
                                <a-col :span="6" class="form-item-title form-title"
                                    style="border-top: none;border-left: none;">是否展示</a-col>
                                <a-col :span="18" class="form-item-value form-title" style="border-top: none;">{{
                                    Boolean(Number(metaInfo.isShow)) ? '是' : '否' }}</a-col>
                            </a-row>
                        </a-col>
                    </a-row>
                </div>
            </div> -->
        </div>
    </a-modal>
</template>
<script>
import { defineComponent, reactive, ref, onMounted, watch, toRefs } from 'vue';
import { message } from 'ant-design-vue';
import { session } from '/@/utils/Memory';
import moment from 'moment';

import { getResViewInfo } from '/@/api/resource/plat';


export default defineComponent({
    name: 'modal',
    components: {},
    props: {
        resId: {
            type: String,
            default: ''
        },
        nowAss: {
            type: Object,
            default: ''
        }
    },
    setup(props, { emit }) {
        const data = reactive({
            width: '1200px',
            title: '组件详情',
        })
        // 关闭请求弹窗
        const onClose = (e) => {
            emit('closeModal')
        }
        const baseInfo = ref({})
        const metaInfo = ref({})
        //初始化请求所需数据
        onMounted(() => {
            console.log(props.nowAss);
            props.nowAss.updatedate = moment(props.nowAss.updatedate).format('YYYY-MM-DD HH:mm:ss');
            props.nowAss.zsdz = `${window.location.origin}/mapview.html?onlineIde_${props.nowAss.servicealiasname}`;
            baseInfo.value = props.nowAss;
            // getResViewInfo(props.resId).then(res => {
            //     console.log(res);
            //     baseInfo.value = res.servicebase;
            //     baseInfo.value.thumbnail = res.metadata.thumbnail
            //     baseInfo.value.updatedate = moment(baseInfo.value.updatedate).format('YYYY-MM-DD HH:mm:ss');
            //     metaInfo.value = res.metadata
            // })
        })
        return {
            baseInfo,
            metaInfo,
            // formRef,
            ...toRefs(data),
            onClose
        };
    },
});
</script>
<style lang="less" scoped>
.modal-wrap {
    .action-content {
        padding: 20px;
        max-height: 800px;
        overflow: auto;

        .top-header {
            margin-left: 20px;
            display: flex;
            align-items: center;

            .img-container {
                width: 260px;
                height: 200px;
                // border: 1px solid blue;
                box-sizing: border-box;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .res-title {
                flex-grow: 1;
                margin-left: 30px;

                .title {
                    font-size: 26px;
                    font-weight: 700;
                }

                .describle {
                    margin: 10px 0;
                }

                .small-mark {
                    width: 100%;
                    padding-bottom: 10px;
                    display: flex;
                    border-bottom: 1px solid rgb(220, 220, 220);

                    .update-time {
                        margin-right: 50px;
                    }
                }

                .look {
                    margin-top: 20px;
                    margin-left: 10px;
                    width: 100px;
                    height: 35px;
                    line-height: 32px;
                    text-align: center;
                    border: 2px solid blue;
                    box-sizing: border-box;
                    color: blue;
                    font-size: 16px;
                    font-weight: 700;
                    cursor: pointer;
                    user-select: none;
                    border-radius: 4px;
                }
            }
        }

        .info-item {
            margin-top: 20px;

            .info-title {
                margin: 10px 0;
                padding-left: 10px;
                border-left: 3px solid blue;
            }

            .form-box {
                width: 100%;

                .form-title {
                    border: 1px solid rgb(230, 230, 230);
                    box-sizing: border-box;
                    height: 30px;
                    line-height: 27px;
                    padding-left: 5px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                .form-item-title {
                    background-color: rgb(249, 249, 249);
                }

                .form-item-value {
                    border-left: none;
                }
            }
        }
    }
}
</style>