<template>
    <div class="page-pack">
        <div class="title-pack clear-float pl-15 pr-15">
            <div class="float-left">
                <span class="page-title-text">烘干室温度</span>
            </div>
            <div class="float-right page-refresh">
                <span class="pointer" @click="refresh()">
                    <svg-icon icon-class="refresh"></svg-icon>
                    <span class="ml-10">刷新</span>
                </span>
            </div>
        </div>
        <div class="search-pack">
            <el-row>
                <el-col :span="8">
                    <div class="grid-content pl-10 pr-10">
                        <span>设备编号：</span>
                        <el-input 
                            v-model="equipCodetValue"
                            clearable
                            placeholder="请输入内容"
                            size="small">
                        </el-input>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content pl-10 pr-10">
                        <span>时间：</span>
                        <el-date-picker
                            clearable
                            v-model="beginTime"
                            size="small"
                            type="date"
                            placeholder="请选择日期">
                        </el-date-picker>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content pl-10">
                        <el-button @click="searchClick" type="primary" size="mini">搜索</el-button>
                        <el-button @click="resetClick" class="reset" size="mini">重置</el-button>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="general-list-main-pack pl-15 pr-15 pb-15">
            <div>
                <Table
                    :tableConfig="tableConfig"
                    @onPageSizeChange="onPageSizeChange"
                    @onCurrentPageChange="onCurrentPageChange">
                    <template slot="beginTime">
                        <el-table-column
                            label="开始时间">
                            <template slot-scope="scope">
                                {{ formatTime(scope.row.beginTime, 'YYYY-MM-DD HH:mm:ss') }}
                            </template>
                        </el-table-column>
                    </template>
                    <template slot="endTime">
                        <el-table-column
                            label="结束时间">
                            <template slot-scope="scope">
                                {{ formatTime(scope.row.endTime, 'YYYY-MM-DD HH:mm:ss') }}
                            </template>
                        </el-table-column>
                    </template>
                    <template slot="operationColumn">
                        <el-table-column
                            fixed="right"
                            label="操作"
                            width="55">
                            <template slot-scope="scope">
                                <el-button
                                    type="text"
                                    @click="ViewtemperatureClick(scope.row)">
                                    查看
                                </el-button>
                            </template>
                        </el-table-column>
                    </template>
                </Table>
            </div>
        </div>
        <!-- 查看弹窗 -->
        <ViewDialog
            ref="ViewDialog"
            :startTime = "propStartTime"
            :endTime = "propEndTime"
            :equipCode = "propEquipCode"
        ></ViewDialog>
    </div>
</template>

<script>
    import Moment from 'moment'
    import Table from '@/components/Table'
    import Search from '@/components/Search'
    import ViewDialog from './components/ViewDialog'
    export default {
        name: 'dryingRoomChart',
        components: {
            Table,
            Search,
            ViewDialog
        },
        data () {
            return {
                // 开始时间
                propStartTime: '',
                //结束时间
                propEndTime: '',
                // 设备编号
                propEquipCode: '',
                // 搜索组件输入框输入内容
                equipCodetValue: '',
                // 搜索条件时间字段
                beginTime: '',
                // 搜索组件关键字列表
                searchList: {},
                // 表格配置项
                tableConfig: {
                    height: 0,
                    data: [],
                    fieldList: [
                        { label: '设备编号', value: 'equipCode' },
                        { label: '开始时间', value: 'beginTime', slot: 'beginTime' },
                        { label: '结束时间', value: 'endTime', slot: 'endTime' }
                    ],
                    paginationToggle: true,
                    paginationConfig: {
                        total: 0,
                        currentPage: 1,
                        pageSize: 20
                    }
                }
            }
        },
        mounted () {
            setTimeout(() => {
                this.tableConfig.height = document.querySelector('.page-pack').offsetHeight - 175;
                this.getTemperatureList();
            }, 0)
        },
        methods: {
            // 时间日期格式化
            formatTime (time, format) {
                if (time !== null && time !== '') {
                    return Moment(time).format(format)
                } else {
                    return '暂无'
                }
            },
            // 点击搜索按钮
            searchClick () {
                this.getTemperatureList();
            },
            // 重置按钮
            resetClick () {
                this.equipCodetValue = '';
                this.beginTime = '';
                this.tableConfig.paginationConfig.currentPage = 1;
                this.tableConfig.paginationConfig.pageSize = 20;
                this.getTemperatureList();
            },
            // 刷新
            refresh () {
                this.getTemperatureList().then((res) => {
                    this.$message.success('刷新成功！');
                })
            },
            // 查看
            ViewtemperatureClick (row) {
                this.$refs.ViewDialog.dialogVisible = true
                this.propStartTime = this.formatTime(row.beginTime, 'YYYY-MM-DD HH:mm:ss')
                this.propEndTime = this.formatTime(row.endTime, 'YYYY-MM-DD HH:mm:ss')
                this.propEquipCode = row.equipCode;
            },
            // 页数数量配置发生改变
            onPageSizeChange () {
                this.tableConfig.paginationConfig.currentPage = 1
                this.tableConfig.paginationConfig.pageSize = pageSize
                this.getTemperatureList()
            },
            // 当前页发生跳转
            onCurrentPageChange () {
                this.tableConfig.paginationConfig.currentPage = currentPage
                this.getTemperatureList()
            },
            // 获取温度状态列表
            getTemperatureList () {
                return new Promise((resolve, reject) => {
                    let params = {
                        pageSize: this.tableConfig.paginationConfig.pageSize,
                        pageNum: this.tableConfig.paginationConfig.currentPage,
                        equipCode: this.equipCodetValue,
                        beginTime: this.beginTime
                    };
                    this.$fetch('drying-room-temp-controller/equipPage-get', params).then(res => {
                        this.tableConfig.data = _.cloneDeep(res.list)
                        this.tableConfig.paginationConfig.total = _.cloneDeep(res.total)
                        resolve(res);
                    }).catch((res) => {
                        reject(res);
                    })
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .page-pack {
        position: relative;
        min-height: 100%;
        width: 100%;
        border: 1px solid #d2d3d5;
        background-color: #fff;
        overflow-y: auto;

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

        .search-pack {
            padding-top: 16px;
            padding-bottom: 16px;
            .grid-content {
                min-height: 36px;
                margin-bottom: 10px;
                display: flex;
                align-items: center;
                span {
                    display: inline-block;
                    width: 175px;
                    font-size: 14px;
                    white-space: nowrap;
                    text-align: right;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                /deep/ .el-date-editor.el-input, .el-date-editor.el-input__inner {
                    width: 100% !important;
                }
            }
        }

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

        .edit-button {
            color: #538FFD;
        }

        .status-circle {
            display: inline-block;
            width: 6px;
            height: 6px;
            border-radius: 6px;
            margin-right: 5px;
            vertical-align: middle;
        }
        .delete-button {
            color: #F47476;
        }

        .view-span {
            color: #1284fa;
            border-bottom: 1px solid #1284fa;
            &:hover {
                cursor: pointer;
            }
        }
        .el-dialog__body {
            padding: 30px 30px 10px 20px!important;
            .el-row {

                .el-col {
                    line-height: 35px;

                    .el-form-item {
                        width: 100%;

                        .el-form-item__content {
                            width: 100%;

                            .el-input {
                                font-size: 12px;
                                height: 32px;
                            }
                            .el-input__inner {
                                height: 32px;
                            }
                            .el-select {
                                width: 100%!important;
                                font-size: 12px;
                                height: 32px;
                            }
                            .el-date-editor {
                                width: 100%!important;
                            }
                        }
                    }
                }
            }
        }
        .view {
            color: #1284fa;
            cursor: pointer;
        }
    }
</style>