<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="notify_name" label="关联专项检查名称" align="left" />
            <el-table-column prop="enforce_org_name" show-overflow-tooltip label="设置机构" />
            <el-table-column prop="risk_num" show-overflow-tooltip label="火灾高危单位数" />
            <el-table-column prop="focus_num" show-overflow-tooltip label="消防安全重点单位数" />
            <el-table-column prop="police_num" show-overflow-tooltip label="一般单位数" />
            <el-table-column prop="other_num" show-overflow-tooltip label="其他单位数" />
            <el-table-column prop="create_time" show-overflow-tooltip label="持续时间">
                <template slot-scope="scope">{{ dateFormat('YYYY-mm-dd', new Date(scope.row.start_time)) }}~{{ dateFormat('YYYY-mm-dd', new Date(scope.row.end_time)) }}</template>
            </el-table-column>
            <el-table-column prop="executor_names" show-overflow-tooltip label="状态" align="center" >
                <template slot-scope="scope">{{buildStatus(new Date(scope.row.start_time), new Date(scope.row.end_time))}}</template>
            </el-table-column>
            <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="action" label="操作" align="center" width="100">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="handleDetail(scope.row.task_id)">详情</el-button>
                    <el-button type="text" size="small" @click="handleRecord(scope.row.task_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 { jobMixin } from '@/mixin/job'
import { resourceMixin } from '@/mixin/resource'
import { formatDate, dateFormat } from '@/utils/tool'
import {queryRuleList} from "@/api/random";

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,
        dateFormat,
        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('task_type') < 0) {
                if (query.length > 0) {
                    query += ';';
                }
                query += 'task_type==1';
            }
            this.query.query = query;

            queryRuleList(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)
                })
                this.tableData = list
              }
              this.loading = false
            })
        },
        handleDetail(id) {
            this.$router.push({
                path: '/random/special/rule/detail',
                query: {
                    id
                }
            })
        },
        handleRecord(id) {
            this.$router.push({
                path: '/random/special/check/record',
                query: {
                    id
                }
            })
        },
         buildStatus(beginTime, endTime) {
             if (beginTime.getTime() > new Date().getTime()) {
                 return '未开始'
             } else if (beginTime.getTime() <= new Date().getTime() && endTime.getTime() >= new Date().getTime()) {
                 return '进行中'
             } else {
                 return '已结束'
             }
         }
    }
}
</script>
