<template>
    <div class="water-analysis-page">
        <div class="top">
            <el-form label-width="auto" ref="ruleForm" inline :model="dataForm" >
                <el-form-item>
                    <el-date-picker  v-model="date" type="date" placeholder="请选择日期"
                        :size="size" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="Refresh" @click="search">查询</el-button>
                    <el-button type="primary" icon=Download  @click="downLoadClick">  导出</el-button>
                    <el-button type="primary" icon="Download" @click="downLoadImg"> 下载图片</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="项目进度填报" name="first">
                <el-table :data="tableData" v-loading="tableLoading" stripe  max-height="700" >
                    <!-- <el-table-column type="index" width="55" align="center" label="序号"></el-table-column> -->
                    <el-table-column :label="tableData.projectCategory" align="center" prop="projectCategory"
                     :show-overflow-tooltip="true" />
                    <el-table-column label="数量" align="center" prop="num" :show-overflow-tooltip="true" />
                    <el-table-column fixed="right" label="操作" width="120">
                        <template #default="{ row }">
                            <el-button link type="primary"  @click="checkClick(row)">查看上报数据</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="项目进度统计" name="second">
                <el-table :data="tableDateTwo" v-loading="tableLoading" stripe  max-height="700">
                    <!-- <el-table-column type="index" width="55" align="center" label="序号"></el-table-column> -->
                    <el-table-column :label="tableDateTwo.typeName" align="center" prop="typeName"
                        :show-overflow-tooltip="true" />
                    <el-table-column label="数量" align="center" prop="num" :show-overflow-tooltip="true" />
                    <el-table-column fixed="right" label="操作" width="120">
                        <template #default="{ row }">
                            <el-button link type="primary"  @click="onCheck(row)">查看上报数据</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>

        <component :is="currentTabComponent"></component>
    </div>
</template>
<script setup>
import { getInfo, progressCount,multiTableWrite,downloadImage } from '../api'
import { onMounted, toRefs } from 'vue';
import {downLoad,downloadUrl} from '../utils'
const activeName = ref('first')
//动态组件
let currentTabComponent=ref()
let dataForm = reactive({
    date: new Date(),
    tableData: '',
    tableDateTwo: '',
    tableLoading:true
})
let { date, tableData, tableDateTwo,tableLoading } = toRefs(dataForm)
//获取列表数据
const getInfoList = async (prams) => {
    let { data } = await getInfo(prams)
    tableData.value = data
    tableLoading.value=false
}
//切换table
const handleClick = ({ props }, event) => {
    console.log(props, event)
}
//获取第二个数据
const getTableData = async (prams) => {
    let { data, code } = await progressCount(`?timeMillis=${Date.parse(prams)}`);
    if (code == 200) {
        tableDateTwo.value = data
        tableLoading.value=false
    }
}
//搜索
const search=()=>{ 
    tableLoading.value=true
    getInfoList()
    getTableData(date.value)
}
//导出按钮
const downLoadClick=()=>{ 
    multiTabLoad(Date.parse(date.value))
}
const  multiTabLoad=async(params)=>{ 
    let res=await multiTableWrite(params)
    console.log(res,88899);
    downLoad(res, "xxx.xls");
}
//下载图片
const downLoadImg=()=>{ 
    downloadM(Date.parse(date.value))
}
const downloadM=async (data)=>{ 
    let res=await downloadImage(data)
    console.log(res,9999);
}
// 查看上报数据
const checkClick = (row) => {
    console.log(row, 'row');
}
onMounted(() => {
    getInfoList()
    getTableData(date.value)
})
</script>
<style lang="scss"  scoped>
.water-analysis-page {
    padding: 20px;
    border: 1px solid #ddd;
    height: 90vh;
    .top {
       // margin-bottom: 15px;
    }

    .el-input__inner {
        // color: #fff;//
    }
}
</style>