<template>
	<div class="mainView">
		<!-- 顶部导航新闻 -->
		<div class="news">
			<img src="../../assets/logo/headline.png" alt="" />
			<div class="scroll-box">
				<mapList :date="headlinesList" :isType="'2'" />
			</div>
		</div>
		<div class="banners">
			<div class="ba_a">
				<!-- 轮播图1 -->
				<div class="block text-center" m="t-4">
					<el-carousel v-if="carouselLoaded" trigger="click" :interval="2000" :autoplay="true" height="300px">
						<el-carousel-item v-for="(item, index) in image" :key="index">
							<img style="width: 100%; height: 100%; cursor: pointer" :src="item.imgUrl" alt=""
								@click="imgShowData(item.id)" />
						</el-carousel-item>
					</el-carousel>
				</div>
			</div>
			<div class="ba_b">
				<div class="title">
					<p class="errorClass" :class="{ actives: isHovered == 1 ? true : false }" @mouseenter="mouseenterIactives(1)"
						@click="tabsData('1')">
						国务院信息
					</p>
					<p class="errorClass" :class="{ actives: isHovered == 2 ? true : false }" @mouseenter="mouseenterIactives(2)"
						@click="tabsData('2')">
						青海要闻
					</p>
					<p class="errorClass" :class="{ actives: isHovered == 3 ? true : false }" @mouseenter="mouseenterIactives(3)"
						@click="tabsData('3')">
						行业信息
					</p>
				</div>
				<div class="title-box" v-for="(item, index) in listData" :key="index" @click="tabsListData(item)">
					<span class="bag-img"></span>
					<div class="bag-title">{{ item.name }}</div>
					<div>{{ item.time }}</div>
				</div>
			</div>
		</div>
		<div class="l_u">
			<!-- 轮播图 -->
			<mapList :date="mapTitleConfigList" :isType="'1'" />
		</div>
		<!-- column -->
		<!-- <div class="column">
      <div class="left">
        <div class="lt">
          <el-button type="primary" class="title-text">要闻动态</el-button>
          <el-button link type="info" @click="lookMore('info')">
            更多<el-icon class="el-icon--right">
              <DArrowRight />
            </el-icon>
          </el-button>
        </div>
        <div
          class="title-box title-col"
          v-for="(item, index) in dynamicList"
          :key="index"
          @click="openNewWindow('')"
        >
          <span class="bag-img"></span>
          <div class="bag-title">{{ item.title }}</div>
          <span class="bag-time">{{ item.time }}</span>
        </div>
      </div>

      <div class="right">
        <div class="rt">
          <el-button type="primary" class="title-text">政策文件</el-button>
          <el-button link type="info" @click="lookMore2()">
            更多<el-icon class="el-icon--right">
              <DArrowRight />
            </el-icon>
          </el-button>
        </div>
        <div
          class="title-box title-col"
          v-for="(item, index) in policyList"
          :key="index"
          @click="openNewWindow('')"
        >
          <span class="bag-img"></span>
          <div class="bag-title">{{ item.title }}</div>
          <span class="bag-time">{{ item.time }}</span>
        </div>
      </div>
    </div> -->
		<div class="col-box">
			<div class="col-box-left">
				<div class="col-box-text">
					<p class="col-box-title">政务公开</p>
				</div>
				<div class="col-box-content">
					<div class="col-content-top">
						<div v-if="showType1 !== 0" class="col-content-img" @click="politics('/zwgk/zfxxgkzn')">
							<img class="img-text" src="../../assets/homeImg/政府信息公开指南.png" alt="" />
							<p class="col-content-title">{{ "政府信息公开指南" }}</p>
						</div>
						<div v-if="showType2 !== 0" class="col-content-img" @click="politics('/zwgk/zfxxgkzd')">
							<img class="img-text" src="../../assets/homeImg/政府信息公开制度.png" alt="" />
							<p class="col-content-title">{{ "政府信息公开制度" }}</p>
						</div>
						<div v-if="showType3 !== 0" class="col-content-img" @click="politics('/zwgk/fdgknr/lzyj')">
							<img class="img-text" src="../../assets/homeImg/法定主动公开内容.png" alt="" />
							<p class="col-content-title">{{ "法定公开内容" }}</p>
						</div>
						<div v-if="showType4 !== 0" class="col-content-img" @click="politics('/zwgk/zfxxgknb')">
							<img class="img-text" src="../../assets/homeImg/政府信息公开年报.png" alt="" />
							<p class="col-content-title">{{ "政府信息公开年报" }}</p>
						</div>
						<div v-if="showType5 !== 0" class="col-content-img" @click="politics('/zwgk/zcwj')">
							<img class="img-text" src="../../assets/homeImg/政策文件.png" alt="" />
							<p class="col-content-title">{{ "政策文件" }}</p>
						</div>
						<div v-if="showType6 !== 0" class="col-content-img" @click="politics('zwgk/zcjd')">
							<img class="img-text" src="../../assets/homeImg/政策解读.png" alt="" />
							<p class="col-content-title">{{ "政策解读" }}</p>
						</div>
						<div v-if="showType7 !== 0" class="col-content-img" @click="politics('zwgk/xzgfxwj')">
							<img class="img-text" src="../../assets/homeImg/行政规范性文件.png" alt="" />
							<p class="col-content-title">{{ "行政规范性文件" }}</p>
						</div>
						<div v-if="showType8 !== 0" class="col-content-img" @click="politics('/zwgk/ysqgk/main')">
							<img class="img-text" src="../../assets/homeImg/依申请公开.png" alt="" />
							<p class="col-content-title">{{ "依申请公开" }}</p>
						</div>
						<div v-if="showType9 !== 0" class="col-content-img" @click="politics('/zwgk/zfwzgznb')">
							<img class="img-text" src="../../assets/homeImg/政府网站工作年报.png" alt="" />
							<p class="col-content-title">{{ "政府网站工作年报" }}</p>
						</div>
					</div>
				</div>
			</div>
			<!-- <div class="col-box-left">
        <div class="col-box-text">
          <p class="col-box-title">监督检查</p>
        </div>
        <div class="col-box-content">
          <div class="col-content-top">
            <div class="col-content-img">
              <img class="img-text2" src="../../assets/logo/图标.png" alt="" />
              <p class="col-content-title1">{{ "廉政举报" }}</p>
            </div>
          </div>
        </div>
      </div> -->
			<div class="col-box-left">
				<div class="col-box-text">
					<p class="col-box-title">互动交流</p>
				</div>
				<div class="col-box-content">
					<div class="col-content-top1">
						<div class="col-content-img1" @click="politics('hdjl/ldxx/moreLetters')">
							<img class="img-text1" src="../../assets/logo/领导信箱.png" alt="" />
							<p class="col-content-title">{{ "领导信箱" }}</p>
						</div>
						<div class="col-content-img1" @click="politics('hdjl/xfjb/write')">
							<img class="img-text1" src="../../assets/logo/信访举报.png" alt="" />
							<p class="col-content-title">{{ "信访举报" }}</p>
						</div>
						<div class="col-content-img1" @click="politics('hdjl/myzj/list')">
							<img class="img-text1" src="../../assets/logo/意见征集.png" alt="" />
							<p class="col-content-title">{{ "民意征集" }}</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- partner -->
		<div class="partner">
			<div class="text-link-box">
				<img class="link-box-img" src="../../assets/logo/相关链接.png" alt="" />
				<p class="link-box-title">{{ "相关网站" }}</p>
			</div>
		</div>
		<div class="part">
			<div class="part-box" v-for="(item, index) in hyperlinkList" :key="item.id">
				<img class="part-img" src="../../assets/logo/标题-点h.png" alt="" />
				<p @click="jumpData(item.linkAddress)" class="part-text">
					{{ item.moduleName }}
				</p>
			</div>
		</div>
	</div>
</template>

<script setup>
import homePageApi from "@/api/homeApi.js";
import dicApi from "@/api/dictionary.js";
import { getlist, GWYlist, QIHlist, LSJUlist } from "@/api/Important.js";
import mapList from "./components/index.vue";
import imgUrlData from "../../assets/logo/01.jpg";
import imgUrlData2 from "../../assets/logo/banner.png";
import { ref, onMounted, nextTick } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const image = ref([]);
const carouselLoaded = ref(false);
const mapTitleConfigList = ref([
	{
		imgUrl: imgUrlData,
	},
	{
		imgUrl: imgUrlData2,
	},
]);
const isHovered = ref(1);
const showType1 = ref(0);
const showType2 = ref(0);
const showType3 = ref(0);
const showType4 = ref(0);
const showType5 = ref(0);
const showType6 = ref(0);
const showType7 = ref(0);
const showType8 = ref(0);
const showType9 = ref(0);
const policyList = ref([]); //政策文件
const dynamicList = ref([]); //要闻动态
const headlinesList = ref([]);
const listData = ref([]);
const hyperlinkList = ref([]);

onMounted(() => {
	getfairsconfigList(),
		getHeadlinesList(),
		getHomeImgPage(),
		getConfigList(),
		getHmrelateList(),
		getGwyListData(),
		homeFilePage(),
		getYwdtData(),
		getDIcList();
});

// 底部政策文件回显
const getfairsconfigList = () => {
	homePageApi.fairsconfigList({}).then((res) => {
		if (res.data && res.data.length > 0) {
			res.data.forEach((i) => {
				if (i.type === 1) {
					showType1.value = 1;
				} else if (i.type === 2) {
					showType2.value = 2;
				} else if (i.type === 3) {
					showType3.value = 3;
				} else if (i.type === 4) {
					showType4.value = 4;
				} else if (i.type === 5) {
					showType5.value = 5;
				} else if (i.type === 6) {
					showType6.value = 6;
				} else if (i.type === 7) {
					showType7.value = 7;
				} else if (i.type === 8) {
					showType8.value = 8;
				} else {
					showType9.value = 8;
				}
			});
		}
	});
};
// 首页标题
const getHeadlinesList = () => {
	homePageApi
		.homePage({
			current: 1,
			size: 1000,
			status: 2,
		})
		.then((res) => {
			headlinesList.value = res.data.records.map((item) => {
				return {
					imgUrl: item.headlineTitle,
					...item,
				};
			});
		});
};
// 首页轮播图列表
const arrListData = ref([]);
const getHomeImgPage = () => {
	homePageApi
		.homeImgPage({
			current: 1,
			size: 1000,
			status: 2,
		})
		.then((res) => {
			arrListData.value = res.data.records.map((item) => {
				return {
					imgUrl: item.newsImages.split(",").toString(),
					id: item.id,
				};
			});
			image.value = [].concat(...arrListData.value);
			nextTick(() => {
				carouselLoaded.value = true;
			});
		});
};
// 跳转详情
const imgShowData = (val) => {
	//定义一个路径
	let href = router.resolve({
		path: "/articleDetails",
		query: { type: "sylbt", id: val },
	}).href;
	//打开新的页面 到 href 这个页面
	window.open(href, "_blank");
};
// 首页轮播图配置
const getConfigList = () => {
	let arrList = [];
	homePageApi
		.homeConfigPage({
			current: 1,
			size: 10,
			status: 2,
		})
		.then((res) => {
			arrList = res.data.records.map((item) => {
				return {
					imgUrl: item.carouselImage ? item.carouselImage.split(",") : '',
					id: item.id,
				};
			});
			let a = [].concat(...arrList).slice(0, 3);
			a.forEach((i) => {
				mapTitleConfigList.value.push({
					imgUrl: i.imgUrl.toString(),
					id: i.id,
				});
			});
		});
};
// 相关网站
const getHmrelateList = () => {
	homePageApi
		.homeHmrelatePage({
			current: 1,
			size: 6,
			status: 2,
		})
		.then((res) => {
			hyperlinkList.value = res.data.records.map((item) => {
				return {
					id: item.id,
					linkAddress: item.linkAddress,
					moduleName: item.moduleName,
				};
			});
		});
};
// 要闻动态更多事件
function lookMore(path) {
	router.push("/News/" + path);
}
// 政策文件更多事件
function lookMore2() {
	router.push("/zwgk/zcwj");
}
// 国务院悬浮数据
const mouseenterIactives = (v) => {
	isHovered.value = v;
	if (v === 1) {
		typeData.value = "1";
		getGwyListData();
	} else if (v === 2) {
		typeData.value = "2";
		getQhywListData();
	} else {
		typeData.value = "3";
		getHyxxListData();
	}
};
// 切换事件 1: 国务院信息，2:青海要闻，3:行业信息跳转
const typeData = ref("1");
function tabsData(val) {
	typeData.value = val
	if (typeData.value == "1") {
		router.push("/News/gwy");
	} else if (typeData.value == "2") {
		router.push("/News/qhyw");
	} else {
		router.push("/News/lsj");
	}
}
// 国务院信息接口
function getGwyListData() {
	GWYlist({
		size: 8,
		current: 1,
		status: 2,
	}).then((res) => {
		listData.value = [];
		listData.value = res.data.records.map((item) => {
			return {
				id: item.id,
				name: item.title,
				time: item.publishDate.slice(0, 10),
				redirectUrl: item.redirectUrl
			};
		});
	});
}
// 青海要闻接口
function getQhywListData() {
	QIHlist({
		size: 8,
		current: 1,
		status: 2,
	}).then((res) => {
		listData.value = [];
		listData.value = res.data.records.map((item) => {
			return {
				id: item.id,
				name: item.title,
				time: item.publishDate.slice(0, 10),
				redirectUrl: item.redirectUrl
			};
		});
	});
}
// 行业信息接口
function getHyxxListData() {
	LSJUlist({
		size: 8,
		current: 1,
		status: 2,
	}).then((res) => {
		listData.value = [];
		listData.value = res.data.records.map((item) => {
			return {
				id: item.id,
				name: item.title,
				time: item.publishDate.slice(0, 10),
				redirectUrl: 0
			};
		});
	});
}
// 政策文件
function homeFilePage() {
	homePageApi
		.homeFilePage({
			current: 1,
			size: 8,
			status: 2,
		})
		.then((res) => {
			policyList.value = res.data.records.map((item) => {
				return {
					id: item.id,
					title: item.documentName,
					time: item.publishDate.slice(0, 10),
				};
			});
		});
}
// 要闻动态
function getYwdtData() {
	getlist({
		size: 8,
		current: 1,
		status: 2,
	}).then((res) => {
		dynamicList.value = [];
		dynamicList.value = res.data.records.map((item) => {
			return {
				id: item.id,
				title: item.title,
				time: item.publishTime.slice(0, 10),
			};
		});
	});
}
// 从列表跳转事件
function tabsListData(val) {
	if (val.redirectUrl === 0) {
		let href = router.resolve({
			path: '/News/Bureau',
			query: { code: 1, id: val.id },
		}).href
		window.open(href, '_blank')
	} else {
		window.open(val.redirectUrl, '_blank')
	}
}
// 相关网站跳转
function jumpData(val) {
	window.open(val);
}
// 政务公开;互动交流路由跳转
const politics = (val) => {
	if (val) {
		let href = router.resolve({
			path: val,
		}).href
		window.open(href, '_blank')
		// router.push(val);
	}
};

function openNewWindow(data) {
	//定义一个路径
	let href = router.resolve({
		path: "/articleDetails",
		query: {
			key: data,
		},
	}).href;
	//打开新的页面 到 href 这个页面
	window.open(href, "_blank");
}

import dictStore from "@/store/dictionary.js"; //引入仓库
import { storeToRefs } from "pinia"; //引入pinia转换
const dictStoreData = dictStore();
const { DICT_BM, DICT_JGZZ } = storeToRefs(dictStoreData); // 响应式
// 获取字典
function getDIcList() {
	// 部门
	dicApi.getUnitDict().then((res) => {
		if (res.code == 200) {
			dictStoreData.DICT_BM = res.data;
		}
	});
	// 职位
	dicApi.getTissue().then((res) => {
		if (res.code == 200) {
			dictStoreData.DICT_JGZZ = res.data;
		}
	});
	// 职务
	dicApi
		.getList({
			dictValue: "JTZW",
		})
		.then((res) => {
			if (res.code == 200) {
				dictStoreData.DICT_ZW = res.data.records;
			}
		});
}
</script>

<style lang="less" scoped>
@import url(@/style/home/index.less);
</style>
<style lang="less" scoped>
.part-text {
	cursor: pointer;
}

.title-col {
	width: 98%;
}

.actives {
	background-color: #3274c3;
	color: #ffffff;
}

.title-name {
	cursor: pointer;
	background-color: #3274c3;
	color: #ffffff;
}

.title-name1 {
	cursor: pointer;
	background-color: #fff;
	color: #333;
}

.bag-time {
	width: 18%;
}
</style>
