<template>
  <div class="out-div">
    <div class="header">
      <div class="header-span-div">
        <div class="mark"></div>
        <div class="span">空间数据管理</div>
      </div>
    </div>
    <div class="item-div">
      <div class="item" @click="openUploadMenuModal = true">
        <div class="item-icon item-upload"></div>
        <div class="item-title">上传数据</div>
        <div class="item-mark-div">
          <div class="item-mark"></div>
        </div>
      </div>
      <div class="item">
        <div class="item-icon item-server"></div>
        <div class="item-title">数据服务</div>
        <div class="item-mark-div">
          <div class="item-mark"></div>
        </div>
      </div>
      <div class="item">
        <div class="item-icon item-template"></div>
        <div class="item-title">模版管理</div>
        <div class="item-mark-div">
          <div class="item-mark"></div>
        </div>
      </div>
      <div class="item">
        <div class="item-icon item-application"></div>
        <div class="item-title">应用管理</div>
        <div class="item-mark-div">
          <div class="item-mark"></div>
        </div>
      </div>
    </div>
    <a-modal class="upload-menu-modal-out" width="1290px" v-model:open="openUploadMenuModal" :footer="null" :closable="false" centered :maskClosable="false">
      <div class="upload-menu-modal">
        <div class="upload-menu-modal-close-button" @click="openUploadMenuModal = false">
          <CloseCircleOutlined style="font-size: 30px;color: #fff;"/>
        </div>
        <div class="title">矢量数据</div>
        <div class="menu-item-div">
          <div class="menu-item" @click="openUploadMenuModalFunction('shp')">
            <div class="menu-item-icon-div">
              <div class="menu-item-icon">
                <div class="shp-icon"></div>
              </div>
            </div>
            <div class="menu-item-title">shp</div>
          </div>
          <div class="menu-item" @click="openUploadMenuModalFunction('excel')">
            <div class="menu-item-icon-div">
              <div class="menu-item-icon">
                <div class="excel-icon"></div>
              </div>
            </div>
            <div class="menu-item-title">Excel</div>
          </div>
          <div class="menu-item">
            <div class="menu-item-icon-div">
              <div class="menu-item-icon">
                <div class="geojson-icon"></div>
              </div>
            </div>
            <div class="menu-item-title">Geojson</div>
          </div>
          <div class="menu-item">
            <div class="menu-item-icon-div">
              <div class="menu-item-icon">
                <div class="wfs-icon"></div>
              </div>
            </div>
            <div class="menu-item-title">WFS</div>
          </div>
          <div class="menu-item">
            <div class="menu-item-icon-div">
              <div class="menu-item-icon">
                <div class="jiekoushuju-icon"></div>
              </div>
            </div>
            <div class="menu-item-title">接口数据</div>
          </div>
          <div class="menu-item">
            <div class="menu-item-icon-div">
              <div class="menu-item-icon">
                <div class="biaohuishuju-icon"></div>
              </div>
            </div>
            <div class="menu-item-title">标绘数据</div>
          </div>
        </div>
        <div class="second-div">
          <div class="left-div">
            <div class="title">栅格数据</div>
            <div class="left-menu-item-div">
              <div class="menu-item">
                <div class="menu-item-icon-div">
                  <div class="menu-item-icon">
                    <div class="yingxiangshuju-icon"></div>
                  </div>
                </div>
                <div class="menu-item-title">影像数据</div>
              </div>
              <div class="menu-item">
                <div class="menu-item-icon-div">
                  <div class="menu-item-icon">
                    <div class="map-data-icon"></div>
                  </div>
                </div>
                <div class="menu-item-title">地形数据</div>
              </div>
              <div class="menu-item">
                <div class="menu-item-icon-div">
                  <div class="menu-item-icon">
                    <div class="wms-icon"></div>
                  </div>
                </div>
                <div class="menu-item-title">WMS</div>
              </div>
            </div>
          </div>
          <div class="right-div">
            <div class="title">三位数据</div>
            <div class="right-menu-item-div">
              <div class="menu-item">
                <div class="menu-item-icon-div">
                  <div class="menu-item-icon">
                    <div class="qingxieyingxiang-icon"></div>
                  </div>
                </div>
                <div class="menu-item-title">倾斜影像</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
    <UploadModal v-model:openModal="uploadModal" :title="uploadModalTitle" :isShp="isShp"/>
  </div>
  
</template>

<script setup lang="ts">
import { ref } from "vue"
import UploadModal from './UploadModal/index.vue'
import { CloseCircleOutlined } from '@ant-design/icons-vue';

const openUploadMenuModal = ref(true)
const uploadModal = ref(false)
const uploadModalTitle = ref('')
const isShp = ref(true)

const openUploadMenuModalFunction = (type) => {
  switch(type){
    case 'shp':
      uploadModalTitle.value = '上传Shp'
      isShp.value = true
      break
    case 'excel':
      uploadModalTitle.value = '上传Excel'
      isShp.value = false
      break
  }
  uploadModal.value = true
}

</script>

<style lang="scss" scoped>
.out-div{
  height: 100%;
  background-color: #E0E5ED;
  .header{
    width: 100%;
    height: 176px;
    background-image: url('/public/datamaintenance/header_background.png');
    background-size: 100% 100%;
    position: relative;
    .header-span-div{
      position: absolute;
      top: 44px;
      left: 100px;
      height: 207px;
      height: 42px;
      display: flex;
      align-items: center;
      .mark{
        width: 3px;
        height: 30px;
        background: #FFFFFF;
        margin-right: 14px;
      }
      .span{
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 30px;
        color: #FFFFFF;
        line-height: 42px;
        letter-spacing: 1px;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
    }
  }
  .item-div{
    position: relative;
    display: flex;
    justify-content: center;
    top: -41px;
    .item{
      position: relative;
      width: 352px;
      height: 381px;
      background-image: url('/public/datamaintenance/item_background.png');
      background-size: 100% 100%;
      margin-right: 41px;
      padding-top: 224px;
      cursor: pointer;
      .item-icon{
        position: absolute;
        top: 36px;
        left: 50%;
        transform: translateX(-50%);
        width: 90px;
        height: 90px;
        background-size: 100% 100%;
      }
      .item-upload{
        background-image: url('/public/datamaintenance/upload_data_icon.png');
      }
      .item-server{
        background-image: url('/public/datamaintenance/data_server_icon.png');
      }
      .item-template{
        background-image: url('/public/datamaintenance/template_management_icon.png');
      }
      .item-application{
        background-image: url('/public/datamaintenance/application_management_icon.png');
      }
      .item-title{
        height: 40px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 28px;
        color: #191919;
        line-height: 40px;
        letter-spacing: 1px;
        text-align: center;
        font-style: normal;
        text-transform: none;
        margin-bottom: 14px;
      }
      .item-mark-div{
        height: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        .item-mark{
          width: 46px;
          height: 6px;
          background: linear-gradient( 270deg, #3354D8 0%, rgba(98,141,238,0.64) 100%);
        }
      }
    }
    .item:hover{
      background-image: url('/public/datamaintenance/item_background_hover.png');
    }
  }
}
.upload-menu-modal-close-button{
  position: absolute;
  top: -39px;
  right: -30px;
  cursor: pointer;
}
.upload-menu-modal{
  width: 1290px;
  height: 626px;
  background: linear-gradient( 180deg, #E5E8F4 0%, #F8F9FD 100%);
  border-radius: 13px;
  border: 2px solid #FFFFFF;
  padding-top: 30px;
  padding-left: 56px;
  .title{
    height: 40px;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 28px;
    color: #191919;
    line-height: 40px;
    letter-spacing: 1px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-bottom: 25px;
  }
  .menu-item{
    width: 174px;
    height: 174px;
    background: linear-gradient( 183deg, #E5E8F4 0%, #F8F9FD 100%);
    box-shadow: 0px 45px 90px 0px rgba(192,199,218,0.35);
    border-radius: 30px;
    border: 3px solid #FFFFFF;
    padding-top: 28px;
    margin-right: 26px;
    cursor: pointer;
    .menu-item-icon-div{
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 24px;
      .menu-item-icon{
        width: 70px;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
        .shp-icon{
          width: 62px;
          height: 59px;
          background-image: url('/public/datamaintenance/shp_icon.png');
          background-size: 100% 100%;
        }
        .excel-icon{
          width: 48px;
          height: 57px;
          background-image: url('/public/datamaintenance/excel_icon.png');
          background-size: 100% 100%;
        }
        .geojson-icon{
          width: 70px;
          height: 70px;
          background-image: url('/public/datamaintenance/geojson_icon.png');
          background-size: 100% 100%;
        }
        .wfs-icon{
          width: 59px;
          height: 58px;
          background-image: url('/public/datamaintenance/wfs_icon.png');
          background-size: 100% 100%;
        }
        .jiekoushuju-icon{
          width: 65px;
          height: 56px;
          background-image: url('/public/datamaintenance/jiekoushuju_icon.png');
          background-size: 100% 100%;
        }
        .biaohuishuju-icon{
          width: 65px;
          height: 54px;
          background-image: url('/public/datamaintenance/biaohuishuju_icon.png');
          background-size: 100% 100%;
        }
        .yingxiangshuju-icon{
          width: 61px;
          height: 61px;
          background-image: url('/public/datamaintenance/yingxiangshuju_icon.png');
          background-size: 100% 100%;
        }
        .map-data-icon{
          width: 48px;
          height: 47px;
          background-image: url('/public/datamaintenance/map_data_icon.png');
          background-size: 100% 100%;
        }
        .wms-icon{
          width: 53px;
          height: 44px;
          background-image: url('/public/datamaintenance/wms_icon.png');
          background-size: 100% 100%;
        }
        .qingxieyingxiang-icon{
          width: 54px;
          height: 44px;
          background-image: url('/public/datamaintenance/qingxieyingxiang_icon.png');
          background-size: 100% 100%;
        }
      }
    }
    .menu-item-title{
      height: 24px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 18px;
      color: #191919;
      line-height: 24px;
      text-align: center;
      font-style: normal;
      text-transform: none;
    }
  }
  .menu-item-div{
    display: flex;
    margin-bottom: 54px;
    
  }
  .second-div{
    display: flex;
    .left-div{
      margin-right: 50px;
      .left-menu-item-div{
        display: flex;
      }
    }
    .right-div{
      .right-menu-item-div{
        display: flex;
      }
    }
  }
}

</style>
