<template>
  <BasicDrawer v-bind="$attrs" @register="registerDrawer" :title="getTitle" width="50%">
    <!-- <BasicForm @register="registerForm" /> -->
    <div class="resourcedetail_panel">
      <div class="resourcedetail">
        <div class="map-resources">
          <div class="map-left-box">
            <img id="resources-detail-img"
              src="data:image/png;base64, "
              alt="">
          </div>
          <div class="map-right-box">
            <div class="right-box-top">
              <div class="right-box-words">
                <span id="resources-detail-name">行政区域</span>
                <div id="resources-detail-keyword" class="right-box-keyword" style="display:flex">
                  <div class="right-keyword-item">
                    <p>测试数据</p>
                  </div>
                </div>
              </div>
              <div class="right-box-describe">
                <p>描述：<span id="resources-detail-describe"></span></p>
                <div class="time-type" style="display:flex">
                  <div class="new-time">
                    <span class="left-time" id="resources-detail-time">更新时间:2022-09-23 11:15:18</span>

                  </div>
                  <div class="service-type">
                    <span class="right-type" id="resources-detail-type">服务类型:SuperMap Rest地图服务</span>
                  </div>
                </div>
              </div>

            </div>
            <div class="right-box-bottom">

              <div class="dashed-box">

              </div>
              <div class="bottom-btn">
                <div class="bottom-btn-left">
                  <button>外部申请</button>
                </div>
                <div class="bottom-btn-right">
                  <div id="control-box">
                    <a id="resources-detail-prev" href="../../mapview.html?MR00001936" target="_blank"
                      rel="noopener noreferrer">
                      <button id="link-power-btn">浏览</button>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="resourcedetail-container container" style="display: block;">
          <div class="simpletemplate-container">
            <div class="resourcedetail-box">
              <div class="auth" style="display: none;" id="btn_subscribe" data-toggle="modal">
                <a class="index_btn1 subscribe-btn">
                  <span>订阅</span>
                </a>
              </div>
              <div class="auth" id="btn_postClient" data-toggle="modal">
                <a class="index_btn1 icon_apply">
                  <span>外部申请</span>
                </a>
              </div>
              <div class="auth" id="btn_version_watch" data-toggle="modal" style="display: none;">
                <a class="index_btn1 icon_view">
                  <span>查看版本详情</span>
                </a>
              </div>
              <div class="downloading" id="btn_download" style="display: none;">
                <a target="_blank" class="index_btn1 icon_download">
                  <span>下载</span>
                </a>
              </div>

              <div class="detail_service" id="btn_fme_play" style="display: none;">
                <a target="_blank" class="index_btn1 icon_play">
                  <span>执行</span>
                </a>
              </div>

              <div class="detail_service" id="btn_ms_play" style="display: none;">
                <a target="_blank" class="index_btn1 icon_play">
                  <span>执行</span>
                </a>
              </div>


              <div class="auth " style="display: none;" id="btn_dt_downloadAuth" data-toggle="modal">
                <a class="index_btn1 icon_applydb">
                  <span>下载申请</span>
                </a>
              </div>
              <div class="auth" style="display: none;" id="btn_dr_downloadAuth" data-toggle="modal">
                <a class="index_btn1 icon_detail">
                  <span>下载申请</span>
                </a>
              </div>
              <div class="auth" id="btn_post" style="display: none;" data-toggle="modal">
                <a class="index_btn1 icon_apply">
                  <span>资源申请</span>
                </a>
              </div>
              <div class="auth_checking" id="btn_authchecking" style="display: none;">
                <a href="#" class="index_btn1 icon_apply">
                  <span>申请中</span>
                </a>
              </div>
              <div class="watching" id="btn_watching" style="display: none;">
                <a target="_blank" class="index_btn1 icon_view ">
                  <span>浏览</span>
                </a>
              </div>
              <div class="no-data" id="no_data" style="display: none">
                <!-- <svg t="1572193075280" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="5901" width="128" height="128"
                  xmlns:xlink="http://www.w3.org/1999/xlink">
                  <defs>
                    <style type="text/css"></style>
                  </defs>
                  <path
                    d="M576 928c-6 0-11.9-1.7-17.1-5-9.3-5.9-14.9-16.1-14.9-27V554.3c0-12.4 7.1-23.6 18.3-28.9l288-136.1c9.9-4.7 21.5-4 30.8 1.9s14.9 16.1 14.9 27v341.7c0 12.4-7.1 23.6-18.3 28.9l-288 136.1c-4.4 2.1-9 3.1-13.7 3.1z m32-353.5v271l224-105.8v-271L608 574.5zM448 928c-4.7 0-9.3-1-13.7-3.1l-288-136.1c-11.2-5.3-18.3-16.6-18.3-28.9V418.2c0-11 5.6-21.2 14.9-27 9.3-5.9 20.9-6.6 30.8-1.9l288 136.1c11.2 5.3 18.3 16.6 18.3 28.9V896c0 11-5.6 21.2-14.9 27-5.2 3.3-11.1 5-17.1 5zM192 739.7l224 105.8v-271L192 468.7v271zM512 501.1c-4.7 0-9.4-1-13.8-3.1l-352-168.1c-11.2-5.4-18.3-16.7-18.2-29.2 0.1-12.4 7.4-23.7 18.8-28.8l352-159.9c8.4-3.8 18.1-3.8 26.5 0l352 159.9c11.3 5.1 18.6 16.4 18.8 28.8 0.1 12.4-7 23.8-18.2 29.2L525.8 498c-4.4 2-9.1 3.1-13.8 3.1zM235.8 301.7L512 433.6l276.2-131.9L512 176.2 235.8 301.7z"
                    p-id="5902" fill="#e6e6e6"></path>
                </svg> -->
                <br>
                <br>
                <span>您没有权限查看此内容，请联系网站管理员</span>
              </div>
              <div id="AtForms_1692178925220" class="single-body at-forms-container atForms">
                <div class="form-tabs">
                  <!-- Nav tabs -->
                  <ul class="nav nav-tabs" role="tablist">

                    <li role="presentation" class="active"><a href="#edit_formMetaData" aria-controls="edit_formMetaData"
                        role="tab" data-toggle="tab">资源信息</a></li>
                  </ul>
                  <!-- Tab panes -->
                  <div class="tab-content">

                    <form role="tabpanel" class="tab-pane active" id="edit_formMetaData">
                      <div class="form-group col-sm-12">
                        <div class="grouphead"><span>基本信息</span></div>
                      </div>
                      <div class="form-group col-sm-6">
                        <label class="control-label col-sm-2" for="edit_formMetaData_serviceid" title="资源编号">资源编号</label>
                        <div class="col-sm-8">
                          <label class="form-control" data-column="serviceid" id="edit_formMetaData_serviceid"
                            data-validate-required="true" data-otype="input-text" title="MR00001936">MR00001936</label>
                        </div>
                      </div>
                      <div class="form-group col-sm-6">
                        <label class="control-label col-sm-2" for="edit_formMetaData_name" title="资源别名">资源别名</label>
                        <div class="col-sm-8">
                          <label class="form-control" data-column="name" id="edit_formMetaData_name"
                            data-validate-required="true" data-otype="input-text" title="行政区域">行政区域</label>
                        </div>
                      </div>
                      <div class="form-group col-sm-6">
                        <label class="control-label col-sm-2" for="edit_formMetaData_keywords" title="系统标签">系统标签</label>
                        <div class="col-sm-8">
                          <label class="form-control" data-column="keywords" id="edit_formMetaData_keywords"
                            data-validate-required="true" data-otype="selectpicker" title="测试数据">测试数据</label>
                        </div>
                      </div>
                      <div class="form-group col-sm-12">
                        <label class="control-label col-sm-1" for="edit_formMetaData_description"
                          title="资源描述">资源描述</label>
                        <div class="col-sm-11">
                          <label class="form-control" data-column="description" id="edit_formMetaData_description"
                            data-validate-required="true" data-otype="textarea"></label>
                        </div>
                      </div>
                      <div class="form-group col-sm-12">
                        <div class="grouphead"><span>描述信息</span></div>
                      </div>
                      <div class="form-group col-sm-6">
                        <label class="control-label col-sm-2" for="edit_formMetaData_publishdate"
                          title="发布日期">发布日期</label>
                        <div class="col-sm-8">
                          <label class="form-control" data-column="publishdate" id="edit_formMetaData_publishdate"
                            data-validate-required="true" data-otype="datetimepicker"
                            title="2022-09-23 11:15:18">2022-09-23 11:15:18</label>
                        </div>
                      </div>
                      <div class="form-group col-sm-6">
                        <label class="control-label col-sm-2" for="edit_formMetaData_servicetype"
                          title="服务类型">服务类型</label>
                        <div class="col-sm-8">
                          <label class="form-control" data-column="servicetype" id="edit_formMetaData_servicetype"
                            data-validate-required="true" data-otype="selectpicker" title="SuperMap Rest地图服务">SuperMap
                            Rest地图服务</label>
                        </div>
                      </div>
                      <div class="form-group col-sm-6">
                        <label class="control-label col-sm-2" for="edit_formMetaData_dataScope" title="数据范围">数据范围</label>
                        <div class="col-sm-8">
                          <label class="form-control" data-column="dataScope" id="edit_formMetaData_dataScope"
                            data-validate-required="true" data-otype="input-text"></label>
                        </div>
                      </div>
                      <div class="form-group col-sm-6">
                        <label class="control-label col-sm-2" for="edit_formMetaData_updateType" title="更新方式">更新方式</label>
                        <div class="col-sm-8">
                          <label class="form-control" data-column="updateType" id="edit_formMetaData_updateType"
                            data-validate-required="true" data-otype="input-text"></label>
                        </div>
                      </div>
                      <div class="form-group col-sm-6">
                        <label class="control-label col-sm-2" for="edit_formMetaData_source" title="数据来源">数据来源</label>
                        <div class="col-sm-8">
                          <label class="form-control" data-column="source" id="edit_formMetaData_source"
                            data-validate-required="true" data-otype="input-text"></label>
                        </div>
                      </div>
                      <div class="form-group col-sm-6">
                        <label class="control-label col-sm-2" for="edit_formMetaData_rboffice" title="责任处室">责任处室</label>
                        <div class="col-sm-8">
                          <label class="form-control" data-column="rboffice" id="edit_formMetaData_rboffice"
                            data-validate-required="true" data-otype="selectpicker" title="XX-信息中心">XX-信息中心</label>
                        </div>
                      </div>
                      <div class="form-group col-sm-6">
                        <label class="control-label col-sm-2" for="edit_formMetaData_keepingunit"
                          title="保管单位">保管单位</label>
                        <div class="col-sm-8">
                          <label class="form-control" data-column="keepingunit" id="edit_formMetaData_keepingunit"
                            data-validate-required="true" data-otype="selectpicker" title="XX-信息中心">XX-信息中心</label>
                        </div>
                      </div>
                      <div class="form-group col-sm-6">
                        <label class="control-label col-sm-2" for="edit_formMetaData_secretlevel" title="密级">密级</label>
                        <div class="col-sm-8">
                          <label class="form-control" data-column="secretlevel" id="edit_formMetaData_secretlevel"
                            data-validate-required="true" data-otype="selectpicker" title="不涉密">不涉密</label>
                        </div>
                      </div>
                      <div class="form-group col-sm-6">
                        <label class="control-label col-sm-2" for="edit_formMetaData_updatedate" title="更新时间">更新时间</label>
                        <div class="col-sm-8">
                          <label class="form-control" data-column="updatedate" id="edit_formMetaData_updatedate"
                            data-validate-required="true" data-otype="datetimepicker"
                            title="2022-09-23 11:15:18">2022-09-23 11:15:18</label>
                        </div>
                      </div>
                      <div class="form-group col-sm-6">
                        <label class="control-label col-sm-2" for="edit_formMetaData_crs" title="坐标系名称">坐标系名称</label>
                        <div class="col-sm-8">
                          <label class="form-control" data-column="crs" id="edit_formMetaData_crs"
                            data-validate-required="true" data-otype="selectpicker"
                            title="2000坐标系4490">2000坐标系4490</label>
                        </div>
                      </div>
                      <div class="form-group col-sm-6">
                        <label class="control-label col-sm-2" for="edit_formMetaData_epsgCode" title="EPSG code">EPSG
                          code</label>
                        <div class="col-sm-8">
                          <label class="form-control" data-column="epsgCode" id="edit_formMetaData_epsgCode"
                            data-validate-required="true" data-otype="input-text"
                            title="4490|4490(CGCS2000)">4490|4490(CGCS2000)</label>
                        </div>
                      </div>
                      <div class="form-group col-sm-6">
                        <label class="control-label col-sm-2" for="edit_formMetaData_runtimestatus"
                          title="运行状态">运行状态</label>
                        <div class="col-sm-8">
                          <label class="form-control" data-column="runtimestatus" id="edit_formMetaData_runtimestatus"
                            data-validate-required="true" data-otype="input-checkbox" title="启用">启用</label>
                        </div>
                      </div>
                      <div class="form-group col-sm-6">
                        <label class="control-label col-sm-2" for="edit_formMetaData_shsqlc" title="适合申请流程">适合申请流程</label>
                        <div class="col-sm-8">
                          <label class="form-control" data-column="shsqlc" id="edit_formMetaData_shsqlc"
                            data-validate-required="true" data-otype="selectpicker"
                            title="国家秘密和工作秘密数据成果申请">国家秘密和工作秘密数据成果申请</label>
                        </div>
                      </div>
                      <div class="form-group col-sm-12">
                        <div class="grouphead"><span>共享设置</span></div>
                      </div>
                      <div class="form-group col-sm-4">
                        <label class="control-label col-sm-3" for="edit_formMetaData_ispublic" title="是否公开">是否公开</label>
                        <div class="col-sm-9">
                          <label class="form-control" data-column="ispublic" id="edit_formMetaData_ispublic"
                            data-validate-required="true" data-otype="input-checkbox" title="是">是</label>
                        </div>
                      </div>
                      <div class="form-group col-sm-4">
                        <label class="control-label col-sm-3" for="edit_formMetaData_searched" title="是否共享">是否共享</label>
                        <div class="col-sm-9">
                          <label class="form-control" data-column="searched" id="edit_formMetaData_searched"
                            data-validate-required="true" data-otype="input-checkbox" title="是">是</label>
                        </div>
                      </div>
                      <div class="form-group col-sm-4">
                        <label class="control-label col-sm-3" for="edit_formMetaData_externalApply"
                          title="外部申请">外部申请</label>
                        <div class="col-sm-9">
                          <label class="form-control" data-column="externalApply" id="edit_formMetaData_externalApply"
                            data-validate-required="true" data-otype="input-checkbox" title="是">是</label>
                        </div>
                      </div>
                    </form>
                    <br>
                    <br>
                  </div>
                </div>
              </div>
            </div>
            <div class="resourcedetail-left">

            </div>
            <div class="resourcedetail-right">
            </div>
          </div>
        </div>
      </div>
    </div>
  </BasicDrawer>
</template>
<script lang="ts">
import { defineComponent, ref, computed, unref } from 'vue';
import { BasicForm, useForm } from '/@/components/Form/index';
import { formSchema } from './assembly.data';
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';

// 加载菜单
import { getMenuList } from '/@/api/sys/menu';

import { saveMenuApi } from '/@/api/system/menu';
import { listToTree } from '/@/utils/menuUtil';

import { useI18n } from '/@/hooks/web/useI18n';
import { metaModel } from '/@/api/system/model/menuModel';

export default defineComponent({
  name: 'MenuDrawer',
  components: { BasicDrawer, BasicForm },
  emits: ['success', 'register'],
  setup(_, { emit }) {
    const isUpdate = ref(true);
    let menuId;

    const [registerForm, { resetFields, setFieldsValue, updateSchema, validate }] = useForm({
      labelWidth: 100,
      schemas: formSchema,
      showActionButtonGroup: false,
      baseColProps: { lg: 12, md: 24 },
    });

    //默认传递页面数据
    const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
      // resetFields();
      // setDrawerProps({ confirmLoading: false });
      console.log('data', data);
    });

    return {
      registerDrawer,
      registerForm,
      getTitle: "地图资源详情"
    };
  },
});
</script>

<style scoped>
.map-resources {
  height: 220px;
}

.tab-content>.active {
  display: block;
  visibility: visible;
}

.grouphead span::before {
  content: '';
  width: 4px;
  height: 16px;
  background: #00A3FF;
  border-radius: 2px;
  display: inline-block;
  left: 0;
  position: absolute;
}

.grouphead span {
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #5E5D5E;
  line-height: 16px;
}

@media (min-width: 768px) {
  .col-sm-9 {
    width: 75%;
  }
}


.tab-content .col-sm-3 {
  width: 100%;
  border-right: block;
}

.tab-content .col-sm-9 {
  width: 100%;
  border: 1px solid #e7e7e7;
  height: 40px;
  line-height: 40px;
  top: 0px;
  padding-left: 0;
  margin-top: 0px;
}

.tab-content .control-label {
  color: #5E5D5E;
  line-height: 40px;
}

.tab-pane label[data-otype] {
  line-height: 37px !important;
}

.tab-content .col-sm-8 {
  width: 73.5%;
  border: 1px solid #e7e7e7;
  height: 40px;
  line-height: 34px;
  top: 0px;
}

.tab-content .col-sm-10 {
  width: 73.5%;
  border: 1px solid #e7e7e7;
  height: 34px;
  top: 0px;
}

.tab-content .col-sm-12 {
  margin-top: -4px;
}

.tab-content .form-group {
  margin-bottom: 0px;
  padding-right: 0;
  padding-left: 0;
}

.grouphead {
  height: 30px;
  line-height: 20px;
  font-size: 16px;
  margin: 16px 0;
  font-weight: bold;
}

.grouphead span {
  display: inline-block;
  padding: 4px 16px;
}

.bottom-btn-right button {
  width: 98px;
  height: 40px;
  background: #ffffff;
  border: 1px solid #00a3ff;
  border-radius: 3px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #00a3ff;
  line-height: 16px;
  margin-left: 0px;
  transition: all 0.3s;
}

.left-time {
  width: 194px;
  height: 13px;
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #5e5d5e;
  line-height: 16px;
  opacity: 0.5;
}

.right-box-describe p {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #5e5d5e;
  line-height: 25px;
  opacity: 0.8;
}

.right-keyword-item p {
  height: 28px;
  background: #ffffff;
  border: 1px solid #00a3ff;
  border-radius: 3px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #00a3ff;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.right-box-words span {
  width: 235px;
  height: 24px;
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #5e5d5e;
  line-height: 16px;
  padding-top: 15px;
}

.map-right-box {
  padding: 40px 0 0px 36px;
  width: calc(100% - 305px);
  float: left;

}

.tab-content .form-group[data-v-1abe69ca] {
  margin-bottom: 0px;
  padding-right: 0;
  padding-left: 0;
}

.tab-content .col-sm-12[data-v-1abe69ca] {
  margin-top: -4px;
}

.tab-content .col-sm-12 {
  margin-top: -4px;
}


.tab-pane label {
  margin-top: 0px;
  width: 26.5%;
  height: 40px;
  border: 1px solid #e7e7e7;
  background: #fbfbfb;
  color: #5e5d5e;
}

.tab-content .col-sm-1 {
  width: 153.03px;
  border-right: black;
}

@media (min-width: 768px) {
  .col-sm-1 {
    width: 8.33333333% !important;
  }
}

.tab-content .control-label {
  color: #5E5D5E;
}

.map-left-box {
  width: 300px;
  height: 250px;
  padding: 45px 0 0px 30px;
  float: left;
}

.map-left-box img {
  width: 100%;
  height: 220px;
}

.tab-content .col-sm-6 {
  height: 40px;
}

.tab-content .col-sm-11 {
  height: 34px;
  border: 1px solid #e7e7e7;
  width: 86.72%;
  top: 0px;
  padding-right: 0;
  padding-left: 0;
}

.tab-content .col-sm-3 {
  width: 100%;
  border-right: block;
}

.tab-content .control-label {
  color: #5E5D5E;
}

.nav-tabs>li {
  float: left;
  margin-bottom: -1px;
}
.nav>li {
  position: relative;
  display: block;
}

.tab-content {
  margin: 0 !important;
  padding: 16px 0 0 0 !important;
}

.bottom-btn {
  height: 30%;
  display: flex;
  padding-top: 16px;
}

.index_btn1 {
  display: block;
  height: 32px;
  /* width: 67px; */
  border-radius: 4px;
  background: #f4f6fb;
  z-index: 1;
  line-height: 32px;
  padding: 0 8px 0 28px;
  cursor: pointer;
}

#btn_version_watch,
#btn_post,
#btn_watching,
#btn_download,
#btn_authchecking,
#btn_postClient,
#btn_dt_downloadAuth,
#btn_dr_downloadAuth,
#btn_subscribe,
#btn_ms_play,
#btn_fme_play {
  margin-left: 10px;
  margin-top: 5px;
  float: right;
  /* display: none; */
  /* color: #fff; */
  /* background-color: #337ab7; */
  /* border-color: #2e6da4; */
}

.resourcedetail-box {
  width: 100%;
  height: 100%;
}

.tab-pane label[data-otype] {
  display: block;
  width: 100%;
  height: auto;
  padding: 0 8px;
  min-height: 24px;
  margin: 0px;
  line-height: 24px;
  background-color: #fff;
  background-image: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  position: relative;
  /* overflow-y: auto; */
  white-space: nowrap;
  word-break: keep-all;
  top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #5e5d5e;
}

@media (min-width: 768px) {
  .col-sm-4 {
    width: 33.33333333% !important;
  }
}

.tab-pane label {
  margin-top: 0px;
  color: #333;
}

.form-group {
  margin-bottom: 15px;
  width: 100vw;
}

.form-control {
  border: none !important;
}

@media (min-width: 768px) {
  .col-sm-6 {
    width: 50%;
  }
}

@media (min-width: 768px) {

  .col-sm-1,
  .col-sm-10,
  .col-sm-11,
  .col-sm-12,
  .col-sm-2,
  .col-sm-3,
  .col-sm-4,
  .col-sm-5,
  .col-sm-6,
  .col-sm-7,
  .col-sm-8,
  .col-sm-9 {
    float: left;
  }
}

.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-14,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-xs-1,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
</style>
