<template>
    <HcCard scrollbar>
        <template #header>
            <div class="w-36">
                <el-select v-model="searchForm.deptId" block clearable placeholder="选择部门" size="large" @change="changeDpet">
                    <el-option v-for="item in department" :label="item.deptName" :value="item.id"/>
                </el-select>
            </div>
            <div class="w-40 ml-2">
                <el-select v-model="searchForm.userId" block clearable placeholder="任务人员" size="large">
                    <el-option v-for="item in departmentPeople" :label="item.name" :value="item.id"/>
                </el-select>
            </div>
            <div class="w-36 ml-4">
                <el-date-picker class="block" v-model="searchForm.start" type="month" value-format="YYYY-MM" placeholder="开始日期" clearable size="large"/>
            </div>
            <div class="mx-2">~</div>
            <div class="w-36">
                <el-date-picker class="block" v-model="searchForm.end" type="month" value-format="YYYY-MM" placeholder="结束日期" clearable size="large"/>
            </div>
            <div class="ml-4">
                <el-button type="primary" @click="searchClick" size="large">
                    <HcIcon name="search-2"/>
                    <span>搜索</span>
                </el-button>
            </div>
            <div class="ml-2">
                <el-button size="large" @click="resetClick">
                    <HcIcon name="close-circle"/>
                    <span>重置</span>
                </el-button>
            </div>
        </template>

        <HcCardItem ui="hac-bg-grey">
            <div class="h-72">
                <BarLabelRotation  :datas="planDatas" :legend="legend" :xdata="sxdata"/>
            </div>
        </HcCardItem>

        <div class="hc-main-row">
            <el-row :gutter="14" class="mt-4" >
                <el-col :span="12">
                    <HcCardItem ui="hac-bg-grey">
                        <div class="h-96">
                            <StackedLine isMonth  :ydata="sydata"  :xdata="sxdata"  :legend="slegend"/>
                        </div>
                    </HcCardItem>
                </el-col>
                <el-col :span="12">
                    <HcCardItem ui="hac-bg-grey">
                        <div class="h-96">
                           
                            <WordPopulation isMonth name="任务完成率" :ydata="ydata"  :xdata="xdata" unit="%" />
                        </div>
                    </HcCardItem>
                </el-col>
            </el-row>
        </div>
    </HcCard>
</template>

 <script setup>
 import {ref, watch,onMounted} from "vue";
 import BarLabelRotation from "~com/echarts/BarLabelRotation.vue";
 import StackedLine from "~com/echarts/StackedLine.vue";
 import WordPopulation from "~com/echarts/WordPopulation.vue";
 import mainApi from '~api/static/plan.js'
 import {getObjValue,getArrValue} from "js-fast-way"
 import { getdepartmentList,getuserList} from "~api/other";
 import {getDiffYear} from "~uti/tools";

 onMounted(()=>{
    getDepartmentDict()
    getImageData()
    planFinishedRatio()
 })
 const searchForm=ref({
    deptId:'',userId:''
 })

 //搜索
const searchClick = () => {
  
    console.log(searchForm.value)

    let start=searchForm.value.start
    let end=searchForm.value.end
    let year=getDiffYear(start,end)
    if(year>=1){
        window.$message.warning('选择间隔日期不能超过一年')
    }else{
        getImageData()
        planFinishedRatio()
    }

 

}

//重置
const resetClick = () => {
    searchForm.value = {
        deptId:null,userId:null
    }
    getImageData()
    planFinishedRatio()
}
//计划统计图
const planDatas = ref([])
const ydata=ref( [])
const xdata=ref( [])
const legend=ref(
    {
		orient: 'horizontal',
		data:['任务总量','已完成','未完成'],
		textStyle:{
        	fontSize: 14,//字体大小
            color: 'black'//字体颜色
        }
   	},
)
const sydata=ref( [])
const sxdata=ref(['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'])
const slegend=ref( ['风险暂停计划', '正常计划',])

//项目图表数据
const getImageData = async () => {
    const {error, code, data} = await mainApi.MonthOfYearPlanOverview2(
        {        ...searchForm.value}
    )
    //判断状态
    if (!error && code === 200) {
       planDatas.value=data['dataList']
       sydata.value=data['riskPlans']
       sxdata.value=data['dateList']
    } else {
        planDatas.value=[]
        sydata.value=[]
        sxdata.value=[]
    }
}
//任务完成率
const planFinishedRatio = async () => {
    const {error, code, data} = await mainApi.planFinishedRatio(
      {  ...searchForm.value}
    )
    //判断状态
    if (!error && code === 200) {
       let image=getObjValue(data)
        xdata.value=image['ratioList']
        ydata.value=image['userList']
    } else {
     
    }
}
const department=ref([])
//获取部门列表
const getDepartmentDict=async()=>{
    const {error, code, data} = await getdepartmentList({deptType:2})
    if (!error && code === 200) {
        department.value = getArrValue(data)

    } else {
        department.value = []

    }
}
//改变部门
const changeDpet=(val)=>{
    getDepartmentuserDict(val)
}
const departmentPeople=ref([])
//获取部门人员列表
const getDepartmentuserDict=async(id)=>{
    const {error, code, data} = await getuserList({deptId:id})
    if (!error && code === 200) {
        departmentPeople.value = getArrValue(data)

    } else {
        departmentPeople.value = []

    }
}
</script>
<style lang="scss" scoped>
@import "~src/styles/home/index.scss";
.head_box{
    display: flex;
}
</style>
