<script setup lang="ts">
import HomeHead from '@/views/home/components/HomeHead.vue'
import {
	timeStat,
	externalTimeStat,
	fetchmoduleStatExternalPage
} from '@/api/daikin/base'
import { formatDate } from '@/utils/format'
import { Chart1 } from './indexData'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import { Search } from '@element-plus/icons-vue'
const currentDate = new Date()
const currentDates = new Date()
const value1 = ref<[Date, Date]>([
	currentDate.setMonth(currentDate.getMonth()),
	new Date()
])
const states = reactive<any>({
	startTime: formatDate(value1.value[0]).substring(0, 10),
	endTime: formatDate(value1.value[1]).substring(0, 10)
	// timeType:2,
})
const chartRef1 = ref()
const chartRef2 = ref()
const chartOption1 = ref({})
const chartOption2 = ref({})
const primary = ref(1)
const primarys = ref(2)
const activeName = ref('inside')
const pageInfo = reactive({
	currentPage: 1,
	pageSize: 10,
	total: 10
})
const moduleCode = ref()
const visitDay = ref()
const waibuKd = ref()
const inseideDetail = ref([])
const outDetail = ref([])
const getInsideListPage = async () => {
	const res: any = await fetchmoduleStatExternalPage({
		waibuKd: waibuKd.value,
		visitDay: visitDay.value,
		moduleCode: moduleCode.value,
		pageNum: pageInfo.currentPage,
		pageSize: pageInfo.pageSize
	})
	inseideDetail.value = res?.rows || []
	pageInfo.total = res?.total || 0
}
const getListPage = async () => {
	const res: any = await fetchmoduleStatExternalPage({
		waibuKd: waibuKd.value,
		visitDay: visitDay.value,
		moduleCode: moduleCode.value,
		pageNum: pageInfo.currentPage,
		pageSize: pageInfo.pageSize
	})
	outDetail.value = res?.rows || []
	pageInfo.total = res?.total || 0
}

getListPage()
// getInsideListPage()

const clickButton = (id) => {
	primary.value = id
	state.timeType = id
}
const clickButtons = (id) => {
	primarys.value = id
	states.timeType = id
}
const timenFirst = (value) => {
	console.log(value)
	state.startTime = formatDate(value[0]).substring(0, 10)
	state.endTime = formatDate(value[1]).substring(0, 10)
	states.startTime = formatDate(value[0]).substring(0, 10)
	states.endTime = formatDate(value[1]).substring(0, 10)
}
const timenFirsts = (value) => {
	console.log(value)
}

const state = reactive<any>({
	startTime: formatDate(value1.value[0]).substring(0, 10),
	endTime: formatDate(value1.value[1]).substring(0, 10)
	// timeType:1
})
const dataList = ref()
const getDat = async () => {
	const { data } = await timeStat(state)
	dataList.value = data
	let xAxisData: any[] = []
	let siomesData: any[] = []
	data.forEach((item: { moduleName: any; visitCount: any }) => {
		xAxisData.push(item.moduleName)
		siomesData.push(item.visitCount)
	})
	chartOption1.value = Chart1(xAxisData, siomesData)
}

const externalList = ref<any>([])
const externalObj = ref<any>({})
const getExternalTimeStat = async () => {
	const { data } = await externalTimeStat(state)
	externalList.value = data
	let xAxisData: any[] = []
	let siomesData: any[] = []
	data.forEach(
		(item: { moduleName: any; visitCount: any; moduleCode: any }) => {
			externalObj.value[item.moduleCode] = item.moduleName
			xAxisData.push(item.moduleName)
			siomesData.push(item.visitCount)
		}
	)
	chartOption2.value = Chart1(xAxisData, siomesData)
	// chartOption2.value.height=3000
	// chartOption2.value.width=1000
}
const ss = computed(() => [state.startTime, state.endTime, state.timeType])
watch(
	() => unref(ss),
	async (v) => {
		console.log(state.type)
		getDat()
		getExternalTimeStat()
	},
	{ immediate: true, deep: true }
)

onMounted(() => {
	// getDat()
	// console.log(formatDate(value1.value[0]).substring(0, 10))
})
const shortcuts = [
	{
		text: '今天',
		value: () => {
			let start = new Date()
			let end = new Date()
			start.setHours(0, 0, 0)
			end.setHours(23, 59, 59)
			return [start, end]
		}
	},
	// {
	//     text: '昨天',
	//     value: () => {
	//         let start = new Date()
	//         let end = new Date()
	//         start.setTime(start.getTime() - 3600 * 1000 * 24)
	//         end.setTime(end.getTime() - 3600 * 1000 * 24)
	//         start.setHours(0, 0, 0)
	//         end.setHours(23, 59, 59)
	//         return [start, end]
	//     }
	// },
	{
		text: '近7天',
		value: () => {
			let start = new Date()
			let end = new Date()
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
			end.setTime(end.getTime() - 3600 * 1000 * 24)
			start.setHours(0, 0, 0)
			end.setHours(23, 59, 59)
			return [start, end]
		}
	},
	{
		text: '近15天',
		value: () => {
			let start = new Date()
			let end = new Date()
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 15)
			end.setTime(end.getTime() - 3600 * 1000 * 24)
			start.setHours(0, 0, 0)
			end.setHours(23, 59, 59)
			return [start, end]
		}
	},
	{
		text: '近30天',
		value: () => {
			let start = new Date()
			let end = new Date()
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
			end.setTime(end.getTime() - 3600 * 1000 * 24)
			start.setHours(0, 0, 0)
			end.setHours(23, 59, 59)
			return [start, end]
		}
	},
	{
		text: '近3月',
		value: () => {
			let start = new Date()
			let end = new Date()
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
			end.setTime(end.getTime() - 3600 * 1000 * 24)
			start.setHours(0, 0, 0)
			end.setHours(23, 59, 59)
			return [start, end]
		}
	}
]

const handleClick = ({ paneName }: any) => {
	pageInfo.currentPage = 1
	pageInfo.pageSize = 10
	pageInfo.total = 0
	paneName === 'out' && getExternalTimeStat()
	paneName === 'inside' && getDat()
	paneName === 'out-detail' && getListPage()
	paneName === 'inside-detail' && getInsideListPage()
}

const selValue = ref('')
</script>

<template>
	<HomeHead class="top"></HomeHead>
	<div class="w-full h-850px mt30px rd-20px bg-#fff p30px overflow-hidden">
		<div class="min-h-30px flex items-center">
			<span class="text-#000 mr-10px">日期: </span>
			<div class="max-w-350px flex items-center">
				<el-date-picker
					v-if="['inside', 'out'].includes(activeName)"
					v-model="value1"
					type="daterange"
					range-separator="到"
					start-placeholder="开始时间"
					end-placeholder="结束时间"
					@change="timenFirst"
					:shortcuts="shortcuts"
				/>
				<el-date-picker
					v-else
					v-model="visitDay"
					type="date"
					value-format="YYYY-MM-DD"
					placeholder="选择日期"
				/>
			</div>
			<div class="mx-4 flex items-center">
				<span class="text-#000 mr-10px">模块: </span>
				<el-select
					v-if="'out-detail' === activeName"
					v-model="moduleCode"
					placeholder="选择模块"
				>
					<el-option
						v-for="item in externalList"
						:key="item.id"
						:label="item.moduleName"
						:value="item.moduleCode"
					/>
				</el-select>
			</div>
			<div class="flex items-center">
				<span class="text-#000 mr-10px w-50px">供方: </span>
				<el-input
					v-model="waibuKd"
					placeholder="请输入供方昵称或代码"
				></el-input>
			</div>
			<el-button
				type="primary"
				:icon="Search"
				size="small"
				class="ml20px mt--5px"
				@click="handleClick({ paneName: activeName })"
				>搜索</el-button
			>
			<template v-if="activeName !== 'inside' && false">
				<el-select
					v-model="selValue"
					class="ml-20px mt-[-4px]"
					placeholder="Select"
					size="small"
				>
					<el-option
						v-for="item in externalList"
						:key="item.moduleCode"
						:label="item.moduleName"
						:value="item.moduleCode"
					/>
				</el-select>
			</template>
			<!-- <el-button :type="primary == 1 ? 'primary' : ''" :icon="Search" class="!ml100px mt--5px"
                @click="clickButton(1)">本日</el-button>
            <el-button :type="primary == 2 ? 'primary' : ''" :icon="Search" class="!ml30px mt--5px"
                @click="clickButton(2)">本周</el-button>
            <el-button :type="primary == 3 ? 'primary' : ''" :icon="Search" class="!ml30px mt--5px"
                @click="clickButton(3)">本月</el-button> -->
		</div>
		<el-tabs class="mt-20px" v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="本部足迹" name="inside">
				<div class="mt20px w-full">
					<span
						class="cardfoot text-#000 p30px mx10px my10px text-center text-18px font-bold"
						v-if="dataList"
						v-for="i in dataList"
					>
						<span>{{ i.moduleName }}</span
						><br />
						<br />
						<span class="mt10px">{{ i.visitCount }}</span>
					</span>
				</div>

				<div class="mt10px w-full">
					<!-- <div class="relative w-full h-50px flex">
                        <el-button :type="primarys == 2 ? 'primary' : ''" :icon="Search" class="!ml30px mt--5px"
                            @click="clickButtons(2)">本周</el-button>
                        <el-button :type="primarys == 3 ? 'primary' : ''" :icon="Search" class="!ml30px mt--5px"
                            @click="clickButtons(3)">本月</el-button>
                        <div class="absolute right-60px w300px ">
                            <el-config-provider :locale="zhCn">
                                <el-date-picker v-model="value2" type="daterange" range-separator="-" start-placeholder="开始时间"
                                    end-placeholder="结束时间" size="small" @change="timenFirsts" />
                            </el-config-provider>
                        </div>
                    </div> -->
					<div class="w-full h-400px">
						<VChart key="yyy" ref="chartRef1" :option="chartOption1" />
					</div>
				</div>
			</el-tab-pane>
			<el-tab-pane v-if="false" label="本部足迹-明细" name="inside-detail">
				<div v-if="activeName === 'inside-detail'" class="h-720px">
					<div class="w100% h-full overflow-auto">
						<el-table
							:data="inseideDetail"
							style="width: 100%; margin-bottom: 20px"
							row-key="id"
							border
							default-expand-all
							:header-cell-style="{
								background: '#2A7BF7',
								color: '#fff',
								height: '60px',
								lineHeight: '60px',
								textAlign: 'center',
								'font-size': '24px'
							}"
							:cell-style="{ 'text-align': 'center', 'overflow-y': 'auto' }"
						>
							<el-table-column prop="deptName" label="排序" />
							<el-table-column
								prop="cateName"
								label="所属分类"
								show-overflow-tooltip
							>
								<template #default="scope">
									<span v-if="scope"></span>
								</template>
							</el-table-column>
							<el-table-column
								prop="title"
								label="标题名称"
								show-overflow-tooltip
							/>
							<el-table-column
								label="文件列表"
								prop="filePath"
								show-overflow-tooltip
							/>
							<el-table-column label="排序" prop="sort" show-overflow-tooltip />
							<el-table-column label="查看范围" prop="userIdList">
								<template #default="scope">
									<el-button type="primary" class="button" @click=""
										>查看范围</el-button
									>
								</template>
							</el-table-column>
						</el-table>
					</div>
					<div class="absolute bottom-2px right-30px z-20 bg-#fff">
						<el-pagination
							v-model:current-page="pageInfo.currentPage"
							v-model:page-size="pageInfo.pageSize"
							layout="prev, pager, next, jumper"
							:total="pageInfo.total"
							@size-change="getInsideListPage"
							@current-change="getInsideListPage"
						/>
					</div>
				</div>
			</el-tab-pane>
			<el-tab-pane label="外部足迹" name="out"> </el-tab-pane>
			<el-tab-pane label="外部足迹-明细" name="out-detail">
				<div class="h-720px">
					<div class="w100% h-full overflow-auto">
						<el-table
							:data="outDetail"
							style="width: 100%; margin-bottom: 20px"
							row-key="id"
							border
							default-expand-all
							:header-cell-style="{
								background: '#2A7BF7',
								color: '#fff',
								height: '60px',
								lineHeight: '60px',
								textAlign: 'center',
								'font-size': '24px'
							}"
							:cell-style="{ 'text-align': 'center', 'overflow-y': 'auto' }"
						>
							<el-table-column prop="userId" label="供方ID" />
							<el-table-column
								prop="nickName"
								label="供方昵称"
								show-overflow-tooltip
							>
							</el-table-column>
							<el-table-column
								prop="title"
								label="访问模块"
								show-overflow-tooltip
							>
								<template #default="{ row }">
									<span>{{ externalObj[row.moduleCode] || '' }}</span>
								</template>
							</el-table-column>
							<el-table-column
								label="访问计数"
								prop="visitCount"
								show-overflow-tooltip
							/>
							<el-table-column
								label="访问时间"
								prop="visitDay"
								show-overflow-tooltip
							/>
						</el-table>
					</div>
					<div class="absolute bottom-2px right-30px z-20 bg-#fff">
						<el-pagination
							v-model:current-page="pageInfo.currentPage"
							v-model:page-size="pageInfo.pageSize"
							layout="prev, pager, next, jumper"
							:total="pageInfo.total"
							@size-change="getListPage"
							@current-change="getListPage"
						/>
					</div>
				</div>
			</el-tab-pane>
		</el-tabs>
		<div>
			<div class="mt20px w-full">
				<span
					class="cardfoot text-#000 p30px mx10px my10px text-center text-18px font-bold"
					v-if="externalList"
					v-for="i in externalList"
				>
					<span>{{ i.moduleName }}</span
					><br />
					<br />
					<span class="mt10px">{{ i.visitCount }}</span>
				</span>
			</div>

			<div class="mt10px w-full">
				<div class="w-full h-400px">
					<VChart key="xxxx" ref="chartRef2" :option="chartOption2" />
				</div>
			</div>
		</div>
	</div>
</template>

<style lang="less" scoped>
.cardfoot {
	display: inline-block;
	height: 120px;
	width: 220px;
	background-image: url('@/assets/images/bg-card.svg');
	background-size: cover;
	border-radius: 18px;
	box-shadow: 0px 6px 10px -2px rgba(43, 42, 42, 0.25);
}

.cardfoot:hover {
	background-color: #fff;
	box-shadow: 0px 9px 20px 7px rgba(92, 78, 218, 0.25);
	color: #2042b4;
}

.top {
	position: absolute;
	right: 30px;
	top: -92px;
}
::v-deep {
	.el-tabs__item {
		font-size: 16px !important;
	}
}
</style>
