<script setup lang="ts">
import HomeHead from '@/views/home/components/HomeHead.vue'
import { timeStat,externalTimeStat } 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 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 getExternalTimeStat = async () => {
	const { data } = await externalTimeStat(state)
	externalList.value = data
    let xAxisData:any[]=[]
    let siomesData:any[]=[]
    data.forEach((item: { moduleName: any; visitCount: any; })=>{
        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) => {
    paneName === 'out' && getExternalTimeStat()
    paneName === 'inside' && getDat()
}

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

<template>
	<HomeHead class="top"></HomeHead>
	<div class="w-full h-834px mt30px rd-20px bg-#fff p30px overflow-hidden">
		<div class="min-h-30px ">
			<span class="text-#000">日期: </span>
			<el-config-provider :locale="zhCn">
				<el-date-picker
					v-model="value1"
					type="daterange"
					range-separator="到"
					start-placeholder="开始时间"
					end-placeholder="结束时间"
					size="small"
					@change="timenFirst"
					:shortcuts="shortcuts"
				/>
			</el-config-provider>
			<el-button
				type="primary"
				:icon="Search"
				size="small"
				class="ml20px mt--5px"
				>搜素</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 label="外部足迹" name="out">
            </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="dataList"
                    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="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="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>
