<template>
     <div class="hc-page-box">
           <HcCard class="table-box">
                <HcTable ref="tableRef" :column="tableColumn" :datas="tableData" :loading="tableLoading" isCheck @selection-change="tableSelection" @row-click="tableRowClick"/>
                 <template #action>
                    <HcPages :pages="searchForm" @change="pageChange"/>
                </template>
           </HcCard>
           <HcCard class="detail-box">
               <el-row class="m30">
                   <el-col :span="4" class="font-color">
                      <i class="ri-layout-grid-fill icon"></i> <span style="vertical-align: center;">重庆乌江白马航电枢纽工程</span>
                   </el-col>
               </el-row>
                <el-row class="m30">
                   <el-col :span="2">
                       <span>项目概况：</span>
                   </el-col>
                   <el-col :span="22">
                      <span>乌江白马电组工位于庆市武峰区白马，是与江T流开发规到12 级中的后一个级，项开发以运为，发电能，的正常为水位14%，总所 3.14亿立方米;航道救V级准规划建设，通航建铁物为500吨级单级得而，设计年单向通过能力659.6万吨;电站装机48万千瓦，多年平均发电量17.12亿度。工得总股资为103.9亿元，总工期为9个。</span>
                      <p>建设工期:</p>
                     乌江白马航电枢纽将分三期建设，2031年建成。一期计划2024年底完工，主要建设白马大桥、右岸一期边坡工程、有岸道路、导流明深等工程项目。中庆乌江白马航电版工程一期工程工2021年4日开工程说。目前卫宗成外动境上石开终390万，占总230%: 二期工程了202年1月开工丝设，完成方开 10万方，占总6%:319道改线工程于2021年7月开工建设，目前已完成合同总量70%.
                   </el-col>
               </el-row>   
                <el-row class="m30">
                   <el-col :span="2">
                       <span>总里程：</span>
                   </el-col>
                   <el-col :span="22">
                        <span>120（KM）</span>
                   </el-col>
               </el-row> 
               <el-row class="m30">
                   <el-col :span="2">
                       <span>投资预算：</span>
                   </el-col>
                   <el-col :span="22">
                        <span>1202332（万）</span>
                   </el-col>
               </el-row> 
                <el-row class="m30">
                   <el-col :span="2">
                       <span>开工时间：</span>
                   </el-col>
                   <el-col :span="22">
                        <span>2022/01/2</span>
                   </el-col>
               </el-row> 
               <el-row class="m30">
                   <el-col :span="2">
                       <span>完工时间：</span>
                   </el-col>
                   <el-col :span="22">
                        <span>2022/02/2</span>
                   </el-col>
               </el-row> 
           </HcCard>
     </div>
</template>

<script setup>
import {ref, watch, onMounted} from "vue";
import {useAppStore} from "~src/store";

//变量
const useAppState = useAppStore()
const projectId = ref(useAppState.getProjectId);
const contractId = ref(useAppState.getContractId);
const projectInfo = ref(useAppState.getProjectInfo);

//渲染完成
onMounted(() => {

})

//表格数据
const tableRef = ref(null)
const tableColumn = ref([
    {key:'key1', name: '项目名称', width: 600},
    {key:'key2', name: '入库时间'},
    {key:'key3', name: '案卷总量'},
    {key:'key4', name: '责任单位'},
   
])

const tableData = ref([
    {
        id: 1,
        key1: '重庆乌江白马航电枢纽工程',
        key2: '2022/01/02',
        key3: '293',
        key4: '重庆奉建高素有限公司',
        key5:''
    },
    {
        id: 2,
        key1: 'FJZB-02-123',
        key2: '初步设计外业验收有关文件、工程初步设计图纸、初步设计批复、初步设计审查咨询报告',
        key3: '293',
        key4: '300',
        key5: '备注信息',
    },
    {
        id: 2,
        key1: 'FJZB-02-123',
        key2: '初步设计外业验收有关文件、工程初步设计图纸、初步设计批复、初步设计审查咨询报告',
        key3: '293',
        key4: '300',
        key5: '备注信息',
    }
])

//获取数据
const tableLoading = ref(false)
const getTableData = async () => {

}

//多选
const tableCheckedKeys = ref([]);
const tableSelection = (rows) => {
    tableCheckedKeys.value = rows
}

const tableRowClick = (rows) => {
    console.log(rows,'rows');
}
</script>

<style lang="scss" scoped>
    .hc-page-box{
        height: 100%;
        .table-box{
            height: 58%;
            margin-bottom: 2%;
           
        }
        .detail-box{
            height: 40%;
            
           .m30{
               margin-top: 15px;
               font-size: 14px;
           }
            .font-color{
                color: rgba(23,132,252,1);
                font-weight: 900;
            }
            .icon{
              font-size: 18px;
            
              margin-right: 10px;
              
               
             
            }
        }
    }
</style>
