<template>
  <el-dialog

      :modal="true"
      class="content-center"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
      title="资源详细信息"
      :model-value="mapStore.layerDetailShow"
      v-bind="diaAttrs"
      :before-close="handleClose">

    <el-tabs
        v-model="activeName"

    >
      <el-tab-pane class="p-panel" label="资源目录" name="dir">
        <diy-el-form :span-attrs="{
         span:12
       }" :forms="myCollectionDetailDialogResourceForm" v-model:model-form="resourceForms"/>
      </el-tab-pane>
      <el-tab-pane class="p-panel" label="元数据" name="meta">
        <div class="meta-top" @click="metaCartName='bm'">
          <span>元数据结构</span>
          <span class="arrow"><ArrowDown/></span>
        </div>
        <el-tabs  tab-position="left" v-model="metaCartName" >
          <el-tab-pane label="编目信息" name="bm">
            <diy-el-form :span-attrs="{
             span:24
           }" :forms="resourceDetailDialogBmForm" v-model:model-form="metForms"/>
          </el-tab-pane>
          <el-tab-pane label="数据集内容信息" name="sjj">
            <diy-el-form :span-attrs="{
             span:24
           }" :forms="resourceDetailDialogSjjForm" v-model:model-form="metForms"/>
          </el-tab-pane>
          <el-tab-pane label="数据说明" name="sjsm">
            <diy-el-form :span-attrs="{
             span:24
           }" :forms="resourceDetailDialogDataIntroForm" v-model:model-form="metForms"/>
          </el-tab-pane>
          <el-tab-pane label="地理范围" name="dlfw">
            <diy-el-form :span-attrs="{
             span:24
           }" :forms="resourceDetailDialogDlForm" v-model:model-form="metForms"/>
          </el-tab-pane>
          <el-tab-pane label="负责单位信息" name="fzdwxx">
            <diy-el-form :span-attrs="{
             span:24
           }" :forms="resourceDetailDialogUnitForm" v-model:model-form="metForms"/>
          </el-tab-pane>
          <el-tab-pane label="限制信息" name="xzxx">
            <diy-el-form :span-attrs="{
             span:24
           }" :forms="resourceDetailDialogLimitForm" v-model:model-form="metForms"/>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane label="资源服务" name="service">
        <div class="title">
          服务概况
        </div>
        <diy-el-form :span-attrs="{
         span:24
       }" :forms="myCollectionDetailDialogServiceForm" v-model:model-form="resourceForms"/>
      </el-tab-pane>
      <el-tab-pane label="数据项" name="sjx">
        <MyTable :table-data="tableData" :headers="sjxHeaders" >

        </MyTable>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
import {onBeforeMount, ref} from "vue";
import {
  myCollectionDetailDialogResourceForm, myCollectionDetailDialogServiceForm,
  resourceDetailDialogBmForm,
  resourceDetailDialogDataIntroForm, resourceDetailDialogDlForm, resourceDetailDialogLimitForm,
  resourceDetailDialogSjjForm, resourceDetailDialogUnitForm
} from "@/data/all-forms";
import {getMetaDetailInfo, getResourceDirDetailInfo, queryDataItem} from "@/service/http.js";
import {ElMessageBox} from "element-plus";
import {useMapStore} from "@/store/mapStore.js";
import DiyElForm from "@/views/c-cpns/DiyElForm.vue";
import MyTable from "@/views/c-cpns/MyTable.vue";
import {sjxHeaders} from "@/data/all-headers.js";
export default {
  name: "LayerDetailDialog",
  components: {MyTable, DiyElForm},
  props:{
    diaAttrs:{

    }
  },
  setup(props,{emit}) {
    const mapStore = useMapStore();
    const metForms = ref({

    });
    const resourceForms = ref({

    });
    const tableData = ref([]);
    onBeforeMount(() => {
      if (!mapStore.layerDetailObj.CODE && !mapStore.layerDetailObj.R_CODE){
        ElMessageBox.alert('获取信息失败！', '提示', {
          confirmButtonText: '确定'
        });
        return
      }

      // R_CODE
      getResourceDirDetailInfo(mapStore.layerDetailObj.CODE || mapStore.layerDetailObj.R_CODE).then(res => {
        resourceForms.value = {
          ...mapStore.layerDetailObj,
          ...resourceForms.value,
          ...res.data.msg[0].Rows[0]
        }
      })
      getMetaDetailInfo(mapStore.layerDetailObj.CODE || mapStore.layerDetailObj.R_CODE).then(res => {
        metForms.value = {
          ...mapStore.layerDetailObj,
          ...metForms.value,
          ...res.data.msg[0].Rows[0]
        }
      })
      queryDataItem(mapStore.layerDetailObj.S_CODE).then(res => {
        debugger
        tableData.value = res.data.msg[0].Rows;
      })
    })
    const activeName = ref('dir')
    const metaCartName = ref('bm')
    function handleClose() {
      mapStore.layerDetailShow = false;
      mapStore.layerDetailCode = '';
    }
    return {
      mapStore,
      handleClose,
      activeName,
      metaCartName,
      resourceDetailDialogBmForm,
      resourceDetailDialogSjjForm,
      resourceDetailDialogDataIntroForm,
      resourceDetailDialogDlForm,
      resourceDetailDialogUnitForm,
      resourceDetailDialogLimitForm,myCollectionDetailDialogResourceForm,
      myCollectionDetailDialogServiceForm,
      metForms,
      resourceForms,
      sjxHeaders,
      tableData
    }
  }
}
</script>

<style scoped lang="scss">
:deep{
}
.title{
  font-size: 15px;
  padding: 10px 0;
  font-weight: 600;
  border-bottom: 1px solid #e7eaec;
  margin-bottom: 15px;
}
.meta-top{
  margin-bottom: 10px;
  cursor: pointer;
  width: 138px;
  margin-left: 20px;
  font-size: 16px;
}
.arrow{
  margin-left: 5px;
  text-align: right;
  vertical-align: middle;
  display: inline-block;
  width: 18px;
  height: 18px;
}
</style>