<template>
    <div class="page-pack">
        <div class="tree-pack float-left clear-float">
            <div class="title-pack clear-float pl-15 pr-15">
                <div class="float-left">
                    <span class="page-title-text">底盘车间</span>
                </div>
            </div>
            <div class="tree-main-pack">
                <el-tree
                    class="filter-tree"
                    default-expand-all
                    highlight-current
                    ref="sortTree"
                    empty-text="暂无分类数据"
                    :data="sortTreeData"
                    :style="treeHeight"
                    node-key="id"
                    :props="{ children: 'children', label: 'label' }"
                    :expand-on-click-node="false"
                    @node-click="doSortTreeClick">
                </el-tree>
            </div>
        </div>
        <div class="view-pack">
            <div class="title-pack clear-float pl-15 pr-15">
                <div class="float-left">
                    <span class="page-title-text">{{currentSort.label}}</span>
                </div>
                <div class="float-right page-refresh">
                    <span
                        class="pointer"
                        @click="doRefreshClick">
                        <svg-icon icon-class="refresh"></svg-icon>
                        <span class="ml-10">刷新</span>
                    </span>
                </div>
            </div>
            <div class="tool-pack clear-float pl-15 pr-15">
                <Search
                    v-if="searchComponentRenderToggle"
                    :searchCode="currentSearchCode"
                    @search="doSearchClick"
                    @reset="doResetClick">
                </Search>
                <div class="float-left">
                    <el-button
                        size="small"
                        type="primary"
                        @click="doExportClick">
                        导出
                    </el-button>
                </div>
            </div>
            <div class="general-list-main-pack pl-15 pr-15">
                <div>
                    <PreviewTable
                        :tableConfig="tableConfig"
                        @onPageSizeChange="onPageSizeChange"
                        @onCurrentPageChange="onCurrentPageChange">
                    </PreviewTable>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import PreviewTable from '@/components/PreviewTable'
    import Search from '@/components/Search'
    import request from '@/utils/request'

    export default {
        name: 'Chassis',
        components: {
            PreviewTable,
            Search
        },
        data () {
            return {
                // 分类树数据
                sortTreeData: [
                    {
                        id: 1,
                        label: '旋转辊床',
                        code: 'ROTARY_ROLLER_BED'
                    },
                    {
                        id: 2,
                        label: '过程扫码设备',
                        code: 'PROCESS_SCAN_CODE'
                    },
                    {
                        id: 3,
                        label: '智能扭力钣手',
                        code: 'INTELLIGENT_TORQUE_WRENCH'
                    },
                    {
                        id: 4,
                        label: '润滑油集中加注',
                        code: 'LUBRICATING_OIL_CONCENTRATE'
                    },
                    {
                        id: 5,
                        label: '四轮定位',
                        code: 'WHEEL_ALIGNMENT'
                    },
                    {
                        id: 6,
                        label: '铆接设备',
                        code: 'RIVETING_EQUIPMENT'
                    }
                ],
                // 搜索组件关键字列表
                searchList: {},
                // 设备分类树高度
                treeHeight: {},
                // 当前选中分类
                currentSort: {},
                // 当前设备searchcode
                currentSearchCode: '',
                // 当前车间code
                currentWorkshopCode: 'CHASSIS',
                // 是否重新加载搜索组件
                searchComponentRenderToggle: false,
                // 表格配置项
                tableConfig: {
                    height: 0,
                    data: [],
                    fieldList: [],
                    paginationToggle: true,
                    paginationConfig: {
                        total: 0,
                        currentPage: 1,
                        pageSize: 20
                    }
                }
            }
        },
        methods: {
            // 点击刷新按钮
            doRefreshClick () {
                this.getTableData().then(() => {
                    this.$message.success('刷新成功！')
                })
            },
            // 点击分类树
            doSortTreeClick (treeNode) {
                this.currentSort = _.cloneDeep(treeNode)
                this.currentSearchCode = this.currentSort.code
                // 重新渲染搜索组件
                this.searchComponentRenderToggle = false
                this.$nextTick(() => {
                    this.searchComponentRenderToggle = true
                })
                // 获取列表表头展示字段
                this.getTableLabel()
                // 获取列表数据
                this.getTableData()
            },
            // 点击搜索组件搜索按钮
            doSearchClick (param) {
                this.searchList = param
                this.tableConfig.paginationConfig.currentPage = 1
                // 获取列表数据
                this.getTableData()
            },
            // 点击搜索组件重置按钮
            doResetClick (param) {
                this.searchList = { ...param, filters: [] }
                this.tableConfig.paginationConfig.currentPage = 1
                this.tableConfig.paginationConfig.pageSize = 20
                // 获取列表数据
                this.getTableData()
            },
            // 获取列表表头展示字段
            getTableLabel () {
                let queryParams = { searchCode: this.currentSearchCode }
                this.$fetch('show-field-controller/showField-get', queryParams).then((response) => {
                    this.tableConfig.fieldList = _.cloneDeep(response)
                })
            },
            // 获取列表数据
            getTableData () {
                let queryParams = {
                    searchCode: this.currentSearchCode,
                    filters: _.cloneDeep(this.searchList.filters) || [],
                    pageSize: this.tableConfig.paginationConfig.pageSize,
                    pageNum: this.tableConfig.paginationConfig.currentPage
                }
                queryParams.filters.push({
                    fieldCode: 'workshopCode',
                    fieldType: 'STRING',
                    value: this.currentWorkshopCode
                })
                return new Promise((resolve, reject) => {
                    this.$fetch('equipment-controller/data-post', queryParams).then((response) => {
                        this.tableConfig.data = _.cloneDeep(response.list)
                        this.tableConfig.paginationConfig.total = _.cloneDeep(response.total)
                        resolve()
                    })
                })
            },
            // 表格组件分页数量改变事件
            onPageSizeChange (pageSize) {
                this.tableConfig.paginationConfig.currentPage = 1
                this.tableConfig.paginationConfig.pageSize = pageSize
                // 获取列表数据
                this.getTableData()
            },
            // 表格组件分页页数改变事件
            onCurrentPageChange (currentPage) {
                this.tableConfig.paginationConfig.currentPage = currentPage
                // 获取列表数据
                this.getTableData()
            },
            // 点击程序下发按钮
            doProgramIssuedClick () {
                this.$refs.ProgramIssued.dialogToggle = true
            },
            // 点击导出按钮
            async doExportClick () {
                let queryParams = {
                    searchCode: this.currentSearchCode,
                    filters: _.cloneDeep(this.searchList.filters) || []
                }
                queryParams.filters.push({
                    fieldCode: 'workshopCode',
                    fieldType: 'STRING',
                    value: this.currentWorkshopCode
                })
                try {
                    let response = await request({
                        url: `${process.env.API_HOST}/api/equipment/data/export`,
                        data: queryParams,
                        method: 'post',
                        responseType: 'blob'
                    })
                    if (response.status === 200) {
                        let objectUrl = URL.createObjectURL(response.data)
                        const link = document.createElement('a')
                        link.download = decodeURI(response.headers.filename)
                        link.href = objectUrl
                        link.click()
                        window.URL.revokeObjectURL(objectUrl)
                    } else {
                        this.$message.error(response.message)
                    }
                } catch (error) {
                    console.log(error)
                }
            }
        },
        mounted () {
            setTimeout(() => {
                this.treeHeight = { 'height': `${document.body.offsetHeight - 180}px` }
                this.tableConfig.height = document.querySelector('.page-pack').offsetHeight - 205
                this.$refs.sortTree.setCurrentKey(this.sortTreeData[0].id)
                this.currentSort = _.cloneDeep(this.sortTreeData[0])
                this.currentSearchCode = _.cloneDeep(this.sortTreeData[0].code)
                // 搜索组件渲染开启
                this.searchComponentRenderToggle = true
                // 获取列表表头展示字段
                this.getTableLabel()
                // 获取列表数据
                this.getTableData()
            }, 0)
        }
    }
</script>

<style lang="scss" scoped>
    .page-pack {
        height: 100%;
        width: 100%;
        overflow: hidden;
        position: relative;

        // 左侧类别树
        .tree-pack {
            position: absolute;
            width: 250px;
            height: 100%;
            border: 1px solid #d2d3d5;
            background-color: #fff;

            .title-pack {
                height: 38px;
                line-height: 38px;
                border-bottom: 1px solid #d2d3d5;
            }
        }

        // 显示区域
        .view-pack {
            margin-left: 260px;
            height: 100%;
            border: 1px solid #d2d3d5;
            background-color: #fff;
            overflow-y: auto;

            .title-pack {
                height: 38px;
                line-height: 38px;
                border-bottom: 1px solid #d2d3d5;
            }

            .tool-pack {
                padding-top: 16px;
                padding-bottom: 16px;
                .tool-tag {
                    height: 32px;
                    line-height: 32px;
                    font-size: 14px;
                }
            }
        }
    }
</style>