<template>
  <div class="p-index g_bg_f0" ref="indexDiv" :style="{
		   'height':pageHeight + 'px'
		}">
    <div class="m-nav g_pl_17 g_mb_16 g_pt_16 g_bg_f0 g_flex_row_start g_flex_none">
      <Breadcrumb />
    </div>
    <div class="m-worp g_flex_1" :class="pageName == 'firmInfo' || pageName == 'shareJob'  || pageName ==  'upstreamDetail'|| pageName ==  'downstreamDetail' ? '' : 'g_bg_f'">
      <div class="m-router g_pb_16" :class="{
					'g_pl_12 g_pr_12' : !(pageName == 'memberInfo' || 
										pageName == 'firmInfo' || 
									
										pageName == 'shareJob' ||
										pageName == 'shareJobDetail' || pageName ==  'upstreamDetail'|| pageName ==  'downstreamDetail'),
					'g_pb_0' : pageName == 'shareJobDetail'|| pageName ==  'upstreamDetail'|| pageName ==  'downstreamDetail'
					}
				 " :style="{
					'min-height':isShowFooter ? 'calc(100vh - 184px)' : 'calc(100vh - 134px)'
			}">
        <RouterView class="g_flex_1" @scrollEvent="getScrollEvent" />
      </div>
      <div class="m-footer g_bg_f0" v-if="isShowFooter">
        <Mfooter />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import Mfooter from '../layout/m-footer.vue'
import Breadcrumb from './components/breadcrumb.vue'
import { HomeOutlined, ShoppingOutlined, UserOutlined, ApartmentOutlined, TeamOutlined, ContainerOutlined, AccountBookOutlined, BarChartOutlined, MailOutlined, SettingOutlined, AuditOutlined, SketchOutlined, MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const pageName = ref('')
const pageHeight = ref(0)
onMounted(() => {
  getInit(route)
})
watch(route, (val) => {
  getInit(val)
})

const isShowFooter = ref(false)

const getInit = ($data) => {
  pageName.value = $data.name

  if (pageName.value == 'roleManagementDetail') {
    if ($data.query.type == 'add') {
      title.value = '添加角色'
    } else if ($data.query.type == 'edit') {
      title.value = '编辑角色'
    } else if ($data.query.type == 'view') {
      title.value = '角色详情'
    }
  } else if (pageName.value == 'jobForm') {
    if ($data.query.type == 'add') {
      title.value = '新增职位'
    } else if ($data.query.type == 'edit') {
      title.value = '编辑职位'
    }
  } else {
    title.value = $data.meta.title
  }
  document.title = title.value
  pageHeight.value = window.innerHeight - 56
  console.log('路由信息：', $data, ' pageName：', pageName.value)
  if (pageName.value == 'townsmanList' || pageName.value == 'notes' || pageName.value == 'jobList' || pageName.value == 'memberInfo' || pageName.value == 'dataStatistics' || pageName.value == 'orderList' || pageName.value == 'mineBill' || pageName.value == 'billDetail' || pageName.value == 'serviceMarket' || pageName.value == 'upstream' || pageName.value == 'downstream' || pageName.value == 'downstreamDetail' || pageName.value == 'upstreamDetail'|| pageName.value == 'downOrderList'|| pageName.value == 'upOrderList'|| pageName.value == 'jobDetail'|| pageName.value == 'merchantBackHomePage') {
    // 隐藏footer
    isShowFooter.value = false
  } else {
    // 显示footer
    isShowFooter.value = true
  }
  window.onresize = () => {
    pageHeight.value = window.innerHeight - 56
  }
}

const title = ref('用户列表')

const handleGoHome = () => {
  router.push('/merchantManagement/homePage')
}

const goRoleList = () => {
  router.push('/merchantManagement/roleManagement')
}

const indexDiv = ref()
const getScrollEvent = () => {
  indexDiv.value.scrollTop = 0
}
</script>

<style lang='less'>
.p-index {
  height: calc(100% - 0px);
  overflow-y: auto;
  .m-worp {
    width: calc(100% - 34px);
    margin: 0 auto;
    .m-router {
      overflow-y: auto;
    }
    .g_pb_0 {
      padding-bottom: 0 !important;
    }
    .m-footer {
      width: 100%;
      height: 72px;
    }
  }
}
</style>