<template>
  <div class="examine-container">
    <div class="left-container">
      <template v-for="source in sourceTypes" :key="source.name">
        <div class="soure-item-row" :class="{ active: current === source.name }" @click="current = source.name">
          {{ source.name }}( <span :id="'sjck' + source.type">{{ getNum(source.type, 'sjck') }} </span>)
        </div>
      </template>
    </div>
    <div class="right-container">
      <MapList :isChild="false" v-if="current == '地图资源'"></MapList>
      <SceneList :isChild="false" v-if="current == '场景资源'"></SceneList>
      <FileList :isChild="false" v-if="current == '文件资源'"></FileList>
      <AssList :isChild="false" v-if="current == '组件资源'"></AssList>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { RoleEnum } from '/@/enums/roleEnum';
import MapList from '../dataAdmin/mapUpload/index.vue';
import SceneList from '../dataAdmin/sceneResourceUpload/index.vue';
import FileList from '../dataAdmin/fileResourceUpload/index.vue';
import AssList from '../assembly/index.vue';
import { MEDSTotal } from '/@/api/dataAdmin/mrerdr';

export default defineComponent({
  name: 'RoleManagement',
  components: { MapList, SceneList, FileList, AssList },
  setup() {
    let current = ref('地图资源');
    const sourceTypes = ref([
      { name: '地图资源', type: 'MR', num: 0 },
      { name: '场景资源', type: 'ER', num: 0 },
      { name: '文件资源', type: 'DR', num: 0 },
      { name: '组件资源', type: 'SR', num: 0 },
    ]);

    function getNum(type, name) {
      MEDSTotal({ type: type }, name + type)
    }

    return {
      getNum,
      current,
      sourceTypes,
      RoleEnum,
    };
  },
});
</script>
<style scoped lang="less">
.examine-container {
  display: flex;
  height: 100%;
  width: 100%;

  .left-container {
    width: 240px;
    height: calc(100% - 32px);
    margin: 16px 0 16px 10px;
    padding: 10px 20px;
    background-color: #fff;
    border-radius: 2px;
    cursor: pointer;

    .soure-item-row {
      height: 34px;
      width: 100%;
      margin: 20px 0;
      line-height: 34px;
      text-align: center;
      font-size: 14px;
      font-weight: normal;
      letter-spacing: 0px;
      color: #333333;
      background: #eff0f5;
      border-radius: 2px;
    }

    .active {
      background: #0671dd;
      color: #fff;
    }
  }

  .right-container {
    width: calc(100% - 260px);
    height: 100%;
  }
}
</style>

