<template>
	<div class="all" v-loading="loading">
		<div class="bk">
			<text class="title">企业舆情</text>
			<div class="r_input">
				<el-dropdown trigger="click" @command="handleCommand" style="margin-left: 15px">
					<div class="el-dropdown-link" style="cursor: pointer">
						<span class="select_text">{{ form.pageType == 0 ? '企业' : '资讯' }}</span>
						<el-icon size="12" color="#1A1A1A">
							<ArrowDown />
						</el-icon>
					</div>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item :command="1"> 资讯</el-dropdown-item>
							<el-dropdown-item :command="0"> 企业</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>

				<div class="line"></div>

				<input
					v-model="form.companyName"
					:placeholder="form.pageType == 0 ? '请输入企业名称 / 简称 / 证券编码' : '请输入关键词搜索'"
					@keyup.enter="doSreach"
					class="input"
				/>

				<!-- <el-autocomplete
					v-else
					class="autocomplete"
					style="flex: 1; box-shadow: 0 0 0"
					:trigger-on-focus="false"
					v-model="companyNameYuqing"
					:fetch-suggestions="fetchSuggestions"
					placeholder="输入企业名称/企业简称/证券编码进行搜索"
					@select="companyChange"
				>
					<template #default="{ item }">
						<div class="value">{{ item.companyName }}</div>
					</template>
				</el-autocomplete> -->

				<div class="input_button" @click="doSreach">
					<el-icon color="white" size="18">
						<Search />
					</el-icon>
				</div>
			</div>
		</div>

		<!-- 企业列表 start -->
		<div style="min-height: 50vh" v-if="form.pageType == 0">
			<div class="list">
				<div
					v-if="list && list.length > 0"
					class="list_item"
					v-for="(item, index) in list"
					:key="index"
					@mouseenter="mouseEnter(index)"
					@mouseleave="mouseLeave(index)"
					@click="goDetail(item)"
					:class="{ hover: item.isHovered }"
				>
					<div>
						<div class="r_list_title" style="height: 25px">
							<div
								class="list_title"
								:style="{ marginTop: !item.secCode && !item.companySimpleName && item.companyName.length > 12 ? '15px' : '0px' }"
							>
								{{ !item.secCode && !item.companySimpleName ? item.companyName : item.companySimpleName }}
							</div>
							<div class="list_code" v-if="item.secCode">{{ item.secCode }}</div>
						</div>
						<div class="company_name" v-if="item.secCode || item.companySimpleName">{{ item.companyName }}</div>
					</div>
					<div class="btn_detail">
						<text :style="{ color: item.isHovered ? '#007AFF' : '#1A1A1A' }">查看详情</text>
						<div style="width: 10px; display: flex; justify-content: flex-start">
							<el-icon size="14" color="#007AFF" v-if="item.isHovered">
								<ArrowRight />
							</el-icon>
						</div>
					</div>
				</div>
				<div v-else style="width: 100%; height: 100%; display: flex; text-align: center; justify-content: center; align-items: center">
					<div class="r_empty">
						<el-image :src="emptyImg" class="empty"></el-image>
						<text class="empty_text">暂无内容</text>
					</div>
				</div>
			</div>
		</div>

		<el-pagination
			v-if="form.pageType == 0"
			background
			style="margin-top: 24px"
			class="page"
			layout="slot, ->,prev, pager, next, jumper"
			:page-sizes="[10, 20, 50, 100]"
			v-model:page-size="form.size"
			:total="total"
			@current-change="currentChange"
			@size-change="sizeChange"
		>
			<div style="font-size: 14px; color: rgba(0, 0, 0, 0.6)">共 {{ total }} 项数据</div>
		</el-pagination>
		<!-- 企业列表 end -->

		<div v-if="form.pageType == 1">
			<ZxList ref="zxListRef"></ZxList>
		</div>
	</div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { getYqcompanyList, getYqCheck } from '/@/api/api';
import { ElMessage } from 'element-plus';
import emptyImg from '/@/assets/images/empty.png';
import ZxList from './zxList.vue';

const router = useRouter();

const isHovered = ref(false);
const list = ref([
	{
		id: 1,
		companySimpleName: '',
		secCode: '',
		companyName: '浙江荣亿精密机械股份有限公司',
	},
	{
		id: 2,
		companySimpleName: '荣亿精密',
		secCode: '873223',
		companyName: '浙江荣亿精密机械股份有限公司',
	},
]);

const isSreaching = ref(false);
const mouseEnter = (index) => {
	list.value[index].isHovered = true;
};
const mouseLeave = (index) => {
	list.value[index].isHovered = false;
};
const form = reactive({
	keyword: '',
	type: 0,
	page: 1,
	size: 12,
	pageType: 0,
});

function sizeChange(size) {
	form.size = size;
	getData();
}

function currentChange(page) {
	form.page = page;
	getData();
}

const loading = ref(false);
const total = ref();
async function getData() {
	loading.value = true;
	let { code, data } = await getYqcompanyList({
		page: form.page,
		keyword: form.keyword,
		size: form.size,
		companyName: form.companyName,
	});
	loading.value = false;
	if (code == 200) {
		list.value = data.list;
		total.value = data.total;
		if (form.keyword) {
			lastKeyWord.value = form.keyword;
			isSreaching.value = true;
		} else {
			isSreaching.value = false;
		}
	}
}

const zxListRef = ref(null);
async function doSreach() {
	if (form.pageType == 0) {
		// 企业
		getData();
	} else {
		// 资讯
		zxListRef.value.getData(form);
	}
}

async function getYqCheckFn(item) {
	let { code, data } = await getYqCheck({
		companyName: item.companyName,
	});
	if (code == 200) {
		return data;
	}
}

async function goDetail(item) {
	let isCheck = await getYqCheckFn(item);
	if (isCheck == 0) {
		ElMessage.error('该企业未开通舆情');
		return;
	}
	router.push({
		path: '/yuqingCommon',
		query: {
			id: item.id,
		},
	});
}

/**
 *
 * @param value 0 企业 1 资讯
 */
function handleCommand(value) {
	form.pageType = value;
	if (value == 1) {
		list.value = [];
	} else {
		form.page = 1;
		getData();
	}
}

// 页面加载时
onMounted(() => {
	// NextLoading.done();
	getData();
});
</script>

<style scoped lang="scss">
@import url('/@/theme/page/page.scss');

.all {
	width: 100vw;
	height: 100vh;
	background-color: #f2f3f5;
	display: flex;
	flex-direction: column;
	text-align: center;
	align-items: center;
}

.bk {
	width: 100%;
	background: url('/@/assets/images/bk_charts.png') no-repeat center 0;
	height: 200px;
	display: flex;
	flex-direction: column;
	text-align: center;
	justify-content: center;
	align-items: center;
}

.r_input {
	background-color: white;
	border-radius: 10px;
	border: 1px solid #e3e3e3;
	width: 40vw;
	height: 52px;
	display: flex;
	align-items: center;
	// padding: 16px;

	:deep(.el-input__inner::placeholder) {
		color: #ccced3;
		font-family: 'PingFang SC';
		font-size: 16px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	}

	:deep(.el-input__wrapper) {
		box-shadow: 0 0 0 #fff;
	}
}

.autocomplete input {
	border: none !important;
}

.select_text {
	color: #1a1a1a;
	font-family: 'PingFang SC';
	font-size: 16px;
	font-style: normal;
	font-weight: normal;
	line-height: normal;
	margin-right: 3px;
}

.line_text {
	width: 1px;
	height: 15px;
	background: #333333;
	margin-left: 10px;
	margin-right: 10px;
}

.input {
	border: none;
	flex: 1;
	margin-left: 10px;
}

.input_button {
	display: flex;
	width: 56px;
	height: 44px;
	padding: 8px 15px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	border-radius: 8px;
	background: #0062d9;
	margin-right: 5px;
}

input::placeholder {
	color: #ccced3;
	font-family: 'PingFang SC';
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}

.title {
	color: #1a1a1a;
	text-align: center;
	font-family: 'PingFang SC';
	font-size: 32px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	letter-spacing: 2px;
	margin-bottom: 30px;
}

.page {
	max-width: calc(285px * 4 + 20px * 3);
	width: calc(285px * 4 + 20px * 3);
}

.list {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	max-width: calc(285px * 4 + 20px * 3);
	width: calc(285px * 4 + 20px * 3);
}

.list_item {
	display: flex;
	flex-direction: column;
	background: url('/@/assets/yuqingNew/card_bg.png') no-repeat center 0;
	background-size: 100% 100%;
	width: 285px;
	height: 162px;
	padding: 20px 30px;
	gap: 15px;
	box-shadow: 0 0 10px rgba($color: #515151, $alpha: 0.2);
	border-radius: 10px;
	border: 1px solid white;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
	justify-content: space-between;

	.r_list_title {
		display: flex;
		align-items: center;
		gap: 5px;
	}

	.list_title {
		font-family: PingFangSC, PingFang SC;
		font-weight: bold;
		font-size: 18px;
		color: #1a1a1a;
		line-height: 25px;
		text-align: left;
		font-style: normal;
		// height: 10px;
	}

	.list_code {
		border-radius: 2px;
		border: 1px solid #007aff;

		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 14px;
		color: #007aff;
		line-height: 20px;
		text-align: left;
		font-style: normal;
		padding: 0px 5px;
	}

	.company_name {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 14px;
		color: #5f6063;
		line-height: 20px;
		text-align: left;
		font-style: normal;
		margin-top: 10px;
	}

	.btn_detail {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 14px;

		line-height: 20px;
		text-align: left;
		font-style: normal;

		width: 237px;
		height: 32px;
		color: #5f6063;
		background: #ffffff;
		border-radius: 4px;
		display: flex;
		text-align: center;
		justify-content: center;
		align-items: center;
		gap: 5px;
		cursor: pointer;
	}
}

.hover {
	box-shadow: 0 0 10px rgba($color: #515151, $alpha: 0.4);
}

.r_empty {
	height: 400px;
	display: flex;
	text-align: center;
	justify-content: center;
	align-items: center;
	flex-direction: column;

	.empty {
		width: 120px;
		height: 100px;
	}

	.empty_text {
		font-family: PingFangSC-Regular;
		font-size: 14px;
		color: #919191;
		letter-spacing: 0;
		text-align: center;
		font-weight: 400;
		margin-top: 10px;
	}
}
</style>
