<template>
	<div class="home-container layout-pd">
		<el-row :gutter="20">
			<el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16" class="left-content">
				<el-row :gutter="20">
					<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
            <el-card shadow="never" v-loading="state.loading" class="statistics-item">
              <div class="statistics-title">
                <img v-lazy="getImageUrl('home/Call.png')" alt="" src="" />
                今日来电
              </div>
              <div class="statistics-number">
                <div class="statistics-number-item">
                  <p class="statistics-number-item-number"><b>520</b></p>
                  <p class="statistics-number-item-tips">全部</p>
                </div>
                <div class="statistics-number-item">
                  <p class="statistics-number-item-number"><b>200</b></p>
                  <p class="statistics-number-item-tips">有效</p>
                </div>
              </div>
            </el-card>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
						<el-card shadow="never" v-loading="state.loading" class="statistics-item">
							<div class="statistics-title">
								<img v-lazy="getImageUrl('home/connectionRate.png')" alt="" src="" />
								今日接通率
							</div>
							<div class="statistics-number">
								<div class="statistics-number-item">
									<p class="statistics-number-item-number"><b>198</b></p>
									<p class="statistics-number-item-tips">接通</p>
								</div>
								<div class="statistics-number-item">
									<p class="statistics-number-item-number"><b>90%</b></p>
									<p class="statistics-number-item-tips">接通率</p>
								</div>
							</div>
						</el-card>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
						<el-card shadow="never" v-loading="state.loading" class="statistics-item">
							<div class="statistics-title">
								<img v-lazy="getImageUrl('home/workOrder.png')" alt="" src="" />
								今日受理工单
							</div>
              <div class="statistics-number">
                <div class="statistics-number-item">
                  <p class="statistics-number-item-number"><b>980</b></p>
                  <p class="statistics-number-item-tips">受理工单量</p>
                </div>
                <div class="statistics-number-item">
                  <p class="statistics-number-item-number"><b>730</b></p>
                  <p class="statistics-number-item-tips">今日直办工单量</p>
                </div>
              </div>
						</el-card>
					</el-col>
				</el-row>

        <backlog-list />
			</el-col>
			<!-- 常用入口 -->
			<el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8" class="right-content">
				<el-card shadow="never" class="right-entrance w100" v-loading="state.entranceLoading">
					<p class="right-entrance-title">
						常用入口
						<span @click="customEntry"> <SvgIcon name="ele-Setting" class="mr5" />自定义 </span>
					</p>
					<template v-if="state.entranceList.length">
						<ul class="right-entrance-list">
							<li class="right-entrance-list-item" v-for="item in state.entranceList" :key="item.id" :data-id="item.id" @click="goLink(item.path)">
<!--								<img v-lazy="getImageUrl(item.fastIcon)" alt="" class="my-handle" src="" />-->
                <SvgIcon :name="item.icon" size="42px" class="my-handle"/>
								<p>{{ item.pageName }}</p>
							</li>
						</ul>
					</template>
					<Empty descriptionData="暂无常用入口" v-else />
				</el-card>
        <!-- 通知公告 -->
        <el-card shadow="never" class="mt20 right-notice" v-loading="state.noticeLoading">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleClick">
              <el-tab-pane label="知识库" name="knowledge"></el-tab-pane>
              <el-tab-pane label="通知公告" name="notice"></el-tab-pane>
            </el-tabs>
            <el-button type="primary" link v-show="state.noticeList.length" @click="more('notice')" class="more">
              更多
              <SvgIcon name="ele-ArrowRight"/>
            </el-button>
            <template v-if="state.noticeList.length">
              <vue3-seamless-scroll :list="state.noticeList" class="right-notice-scroll" :hover="true" :limitScrollNum="6">
                <div class="right-notice-scroll-item" v-for="(item, index) in state.noticeList" :key="index">
								<span class="right-notice-scroll-item-name text-no-wrap" :title="item.title">
									<SvgIcon name="iconfont icon-jiadayinliang" class="mr5 vd" />{{ item.title }}</span
                >
                  <span class="right-notice-scroll-item-date"
                  >{{ formatDate(item.date, 'YYYY-mm-dd') }}
									<SvgIcon name="ele-DArrowRight" class="ml5" />
								</span>
                </div>
              </vue3-seamless-scroll>
            </template>
            <Empty v-else descriptionData="暂无通知公告" />
        </el-card>
			</el-col>
		</el-row>
    <!--  常用入口  -->
		<home-entrance ref="entranceRef" @updateEntrance="getEntrance" />
	</div>
</template>

<script lang="ts" setup name="home">
import { defineAsyncComponent, reactive, ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
import { getImageUrl } from '/@/utils/tools';
import { formatDate } from '/@/utils/formatTime';
import { geFastMenu } from '/@/api/home';
import { ElButton } from 'element-plus';
// 引入组件
const HomeEntrance = defineAsyncComponent(() => import('/@/views/home/component/Home-entrance.vue'));
const BacklogList = defineAsyncComponent(() => import('/@/views/home/component/Backlog-list.vue'));
const router = useRouter();
const state = reactive({
	entranceList: <EmptyArrayType>[], // 常用入口
	noticeList: [
		{
			title: '市城区迁改23处盲道优化446个临时停车泊位',
			date: Date.now(),
		},
		{
			title: '彭清华在成都调研指导疫情防控工作时强调',
			date: Date.now(),
		},
		{
			title: '广元市第二次全国污染源普查公报',
			date: Date.now(),
		},
		{
			title: '昭化：发展高效农林产业 打造乡村振兴“新引擎”',
			date: Date.now(),
		},
		{
			title: '市城区迁改23处盲道优化446个临时停车泊位',
			date: Date.now(),
		},
		{
			title: '广元市第二次全国污染源普查公报',
			date: Date.now(),
		},
	], // 通知公告
	loading: false, //头部
	entranceLoading: false, //入口
	noticeLoading: false, // 公告
});
const entranceRef = ref<RefType>(); // 常用入口ref
const activeName = ref<string>('knowledge'); // tab切换
const handleClick = ()=>{
  console.log(activeName.value);
}
// 自定义入口
const customEntry = () => {
	entranceRef.value.openDialog();
};

//获取入口设置
const getEntrance = () => {
	state.entranceLoading = true;
	geFastMenu()
		.then((res: any) => {
			state.entranceList = res?.result ?? [];
			state.entranceLoading = false;
		})
		.catch(() => {
			state.entranceLoading = false;
		});
};

// 更多
const more = (val: string) => {
	switch (val) {
		case 'workOrder':
			break;
		case 'notice':
			break;
		default:
			break;
	}
};
onMounted(() => {
	getEntrance();
});
</script>
<style lang="scss" scoped>
.vd {
	vertical-align: middle;
}
.home-container {
	.left-content {
		.statistics {
			display: flex;
			justify-content: space-between;
			&-item {
				height: 200px;
				margin-bottom: 20px;
			}
			&-title {
				background: var(--hotline-bg-main-color);
				border-radius: 16px;
				height: 60px;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: var(--el-font-size-medium);
				img {
					width: 83px;
					height: 83px;
					position: absolute;
					left: -22px;
					top: -2px;
				}
			}
			&-number {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 40px 20px 0 20px;
				text-align: center;
				&-item-number {
					font-size: 30px;
				}
				&-item-tips {
					margin-top: 12px;
					color: var(--hotline-color-text-main-light);
				}
				&-item-total {
					flex: 1;
					font-size: 30px;
				}
			}
		}
	}
	.right-content {
		.right-entrance {
			&-title {
				font-size: var(--el-font-size-medium);
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 20px;
				font-weight: 600;
				span {
					font-size: 14px;
					display: flex;
					align-items: center;
					color: var(--el-text-color-regular);
					cursor: pointer;
					font-weight: normal;
				}
			}
			&-list {
				display: grid;
				justify-content: space-between;
				grid-template-columns: repeat(auto-fill, 110px);
				grid-gap: 15px;

				&-item {
					background: var(--hotline-bg-main-color);
					border-radius: 8px;
					text-align: center;
					width: 110px;
					height: 110px;
					cursor: pointer;
					color: var(--el-text-color-regular);
					user-select: none;
          padding: 10px 20px;
					.my-handle {
            display: inline-block;
						width: 40px;
						height: 50px;
						margin-top: 5px;
						margin-bottom: 10px;
					}
					&:hover {
						color: var(--el-color-primary);
						background-color: var(--el-color-primary-light-8);
					}
				}
			}
		}
		.right-notice {
      position: relative;
      .more{
        position: absolute;
        right: 20px;
        top: 30px;
        z-index: 2;
      }
			&-scroll {
				height: 300px;
				overflow: hidden;
				&-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-top: 1px solid var(--el-border-color);
					cursor: pointer;
					height: 50px;
					&-name {
						flex: 1;
						max-width: 70%;
					}
					&-date {
						display: flex;
						align-items: center;
						color: var(--el-color-info);
						text-align: right;
					}
					&:hover {
						color: var(--el-color-primary);
					}
				}
			}
		}
	}
}
</style>
