<template>
    <HcCard scrollbar>
        <template #header>
            <div class="w-36">
                <el-select v-model="searchForm.department" block clearable placeholder="选择部门" size="large">
                    <el-option v-for="item in departmentType" :label="item.name" :value="item.key"/>
                </el-select>
            </div>
            <div class="w-40 ml-2">
                <el-select v-model="searchForm.person" block clearable placeholder="任务人员" size="large">
                    <el-option v-for="item in personType" :label="item.name" :value="item.key"/>
                </el-select>
            </div>
            <div class="w-36 ml-4">
                <el-date-picker class="block" v-model="searchForm.startTime" 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.endTime" 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 isMonth :datas="planDatas" :legend="legend"/>
            </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} from "vue";
 import BarLabelRotation from "~com/echarts/BarLabelRotation.vue";
 import StackedLine from "~com/echarts/StackedLine.vue";
 import WordPopulation from "~com/echarts/WordPopulation.vue";

 const searchForm=ref({
    department:'',person:''
 })
 const departmentType=ref([
    {name:'研发部门',key:1},
    {name:'业务部门',key:2},
    {name:'人事部门',key:1},
 ])
 const personType=ref([
    {name:'张三',key:1},
    {name:'李四',key:2},
    {name:'王五',key:1},
 ])
 //搜索
const searchClick = () => {
    searchForm.value.current = 1;
    console.log(searchForm.value)
}

//重置
const resetClick = () => {
    searchForm.value = {
        reportType: null, startTime: null, endTime: null,
        current: 1, size: 20, total: 0
    }
}
//计划统计图
const planDatas = ref([
    {
        name: '任务总量',
        value: [120, 132, 101, 134, 90, 230, 210, 210, 210, 210, 132, 101]
    },
    {
        name: '已完成',
        value: [120, 132, 101, 134, 90, 230, 210, 210, 210, 210, 132, 101]
    },
    {
        name: '未完成',
        value: [120, 132, 101, 134, 90, 230, 210, 210, 210, 210, 132, 101]
    },
])
const ydata=ref( ['张三', '李四', '王五', '赵六', '陈琦', '五把'])
const xdata=ref( [10, 20, 40, 60, 80, 99])
const planDatas1=ref([])
const legend=ref(
    {
		orient: 'horizontal',
		data:['任务总量','已完成','未完成'],
		textStyle:{
        	fontSize: 14,//字体大小
            color: 'black'//字体颜色
        }
   	},
)
const sydata=ref( [
    {
      name: '风险暂停计划',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: '正常计划',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
  ])
const sxdata=ref(['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'])
const slegend=ref( ['风险暂停计划', '正常计划',])
</script>
<style lang="scss" scoped>
@import "~src/styles/home/index.scss";
.head_box{
    display: flex;
}
</style>
