<!-- 查看图纸-->
<template>
    <div class='look-page'>
        <div class='eq-list-top'>
            <Select @change='getList(true)' v-model='floor' width='160' tipPlace='top' caption='楼层 ：' :selectdata='floorData'></Select>
            <el-input
                placeholder='请搜索文件名/上传文件名'
                size='small'
                @keyup.enter.native='getList(true)'
                @blur='getList(true)'
                clearable
                prefix-icon='el-icon-search'
                v-model='keywords'
                style='width:220px;margin-left:12px'
            ></el-input>
        </div>
        <el-table :data='tableData' style='width: 100%' :border='true'>
            <el-table-column type='index' label='序号' width='60' :index='indexMethod'></el-table-column>
            <el-table-column prop='lb' label='楼层' width='110' show-overflow-tooltip resizable>
                <template slot-scope='{row}'>{{row.floor || '--'}}</template>
            </el-table-column>
            <el-table-column prop='lb' label='文件目录' width='400' show-overflow-tooltip resizable>
                <template slot-scope='{row}'>{{row.fullPath || '--'}}</template>
            </el-table-column>
            <el-table-column prop='sl' label='文件名' width='250' show-overflow-tooltip resizable>
                <template slot-scope='{row}'>{{row.pathName || '--'}}</template>
            </el-table-column>
            <el-table-column prop='assetnum' label='文件类型' width='100' show-overflow-tooltip resizable>
                <template slot-scope='{row}'>{{row.fileType || '--'}}</template>
            </el-table-column>
            <el-table-column prop='assetnum' label='上传文件名'>
                <template slot-scope='{row}'>{{row.fileName || '--'}}</template>
            </el-table-column>
            <el-table-column label='操作' width='170'>
                <template slot-scope='{row}'>
                    <!-- 无fileId,设置禁用 -->
                    <el-button type='text' size='mini' :disabled='!Boolean(row.fileId)' @click='handlePreview(row.fileId)'>
                        <!-- <i class='el-icon-download'></i> -->
                        预览
                    </el-button>
                    <!-- 无fileUrl,设置禁用 -->
                    <el-button type='text' size='mini' :disabled='!Boolean(row.fileUrl)' @click='handleDown(row.fileUrl)'>
                        <!-- <i class='el-icon-download'></i> -->
                        下载{{row.fileSize? `（${row.fileSize}）` :''}}
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class='foot'>
            <el-pagination
                background
                layout='prev, pager, next'
                :total='total'
                :page-size='size'
                :current-page='page'
                @prev-click='pageChanged'
                @next-click='pageChanged'
                @current-change='pageChanged'
            ></el-pagination>
        </div>
    </div>
</template>
<script>
import { queryPicList } from '@/api/equipmentList.js'
import { mapGetters } from 'vuex'
import { random } from 'lodash'
export default {
    data() {
        return {
            tableData: [],
            floorData: [],
            total: 0,
            page: 1,
            size: 11,
            keywords: '',
            floor: 'all',
            fileType: '',
            files: [],
        }
    },
    props: ['smsxt'],
    computed: {
        // floorSelect2 id: e.gname, name: e.code,使用的gname
        ...mapGetters(['plazaId', 'floorSelect2']),
    },
    created() {
        // 楼层筛选下拉菜单
        this.floorData = [{ id: 'all', name: '全部' }, ...this.floorSelect2]
    },
    mounted() {
        // 根据分辨率更改size值
        this.handleResize()
        // 查询列表
        this.getList()
        // 监听resize事件
        window.addEventListener('resize', this.handleResize)
        this.$once('hook:beforeDestroy', () => {
            window.removeEventListener('resize', this.handleResize)
        })
    },
    methods: {
        //序号的方法
        indexMethod(index) {
            return (this.page - 1) * this.size + index + 1
        },
        /**
         * 分页器选择页码
         */
        pageChanged(page, size) {
            this.page = page
            this.getList()
        },
        /**
         * 获取查看图纸列表
         * @param { Boolean } initPage 是否重置页码, true是 false 否
         *                    更改楼层,搜索文件名时,重置页码
         */
        async getList(initPage) {
            // 重置页码
            if (initPage) {
                this.total = 0
                this.page = 1
            }
            const { plazaId, page, size, keywords, floor } = this
            // 专业,按照配置文件中的对应关系进行转换
            const Spes = __systemConf.conf.smsxt_szhyj[this.smsxt]
            let getParams = {
                page,
                size,
                ProjectId: '(YSY)CZWDGC', // plazaId,
                Spes,
            }
            // 楼层为全部时,上送完整楼层列表字段
            if (floor === 'all') {
                let floorArr = [],
                    floorStr = ''
                this.floorSelect2.map((item) => floorArr.push(item.id))
                floorStr = floorArr.join(',')
                getParams.Floors = floorStr
            } else {
                getParams.Floors = floor
            }
            // 搜索文件名/上传文件名
            if (keywords) {
                getParams.keywords = keywords
            }
            let res = await queryPicList({ getParams })
            this.tableData = res?.data || []
            this.total = res?.count || 0
        },
        /**
         * 预览
         */
        handlePreview(fileId) {
            let url = 'http://szhyj.wanda.cn/dwg/index.html?fileId='
            if (['serve', 'aly_dev'].includes(process.env.NODE_ENV)) {
                url = 'http://39.106.116.51:8081/dwg/index.html?fileId='
            }
            window.open(url + fileId)
        },
        /**
         * 下载
         */
        handleDown(fileUrl) {
            let url = 'http://szhyj.wanda.cn/upload'
            if (['serve', 'aly_dev'].includes(process.env.NODE_ENV)) {
                url = 'http://39.106.116.51:8088/upload/'
            }
            window.open(url + fileUrl)
        },
        /**
         * 页面窗口变化,更新 size值
         * 不会实时重新渲染页面列表,只是适配不同宽度浏览器使用
         */
        handleResize() {
            let width = document.body.clientWidth
            if (width >= 1920) {
                this.size = 15
            } else if (width >= 1600) {
                this.size = 14
            } else {
                this.size = 13
            }
        },
    },
}
</script>
<style lang="less" scoped>
.look-page {
    .eq-list-top {
        display: flex;
        margin-bottom: 12px;
    }
    td {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .foot {
        height: 32px;
        display: flex;
        justify-content: flex-end;
        margin-top: 28px;
    }
}
</style>