<template>
    <el-row :gutter="16" style="margin-top: 15px">
        <el-col :span="12">
            <el-card shadow="never" class="index-header">
                <template #header>
                    <div class="card-header">
                        <span>数据简报{{ countParam.organizationalId }}</span>
                        <div style="display: flex; align-items: center">
<!--                            <el-select v-model="countParam.organizationalType" @change="dataSummaryCount" style="width: 150px;margin-right: 10px">-->
<!--                                <el-option label="全部" :value="1"></el-option>-->
<!--                                <el-option label="个人" :value="4"></el-option>-->
<!--                                <el-option label="部门" :value="3"></el-option>-->
<!--                                <el-option label="公司" :value="2"></el-option>-->
<!--                            </el-select>-->

<!--                            <SelectOrg clearable  :inputWidth="150" :inputHeight="32"-->
<!--                                       v-if="countParam.organizationalType == 3 || countParam.organizationalType == 2"-->
<!--                                       v-model="countParam.organizationalId"-->
<!--                                       :type="countParam.organizationalType"-->
<!--                                       @change="dataSummaryCount"-->
<!--                                       style="margin-right: 10px"-->
<!--                            ></SelectOrg>-->

<!--                            <SelectUser :inputWidth="150"  style="margin-right: 10px" v-if="countParam.organizationalType == 4"-->
<!--                                v-model="countParam.userIdList" @change="dataSummaryCount">-->
<!--                            </SelectUser>-->

<!--                            <el-select v-model='countParam.dataType' @change="dataSummaryCount" style="width: 150px">-->
<!--                                <el-option label="本周" :value="3"></el-option>-->
<!--                                <el-option label="本月" :value="2"></el-option>-->
<!--                            </el-select>-->

                            <router-link style="margin-right: 10px" tag="a" :to="{ path: '/statistics/sale_ansys/busAddCount' }">
                                更多维度  <el-icon class="el-icon--right">
                                <ArrowRight />
                            </el-icon></router-link>
                        </div>
                    </div>
                </template>
                <div class="count-async-body">
                    <el-row justify="center" align="middle">
                        <el-col :span="6">
                            <div class="box-item">
                                <span>{{ data.addCustomerNum }}</span>
                                <lable>新增客户</lable>
                            </div>

                        </el-col>
                        <el-col :span="6">
                            <div class="box-item">
                                <span>{{ data.addClusNum }}</span>
                                <lable>新增线索</lable>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="box-item">
                                <span>{{ data.addBusinessNum }}</span>
                                <lable>新增商机</lable>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="box-item">
                                <span>{{ data.transactionsBusiness }}</span>
                                <lable>成交商机</lable>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row justify="center" align="middle" style="margin-top: 20px">
                        <el-col :span="6">
                            <div class="box-item">
                                <span>{{ data.addLiaisonNum }}</span>
                                <lable>新增联系人</lable>
                            </div>

                        </el-col>
                        <el-col :span="6">
                            <div class="box-item">
                                <span>{{ data.followUpNum }}</span>
                                <lable>跟进次数</lable>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="box-item">
                                <span>{{ data.addOrderFormNum }}</span>
                                <lable>成交订单</lable>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="box-item">
                                <span>{{ data.transactionsAmount }}</span>
                                <lable>成交总额</lable>
                            </div>
                        </el-col>
                    </el-row>
                </div>

            </el-card>
        </el-col>
        <el-col :span="12">
            <el-card shadow="never" class="index-header">
                <template #header>
                    <div class="card-header" >
                        <span>日程</span>
                        <div style="display: flex; align-items: center">
                            <el-date-picker v-model="bindMonth" @change="totalTaskData" value-format="YYYY-MM"
                                style="width: 140px; margin-right: 15px;" type="month" placeholder="请选择月份" />
                            <el-button type="primary" style="margin-right: 15px;" @click='openAddSchedule'>新建任务</el-button>

                            <router-link  tag="a" :to="{ path: '/task/task' }">
                                任务管理<el-icon class="el-icon--right">
                                <ArrowRight />
                            </el-icon></router-link>
                        </div>
                    </div>
                </template>
                <div class="count-async-body">

                    <el-calendar v-model="bindMonth">
                        <template #header>
                            <div class="custom-header">

                            </div>
                        </template>

                        <template #date-cell="{ data }">
                            <!--                            {{timeData && timeData[data.day] && timeData[data.day].length > 0}}-->
                            <el-popover placement="top-start" append-to="body" :width="200"
                                v-if="timeData && timeData[data.day] && timeData[data.day].length > 0" trigger="click">
                                <div style="padding:5px">
                                    <p v-for="(item, index) in timeData[data.day]">
                                        <el-link @click="handleDetail(item)" :key="index">{{ item.taskContent }}</el-link>
                                        <el-divider style="margin:15px 0" />
                                    </p>
                                </div>
                                <template #reference>
                                    <div style="width: 100%;height: 100%">
                                        <el-badge :offset="[10, 5]" is-dot class="item">{{ data.day.split('-')[2] }}
                                        </el-badge>
                                    </div>
                                </template>

                            </el-popover>
                            <div v-else style="width: 100%;height: 100%">
                                {{ data.day.split('-')[2] }}
                            </div>
                        </template>

                    </el-calendar>
                </div>
            </el-card>
        </el-col>
    </el-row>
    <CreateTask ref="createTaskRef" isList @refresh="totalTaskData" />
    <TaskDetail ref="taskDetailRef"></TaskDetail>
</template>


<script setup name="SummeryDataBox3" lang="ts">
import addSchedule from './addSchedule.vue'
import CreateTask from '@/components/common/createTask.vue'
import { totalTask, dataSummary } from '@/api/home/index'
import moment from "moment";
import { listDept } from "@/api/system/dept";
import { dataType } from 'element-plus/es/components/table-v2/src/common';
import TaskDetail from '@/components/common/taskDetail.vue';
import {TaskVO} from "@/api/task/types";
const router = useRouter();

const value = ref(new Date())
const bindMonth = ref(moment().format('YYYY-MM'))
const createTaskRef = ref()
const openAddSchedule = () => {
    createTaskRef.value.open({ type: 'add' })
}
const bindMonthData = ref()
const timeData = ref()
const toTask = () => {
    router.push('/task/task')
}

const deptOptions = ref()

/** 查询组织树 */
const handleDataAuthUpdate = async () => {
    let typs: number[] = [10, 20, 30]
    const res = await listDept(typs, undefined);
    const first = res?.result?.[0]
    deptOptions.value = first?.children || [];
}

// 任务详情
const taskDetailRef = ref()
const handleDetail = (data: TaskVO) => {
    taskDetailRef.value.open(data)
}
const getDateRangeForMonth = (month) => {
    // 确保输入格式正确
    if (!moment(month, 'YYYY-MM', true).isValid()) {
        return
    }

    // 计算该月的第一天和最后一天
    const startOfMonth = moment(month, 'YYYY-MM').startOf('month');
    const endOfMonth = moment(month, 'YYYY-MM').endOf('month');

    // 前 5 天的日期
    const beforeDates = startOfMonth.clone().subtract(5, 'days').format('YYYY-MM-DD');

    // 后 5 天的日期
    const afterDates = endOfMonth.clone().add(5, 'days').format('YYYY-MM-DD');

    return {
        beforeDates: beforeDates, // 按日期顺序返回
        afterDates: afterDates
    };
}

const totalTaskData = async () => {
    console.log(bindMonth.value)

    let param = {
        beginCycleTime: getDateRangeForMonth(bindMonth.value).beforeDates,
        endCycleTime: getDateRangeForMonth(bindMonth.value).afterDates,
        isMySelf: 1
    }
    let res = await totalTask(param)
    timeData.value = res.result

}
interface SummaryData {
    addCustomerNum: number;
    addClusNum: number;
    addBusinessNum: number;
    addOrderFormNum: number;
    addLiaisonNum: number;
    followUpNum: number;
    transactionsNum: number;
    transactionsAmount: number;
    transactionsBusiness?:number;
}
const data = ref<SummaryData>({
    addCustomerNum: 0,
    addClusNum: 0,
    addBusinessNum: 0,
    addOrderFormNum: 0,
    addLiaisonNum: 0,
    followUpNum: 0,
    transactionsNum: 0,
    transactionsAmount: 0,
    transactionsBusiness: 0
})
const countParam = reactive({
    organizationalType: 1, //
    organizationalId: undefined,//
    userIdList: undefined, //
    dataType: 2,//
    isMySelf: 1
})
const dataSummaryCount = () => {

    dataSummary(countParam).then(res => {
        if (res.success) {
            data.value = res.result
        }
    })
}
onBeforeMount(async () => {
    handleDataAuthUpdate()
    dataSummaryCount();
    await totalTaskData()

})
onMounted(() => {

});

</script>

<style  lang="scss" scoped>
.count-async-body{
    .el-calendar__header{
        justify-content: flex-end;
        padding-top: 0;
        border-bottom: none;
        padding-bottom: 0;

    }
    .el-calendar-table .el-calendar-day{
        height: 46px;
    }
}

.index-header .card-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 21px;
    span{
        font-size: 14px;
        font-weight: 600;
    }
}
.date-class-name{


}
</style>

<style scoped lang="scss">
.count-async{


}
.count-async-body{
    height: 325px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.box-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    span{
        font-size: 24px;
        font-weight: 600;
    }
    lable{
        font-size: 14px;
        font-weight: 500;
    }
    &:hover{
        cursor: pointer;
    }

}
.fast-menu-body{
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    span{
        display: flex;
        flex-direction: column;
        align-items: center;
        .cicyle{
            width: 57px;
            height: 57px;
            border-radius: 50px;
            background: linear-gradient(180deg, #1874FF 0%, #A2C7FF 100%);
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 10px;
        }
        label{
            font-weight: 500;

        }
    }
}
</style>
