<template>
  <div class="common-layout">
    <el-container>
      <!-- 顶部菜单 -->
      <el-header class="bg-black flex items-center justify-between" height="50px">
        <el-space class="flex items-center">
          <el-avatar src="https://oss.wsdns.cn/20240331/7f7f7f57e12c45338beb7bfc7ecccfe9.png" class="cursor-pointer" shape="square" :size="32" @click="navigateTo('/manage', { replace: false })" />
          <div class="expand flex items-center justify-center block hover:bg-gray-700 h-[32px] w-[32px] cursor-pointer" @click="visible = !visible"><el-icon color="white" class="block" size="20"><Grid /></el-icon></div>
        </el-space>
          <template v-if="token">
            <el-dropdown @command="handleCommand">
              <el-avatar class="cursor-pointer" :src="userInfo?.avatar" :size="30" />
              <el-button circle :icon="ElIconUserFilled" color="#155FAA"></el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="user">个人中心</el-dropdown-item>
                  <el-dropdown-item divided command="logOut" @click="navigateTo('/user/logout')">退出</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
      </el-header>
      <!-- 主体 -->
      <el-container>
        <!-- 左侧菜单区域 -->
        <el-aside width="200px" class="bg-white" :style="{ minHeight: 'calc(100vh - 50px)' }">
          <div class="flex items-center justify-between py-4 px-5 text-lg font-bold text-center bg-white border-b-1 border-b-gray-100 border-b-solid">
            企业官网 WDS
            <el-icon><Memo /></el-icon>
          </div>
          <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              style="border: none"
              @open="handleOpen"
              @close="handleClose"
          >
            <el-menu-item index="1">
              <span>概况</span>
            </el-menu-item>
            <el-menu-item index="2">
              <span>栏目管理</span>
            </el-menu-item>
            <el-menu-item index="3">
              <span>文章列表</span>
            </el-menu-item>
            <el-menu-item index="4">
              <span>素材管理</span>
            </el-menu-item>
            <el-menu-item index="5">
              <span>广告管理</span>
            </el-menu-item>
            <el-menu-item index="6">
              <span>订单管理</span>
            </el-menu-item>
            <el-menu-item index="7">
              <span>用户管理</span>
            </el-menu-item>
            <el-menu-item index="8">
              <span>系统设置</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <!-- 左侧内容区域 -->
        <el-container>
          <el-main class="overflow-y-hidden relative">
            <div class="absolute inset-0 bg-black opacity-10 z-1" v-if="visible" @click="visible = false"></div>
            <div v-if="visible" class="drawer w-screen-lg h-full bg-white left-0 top-[50px] fixed z-2 shadow-lg">
              <div class="flex items-center justify-between p-3 border-b border-b-solid border-b-gray-200">
                <div class="text-lg font-bold">产品与服务</div>
                <el-space class="flex items-center">
                  <el-input
                      class="w-20"
                      placeholder="站内搜索"
                      :suffix-icon="ElIconSearch"
                      v-model="form.comments"
                      @keyup.enter.native="handleSearch"
                  />
  <!--                <el-input v-model="search" placeholder="搜索应用" class="w-[200px]" />-->
                  <div class="cursor-pointer mt-1 ml-5" @click="visible = false"><el-icon size="24" color="gray"><Close /></el-icon></div>
                </el-space>
              </div>
              <div class="menu-content flex">
                <div class="w-[200px] bg-gray-50">
                  <el-menu
                      default-active="2"
                      class="el-menu-vertical-demo"
                      style="border-right: 1px solid #f9fafb"
                      @open="handleOpen"
                      @close="handleClose"
                  >
                    <el-menu-item index="2">
                      <span>精选</span>
                    </el-menu-item>
                    <el-menu-item index="3">
                      <span>网页</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                      <span>移动</span>
                    </el-menu-item>
                    <el-menu-item index="5">
                      <span>办公</span>
                    </el-menu-item>
                    <el-menu-item index="6">
                      <span>其他</span>
                    </el-menu-item>
                  </el-menu>
                </div>
                <div class="w-full p-3">
                  <el-scrollbar class="w-full" height="calc(100vh - 108px)">
                    <el-row :gutter="16">
                      <template v-for="item in 20" :key="item">
                        <el-col :span="8">
                          <div class="px-3 py-1 mb-2 text-sm text-gray-700 font-bold flex justify-between items-center">API 与工具</div>
                          <p class="scrollbar-demo-item hover:bg-gray-100 px-3 py-1 mb-2 cursor-pointer text-sm text-gray-500 flex justify-between items-center">
                            <span class="product-name">{{ item }} 云服务器 ECS</span>
                            <span class="icon flex items-center hover:flex">
                              <el-icon color="gray"><Star /></el-icon>
                            </span>
                          </p>
                        </el-col>
                      </template>
                    </el-row>
                  </el-scrollbar>
                </div>
              </div>
            </div>
            <div class="my-3">
              <el-alert type="warning">
                <template #title>
                  <text type="text" class="cursor-pointer">关于《小程序技术平台服务协议》更新公告</text>
                </template>
              </el-alert>
            </div>
            <el-card shadow="hover" class="flash mt-4 bg-white hover:shadow  rounded-lg">
              <template #header>我的应用</template>
              <el-row :gutter="16">
                <template v-for="(item,index) in list" :key="index">
                  <el-col :span="6" @click="openSpmUrl(`https://${item.tenantId}.websoft.top/token-login`,item,item.tenantId)">
                    <div class="app-item block  border-solid rounded-lg border-gray-300 border-1 bg-white mb-4 p-3 flex flex-row items-center hover:border-blue-4 hover:border-1.5 cursor-pointer">
                      <el-avatar :src="item?.logo" shape="square" />
                      <div class="info ml-2">
                        <div class="app-item-title font-bold flex items-center">{{ item.tenantName }}<el-tag type="warning" class="ml-2" size="small">网页</el-tag></div>
                        <div class="app-item-desc text-gray-400">{{ item.comments }}</div>
                      </div>
                    </div>
                  </el-col>
                </template>
              </el-row>
            </el-card>
            <!--    <el-card shadow="hover" class="mt-4">-->
            <!--      <el-tabs v-model="activeIndex" type="">-->
            <!--        <el-tab-pane label="微信小程序" name="mp-weixin">-->
            <!--          <el-table :data="tableData" stripe style="width: 100%">-->
            <!--            <el-table-column prop="date" label="Date" width="180" />-->
            <!--            <el-table-column prop="name" label="Name" width="180" />-->
            <!--            <el-table-column prop="address" label="Address" />-->
            <!--          </el-table>-->
            <!--        </el-tab-pane>-->
            <!--        <el-tab-pane label="网页/移动应用" name="web">-->
            <!--        </el-tab-pane>-->
            <!--      </el-tabs>-->
            <!--    </el-card>-->
            <el-card shadow="hover" class="flash mt-4 bg-white hover:shadow ">
              <template #header>开发工具推荐</template>
              <el-row :gutter="16">
                <template v-for="(item,index) in list" :key="index">
                  <el-col :span="6" @click="openSpmUrl(`https://${item.tenantId}.websoft.top/token-login`,item,item.tenantId)">
                    <div class="app-item block border-solid rounded-lg border-gray-300 border-1 mb-4 p-3 flex flex-row items-center hover:border-blue-4 hover:border-1.5 cursor-pointer">
                      <div class="info ml-2">
                        <div class="app-item-title">{{ item.tenantName }}</div>
                        <div class="app-item-desc text-gray-400">{{ item.comments }}</div>
                      </div>
                    </div>
                  </el-col>
                </template>
              </el-row>
            </el-card>
          </el-main>
          <el-footer class="fixed bottom-0 items-center flex justify-center text-gray-400" :style="{ width: 'calc(100vw - 200px)' }">
            <span>Copyright © {{ new Date().getFullYear() }} {{ config?.copyright }}</span>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>
<script setup lang="ts">
import {useConfigInfo, useToken, useWebsite} from "~/composables/configState";
import useFormData from '@/utils/use-form-data';
import type { User } from '@/api/system/user/model';
import { ref } from 'vue'
import {useServerRequest} from "~/composables/useServerRequest";
import type {ApiResult, PageResult} from "~/api";
import type {Company} from "~/api/system/company/model";
import type {Tenant} from "~/api/system/tenant/model";

// 配置信息
const runtimeConfig = useRuntimeConfig();
const route = useRoute();
const website = useWebsite()
const config = useConfigInfo();
const token = useToken();
const userInfo = ref<User>();
const visible = ref(false);
const showIcon = ref(false);
const activeIndex = ref('mp-weixin');
const list = ref<Tenant[]>();
const avatar = ref(localStorage.getItem('avatar'))


import {
  Document,
  Menu as IconMenu,
  Location,
  Expand,
  MoreFilled,
  Grid,
  Memo,
  Close,
  Star,
  Setting,
} from '@element-plus/icons-vue'
import {navigateTo} from "#imports";
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]

// 配置信息
const { form, assignFields } = useFormData<User>({
  userId: undefined,
  nickname: '',
  username: '',
  phone: '',
  mobile: '',
  sex: '',
  sexName: '',
  email: '',
  password: '',
  code: '',
  smsCode: '',
  comments: '',
  remember: true
});

useHead({
  title: `用户中心 - ${config.value?.siteName}`,
  meta: [{ name: website.value.keywords, content: website.value.comments }]
});


function handleCommand(command: string) {
  switch (command) {
    case 'logOut':
      logOut();
      break;
    default:
      navigateTo('/user');
      break;
  }
}

function logOut() {
  token.value = ''
  navigateTo('/passport/login')
}

const onDone = (index: string) => {
  activeIndex.value = index;
}

const onSubmit = async () => {
  const {data: modify } = await useServerRequest<ApiResult<User>>('/auth/user',{
    baseURL: runtimeConfig.public.apiServer,
    method: 'put',
    body: form
  })
  if(modify.value?.code == 0){
    ElMessage.success('修改成功')
  }
}

const handleSearch = () => {
  console.log('搜索')
}


const getUserInfo = async () => {
  const {data: response} = await useServerRequest<ApiResult<User>>('/auth/user',{baseURL: runtimeConfig.public.apiServer})
  if(response.value?.data){
    userInfo.value = response.value?.data;
  }
}


const reload = async () => {
  const {data: response} = await useServerRequest<ApiResult<PageResult<Tenant>>>('/system/tenant/page',{baseURL: runtimeConfig.public.apiServer, params: {
      userId: localStorage.getItem('UserId')
    }})
  if(response.value?.data){
    console.log(response.value,'tenantList')
    if (response.value?.data.list) {
      list.value = response.value?.data.list;
    }
  }
}

watch(
    () => route.path,
    () => {
      reload();
      getUserInfo();
    },
    { immediate: true }
);
</script>
<style lang="less">
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
