<template>
    <div class="container">
        <div class="header flex just-between">
            <span>情报研判分析</span>
            <span class="pointer" @click="close"><el-icon><Close /></el-icon></span>
        </div>
        <div class="seachsBox">
            <Search :searchArr="searchConfiger" @submit="onSearch" @reset="reset">
                <template #defaultSlot>
                    <div class="flex align-center">
                        <span class="marks" @click="changeTime(idex)" :class="active == idex ? 'activeBtn' : ''" v-for="(it, idex) in time" :key="idex">{{ it.label }}</span>
                        <el-date-picker @change="handleDateChange" v-model="listQuery.dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                    </div>
                </template>
            </Search>
        </div>
        <div class="contant">
            <div class="contant-left aside">
                <div class="model">
                    <div class="modelTitle">热点线索</div>
                    <div class="cnt">
                        <Hot_xs ref="RedRdxs"></Hot_xs>
                    </div>
                </div>
                <div class="model">
                    <div class="modelTitle">热点组织</div>
                    <div class="cnt">
                        <Hot_zz ref="RedRdzz"></Hot_zz>
                    </div>
                </div>
                <div class="model">
                    <div class="modelTitle">热点人员</div>
                    <div class="cnt">
                        <Hot_ry ref="RedRdry"></Hot_ry>
                    </div>
                </div>
                <div class="model">
                    <div class="modelTitle">热点号码</div>
                    <div class="cnt">
                        <Hot_hm ref="RedRdhm"></Hot_hm>
                    </div>
                </div>
            </div>
            <div class="map">
                <GdMap></GdMap>
                <ul class="btns">
                    <li><span>热点集访单位</span></li>
                    <li><span>点位图</span></li>
                    <li><span>指令分布</span></li>
                </ul>
            </div>
            <div class="contant-right aside">
                <div class="model">
                    <div class="modelTitle">诉求分类</div>
                    <div class="cnt">
                        <Zqfl ref="RedSqfl"></Zqfl>
                    </div>
                </div>
                <div class="model">
                    <div class="modelTitle">重点线索分类</div>
                    <div class="cnt">
                        <Zdxsfl ref="RedZdxsfl"></Zdxsfl>
                    </div>
                </div>
                <div class="model">
                    <div class="modelTitle">指令次数</div>
                    <div class="cnt">
                        <Zlcs ref="RedZlcs"></Zlcs>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { timeSlotChange } from "@/utils/tools.js";
import GdMap from "@/components/GdMap/index.vue";
import Hot_xs from './hot_xs/index.vue'
import Hot_zz from './hot_zz/index.vue'
import Hot_ry from './hot_ry/index.vue'
import Hot_hm from './hot_hm/index.vue'
import Zqfl from './zqfl/index.vue'
import Zlcs from './zlcs/index.vue'
import Zdxsfl from './zdxsfl/index.vue'
import Search from "@/components/aboutTable/Search.vue";
import { reactive, ref, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
const { SGXTQTSQLX } =  proxy.$dict("SGXTQTSQLX"); //获取字典数据
const emits = defineEmits(['close'])
const listQuery = ref({});
const active = ref(-1);
const time = reactive([
    { label: "今天", value: "10" },
    { label: "本周", value: "20" },
    { label: "本月", value: "30" },
    { label: "本季度", value: "40" },
    { label: "本年", value: "50" }
]);
const searchConfiger = reactive([
    { label: "所属部门", prop: "ssbmdm", placeholder: "请选择", showType: "department" },
    { label: "数据周期", prop: "sjzq", placeholder: "请选择", showType: "defaultSlot"},
    { label: "指向地点", prop: "zxdz", placeholder: "请输入", showType: "input" },
    { label: "诉求类型", prop: "qtsq", placeholder: "请选择", showType: "select",options:SGXTQTSQLX }
]);
const RedRdxs = ref()
const RedRdzz = ref()
const RedRdry = ref()
const RedRdhm = ref()
const RedSqfl = ref()
const RedZlcs = ref()
const RedZdxsfl = ref()
const changeTime = (idex) =>{
    active.value = idex;
    switch(idex){
        case 0: //日
            listQuery.value.dateRange = timeSlotChange('天')
            break;
        case 1: //周
            listQuery.value.dateRange = timeSlotChange('本周')
            break;
        case 2: //月
            listQuery.value.dateRange = timeSlotChange('本月')
            break;
        case 3: //季度
            listQuery.value.dateRange = timeSlotChange('本季度')
            break;
        case 4: //年
            listQuery.value.dateRange = timeSlotChange('本年')
            break;
    }
    listQuery.value.hskssj = listQuery.value.dateRange[0] +' 00:00:00';
    listQuery.value.hsjssj = listQuery.value.dateRange[1] +' 23:59:59';;
}

const handleDateChange = (val) => {
  active.value = -1;
  if(!val) return;
  listQuery.value.hskssj = val[0] +' 00:00:00';
  listQuery.value.hsjssj = val[1]+' 23:59:59';
  if(val[0] == timeSlotChange('天')[0] && val[1] == timeSlotChange('天')[1]) active.value = 0;
  if(val[0] == timeSlotChange('本周')[0] && val[1] == timeSlotChange('本月')[1]) active.value = 1;
  if(val[0] == timeSlotChange('本月')[0] && val[1] == timeSlotChange('本月')[1]) active.value = 2;
  if(val[0] == timeSlotChange('本季度')[0] && val[1] == timeSlotChange('本季度')[1]) active.value = 3;
  if(val[0] == timeSlotChange('本年')[0] && val[1] == timeSlotChange('本年')[1]) active.value = 4;
};

const onSearch = (val) =>{
    listQuery.value = {...listQuery.value,...val}
    loadDate()
}
const reset = (val) =>{
    listQuery.value = {};
    active.value = -1;
    listQuery.value.dateRange = '';
    listQuery.value.hskssj = '';
    listQuery.value.hsjssj = '';
    loadDate()
}

const loadDate = () =>{
    RedRdxs.value.init(listQuery.value)
    RedRdzz.value.init(listQuery.value)
    RedRdry.value.init(listQuery.value)
    RedRdhm.value.init(listQuery.value)
    RedSqfl.value.init(listQuery.value)
    RedZlcs.value.init(listQuery.value)
    RedZdxsfl.value.init(listQuery.value)
}


// 关闭
function close(){
    emits('close')
}
</script>

<style lang="scss" scoped>
.container {
    width: 100%;
    height: 100%;
    background: rgb(232, 237, 246);
    color: #333;
    padding: 10px;
    box-sizing: border-box;

    .header {
        height: 60px;
        font-size: 30px;
        font-weight: 600;
        background: #fff;
        padding: 0 15px;
        box-sizing: border-box;
        border-radius: 4px;
    }

    .seachsBox {
        margin-bottom: 10px;
        .marks {
            padding: 5px 6px;
            box-sizing: border-box;
            border-radius: 4px;
            margin-right: 5px;
            border: 1px solid #e1e1e1;
            color: #333;
            cursor: pointer;
        }

        .activeBtn {
            border: 1px solid #0072ff;
            background: #0072ff;
            color: #fff;
        }

        ::v-deep .el-form-item--default {
            margin-bottom: 0;
        }

        ::v-deep .pageSearch {
            margin-bottom: 0 !important;
        }

        .searchBox {
            padding: 0px 15px 0px;
        }
    }

    .contant {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: calc(100% - 160px);
        overflow: hidden;
        overflow-y: auto;
        .aside {
            display: flex;
            flex-direction: column;
            width: 450px;
            height: 100%;
            top: 0;
            .model {
                background: #fff;
                flex: 1 0 0;
                margin-bottom: 10px;
                border-radius: 4px;

                .modelTitle {
                    position: relative;
                    padding: 0 4px;
                    box-sizing: border-box;
                    height: 30px;
                    line-height: 30px;
                    color: #333;
                    &::before{
                        position: absolute;
                        content: '';
                        left: 4px;
                        bottom: 4px;
                        width:50px ;
                        height: 4px;
                        background: linear-gradient(to right,#0072ff,#fff);
                    }
                }
                .cnt{
                    height: calc(100% - 30px);
                    padding: 0 4px;
                    box-sizing: border-box;
                    overflow: hidden;
                    overflow-y: auto;
                }

                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
        .map{
            flex: 1 0 0;
            margin: 0 10px;
            position: relative;
            .btns{
                position: absolute;
                bottom:0 ;
                left: 50%;
                transform: translateX(-50%);
                display: flex;
                z-index: 99;
                li{
                    white-space: nowrap;
                    padding: 10px 30px;
                    margin: 0 10px;
                    background: #004597;
                    color: #fff;
                    transform: skewX(-30deg);
                    cursor: pointer;
                    span{
                        display: inline-block;
                        transform: skewX(30deg);
                    }
                    &:nth-child(2){
                        background: #ee8134;
                    }
                }
            }
        }
    }
}
</style>