<template>
    <div class="construction-system">
        <div class="top">
            <el-form>
                <el-form-item label="年份：">
                    <el-date-picker
                        v-model="year"
                        type="year"
                        placeholder="选择年"
                        :size="size"
                        :format="yyyy"
                        :value-format="yyyy"
                    />
                </el-form-item>
            </el-form>
        </div>
        <el-row :gutter="40">
            <el-col :span="6">
                <div class="container" @click="onType('1', '规划建设管控制度')">
                    <img src="../../assets/images/constructionSystem1.png" alt />
                </div>
            </el-col>
            <el-col :span="6">
                <div class="container" @click="onType('2', '蓝线绿线规定与保护')">
                    <img src="../../assets/images/constructionSystem2.png" alt />
                </div>
            </el-col>
            <el-col :span="6">
                <div class="container" @click="onType('3', '技术规范与标准建设')">
                    <img src="../../assets/images/constructionSystem3.png" alt />
                </div>
            </el-col>
            <el-col :span="6">
                <div class="container" @click="onType('4', '投融资机制建设')">
                    <img src="../../assets/images/constructionSystem4.png" alt />
                </div>
            </el-col>
            <el-col :span="6">
                <div class="container" @click="onType('5', '绩效考核与奖励制度')">
                    <img src="../../assets/images/constructionSystem5.png" alt />
                </div>
            </el-col>
            <el-col :span="6">
                <div class="container" @click="onType('6', '产业化')">
                    <img src="../../assets/images/constructionSystem6.png" alt />
                </div>
            </el-col>
            <el-col :span="12">
                <div class="container" @click="onType('7', '其它制度')">
                    <img src="../../assets/images/constructionSystem7.png" alt />
                </div>
            </el-col>
        </el-row>
        <el-dialog
            v-model="visible"
            :title="dialogTitle"
            :modal-append-to-body="false"
            :close-on-click-modal="false"
            @close="onModalClose"
            width="1200px"
        >
            <el-table :data="tableData" v-loading="tableLoading" stripe  max-height="700">
                <el-table-column label="文件名" prop="fileName" align="center"></el-table-column>
                <el-table-column  label="文件号" prop="fileNumber" align="center"></el-table-column>
                <el-table-column label="发文单位" prop="fileNumberUnit" align="center"></el-table-column>
                <el-table-column label="颁布执行时间" prop="createTime" align="center" width="200px"></el-table-column>
                <el-table-column label="下载文件" align="center" width="120px">
                    <template #default="{row:{fileUrl}}">
                        <span class="action-span" @click="onDownfile(fileUrl)">下载文件</span>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                style="padding: 20px;"
                @current-change="handleCurrentChange"
                :current-page="current"
                :page-size="pageSize"
                background
                layout="total, prev, pager, next"
                :total="total"
            ></el-pagination>
        </el-dialog>
    </div>
</template>
<script>
import { proeaefileData } from "@/services";
import moment from "moment";
export default {
    data() {
        return {
            year: "",
            visible: false,
            dialogTitle: "",
            tableData: [],
            tableLoading: false,
            current: 1,
            pageSize: 10,
            total: 0,
            type: "",
        };
    },
    methods: {
        moment,
        // 关闭弹框
        onModalClose() {
            this.visible = false;
            this.tableData = [];
            this.current = 1;
            this.total = 0;
        },
        // 点击分页
        async onType(type, title) {
            this.dialogTitle = title;
            this.visible = true;
            this.type = type;
            this.getTableData();
        },
        // 获取表格数据
        async getTableData() {
            let _data = {
                current: this.current,
                size: this.pageSize,
                // data: {
                    fileType: this.type,
                    fileYear: this.year
                // }
            }
            this.tableLoading = true;
            let res = await proeaefileData(_data);
            this.tableLoading = false;
            if (res.code === 200) {
                const { total, data } = res;
                console.log(data);
                this.tableData = data;
                this.total = total;
            }
        },
        // 切换分页
        handleCurrentChange(current) {
            this.current = current;
            this.getTableData();
        },
        // 点击下载文件
        onDownfile(path) {
            console.log(path,3333);
            window.open(path)
        }
    },
    mounted() {
        let year = moment(new Date()).format("YYYY");
        this.year = year;
    }
};
</script>
<style lang="less" scoped >
@import "@/global.less";
.construction-system {
    height: 91vh;
    // background-image: url("../../assets/images/bj_img.png");
    padding: 5px;
    .el-input__inner {
        // color: #fff;
    }
    .container {
        margin-bottom: 30px;
        cursor: pointer;
        img {
            max-width: 100%;
        }
    }
    .action-span {
        color: @border-color;
    }
}
.el-input__wrapper {
    // background-color: #000928;
    border: none;
    
}
// .el-dialog,.el-loading-mask {
//     background-color: #000928;
//     color: #fff;
// }

</style>