<!--  -->
<template>
    <div class="common-layout">
        <el-container class="home">
            <el-header class="header border">
                <div class="header_box">
                    <div class="headr_img">
                        <el-image :src="userInfo.avatar || avatarPng" style="width: 131px;height: 131px;" fit="cover" />
                    </div>
                    <div class="header_title">
                        <p class="font1">您好！{{ userInfo.real_name }}</p>
                        <p class="font2">新的一天，祝您工作顺利哦！</p>
                        <div class="font3">
                            <span>参与填报量：2049</span>
                            <span class="ml-16">已上报量：2049</span>
                            <span class="ml-16">已废除量：2049</span>
                            <span class="ml-16">参与审批量：2049</span>
                        </div>
                    </div>
                    <div class="header_right">
                        <div class="btn">
                            <el-button type="primary" plain class="btn_blue">
                                <HcIcon v-if="false" name="check" />
                                <HcIcon v-else name="close-circle" style="color: red;" />
                                电签
                            </el-button>
                            <el-button type="primary" plain class="btn_green">
                                桥梁工程师
                            </el-button>
                        </div>
                        <div class="view_link">
                            <span class="text-hover text-blue link_span">查看系统操作手册</span>
                        </div>
                    </div>
                </div>
            </el-header>
            <el-container class=" mt-8 ">
                <el-aside :width="`${isWbsTreeShow ? leftWidth : 100}%`">
                    <div class="border left_box contain_box">
                        <div class="title_box">
                            <span>工程内业进度统计表</span>
                        </div>
                        <div class="index_table_box mt-4">
                            <el-table
                                :header-cell-style="{ height: '50px', backgroundColor: 'none', fontSize: '20px', textAlign: 'center' }"
                                :row-style="{ height: '50px', fontSize: '16px' }"
                                :row-class-name="tableRowClassName"
                                :data="tableData1"
                                style="width: 100%;height:100%"
                              
                                row-key="id"
                                border
                                lazy
                                :load="loadData"
                                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
                            >
                                <el-table-column prop="date" label="工程名称" />
                                <el-table-column prop="name" label="工程类型" align="center" width="160" />
                                <el-table-column prop="address" label="内业进度" align="center" width="200">
                                    <template #default="scope">
                                        <div v-if="scope.row.type === '1'" class="demo1_pro">
                                            <el-progress :text-inside="true" :stroke-width="26" :percentage="70" />
                                        </div>
                                        <div v-if="scope.row.type === '2'" class="demo2_pro">
                                            <el-progress :text-inside="true" :stroke-width="26" :percentage="70" />
                                        </div>
                                        <div v-if="scope.row.type === '3'" class="demo3_pro">
                                            <el-progress :text-inside="true" :stroke-width="26" :percentage="70" />
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="address" label="已审批量" align="center" width="160" />
                                <el-table-column prop="address1" label="未完成审批量" align="center" width="160" />
                            </el-table>
                        </div>
                    </div>
                </el-aside>
                <div class="right_box border ">
                    <el-main class="contain_box">
                        <div class="hc-expansion-contraction-tree" @click="setWbsTreeShow">
                            <HcIcon v-show="!isWbsTreeShow" name="arrow-left-s" />
                            <HcIcon v-show="isWbsTreeShow" name="arrow-right-s" />
                        </div>
                        <div>
                            任务管理
                        </div>
                        <div class="card mt-4">
                            <span class="card_title">未处理任务类别</span>
                            <div class="card_box mt-4">
                                <div class="box_item">
                                    <div class="card_title1 ml-2">
                                        <HcIcon name="notification-2" fill style="color: orange;" class="mr-2" />  291
                                    </div>
                                    <div class="card_title mt-4">上报超过7天</div>
                                </div>
                                <div class="box_item">
                                    <div class="card_title1 ml-2"> <HcIcon name="notification-2" fill style="color: blue;" class="mr-2" />291</div>
                                    <div class="card_title mt-4">上报超过1天</div>
                                </div>
                                <div class="box_item">
                                    <div class="card_title1 ml-2"> <HcIcon name="notification-2" fill style="color: red;" class="mr-2" />291</div>
                                    <div class="card_title mt-4">上报超过30天</div>
                                </div>
                            </div>
                        </div>
                        <div class="task_box mt-10">
                            <div v-for="item in taskList" :key="item.name">
                                <div class="task_item_box">
                                    <div>{{ item.name }}</div>
                                    <div>
                                        <!-- <HcIcon name="notification-2" fill style="color:rgb(119, 40, 245); pu;font-size: 24px;" class="mr-2" />  -->
                                        <el-button type="primary" size="small" style="background-color: #0081ff;border: none;">
                                            审批
                                        </el-button>
                                    </div>
                                </div>
                                <el-divider style="font-size: 2px;color: white;" />
                            </div>
                        </div>
                    </el-main>
                </div>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useAppStore } from '~src/store'
const userStore = useAppStore()
const userInfo = ref(userStore.getUserInfo)
import avatarPng from '~src/assets/images/avatar.png'
//监听
watch(() => [
    userStore.getUserInfo,
], ([info]) => {
    userInfo.value = info
})

const isWbsTreeShow = ref(true)
//是否展示右边表格
const setWbsTreeShow = ()=>{
    isWbsTreeShow.value = !isWbsTreeShow.value
}

//左右拖动，改变树形结构宽度
const leftWidth = ref(65)
const url = ref('https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg')

const loadData = async (row, treeNode, resolve) => {
    resolve([
                {
                id: 1,
                date: '路基工程',
                name: '单位工程',
                address: '3232',
                address1: '3232',
                type:'1',
            },
            {
                id: 1,
                date: '路基工程',
                name: '单位工程',
                address: '3232',
                address1: '3232',
                type:'1',
            },
    ])
 
}




const tableData1 = ref([
  {
    id: 1,
    date: '路基工程路基工程路基工程路基工程程路基工程',
    name: '单位工程',
    address: '3232',
    address1: '3232',
    type:'1',
  },
  {
    id: 1,
    date: '路基工程',
    name: '单位工程',
    address: '3232',
    address1: '3232',
    type:'1',
  },
  {
    id: 2,
    date: '路基工程',
    name: '单位工程',
    address: '3232',
    address1: '3232',
    type:'1',
  },
  {
    id: 3,
    date: '路基工程',
    name: '分部工程',
    address: '3232',
    address1: '3232',
    type:'2',
    children:[
            {
            id: 4,
            date: '路基工程',
            name: '分部工程',
            address: '3232',
            address1: '3232',
            type:'2',
        },
    ],
  
  },
  {
    id: 4,
    date: '路基工程',
    name: '分项工程',
    address: '3232',
    address1: '3232',
    type:'3',
  },
])
        // 某行

   const tableRowClassName = ({ row, rowIndex })=> {
             if (row.type === '1') { // 判断条件
                 return 'demo1'
              } else if (row.type === '2') {
                return 'demo2'
              } else if (row.type === '3') {
                return 'demo3'
              }
    }
const taskList = ref([
    { name:'任务名称There little thoughts are the rustle of leaves; they have their whisperof joy in my mind.任务名称There little thoughts are the rustle of leaves; they have their whisperof' },
    { name:'任务名称There little thoughts are the rustle of leaves; they have their whisperof joy in my mind.' },
    { name:'任务名称There little thoughts are the rustle of leaves; they have their whisperof joy in my mind.' },
    { name:'任务名称There little thoughts are the rustle of leaves; they have their whisperof joy in my mind.' },
    { name:'任务名称There little thoughts are the rustle of leaves; they have their whisperof joy in my mind.' },
    { name:'任务名称There little thoughts are the rustle of leaves; they have their whisperof joy in my mind.' },
    { name:'任务名称There little thoughts are the rustle of leaves; they have their whisperof joy in my mind.' },
    { name:'任务名称There little thoughts are the rustle of leaves; they have their whisperof joy in my mind.' },
    { name:'任务名称There little thoughts are the rustle of leaves; they have their whisperof joy in my mind.' },
    { name:'任务名称There little thoughts are the rustle of leaves; they have their whisperof joy in my mind.' },
    { name:'任务名称There little thoughts are the rustle of leaves; they have their whisperof joy in my mind.' },
    { name:'任务名称There little thoughts are the rustle of leaves; they have their whisperof joy in my mind.' },
])
</script>

<style lang='scss' scoped>
.home{
    .header{
        border: 2px dashed var(--el-color-primary) !important;;
        height: 180px;
        .header_box{
            padding-top: 20px;
            padding-bottom: 10px;
            display: flex;
       
            .headr_img{
                width: 131px;
                height: 131px;
              
            }
            .header_title{
                margin-left: 30px;
                .font1{
                    font-size: 28px;
                    font-weight: 700;
                    margin-top: 5px;
                }
                .font2{
                    font-size: 20px;
                    font-weight: 700;
                    margin-top: 15px;
                }
                .font3{
                    margin-top: 40px;
                    font-size: 14px;
                }
            }
            .header_right{
               position: absolute;
               right: 40px;
               .btn_blue{
                background-color: rgb(231, 247, 255);
                border-color: rgb(145, 213, 255);
                color: rgb(46, 154, 255);
               }
               .btn_green{
                border-color: rgb(135, 232, 222);
                background: rgb(230, 255, 251);
                color: rgb(29, 197, 196);
               }
               .view_link{
                position: absolute;
                top: 110px;
                right: 7px;
                font-size: 18px;
                font-weight: 700;
                .link_span{
                    text-decoration: underline;
                }
               }
            }
        }
        
    }
    .border{
        border: 2px dashed var(--el-color-primary) !important;
        
    }
    .contain_box{
        height: calc(100vh - 300px);
        overflow: hidden;
     
    }
    .left_box{
        position: relative;
        margin-right: 20px;
        padding: 15px;
        .title_box{

        }
    }
   
    .right_box{
        position: relative;
        // height: 100%;
        width:100%;
    
        .card{
            height: 129px;
            width: 100%;
            background: rgb(255, 255, 255);
            border-radius: 15px;
            padding: 15px;
            .card_title{
                color:rgb(136, 136, 136);
                font-weight: 700;
            }
            .card_title1{
                color: black;
                font-weight: 700;
                font-size: 20px;
            }
            .card_box{
                display: flex;
                justify-content: space-between;
                width: 100%;
                
            }
           
        }
        .task_box{
                padding-right: 10px;
                width: 100%;
                height: calc(100% - 200px);
                overflow-y: auto;
                .task_item_box{
                    display: flex;
                    justify-content: space-between;

                }
         }
  
    }
 
    .hc-expansion-contraction-tree {
    position: absolute;
    left: -20px;
    top: 0;
    width: 18px;
    height: 100%;
    user-select: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #8c9099;
    font-size: 22px;
    border-radius: 5px;
    transition: background 0.2s;
    background: rgba(255, 255, 255, 0);
    &:hover {
        background: #f1f5f8;
        color: var(--el-color-primary);
    }
    z-index: 1000;
}
.hc-expansion-contraction-tree {
        color: var(--hc-label-color);
        &:hover {
            color: var(--el-color-primary);
            background: var(--hc-shadow-color-1);
        }
    }


}
</style>

<style lang='scss'>
.index_table_box{
    height: 95%;
    width: 100%;

    .el-table {
        --el-table-border-color:var(--el-color-primary) !important;
       
    }
    .demo1_pro .el-progress-bar__inner {
                background-color:rgba(84,188,189,1) !important;
     }
     .demo2_pro .el-progress-bar__inner {
                background-color:rgba(233,157,66,1) !important;
     }
     .demo3_pro .el-progress-bar__inner {
                background-color:rgb(119, 40, 245);
     }
     .demo1{
        color: rgba(84,188,189,1) !important;
    }
    .demo2{
        color:rgba(233,157,66,1) !important;
    }
    .demo3{
        color:rgb(119, 40, 245) !important;
    }
}
</style>