<template>
  <div class="cim-home">
    <div class="cim-home-header">
      <div class="tw-flex tw-flex-row tw-items-center tw-justify-center">
        <!-- <div class="tw-flex">
          <span>管理中心</span>
        </div> -->
        <el-dropdown>
          <span class="el-dropdown-link">
            <div style="display: flex;align-items: center;">
                <img src="/public/images/user.png" alt="">
            </div>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="goPage('/main/personalCenter')">账号信息</el-dropdown-item>
              <el-dropdown-item @click="logout()">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      
      <!-- <img @click="goPage(ADMIN_API,'other')" src="/public/images/user.png" alt=""> -->
    </div>
    <div class="cim-home-logo">
      <!-- <img src="/public/images/img14.png" alt=""> -->
      <span class="cim-home-logo-title">{{cimTitle}}</span>
    </div>
    <div class="cim-home-nav">
      <div class="cim-home-nav-content">
        <span class="cim-home-nav-content-title">时空数据超市</span>
        <div class="cim-home-nav-content-con1">
          <div @click="goPage('/main/serverSupermarket','serverSupermarket',0)">
            <img src="/public/images/img15.png" alt="">
            <span>数据服务</span>
          </div>
          <div @click="goPage('/main/serverSupermarket','serverSupermarket',1)">
            <img src="/public/images/img16.png" alt="">
            <span>资源工具</span>
          </div>
        </div>
      </div>
      <div class="cim-home-nav-content cim-home-nav-content-con2">
        <img src="/public/images/img17.png" alt="">
      </div>
      <div class="cim-home-nav-content cim-home-nav-info3">
        <span class="cim-home-nav-content-title">专题应用</span>
        <div class="cim-home-nav-content-con3">
          <div v-for="(item,index) in menuList"
               @click="goPage(item,'menu')"
          >
            <img :src="'/images/'+item.icon" alt="">
            <span>{{ item.name }}</span>
          </div>
        </div>
      </div>
      <div class="cim-home-nav-content cim-home-nav-info4">
        <span class="cim-home-nav-content-title">管理中心</span>
        <div class="cim-home-nav-content-con4">
          <div class="cim-home-nav-content-con4-nav">
            <div @click="goPage('/main/serviceCenter','manage',0)">
              <img src="/public/images/img26.png" alt="">
              <span>服务管理</span>
            </div>
            <div @click="goPage('/main/toolCenter','manage',1)">
              <img src="/public/images/img27.png" alt="">
              <span>工具管理</span>
            </div>
            <div @click="goPage('/main/application','manage',2)">
              <img src="/public/images/img28.png" alt="">
              <span>应用管理</span>
            </div>
            <div @click="goPage('/main/applyCenter','manage',3)">
              <img src="/public/images/img29.png" alt="">
              <span>进度查询</span>
            </div>
          </div>
          <div class="cim-home-nav-content-con4-info">
            <div>
              <span class="cim-home-nav-content-con4-info-t fs-09B7EB">{{ countNum.visitorsCount || 0 }}</span>
              <span class="cim-home-nav-content-con4-info-n">系统访问量</span>
            </div>
            <div>
              <span class="cim-home-nav-content-con4-info-t fs-EB8E09">{{ countNum.userCount || 0 }}</span>
              <span class="cim-home-nav-content-con4-info-n">用户注册</span>
            </div>
            <div>
              <span class="cim-home-nav-content-con4-info-t fs-0929EB">{{ countNum.applicationCount || 0 }}</span>
              <span class="cim-home-nav-content-con4-info-n">专题资源</span>
            </div>
            <div>
              <span class="cim-home-nav-content-con4-info-t fs-E809EB">{{ countNum.serviceCount || 0 }}</span>
              <span class="cim-home-nav-content-con4-info-n">数据服务</span>
            </div>
            <div>
              <span class="cim-home-nav-content-con4-info-t fs-EBC809">{{ countNum.toolsCount || 0 }}</span>
              <span class="cim-home-nav-content-con4-info-n">工具服务</span>
            </div>
            <div>
              <span class="cim-home-nav-content-con4-info-t fs-EB0909">{{ countNum.chartCount || 0 }}</span>
              <span class="cim-home-nav-content-con4-info-n">图表服务</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {defineComponent, onMounted, onUpdated, reactive} from "vue";
import {ADMIN_API} from "/public/config/server";
import {useRouter} from "vue-router";
import {toRefs} from "@vueuse/core";
import {getMethodCommon} from "../../api/common";

export default defineComponent({
  name: 'Home',
  setup() {
    const router = useRouter()
    let data = reactive({
      ADMIN_API: ADMIN_API,
      menuList: [],
      countNum: {},
      cimTitle: '时空大数据平台'
    })
    onMounted(() => {
      methods.getMenu()
      methods.getCountNum()
      methods.countVisitorNumber()
      methods.getTitles()
    })
    let methods = {
      logout() {
        localStorage.clear()
        router.push({path: "/login"})
      },
      goPage(param, type, state) {
        if (type === 'other') {
          window.location.href = ADMIN_API
        } else if (type === 'menu') {
          router.push({
            path: '/cim',
            query: {
              type: param.page_code,
              id: param.id,
              title: param.name,
            }
          })
        } else if (type === 'serverSupermarket') {
          router.push({
            path: param,
            query: {
              status: state,
              type: type
            }
          })
        } else {
          router.push({
            path: param,
            query: {
              status: state,
              type: type
            }
          })
        }
      },
      getMenu() {
        let _menuList = localStorage.getItem('menuList')
        data.countNum = JSON.parse(_menuList)
        getMethodCommon("/CimApplication/GetSysCimList", {}).then(res => {
          if (res.code === 200) {
            if (_menuList === JSON.stringify(res.result)) {
            } else {
              localStorage.setItem('menuList', JSON.stringify(res.result))
            }
          }
          if (res.code === 200) {
            data.menuList = res.result
            localStorage.setItem('menuList', JSON.stringify(res.result))
          }
        })
      },
      getCountNum() {
        getMethodCommon("/CimApplication/GetLoginCount", {}).then(res => {
          if (res.code === 200) {
              data.countNum = res.result
            }
        })
      },
      getTitles(){
        getMethodCommon("/CimApplication/GetCimTitle", {}).then(res => {
          data.cimTitle = res.result
        })
      },
      countVisitorNumber() {
        getMethodCommon("/CimApplication/LoginVisitors", {}).then(res => {})
      }
    };
    return {
      ...methods,
      ...toRefs(data),
    };
  },
});
</script>

<style lang="scss" scoped>

.cim-home {
  width: 100%;
  height: 100vh;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  overflow: scroll;

  &-header {
    width: 100%;
    text-align: right;
    align-items: center;
    justify-content: flex-end;
    display: flex;
    height: 100px;

    span {
      display: block;
      margin-right: 10px;
    }

    img {
      margin-right: 30px;
      cursor: pointer;
    }
  }

  &-logo {
    margin-top: 20px;
    &-title{
      background-image: linear-gradient(to right, #08B7EC, #575DAD);
      -webkit-background-clip: text;
      color: transparent;
      font-size: 48px;
      font-weight: bold;
    }
  }

  &-nav {
    display: flex;
    flex-direction: row;
    width: 1632px;
    margin: 100px auto 0;

    &-content {
      display: flex;
      flex-direction: column;

      &-title {
        font-size: 24px;
        font-family: Source Han Sans CN, SansSerif;
        font-weight: 400;
        color: #4D4D4D;
        padding-bottom: 14px;
      }

      &-con1 {
        width: 256px;
        height: 641px;
        background-image: url("/public/images/img30.png");

        div {
          display: flex;
          flex-direction: column;
          text-align: center;
          align-items: center;
          cursor: pointer;
        }

        img {
          width: 138px;
          height: 147px;
          margin-top: 89px;
          margin-left: 18px;
        }

        span {
          font-size: 24px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #FFFFFF;
        }
      }

      &-con2 {
        margin-left: 20px;

        img {
          width: 578px;
          height: 621px;
          margin-top: 50px;
        }
      }

      &-con3 {
        background-image: url("/public/images/img31.png");
        width: 421px;
        height: 641px;
        display: flex;
        flex-wrap: wrap;
        padding: 50px;
        box-sizing: border-box;

        div {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 160px;
          height: 148px;
          cursor: pointer;
        }

        img {
          margin-left: 28px;
        }

        span {
          font-size: 20px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #FFFFFF;
        }
      }

      &-con4 {
        background-image: url("/public/images/img31.png");
        width: 424px;
        height: 641px;
        display: flex;
        flex-wrap: wrap;
        //padding: 50px;
        box-sizing: border-box;
        margin-left: 20px;

        &-nav {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          padding: 50px 50px 0;
          div {
            width: 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-bottom: 20px;
            cursor: pointer;
          }

          img {
            margin-left: 13px;
          }

          span {
            font-size: 20px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #FFFFFF;
            margin-top: -10px;
          }
        }

        &-info {
          background-image: url("/public/images/img32.png");
          background-size: 100% 100%;
          width: 397px;
          height: 211px;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          box-sizing: border-box;
          padding: 34px 20px;
          margin: 20px auto 0;

          div {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 33.33%;
          }

          &-n {
            font-size: 16px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #808080;
          }

          &-t {
            font-size: 24px;
            font-family: Source Han Sans CN;
            font-weight: 400;
          }
        }
      }
    }

    &-info3 {
      margin-left: -90px;
    }

  }
}

.fs-09B7EB {
  color: #09B7EB;
}

.fs-EB8E09 {
  color: #EB8E09;
}

.fs-0929EB {
  color: #0929EB;
}

.fs-E809EB {
  color: #E809EB;
}

.fs-EBC809 {
  color: #EBC809;
}

.fs-EB0909 {
  color: #EB0909;
}
</style>
