<!--
 * @Author: @liulin
 * @Date: 2022-06-08 12:00:34
 * @LastEditors: liulin liulin19981227@163.com
-->
<template>
    <el-dialog
        :visible.sync="dialogVisible"
        fullscreen
        v-if="dialogVisible"
        :before-close="handleClose"
        :append-to-body="true"
    >
        <el-form
            ref="searchForm"
            :model="searchForm"
            label-width="80px"
            class="search-top"
            @submit.native.prevent
        >
            <project-info-selector
                v-model="searchForm.projectId"
                style="width: 100%"
                @input="handleChange"
                @keyup.enter.native="handleSearch"
            ></project-info-selector>

            <el-select v-model="searchForm.createTime" clearable placeholder="请选择年份">
                <el-option
                    v-for="item in optionYears"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                >
                </el-option>
            </el-select>

            <dict-select
                dictCode="xmgl-xmzt"
                :hasDefaultOption="true"
                clearable
                placeholder="请选择项目状态"
                v-model="searchForm.projectStatus"
                style="width: 100%"
            />

            <dict-select
                dictCode="xmgl-xmlx"
                :hasDefaultOption="true"
                clearable
                placeholder="请选择项目类型"
                v-model="searchForm.projectType"
                style="width: 100%"
            />

            <el-input
                style="margin-right: 10px"
                type="number"
                v-model="searchForm.startMoney"
                placeholder="请输入投资金额"
                @keyup.enter.native="handleSearch"
                clearable
            ></el-input>
            <span>~</span>
            <el-input
                type="number"
                v-model="searchForm.endMoney"
                placeholder="请输入投资金额"
                @keyup.enter.native="handleSearch"
                clearable
            ></el-input>

            <el-button
                size="small"
                type="primary"
                class="el-icon-search search-btn"
                @click="handleSearch"
            >
                查询
            </el-button>
            <el-button
                size="small"
                type="primary"
                plain
                class="el-icon-refresh"
                @click="handleReset"
            >
                重置
            </el-button>
            <el-button
                size="small"
                type="primary"
                plain
                class="el-icon-download"
                @click="handleDownload"
                v-loading="downloading"
            >
                导出
            </el-button>
        </el-form>
        <div style="height: 100%">
            <el-row type="flex" class="row-bg header-bg" justify="space-around">
                <el-col :span="6" class="item-header" v-for="(item, index) in header" :key="index">
                    {{ item }}
                </el-col>
            </el-row>
            <div>
                <ul
                    class="infinite-list"
                    v-infinite-scroll="load"
                    infinite-scroll-disabled="disabled"
                    style="overflow: auto; padding-left: 0"
                    v-if="isRefresh"
                >
                    <el-row
                        type="flex"
                        class="row-bg infinite-list-item"
                        justify="space-around"
                        v-for="(item, index) in dataList"
                        :key="index"
                    >
                        <el-col
                            :span="6"
                            class="item-header"
                            v-for="(item1, index1) in item"
                            :key="index1"
                        >
                            <el-tooltip
                                v-model="item1.showTooltip"
                                effect="dark"
                                placement="top"
                                :disabled="!item1.showTooltip"
                                :open-delay="200"
                            >
                                <div slot="content" class="tooltipInfo">
                                    {{ index1 == 0 ? index + 1 : item1.name }}
                                </div>
                                <div class="description" @mouseover="isShowTooltip($event, item1)">
                                    <span> {{ index1 == 0 ? index + 1 : item1.name }}</span>
                                </div>
                            </el-tooltip>
                        </el-col>
                    </el-row>
                    <el-row>
                        <p v-show="noMore" class="nomore">没有更多了</p>
                    </el-row>
                </ul>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
import req from '@/request.js'
export default {
    data() {
        return {
            dialogVisible: false,
            header: [],
            dataList: [],
            arr_: [],
            arr: [],
            count: 0,
            loading: false,
            searchForm: {
                id: '',
                projectId: '',
                projectName: '',
                projectType: '',
                endMoney: '',
                startMoney: '',
                createTime: '',
            },
            optionYears: [], //顶部搜索年份选择数组
            isRefresh: true, // 是否刷新数据
            downloading: false, // 是否导出加载中
        }
    },
    computed: {
        noMore() {
            return this.count >= this.arr.length
        },
        disabled() {
            return this.loading || this.noMore
        },
    },
    mounted() {
        this.getYear()
    },
    watch: {
        // 监听json数据变化，重新渲染文件夹内容
        dataList(newVal) {
            this.isRefresh = false
            if (true) {
                this.$nextTick(() => {
                    // $nextTick 是在 DOM 更新循环结束之后执行延迟回调
                    this.isRefresh = true
                })
            }
        },
    },
    methods: {
        handleChange(val, obj) {
            if (val) {
                this.searchForm.projectId = val
                this.searchForm.projectName = obj.projectName
            }
        },
        handleReset() {
            this.searchForm.projectId = ''
            this.searchForm.projectName = ''
            this.searchForm.projectType = ''
            this.searchForm.createTime = ''
            this.searchForm.startMoney = ''
            this.searchForm.endMoney = ''
            this.$http
                .post('${cqxy}/biz/menuFieldTemp/v1/getDataById', this.searchForm)
                .then((res) => {
                    this.open(res.data.value)
                })
        },
        handleDownload() {
            let search = this.cloneObj(this.searchForm)
            for (let i in search) {
                if (search[i] && typeof search[i] !== 'undefined') {
                    if (i == 'createTime') {
                        search.startTime = `${search[i]}-01-01`
                        search.endTime = `${search[i]}-12-31`
                    }
                }
            }
            delete search.createTime
            this.downloading = true
            req.downloadPostCopy('${cqxy}/biz/menuFieldTemp/v1/exportDataById', search)
                .then((res) => {
                    this.downloading = false
                })
                .catch((res) => {
                    this.downloading = false
                })
        },
        // 拷贝对象
        cloneObj(obj) {
            let clone = {}
            for (let i of Object.keys(obj)) {
                clone[i] = obj[i]
            }
            return clone
        },
        handleSearch() {
            let search = this.cloneObj(this.searchForm)
            for (let i in search) {
                if (search[i] && typeof search[i] !== 'undefined') {
                    if (i == 'createTime') {
                        search.startTime = `${search[i]}-01-01`
                        search.endTime = `${search[i]}-12-31`
                    }
                }
            }
            delete search.createTime
            this.$http.post('${cqxy}/biz/menuFieldTemp/v1/getDataById', search).then((res) => {
                this.open(res.data.value)
            })
            // }
        },
        //获取顶部搜索的年份区间
        getYear() {
            const myDate = new Date()
            const startYear = 2006 //起始年份
            const endYear = myDate.getFullYear() //结束年份
            for (let i = endYear; i >= startYear; i--) {
                this.optionYears.push({
                    label: i + '年',
                    value: i,
                })
            }
        },
        open(data) {
            if (data.id) {
                this.templeteId = data.id
                this.searchForm.id = this.templeteId
                if (data.flag) {
                    this.searchForm.projectId = data.projectId
                    this.searchForm.projectName = data.projectName
                }
            }
            this.arr = []
            this.dataList = []
            this.count = 0
            this.dialogVisible = true
            this.header = data.header
            data.dataList.forEach((item, index) => {
                item.forEach((item1) => {
                    let obj = {
                        name: item1,
                        showTooltip: false,
                    }
                    this.arr_.push(obj)
                })
                this.arr.push(this.arr_)
                this.arr_ = []
            })
        },
        load() {
            // console.log('44444444')
            this.count += 5
            this.dataList = this.arr.slice(0, this.count)
        },
        handleClose(done) {
            done()
        },
        isShowTooltip(obj, row) {
            const TemporaryTag = document.createElement('span')
            TemporaryTag.innerText = row.name
            TemporaryTag.className = 'getTextWidth'
            document.querySelector('body').appendChild(TemporaryTag)
            const currentWidth = document.querySelector('.getTextWidth').offsetWidth
            document.querySelector('.getTextWidth').remove()

            /* cellWidth为表格容器的宽度*/
            const cellWidth = obj.target.offsetWidth
            /* 当文本宽度小于||等于容器宽度两倍时，代表文本显示未超过两行  可以 cellWidth *2，3，4....  */
            currentWidth <= cellWidth * 2 ? (row.showTooltip = false) : (row.showTooltip = true)
        },
    },
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/common.scss';
.el-row {
    margin-bottom: 20px;
    &:last-child {
        margin-bottom: 0;
    }
}
.el-col {
    border-radius: 4px;
}
.bg-purple-dark {
    background: #99a9bf;
}
.bg-purple {
    background: #d3dce6;
}
.bg-purple-light {
    background: #e5e9f2;
}
.grid-content {
    border-radius: 4px;
    min-height: 36px;
}
.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
    overflow: auto;
}
.item-header {
    text-align: center;
}
.header-bg {
    background-color: #f2f2f2;
}
.item {
    margin: 4px;
}
.description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    &:hover {
        cursor: pointer;
    }
}
.infinite-list {
    height: calc(100vh - 300px);
}
.nomore {
    text-align: center;
    margin-top: 10px;
}
.tooltipInfo {
    width: 200px;
}
/deep/ .item-header[data-v-340c3316] {
    padding: 0 10px;
}
</style>
<style lang="scss">
.el-popper.is-dark {
    width: 500px;
}
</style>
