<template>
    <Page>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="关键词">
                <el-input v-model="formInline.searchValue" placeholder="请输入关键词" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <timepicker ref="timepk" :interval="interval" :dataTree="dataTree"></timepicker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="queryData" icon="el-icon-search">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table
            stripe
            highlight-current-row
            header-cell-class-name="table_header"
            border
            style="width: 100%"
            :data="tableData"
            height="calc(100vh - 224px)"
        >
            <el-table-column prop="title" label="问题标题" align="center"></el-table-column>
            <el-table-column prop="description" label="问题描述" align="center"></el-table-column>
            <el-table-column prop="status" label="问题状态" align="center">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.status == 2">处理中</el-tag>
                    <el-tag v-if="scope.row.status == 0" type="success">已解决</el-tag>
                    <el-tag v-if="scope.row.status == 1" type="warning">待处理</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="发布时间" align="center"></el-table-column>
            <el-table-column label="操作" width="240px" align="center">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="primary"
                        icon="el-icon-finished"
                        @click="solve(scope.row)"
                        v-if="scope.row.status != 0"
                    >
                        解决
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            align="right"
            @size-change="handleSizeChange"
            @current-change="pageChange"
            :current-page="formInline.pageNum"
            :page-sizes="[20, 30, 40, 50, 100]"
            :page-size="formInline.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            class="mt10"
        ></el-pagination>
    </Page>
</template>

<script>
import { queryFeedBackPage, updateFeedBackStatus } from '@/api/app/manage'
import timepicker from '@/views/components/TimePicker/index4'

export default {
    name: 'GovernLogOperation',
    components: {
        timepicker
    },
    data() {
        return {
            interval: 3,
            total: 0,
            formInline: {
                pageNum: 1,
                pageSize: 20,
                searchValue: ''
            },
            loading: false,
            tableData: []
            //tabHeight: 'calc(100vh - 255px)',
        }
    },
    computed: {
        vth() {
            return window.sessionStorage.getItem('appheight') - 101
        }
    },
    mounted() {
        this.queryData()
    },
    methods: {
        solve(row) {
            console.log(row)
            this.$confirm('该问题是否已解决？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                updateFeedBackStatus({
                    id: row.id,
                    status: 0
                }).then(res => {
                    console.log(res)
                    if (res.code == 'A0000') {
                        this.$message({
                            type: 'success',
                            message: '操作成功!'
                        })
                        this.queryData()
                    } else {
                        this.$message({
                            type: 'error',
                            message: '操作失败!'
                        })
                    }
                })
            })
        },
        queryData() {
            this.loading = true
            this.formInline.searchBeginTime = this.$refs.timepk.timeValue[0]
            this.formInline.searchEndTime = this.$refs.timepk.timeValue[1]
            queryFeedBackPage(this.formInline).then(res => {
                console.log(res)
                if (res.code == 'A0000') {
                    this.total = res.data.total
                    this.tableData = res.data.records
                }
                this.loading = false
            })
        },
        onSubmit() {
            console.log('submit!')
        },
        pageChange(e) {
            console.log('pageChange!')
            console.log(e)
            this.formInline.pageNum = e
            this.queryData()
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`)
            this.formInline.pageNum = 1
            this.formInline.pageSize = val
            this.queryData()
        }
    }
}
</script>
<style lang="scss" scoped>
::v-deep.el-table--enable-row-hover .el-table__body tr:hover > td {
    color: #000 !important;
    background-color: $hoverf !important;
}
</style>
