<template>
    <div class="custom-table">
        <el-table
            :data="tableData"
            border
            style="width: 100%"
            v-loading="loading">
            <el-table-column type="index" align="center" label="序号" width="80" />
            <el-table-column prop="create_time" show-overflow-tooltip label="创建时间" align="center">
                <template slot-scope="scope">{{ formatDate(scope.row.create_time, true) }}</template>
            </el-table-column>
            <el-table-column prop="enforce_obj_name" show-overflow-tooltip label="被检查单位">
                <template slot-scope="scope">{{scope.row.enforce_obj_name}}</template>
            </el-table-column>
            <el-table-column prop="enforce_obj_address" show-overflow-tooltip label="单位地址">
                <template slot-scope="scope">{{scope.row.enforce_obj && scope.row.enforce_obj.enforce_obj_address}}</template>
            </el-table-column>
            <el-table-column prop="enforce_org_name" show-overflow-tooltip label="执法机构" align="center">
                <template slot-scope="scope">{{scope.row.enforce_org_name}}</template>
            </el-table-column>
            <el-table-column prop="executor_names" show-overflow-tooltip label="检查人员" align="center" />
            <el-table-column prop="last_enforce_date" show-overflow-tooltip label="检查期限" align="center" />
            <el-table-column prop="start_time" label="检查时间" show-overflow-tooltip align="center" />
            <el-table-column prop="name" label="任务状态" align="center">
                <template slot-scope="scope">{{ parseJobStatus(scope.row.job_status) }}</template>
            </el-table-column>
            <el-table-column prop="result" label="检查结果" show-overflow-tooltip align="center"></el-table-column>
            <!-- <el-table-column prop="name" label="检查结果" show-overflow-tooltip align="center">
                <template slot-scope="scope">{{ parseStatus(scope.row.enforce_result) }}</template>
            </el-table-column> -->
            <el-table-column prop="action" label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="handleDetail(scope.row.id)">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="custom-pagination">
            <div class="info">
                <span>共 {{ total }} 条记录</span>
                <span>第 {{ query.page }} / {{ pageTotal }} 页</span>
            </div>
            <el-pagination
                background
                class="custom-page"
                layout="prev, pager, next, sizes"
                :page-sizes="[10, 20, 50, 100]"
                :current-page="query.page"
                :page-size="query.size"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { getJobs } from '@/api/job'
import { jobMixin } from '@/mixin/job'
import { resourceMixin } from '@/mixin/resource'
import { formatDate } from '@/utils/tool'

export default {
    computed: {
        pageTotal() {
            const page = Math.ceil(this.total / this.query.size)
            return page > 0 ? page : 1
        }
    },
    mixins: [jobMixin, resourceMixin],
    data () {
        return {
            loading: false,
            formData: {
                job_status: '',
                org: '',
                account: '',
                checkDate: '',
                company: '',
                limit: '',
                createDate: '',
                result: '',
            },
            query: {
                page: 1,
                size: 10,
                sort: "create_time desc"
            },
            total: 0,
            tableData: []
        }
    },
    mounted () {
        this.handleQuery()
    },
    methods: {
        formatDate,
        resetForm(data) {
            this.query.query = data
            if (data && data.length > 0) {
                this.query.page = 1;
            }
            this.handleQuery()
        },
        handleSizeChange(val) {
            this.query.size = val
            this.handleQuery()
        },
        handleCurrentChange(val) {
            this.query.page = val
            this.handleQuery()
        },
        handleQuery() {
            this.loading = true
            let query = this.query.query || '';
            if (query.indexOf('job_type') < 0) {
                if (query.length > 0) {
                    query += ';';
                }
                query += 'job_type==NORMAL';
            }
            this.query.query = query;
            getJobs(this.query).then(res => {
              if (res) {
                this.total = res.total || 0
                const list = res.data || []
                list.map(item => {
                  item.start_time = formatDate(item.start_time, true);
                  item.result = this.parseJobResult(item);
                })
                this.tableData = list
              }
              this.loading = false
            })
        },
        handleDetail(id) {
            this.$router.push({
                path: '/monitor/random/detail',
                query: {
                    id
                }
            })
        }
    }
}
</script>